"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { RevealText } from "../ui/AnimatedText";
import type { Locale } from "@/lib/i18n";

interface CommandCenterProps {
  locale: Locale;
}

export function CommandCenter({ locale }: CommandCenterProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });
  const isRTL = locale === "ar";

  const content = {
    en: {
      title: "WakeL",
      titleHighlight: "Command Center",
      subtitle: "Monitor and control your entire AI workforce from one beautiful interface",
      live: "LIVE",
      stats: {
        active: "Active Agents",
        tasks: "Tasks Today",
        success: "Success Rate",
        cost: "Cost Saved"
      },
      activity: "REAL-TIME ACTIVITY",
      activities: [
        { agent: "Sales Agent #3", action: "Closed deal with Acme Corp", time: "2m ago" },
        { agent: "Support Agent #7", action: "Resolved 12 tickets", time: "5m ago" },
        { agent: "Marketing Agent #2", action: "Generated 8 content pieces", time: "8m ago" },
        { agent: "Finance Agent #1", action: "Processed 47 invoices", time: "12m ago" }
      ]
    },
    ar: {
      title: "مركز قيادة",
      titleHighlight: "WakeL",
      subtitle: "راقب وأدر قوتك العاملة AI بالكامل من واجهة واحدة جميلة",
      live: "مباشر",
      stats: {
        active: "الوكلاء النشطون",
        tasks: "المهام اليوم",
        success: "معدل النجاح",
        cost: "التكلفة الموفر"
      },
      activity: "النشاط المباشر",
      activities: [
        { agent: "وكيل المبيعات #3", action: "أغلق صفقة مع Acme Corp", time: "منذ 2 د" },
        { agent: "وكيل الدعم #7", action: "حل 12 تذكرة", time: "منذ 5 د" },
        { agent: "وكيل التسويق #2", action: "أنشأ 8 قطع محتوى", time: "منذ 8 د" },
        { agent: "وكيل المالية #1", action: "عالج 47 فاتورة", time: "منذ 12 د" }
      ]
    }
  };

  const t = content[locale];

  return (
    <section id="command-center" ref={ref} className="py-32 relative overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-graphite via-obsidian to-void-black" />

      {/* Grid Pattern */}
      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px]" />

      <div className="container-custom relative z-10">
        <RevealText className="text-center mb-16">
          <h2 className="font-space-grotesk font-bold mb-6">
            <span className="text-muted-white">{t.title}</span>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-electric-cyan to-soft-emerald">
              {t.titleHighlight}
            </span>
          </h2>
          <p className="text-xl text-muted-white max-w-2xl mx-auto">
            {t.subtitle}
          </p>
        </RevealText>

        {/* Mock Dashboard */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95, rotateX: 10 }}
          animate={isInView ? { opacity: 1, scale: 1, rotateX: 0 } : { opacity: 0, scale: 0.95, rotateX: 10 }}
          transition={{ duration: 1, delay: 0.3 }}
          className="relative max-w-6xl mx-auto"
          style={{ perspective: "1000px" }}
        >
          {/* Dashboard Frame */}
          <div className="bg-obsidian/80 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
            {/* Header */}
            <div className="bg-obsidian/50 border-b border-white/5 px-6 py-4 flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="w-3 h-3 rounded-full bg-red-500" />
                <div className="w-3 h-3 rounded-full bg-yellow-500" />
                <div className="w-3 h-3 rounded-full bg-green-500" />
                <span className="font-jetbrains-mono text-xs text-muted-white ml-4">
                  command.wakel.ai
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="px-3 py-1 rounded-full bg-electric-cyan/10 border border-electric-cyan/30">
                  <span className="font-jetbrains-mono text-xs text-electric-cyan">{t.live}</span>
                </div>
              </div>
            </div>

            {/* Dashboard Content */}
            <div className="p-6">
              {/* Stats Grid */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                {[
                  { label: t.stats.active, value: "45", change: "+3" },
                  { label: t.stats.tasks, value: "1,247", change: "+18%" },
                  { label: t.stats.success, value: "99.8%", change: "+0.2%" },
                  { label: t.stats.cost, value: "$12.4K", change: "+$2.1K" }
                ].map((stat, i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, y: 20 }}
                    animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                    transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
                    className="bg-void-black/50 border border-white/5 rounded-xl p-4"
                  >
                    <div className="text-xs text-muted-white font-jetbrains-mono mb-2">{stat.label}</div>
                    <div className="text-2xl font-space-grotesk font-bold text-warm-white mb-1">{stat.value}</div>
                    <div className="text-xs text-soft-emerald">{stat.change}</div>
                  </motion.div>
                ))}
              </div>

              {/* Activity Feed */}
              <div className="bg-void-black/50 border border-white/5 rounded-xl p-4">
                <div className="text-xs font-jetbrains-mono text-muted-white mb-4">{t.activity}</div>
                <div className="space-y-3">
                  {t.activities.map((activity, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
                      animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: isRTL ? 20 : -20 }}
                      transition={{ duration: 0.5, delay: 0.7 + i * 0.1 }}
                      className="flex items-center gap-4 p-3 rounded-lg bg-obsidian/30 border border-white/5"
                    >
                      <div className="w-2 h-2 rounded-full bg-soft-emerald animate-pulse" />
                      <div className="flex-1">
                        <div className="text-sm text-warm-white">{activity.action}</div>
                        <div className="text-xs text-muted-white font-jetbrains-mono">{activity.agent}</div>
                      </div>
                      <div className="text-xs text-muted-white">{activity.time}</div>
                    </motion.div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Reflection */}
          <div className="absolute -bottom-20 -right-20 w-64 h-64 bg-electric-cyan/10 rounded-full blur-3xl" />
        </motion.div>
      </div>
    </section>
  );
}