"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { ChevronRight, ArrowRight, CheckCircle2, ShieldCheck, Terminal, Cpu, Sparkles, Languages } from "lucide-react";
import { SpotlightCard } from "../SpotlightCard";

export interface AgentStat {
  value: string;
  label: string;
}

export interface ChatLog {
  sender: "operator" | "ai";
  text: string;
  isConsole?: boolean;
}

export interface MultilingualExample {
  lang: string;
  text: string;
}

export interface ChartData {
  title: string;
  beforeLabel: string;
  afterLabel: string;
  beforeValues: number[];
  afterValues: number[];
  categories: string[];
}

export interface AgentCaseStudy {
  clientName: string;
  sector: string;
  result: string;
  testimonial: string;
  author: string;
  location: string;
}

interface AIAgentLayoutProps {
  agentName: string;
  tagline: string;
  description: string;
  standards: string[];
  stats: AgentStat[];
  chatLogs: ChatLog[];
  multilingualExamples: MultilingualExample[];
  chartData: ChartData;
  caseStudy: AgentCaseStudy;
  glowColor?: string;
}

export default function AIAgentLayout({
  agentName,
  tagline,
  description,
  standards,
  stats,
  chatLogs,
  multilingualExamples,
  chartData,
  caseStudy,
  glowColor = "rgba(0, 229, 255, 0.15)",
}: AIAgentLayoutProps) {
  const [activeLangIdx, setActiveLangIdx] = useState(0);
  const [showCorrection, setShowCorrection] = useState(false);

  return (
    <div className="relative min-h-screen overflow-hidden bg-orbit-bg-deep orbit-grid-mesh">
      {/* Glow Orbs */}
      <div 
        className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full blur-[120px] will-change-transform opacity-30" 
        style={{ backgroundColor: glowColor.includes("purple") ? "#a855f7" : "#00d4ff" }}
      />
      <div className="absolute bottom-[10%] right-[-10%] h-[600px] w-[600px] rounded-full bg-orbit-purple/8 blur-[130px] will-change-transform" />

      {/* Main Container */}
      <main className="mx-auto max-w-7xl px-4 py-8 md:px-8 relative z-10 space-y-12">
        
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 text-xs font-mono text-slate-500">
          <Link href="/" className="hover:text-orbit-cyan">Home</Link>
          <ChevronRight className="h-3 w-3" />
          <Link href="/ai-engineer" className="hover:text-orbit-cyan">AI Platform</Link>
          <ChevronRight className="h-3 w-3" />
          <span className="text-slate-600 dark:text-slate-300">{agentName}</span>
        </div>

        {/* Hero Section */}
        <section className="grid gap-8 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-7 space-y-6">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="space-y-4"
            >
              <div className="inline-flex items-center gap-1.5 rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-cyan">
                <Sparkles className="h-3.5 w-3.5 animate-pulse text-orbit-cyan" />
                Specialized AI Agent Connected
              </div>
              <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-5xl md:text-6xl leading-tight">
                {agentName} <br />
                <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">{tagline}</span>
              </h1>
              <p className="max-w-2xl text-sm leading-relaxed text-slate-600 dark:text-slate-400 sm:text-base">
                {description}
              </p>
              
              <div className="flex flex-wrap gap-4 pt-2">
                <Link
                  href="/contact"
                  className="flex h-11 items-center justify-center rounded-full bg-gradient-to-r from-orbit-cyan to-orbit-purple px-6 text-xs font-bold font-mono text-white shadow-lg shadow-orbit-cyan/10 active:scale-95 transition-transform"
                >
                  Deploy Active Agent Node
                </Link>
                <Link
                  href="/ai-engineer"
                  className="flex h-11 items-center justify-center rounded-full border border-orbit-border bg-orbit-bg-primary/50 px-6 text-xs font-bold font-mono text-slate-700 dark:text-slate-300 hover:text-slate-950 dark:hover:text-white transition-colors"
                >
                  Platform Overview →
                </Link>
              </div>
            </motion.div>
          </div>

          {/* Connected AI Agent Terminal Console */}
          <div className="lg:col-span-5">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.7, delay: 0.2 }}
              className="relative overflow-hidden rounded-3xl border border-orbit-cyan/20 bg-orbit-bg-primary/80 p-5 shadow-2xl backdrop-blur-md"
            >
              <div className="mb-4 flex items-center justify-between border-b border-orbit-border pb-3">
                <div className="flex items-center gap-2">
                  <Terminal className="h-4 w-4 text-orbit-cyan animate-pulse" />
                  <span className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300">NODE_CONSOLE_STREAM</span>
                </div>
                <div className="rounded-full bg-orbit-cyan/15 px-2.5 py-0.5 font-mono text-[9px] font-bold text-orbit-cyan animate-pulse">
                  ACTIVE
                </div>
              </div>

              {/* Chat Stream logs */}
              <div className="h-[220px] overflow-y-auto space-y-3 pr-1 text-xs font-mono">
                {chatLogs.map((log, idx) => (
                  <div 
                    key={idx} 
                    className={`flex ${log.sender === "operator" ? "justify-end" : "justify-start"}`}
                  >
                    <div 
                      className={`max-w-[85%] p-3 rounded-2xl ${
                        log.sender === "operator" 
                          ? "bg-orbit-cyan/10 text-slate-800 dark:text-slate-200 border border-orbit-cyan/15" 
                          : log.isConsole
                          ? "bg-orbit-bg-deep text-emerald-400 border border-slate-900 leading-normal whitespace-pre-line"
                          : "bg-slate-900 text-slate-700 dark:text-slate-300 border border-slate-800"
                      }`}
                    >
                      {log.text}
                    </div>
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        </section>

        {/* Dynamic Metric Tiles */}
        <section className="grid grid-cols-2 gap-4 md:grid-cols-4">
          {stats.map((stat, idx) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: idx * 0.1 }}
            >
              <SpotlightCard className="flex flex-col justify-center rounded-2xl p-6 text-center">
                <span className="text-3xl font-black text-orbit-cyan tracking-tight">{stat.value}</span>
                <span className="mt-1 font-mono text-xs text-slate-500 dark:text-slate-400 font-semibold">{stat.label}</span>
              </SpotlightCard>
            </motion.div>
          ))}
        </section>

        {/* Interactive Before/After Performance Simulation */}
        <section className="rounded-3xl border border-orbit-border bg-orbit-bg-primary overflow-hidden shadow-2xl grid grid-cols-1 lg:grid-cols-12">
          {/* Chart visualizers (7 cols) */}
          <div className="lg:col-span-7 p-6 border-b lg:border-b-0 lg:border-r border-orbit-border/60 bg-slate-950/20 flex flex-col justify-between space-y-6">
            <div className="flex justify-between items-center">
              <h3 className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">
                {chartData.title}
              </h3>
              <button
                onClick={() => setShowCorrection(!showCorrection)}
                className="px-3 py-1 rounded-full bg-orbit-cyan/10 border border-orbit-cyan/20 font-mono text-[9px] font-bold text-orbit-cyan hover:bg-orbit-cyan/25 active:scale-95 transition-all"
              >
                {showCorrection ? "Disable Simulation" : "Activate AI Simulation"}
              </button>
            </div>

            {/* Simulated graph using high-end SVG */}
            <div className="relative aspect-[16/9] w-full max-w-[560px] mx-auto rounded-2xl bg-orbit-bg-deep border border-slate-200 dark:border-slate-900/60 p-4 flex items-center justify-center">
              
              {/* Background Graph Lines */}
              <div className="absolute inset-0 bg-[linear-gradient(rgba(15,141,244,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(15,141,244,0.03)_1px,transparent_1px)] bg-[size:24px_24px] opacity-35" />
              
              <svg viewBox="0 0 500 240" className="w-full h-full relative z-10 overflow-visible text-slate-450 dark:text-slate-550">
                {/* Horizontal guide grids */}
                <line x1="40" y1="40" x2="480" y2="40" stroke="currentColor" className="text-slate-800 dark:text-slate-200 dark:text-slate-800" strokeWidth="1" />
                <line x1="40" y1="100" x2="480" y2="100" stroke="currentColor" className="text-slate-800 dark:text-slate-200 dark:text-slate-800" strokeWidth="1" />
                <line x1="40" y1="160" x2="480" y2="160" stroke="currentColor" className="text-slate-800 dark:text-slate-200 dark:text-slate-800" strokeWidth="1" />
                <line x1="40" y1="200" x2="480" y2="200" stroke="currentColor" className="text-slate-700 dark:text-slate-300 dark:text-slate-700" strokeWidth="1.5" />

                {/* Categories labels */}
                {chartData.categories.map((cat, idx) => (
                  <text 
                    key={cat} 
                    x={40 + (440 / (chartData.categories.length - 1)) * idx} 
                    y="225" 
                    fill="currentColor" 
                    className="text-slate-500 dark:text-slate-400"
                    fontSize="9" 
                    fontFamily="monospace"
                    textAnchor="middle"
                  >
                    {cat}
                  </text>
                ))}

                {/* Y-Axis scale indicators */}
                <text x="30" y="45" fill="currentColor" className="text-slate-500 dark:text-slate-400" fontSize="8" fontFamily="monospace" textAnchor="end">100%</text>
                <text x="30" y="105" fill="currentColor" className="text-slate-500 dark:text-slate-400" fontSize="8" fontFamily="monospace" textAnchor="end">50%</text>
                <text x="30" y="205" fill="currentColor" className="text-slate-500 dark:text-slate-400" fontSize="8" fontFamily="monospace" textAnchor="end">0%</text>

                {/* Before Correction Line (highly volatile orange path) */}
                <motion.path
                  d={chartData.beforeValues.reduce((acc, val, idx) => {
                    const x = 40 + (440 / (chartData.categories.length - 1)) * idx;
                    const y = 200 - (val / 100) * 160;
                    return acc + `${idx === 0 ? "M" : "L"} ${x} ${y}`;
                  }, "")}
                  fill="none"
                  stroke="#ff6b35"
                  strokeWidth="2.5"
                  strokeLinecap="round"
                  strokeDasharray="400"
                  strokeDashoffset="0"
                  animate={{ strokeDashoffset: [400, 0] }}
                  transition={{ duration: 1.5 }}
                />

                {/* After Correction Line (smooth electric cyan path - fades in dynamically) */}
                <AnimatePresence>
                  {showCorrection && (
                    <motion.path
                      d={chartData.afterValues.reduce((acc, val, idx) => {
                        const x = 40 + (440 / (chartData.categories.length - 1)) * idx;
                        const y = 200 - (val / 100) * 160;
                        return acc + `${idx === 0 ? "M" : "L"} ${x} ${y}`;
                      }, "")}
                      fill="none"
                      stroke="#00d4ff"
                      strokeWidth="3.5"
                      strokeLinecap="round"
                      initial={{ pathLength: 0, opacity: 0 }}
                      animate={{ pathLength: 1, opacity: 1 }}
                      exit={{ pathLength: 0, opacity: 0 }}
                      transition={{ duration: 1 }}
                    />
                  )}
                </AnimatePresence>
              </svg>

              {/* Legend overlay */}
              <div className="absolute top-4 right-4 flex gap-4 font-mono text-[9px] bg-orbit-bg-deep/80 border border-slate-200 dark:border-slate-800 p-2 rounded-lg">
                <div className="flex items-center gap-1.5">
                  <span className="h-1.5 w-3 bg-[#ff6b35] rounded-full" />
                  <span className="text-slate-600 dark:text-slate-400">{chartData.beforeLabel}</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="h-1.5 w-3 bg-[#00d4ff] rounded-full" />
                  <span className="text-slate-600 dark:text-slate-400">{chartData.afterLabel}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Multilingual dialogue & features (5 cols) */}
          <div className="lg:col-span-5 p-6 flex flex-col justify-between space-y-6">
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <h3 className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest flex items-center gap-1.5">
                  <Languages className="h-4 w-4 text-orbit-cyan" />
                  Multilingual AI Dialogue
                </h3>
                <span className="font-mono text-[9px] text-slate-500">Live Translations</span>
              </div>

              {/* Language Tabs */}
              <div className="flex flex-wrap gap-1.5 border-b border-slate-200 dark:border-slate-900 pb-3">
                {multilingualExamples.map((ex, idx) => (
                  <button
                    key={ex.lang}
                    onClick={() => setActiveLangIdx(idx)}
                    className={`px-2.5 py-1 rounded-full font-mono text-[9px] font-bold border transition-colors ${
                      activeLangIdx === idx
                        ? "border-orbit-cyan bg-orbit-cyan/10 text-orbit-cyan"
                        : "border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/20 text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-800 dark:text-slate-200"
                    }`}
                  >
                    {ex.lang}
                  </button>
                ))}
              </div>

              {/* Language example bubble */}
              <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-orbit-bg-deep p-4 min-h-[100px] flex flex-col justify-between">
                <p className="font-sans text-xs italic text-slate-600 dark:text-slate-300 leading-relaxed">
                  &ldquo;{multilingualExamples[activeLangIdx].text}&rdquo;
                </p>
                <span className="mt-4 block font-mono text-[8px] uppercase tracking-widest text-slate-500 font-bold">
                  ORBIT AI AUTO-TRANSLATION ENG V4
                </span>
              </div>
            </div>

            {/* Compliance matrices */}
            <div className="space-y-3">
              <h4 className="font-mono text-[10px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest">
                Compliance & Standards Verified
              </h4>
              <div className="flex flex-wrap gap-2">
                {standards.map((st) => (
                  <div key={st} className="inline-flex items-center gap-1 rounded-full bg-orbit-green/5 border border-orbit-green/10 px-2.5 py-1 font-mono text-[9px] font-bold text-orbit-green">
                    <ShieldCheck className="h-3 w-3" />
                    {st}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Case Study Featurette */}
        <section className="rounded-3xl border border-orbit-border bg-gradient-to-br from-orbit-bg-primary to-orbit-bg-secondary p-8 md:p-12 relative overflow-hidden shadow-2xl">
          <div className="absolute top-0 right-0 w-32 h-32 bg-orbit-purple/10 blur-2xl rounded-full" />
          
          <div className="grid gap-8 md:grid-cols-2 items-center">
            <div className="space-y-4">
              <div className="inline-flex rounded-full border border-orbit-green/20 bg-orbit-green/5 px-3 py-1 font-mono text-[9px] font-bold uppercase tracking-widest text-orbit-green">
                Agent Success Record
              </div>
              <h3 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
                {caseStudy.clientName}
              </h3>
              <div className="flex gap-4 font-mono text-xs text-slate-500 dark:text-slate-400">
                <span>Sector: {caseStudy.sector}</span>
                <span>·</span>
                <span>{caseStudy.location}</span>
              </div>
              <p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">
                &ldquo;{caseStudy.testimonial}&rdquo;
              </p>
              <div className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300">
                — {caseStudy.author}
              </div>
            </div>

            {/* Stat Callout */}
            <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-orbit-bg-deep/80 p-6 text-center space-y-4">
              <div className="text-xs font-mono font-bold text-orbit-cyan uppercase tracking-wider">Audited Operational Impact</div>
              <div className="text-4xl md:text-5xl font-black text-slate-900 dark:text-white">{caseStudy.result}</div>
              <p className="text-xs text-slate-500 max-w-[280px] mx-auto leading-relaxed">
                Aggregated autonomously via connected edge gateway sensor streams.
              </p>
              <div className="pt-2">
                <Link
                  href="/contact"
                  className="inline-flex items-center gap-1.5 font-mono text-xs text-orbit-cyan hover:underline"
                >
                  Deploy Specialized PoC Audit <ArrowRight className="h-3.5 w-3.5" />
                </Link>
              </div>
            </div>
          </div>
        </section>

      </main>
    </div>
  );
}