"use client";

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

interface DepartmentsProps {
  locale: Locale;
}

export function Departments({ locale }: DepartmentsProps) {
  const [expandedDept, setExpandedDept] = useState<string | null>(null);
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });
  const isRTL = locale === "ar";

  const content = {
    en: {
      title: "Meet Your",
      titleHighlight: "AI Workforce",
      subtitle: "Specialized AI agents for every department, working together seamlessly",
      stats: {
        deployed: "45+",
        deployedLabel: "AI Agents Deployed",
        departments: "6",
        departmentsLabel: "Departments Covered",
        available: "24/7",
        availableLabel: "Always Available"
      },
      departments: [
        {
          name: "Sales",
          icon: "🎯",
          description: "AI agents that qualify leads, nurture prospects, and close deals 24/7",
          agents: "8",
          capabilities: ["Lead Qualification", "Email Sequences", "Demo Scheduling", "Deal Closing"]
        },
        {
          name: "Customer Support",
          icon: "💬",
          description: "Instant responses, ticket resolution, and customer satisfaction at scale",
          agents: "12",
          capabilities: ["24/7 Chat", "Ticket Resolution", "Knowledge Base", "Sentiment Analysis"]
        },
        {
          name: "Marketing",
          icon: "📢",
          description: "Content creation, campaign management, and performance optimization",
          agents: "6",
          capabilities: ["Content Generation", "SEO Optimization", "Ad Management", "Analytics"]
        },
        {
          name: "Finance",
          icon: "💹",
          description: "Bookkeeping, invoicing, financial analysis, and reporting automation",
          agents: "4",
          capabilities: ["Invoicing", "Expense Tracking", "Financial Reports", "Budget Management"]
        },
        {
          name: "HR",
          icon: "👥",
          description: "Recruitment, onboarding, employee management, and culture maintenance",
          agents: "5",
          capabilities: ["Resume Screening", "Interview Scheduling", "Onboarding", "Performance Reviews"]
        },
        {
          name: "Operations",
          icon: "⚙️",
          description: "Workflow automation, process optimization, and resource allocation",
          agents: "10",
          capabilities: ["Process Automation", "Resource Planning", "Quality Control", "Reporting"]
        }
      ]
    },
    ar: {
      title: "تعرف على",
      titleHighlight: "قوتك العاملة AI",
      subtitle: "وكلاء AI متخصصون لكل قسم، يعملون معاً بسلاسة",
      stats: {
        deployed: "45+",
        deployedLabel: "وكيل AI مُنشر",
        departments: "6",
        departmentsLabel: "أقسام مغطاة",
        available: "24/7",
        availableLabel: "متاح دائماً"
      },
      departments: [
        {
          name: "المبيعات",
          icon: "🎯",
          description: "وكلاء AI يؤهلون العملاء المحتملين، يغذونهم، ويغلقون الصفقات 24/7",
          agents: "8",
          capabilities: ["تأهيل العملاء", "سلاسل البريد", "جدولة العروض التوضيحية", "إغلاق الصفقات"]
        },
        {
          name: "دعم العملاء",
          icon: "💬",
          description: "ردود فورية، حل التذاكر، ورضا العملاء على نطاق واسع",
          agents: "12",
          capabilities: ["دردشة 24/7", "حل التذاكر", "قاعدة المعرفة", "تحليل المشاعر"]
        },
        {
          name: "التسويق",
          icon: "📢",
          description: "إنشاء المحتوى، إدارة الحملات، وتحسين الأداء",
          agents: "6",
          capabilities: ["إنشاء المحتوى", "تحسين SEO", "إدارة الإعلانات", "التحليلات"]
        },
        {
          name: "المالية",
          icon: "💹",
          description: "محاسبة، فوترة، تحليل مالي، وأتمتة التقارير",
          agents: "4",
          capabilities: ["الفوترة", "تتبع النفقات", "التقارير المالية", "إدارة الميزانية"]
        },
        {
          name: "الموارد البشرية",
          icon: "👥",
          description: "توظيف، إدماج، إدارة الموظفين، والحفاظ على الثقافة",
          agents: "5",
          capabilities: ["فرز السير الذاتية", "جدولة المقابلات", "الإدماج", "تقييمات الأداء"]
        },
        {
          name: "العمليات",
          icon: "⚙️",
          description: "أتمتة سير العمل، تحسين العمليات، وتخصيص الموارد",
          agents: "10",
          capabilities: ["أتمتة العمليات", "تخطيط الموارد", "التحكم بالجودة", "التقارير"]
        }
      ]
    }
  };

  const t = content[locale];
  const expandText = locale === "en" ? "EXPAND" : "توسيع";
  const collapseText = locale === "en" ? "COLLAPSE" : "طي";

  return (
    <section id="departments" ref={ref} className="py-32 relative" dir={isRTL ? "rtl" : "ltr"}>
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-b from-graphite to-void-black" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-electric-cyan/5 rounded-full blur-3xl" />

      <div className="container-custom relative z-10">
        <RevealText className="text-center mb-20">
          <h2 className="font-space-grotesk font-bold mb-6">
            <span className="text-muted-white">{t.title}</span>
            <span className="block 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>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {t.departments.map((dept, i) => (
            <motion.div
              key={dept.name}
              initial={{ opacity: 0, y: 50 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              onClick={() => setExpandedDept(expandedDept === dept.name ? null : dept.name)}
              className="cursor-pointer"
            >
              <GlassCard
                hover={false}
                glow={expandedDept === dept.name}
                className={`transition-all duration-500 ${
                  expandedDept === dept.name ? 'ring-2 ring-electric-cyan/50' : ''
                }`}
              >
                {/* Icon and Name */}
                <div className="flex items-start justify-between mb-6">
                  <div className="text-5xl">{dept.icon}</div>
                  <div className={`px-3 py-1 rounded-full bg-obsidian border ${
                    expandedDept === dept.name ? 'border-electric-cyan' : 'border-white/10'
                  }`}>
                    <span className={`font-jetbrains-mono text-xs ${expandedDept === dept.name ? 'text-electric-cyan' : 'text-muted-white'}`}>
                      {dept.agents} {locale === "en" ? "agents" : "وكلاء"}
                    </span>
                  </div>
                </div>

                <h3 className="font-space-grotesk text-2xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-electric-cyan to-soft-emerald">
                  {dept.name}
                </h3>

                <p className="text-muted-white text-sm leading-relaxed mb-6">
                  {dept.description}
                </p>

                {/* Expandable Capabilities */}
                <div className={`overflow-hidden transition-all duration-500 ${
                  expandedDept === dept.name ? 'max-h-96' : 'max-h-0'
                }`}>
                  <div className="pt-4 border-t border-white/10">
                    <h4 className="text-xs font-jetbrains-mono text-electric-cyan mb-3 tracking-wider">
                      {locale === "en" ? "CAPABILITIES" : "القدرات"}
                    </h4>
                    <ul className="space-y-2">
                      {dept.capabilities.map((capability, j) => (
                        <motion.li
                          key={j}
                          initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ delay: j * 0.1 }}
                          className="flex items-center gap-2 text-sm text-warm-white"
                        >
                          <div className="w-1.5 h-1.5 rounded-full bg-gradient-to-r from-electric-cyan to-soft-emerald" />
                          {capability}
                        </motion.li>
                      ))}
                    </ul>
                  </div>
                </div>

                {/* Expand indicator */}
                <div className={`mt-4 flex items-center gap-2 text-xs font-jetbrains-mono ${
                  expandedDept === dept.name ? 'text-electric-cyan' : 'text-muted-white'
                }`}>
                  <span>{expandedDept === dept.name ? '▲' : '▼'}</span>
                  <span>{expandedDept === dept.name ? collapseText : expandText}</span>
                </div>
              </GlassCard>
            </motion.div>
          ))}
        </div>

        {/* Stats */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="flex flex-wrap justify-center gap-12 mt-20"
        >
          <div className="text-center">
            <div className="font-space-grotesk text-4xl font-bold text-electric-cyan mb-2">
              {t.stats.deployed}
            </div>
            <div className="text-sm text-muted-white">{t.stats.deployedLabel}</div>
          </div>
          <div className="text-center">
            <div className="font-space-grotesk text-4xl font-bold text-electric-cyan mb-2">
              {t.stats.departments}
            </div>
            <div className="text-sm text-muted-white">{t.stats.departmentsLabel}</div>
          </div>
          <div className="text-center">
            <div className="font-space-grotesk text-4xl font-bold text-electric-cyan mb-2">
              {t.stats.available}
            </div>
            <div className="text-sm text-muted-white">{t.stats.availableLabel}</div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}