"use client";

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

interface BuildYourTeamProps {
  locale: Locale;
}

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

  const content = {
    en: {
      title: "Build Your",
      titleHighlight: "Dream Team",
      subtitle: "Select the AI agents you need and deploy your autonomous workforce in minutes. Customize your team based on your business needs.",
      features: [
        { icon: "🎯", title: "Choose Department", desc: "Sales, Support, Marketing, Operations, Finance, HR" },
        { icon: "⚡", title: "Select Agent Type", desc: "Different specializations and expertise levels" },
        { icon: "💰", title: "See Real-time ROI", desc: "Compare costs vs. human employees" },
        { icon: "🚀", title: "Deploy Instantly", desc: "Your AI team is ready in minutes" }
      ]
    },
    ar: {
      title: "ابن فريق",
      titleHighlight: "أحلامك",
      subtitle: "اختر وكلاء AI الذين تحتاجهم وانشر قوتك العاملة الذاتية في دقائق. خصص فريقك بناءً على احتياجات عملك.",
      features: [
        { icon: "🎯", title: "اختر القسم", desc: "المبيعات، الدعم، التسويق، العمليات، المالية، HR" },
        { icon: "⚡", title: "اختر نوع الوكيل", desc: "تخصصات ومستويات خبرة مختلفة" },
        { icon: "💰", title: "رؤية العائد في الوقت الفعلي", desc: "قارن التكاليف مقابل الموظفين البشر" },
        { icon: "🚀", title: "نشر فوري", desc: "فريق AI جاهز في دقائق" }
      ]
    }
  };

  const t = content[locale];

  const handleDeploy = (configuration: Array<{ id: string; type: string; name: string; department: string; cost: number; tasks: number; efficiency: number }>) => {
    console.log("Deploying configuration:", configuration);
    // Redirect to dashboard with pre-selected configuration
    if (typeof window !== "undefined") {
      window.location.href = "/dashboard?setup=true";
    }
  };

  return (
    <section ref={ref} className="py-24 relative overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      {/* Background Effects */}
      <div className="absolute inset-0 bg-gradient-to-b from-void-black via-graphite to-void-black" />
      <div className="absolute top-1/4 right-1/4 w-[500px] h-[500px] bg-electric-cyan/10 rounded-full blur-3xl" />
      <div className="absolute bottom-1/4 left-1/4 w-[500px] h-[500px] bg-soft-emerald/10 rounded-full blur-3xl" />

      {/* Content */}
      <div className="container-custom relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <h2 className="font-space-grotesk font-bold text-4xl md:text-5xl lg:text-6xl mb-4">
            <span className="text-warm-white block">{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-lg text-muted-white max-w-2xl mx-auto">
            {t.subtitle}
          </p>
        </motion.div>

        {/* Features Grid */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="grid md:grid-cols-4 gap-6 mb-12"
        >
          {t.features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
              className="bg-obsidian/50 border border-white/10 rounded-xl p-4 text-center"
            >
              <div className="text-3xl mb-2">{feature.icon}</div>
              <h3 className="font-space-grotesk font-semibold text-warm-white text-sm mb-1">
                {feature.title}
              </h3>
              <p className="text-xs text-muted-white">{feature.desc}</p>
            </motion.div>
          ))}
        </motion.div>

        {/* Agent Builder */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }}
          transition={{ duration: 0.8, delay: 0.5 }}
        >
          <AgentBuilder locale={locale} onDeploy={handleDeploy} />
        </motion.div>
      </div>
    </section>
  );
}