"use client";

import { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { DollarSign, TrendingUp, Users, Zap, BarChart3, Calculator, Info } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface ROICalculatorProps {
  locale?: Locale;
  className?: string;
}

interface CompanyProfile {
  employees: number;
  avgSalary: number;
  departments: string[];
  currentCost: number;
}

const departmentProfiles = {
  sales: {
    name: "Sales",
    nameAr: "المبيعات",
    avgSalary: 6000,
    efficiency: 85,
    replacement: 0.3
  },
  support: {
    name: "Support",
    nameAr: "الدعم",
    avgSalary: 4000,
    efficiency: 95,
    replacement: 0.4
  },
  marketing: {
    name: "Marketing",
    nameAr: "التسويق",
    avgSalary: 5500,
    efficiency: 80,
    replacement: 0.35
  },
  finance: {
    name: "Finance",
    nameAr: "المالية",
    avgSalary: 7000,
    efficiency: 90,
    replacement: 0.25
  },
  operations: {
    name: "Operations",
    nameAr: "العمليات",
    avgSalary: 5000,
    efficiency: 88,
    replacement: 0.3
  },
  hr: {
    name: "HR",
    nameAr: "HR",
    avgSalary: 4500,
    efficiency: 82,
    replacement: 0.3
  }
};

export function ROICalculator({ locale = "en", className = "" }: ROICalculatorProps) {
  const [companyProfile, setCompanyProfile] = useState<CompanyProfile>({
    employees: 50,
    avgSalary: 5000,
    departments: ["sales", "support", "marketing"],
    currentCost: 250000
  });
  const [showBreakdown, setShowBreakdown] = useState(false);
  const isRTL = locale === "ar";

  const aiReplacements = useMemo(() => {
    return companyProfile.departments.map(dept => {
      const profile = departmentProfiles[dept as keyof typeof departmentProfiles];
      const humanEmployees = Math.round(companyProfile.employees * profile.replacement);
      const humanCost = humanEmployees * profile.avgSalary * 12; // Annual cost
      const aiAgents = Math.ceil(humanEmployees / 10); // 1 AI agent = 10 human employees
      const aiCost = aiAgents * 600 * 12; // Annual cost per AI agent (SAR 600/mo)
      const savings = humanCost - aiCost;

      return {
        department: locale === "ar" ? profile.nameAr : profile.name,
        departmentAr: profile.nameAr,
        humanEmployees,
        humanCost,
        aiAgents,
        aiCost,
        savings,
        efficiency: profile.efficiency
      };
    });
  }, [companyProfile, locale]);

  const totalSavings = useMemo(() => {
    return aiReplacements.reduce((sum, item) => sum + item.savings, 0);
  }, [aiReplacements]);

  const totalHumanCost = useMemo(() => {
    return aiReplacements.reduce((sum, item) => sum + item.humanCost, 0);
  }, [aiReplacements]);

  const totalAICost = useMemo(() => {
    return aiReplacements.reduce((sum, item) => sum + item.aiCost, 0);
  }, [aiReplacements]);

  const totalAgents = useMemo(() => {
    return aiReplacements.reduce((sum, item) => sum + item.aiAgents, 0);
  }, [aiReplacements]);

  const avgEfficiency = useMemo(() => {
    const total = aiReplacements.reduce((sum, item) => sum + item.efficiency, 0);
    return Math.round(total / aiReplacements.length);
  }, [aiReplacements]);

  const formatSAR = (amount: number) => {
    return new Intl.NumberFormat(locale === "ar" ? "ar-SA" : "en-US", {
      style: "currency",
      currency: "SAR",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  };

  const handleDepartmentToggle = (dept: string) => {
    setCompanyProfile(prev => ({
      ...prev,
      departments: prev.departments.includes(dept)
        ? prev.departments.filter(d => d !== dept)
        : [...prev.departments, dept]
    }));
  };

  const handleEmployeeChange = (value: number) => {
    setCompanyProfile(prev => ({
      ...prev,
      employees: value,
      currentCost: value * prev.avgSalary * 12
    }));
  };

  const handleSalaryChange = (value: number) => {
    setCompanyProfile(prev => ({
      ...prev,
      avgSalary: value,
      currentCost: prev.employees * value * 12
    }));
  };

  return (
    <div className={`bg-obsidian/80 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden ${className}`} dir={isRTL ? "rtl" : "ltr"}>
      {/* Header */}
      <div className="bg-gradient-to-r from-electric-cyan/20 to-soft-emerald/20 border-b border-white/10 px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-gradient-to-r from-electric-cyan to-soft-emerald flex items-center justify-center">
              <Calculator className="w-5 h-5 text-void-black" />
            </div>
            <div>
              <h3 className="font-space-grotesk font-bold text-warm-white">
                {locale === "en" ? "AI ROI Calculator" : "حاسبة العائد AI"}
              </h3>
              <p className="text-xs text-muted-white">
                {locale === "en" ? "See your potential savings" : "شاهد توفيرك المحتمل"}
              </p>
            </div>
          </div>
          <button
            onClick={() => setShowBreakdown(!showBreakdown)}
            className="text-xs text-electric-cyan hover:text-soft-emerald transition-colors flex items-center gap-1"
          >
            <Info className="w-4 h-4" />
            {showBreakdown ? (locale === "en" ? "Hide Details" : "إخفاء التفاصيل") : (locale === "en" ? "Show Details" : "عرض التفاصيل")}
          </button>
        </div>
      </div>

      <div className="p-6 space-y-6">
        {/* Input Section */}
        <div className="grid md:grid-cols-2 gap-4">
          {/* Employee Count */}
          <div className="bg-obsidian/50 border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-3">
              <label className="text-sm font-semibold text-warm-white flex items-center gap-2">
                <Users className="w-4 h-4 text-electric-cyan" />
                {locale === "en" ? "Total Employees" : "إجمالي الموظفين"}
              </label>
              <span className="font-jetbrains-mono text-electric-cyan">{companyProfile.employees}</span>
            </div>
            <input
              type="range"
              min="5"
              max="500"
              value={companyProfile.employees}
              onChange={(e) => handleEmployeeChange(parseInt(e.target.value))}
              className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer slider-electric"
            />
            <div className="flex justify-between text-[10px] text-muted-white mt-1">
              <span>5</span>
              <span>500+</span>
            </div>
          </div>

          {/* Average Salary */}
          <div className="bg-obsidian/50 border border-white/10 rounded-xl p-4">
            <div className="flex items-center justify-between mb-3">
              <label className="text-sm font-semibold text-warm-white flex items-center gap-2">
                <DollarSign className="w-4 h-4 text-soft-emerald" />
                {locale === "en" ? "Avg Salary (SAR/mo)" : "الراتب المتوسط (ريال/شهر)"}
              </label>
              <span className="font-jetbrains-mono text-soft-emerald">{formatSAR(companyProfile.avgSalary)}</span>
            </div>
            <input
              type="range"
              min="3000"
              max="20000"
              step="500"
              value={companyProfile.avgSalary}
              onChange={(e) => handleSalaryChange(parseInt(e.target.value))}
              className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer slider-electric"
            />
            <div className="flex justify-between text-[10px] text-muted-white mt-1">
              <span>3K</span>
              <span>20K</span>
            </div>
          </div>
        </div>

        {/* Department Selection */}
        <div className="bg-obsidian/50 border border-white/10 rounded-xl p-4">
          <label className="text-sm font-semibold text-warm-white mb-3 block flex items-center gap-2">
            <BarChart3 className="w-4 h-4 text-electric-cyan" />
            {locale === "en" ? "Departments to Automate" : "الأقسام لأتمتتها"}
          </label>
          <div className="flex flex-wrap gap-2">
            {Object.entries(departmentProfiles).map(([key, profile]) => (
              <button
                key={key}
                onClick={() => handleDepartmentToggle(key)}
                className={`px-3 py-2 rounded-lg border transition-all ${
                  companyProfile.departments.includes(key)
                    ? "border-electric-cyan/50 bg-electric-cyan/10 text-warm-white"
                    : "border-white/10 bg-obsidian/30 text-muted-white hover:border-white/20"
                }`}
              >
                <span className="text-sm">{locale === "ar" ? profile.nameAr : profile.name}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Results Summary */}
        <div className="bg-gradient-to-br from-electric-cyan/10 to-soft-emerald/10 border border-electric-cyan/20 rounded-xl p-6">
          <div className="grid md:grid-cols-2 gap-6">
            {/* Savings */}
            <div className="text-center">
              <div className="text-sm text-muted-white mb-2">
                {locale === "en" ? "Annual Savings" : "التوفير السنوي"}
              </div>
              <motion.div
                key={totalSavings}
                initial={{ scale: 1.2 }}
                animate={{ scale: 1 }}
                className="text-3xl font-space-grotesk font-bold text-soft-emerald"
              >
                {formatSAR(totalSavings)}
              </motion.div>
              <div className="text-xs text-muted-white mt-1">
                {locale === "en" ? "per year with AI" : "سنوياً مع AI"}
              </div>
            </div>

            {/* Investment */}
            <div className="text-center">
              <div className="text-sm text-muted-white mb-2">
                {locale === "en" ? "Annual Investment" : "الاستثمار السنوي"}
              </div>
              <motion.div
                key={totalAICost}
                initial={{ scale: 1.2 }}
                animate={{ scale: 1 }}
                className="text-3xl font-space-grotesk font-bold text-electric-cyan"
              >
                {formatSAR(totalAICost)}
              </motion.div>
              <div className="text-xs text-muted-white mt-1">
                {totalAgents} {locale === "en" ? "AI agents" : "وكيل AI"}
              </div>
            </div>
          </div>

          {/* ROI Percentage */}
          <div className="mt-6 pt-6 border-t border-white/10 text-center">
            <div className="flex items-center justify-center gap-3">
              <TrendingUp className="w-6 h-6 text-soft-emerald" />
              <div>
                <div className="text-sm text-muted-white">
                  {locale === "en" ? "Return on Investment" : "العائد على الاستثمار"}
                </div>
                <div className="text-2xl font-space-grotesk font-bold text-warm-white">
                  {Math.round((totalSavings / totalAICost) * 100)}% ROI
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Detailed Breakdown */}
        <AnimatePresence>
          {showBreakdown && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="space-y-3"
            >
              <h4 className="text-sm font-semibold text-warm-white">
                {locale === "en" ? "Department Breakdown" : "تفاصيل الأقسام"}
              </h4>
              {aiReplacements.map((item, index) => (
                <div
                  key={index}
                  className="bg-obsidian/50 border border-white/10 rounded-lg p-4"
                >
                  <div className="flex items-center justify-between mb-3">
                    <span className="font-space-grotesk font-medium text-warm-white">
                      {item.department}
                    </span>
                    <span className="font-jetbrains-mono text-soft-emerald">
                      {formatSAR(item.savings)}
                    </span>
                  </div>
                  <div className="grid grid-cols-3 gap-4 text-xs">
                    <div>
                      <div className="text-muted-white mb-1">
                        {locale === "en" ? "Current" : "الحالي"}
                      </div>
                      <div className="font-jetbrains-mono text-warm-white">
                        {item.humanEmployees} {locale === "en" ? "staff" : "موظف"}
                      </div>
                      <div className="text-muted-white/60">{formatSAR(item.humanCost)}/yr</div>
                    </div>
                    <div>
                      <div className="text-muted-white mb-1">
                        {locale === "en" ? "With AI" : "مع AI"}
                      </div>
                      <div className="font-jetbrains-mono text-electric-cyan">
                        {item.aiAgents} {locale === "en" ? "agents" : "وكيل"}
                      </div>
                      <div className="text-muted-white/60">{formatSAR(item.aiCost)}/yr</div>
                    </div>
                    <div>
                      <div className="text-muted-white mb-1">
                        {locale === "en" ? "Efficiency" : "الكفاءة"}
                      </div>
                      <div className="font-jetbrains-mono text-soft-emerald">
                        {item.efficiency}%
                      </div>
                      <div className="text-muted-white/60">
                        {locale === "en" ? "accuracy" : "دقة"}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </motion.div>
          )}
        </AnimatePresence>

        {/* CTA */}
        <button className="w-full bg-gradient-to-r from-electric-cyan to-soft-emerald text-void-black font-semibold py-4 px-6 rounded-xl hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
          <Zap className="w-5 h-5" />
          <span>
            {locale === "en" ? "Start Saving Today" : "ابدأ التوفير اليوم"}
          </span>
          <span className="font-jetbrains-mono text-sm opacity-70">
            ({formatSAR(totalSavings)}/yr)
          </span>
        </button>
      </div>
    </div>
  );
}