"use client";

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

interface InteractiveToolsProps {
  locale: Locale;
}

export function InteractiveTools({ locale }: InteractiveToolsProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });
  const isRTL = locale === "ar";

  const content = {
    en: {
      title: "Experience AI Agents",
      titleHighlight: "In Action",
      subtitle: "Watch AI agents transform business operations in real-time with live demos and interactive visualizations.",
      tools: {
        department: {
          title: "Live Department Demos",
          description: "Watch AI agents handle real customer conversations across all departments"
        },
        workflow: {
          title: "Workflow Visualization",
          description: "See how multiple AI agents collaborate seamlessly on complex tasks"
        },
        activity: {
          title: "Live Agent Activity",
          description: "Real-time feed of AI agents working across your business"
        }
      }
    },
    ar: {
      title: "جرب وكلاء AI",
      titleHighlight: "في العمل",
      subtitle: "شاهد وكلاء AI يحولون العمليات التجارية في الوقت الفعلي مع عروض توضيحية حية وتصورات تفاعلية.",
      tools: {
        department: {
          title: "عروض الأقسام المباشرة",
          description: "شاهد وكلاء AI يتعاملون مع محادثات العملاء الحقيقية عبر جميع الأقسام"
        },
        workflow: {
          title: "تصور سير العمل",
          description: "شاهد كيف يتعاون وكلاء AI المتعددون بسلاسة في المهام المعقدة"
        },
        activity: {
          title: "نشاط الوكيل المباشر",
          description: "تغذية مباشرة لوكلاء AI يعملون عبر أعمالك"
        }
      }
    }
  };

  const t = content[locale];

  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/3 left-1/4 w-[600px] h-[600px] bg-electric-cyan/10 rounded-full blur-3xl" />
      <div className="absolute bottom-1/3 right-1/4 w-[600px] h-[600px] 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>

        {/* Interactive Tools Grid */}
        <div className="grid lg:grid-cols-2 gap-8">
          {/* Department Demo - Full Width */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="lg:col-span-2"
          >
            <div className="mb-4">
              <h3 className="font-space-grotesk font-bold text-2xl text-warm-white mb-2">
                {t.tools.department.title}
              </h3>
              <p className="text-muted-white">
                {t.tools.department.description}
              </p>
            </div>
            <DepartmentDemo locale={locale} />
          </motion.div>

          {/* Workflow Visualization */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            <div className="mb-4">
              <h3 className="font-space-grotesk font-bold text-2xl text-warm-white mb-2">
                {t.tools.workflow.title}
              </h3>
              <p className="text-muted-white">
                {t.tools.workflow.description}
              </p>
            </div>
            <WorkflowVisualization locale={locale} />
          </motion.div>

          {/* Live Activity Feed */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            <div className="mb-4">
              <h3 className="font-space-grotesk font-bold text-2xl text-warm-white mb-2">
                {t.tools.activity.title}
              </h3>
              <p className="text-muted-white">
                {t.tools.activity.description}
              </p>
            </div>
            <div className="bg-obsidian/60 backdrop-blur-xl border border-white/10 rounded-2xl p-4">
              <LiveActivityFeed locale={locale} />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}