"use client";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { ChevronRight, ArrowRight, ShieldCheck, Terminal, Layers, Radio, Database, Cpu } from "lucide-react";
import { SpotlightCard } from "../SpotlightCard";

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

export interface TechFeature {
  title: string;
  desc: string;
  icon: React.ComponentType<any>;
}

export interface TechSpec {
  category: string;
  items: { name: string; value: string }[];
}

interface TechnologyLayoutProps {
  title: string;
  tagline: string;
  breadcrumb: string;
  intro: string;
  stats: TechStat[];
  features: TechFeature[];
  specifications: TechSpec[];
  diagramTitle: string;
}

export default function TechnologyLayout({
  title,
  tagline,
  breadcrumb,
  intro,
  stats,
  features,
  specifications,
  diagramTitle,
}: TechnologyLayoutProps) {
  const [activePackets, setActivePackets] = useState<{ id: number; delay: number }[]>([]);

  useEffect(() => {
    // Generate packets flowing through the cybernetic SVG pipeline
    const interval = setInterval(() => {
      setActivePackets((prev) => [
        ...prev.slice(-15),
        { id: Math.random(), delay: Math.random() * 2 }
      ]);
    }, 1200);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="relative min-h-screen overflow-hidden bg-orbit-bg-deep orbit-grid-mesh">
      {/* Background gradients */}
      <div className="absolute top-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-orbit-purple/10 blur-[120px] will-change-transform" />
      <div className="absolute bottom-[10%] left-[-10%] h-[600px] w-[600px] rounded-full bg-orbit-blue/8 blur-[130px] will-change-transform" />

      {/* Main content container */}
      <main className="mx-auto max-w-7xl px-4 py-8 md:px-8">
        
        {/* Breadcrumbs */}
        <div className="mb-6 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="/solutions" className="hover:text-orbit-cyan">Platform</Link>
          <ChevronRight className="h-3 w-3" />
          <span className="text-slate-600 dark:text-slate-300">{breadcrumb}</span>
        </div>

        {/* Hero Section */}
        <section className="mb-16 grid gap-8 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-7">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="space-y-4"
            >
              <div className="inline-flex rounded-full border border-orbit-purple/20 bg-orbit-purple/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-purple">
                Protocol & Tech Engine
              </div>
              <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-5xl md:text-6xl">
                {title} <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">{tagline}</span>
              </h1>
              <p className="max-w-xl text-sm leading-relaxed text-slate-600 dark:text-slate-400 sm:text-base">
                {intro}
              </p>
              
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href="/demo"
                  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"
                >
                  Request Technical Proof of Concept
                </Link>
                <Link
                  href="/documentation"
                  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"
                >
                  Developer Docs
                </Link>
              </div>
            </motion.div>
          </div>

          {/* Cybernetic Animated SVG Pipeline Mockup */}
          <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-6 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.5 w-4.5 text-orbit-cyan animate-pulse" />
                  <span className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300">{diagramTitle}</span>
                </div>
                <div className="rounded-full bg-orbit-purple/10 px-2 py-0.5 font-mono text-[9px] font-bold text-orbit-purple">
                  ACTIVE PIPELINE
                </div>
              </div>

              {/* Data Flow animation space */}
              <div className="relative h-48 w-full rounded-2xl bg-orbit-bg-deep/80 border border-slate-200 dark:border-slate-800/80 flex items-center justify-center overflow-hidden">
                
                {/* Simulated Nodes */}
                <div className="absolute left-6 flex flex-col items-center gap-1 z-10">
                  <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-orbit-cyan/10 border border-orbit-cyan/20">
                    <Radio className="h-4.5 w-4.5 text-orbit-cyan" />
                  </div>
                  <span className="font-mono text-[8px] text-slate-500 dark:text-slate-400 font-bold uppercase">Edge Gate</span>
                </div>

                <div className="absolute flex flex-col items-center gap-1 z-10">
                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-orbit-purple/10 border border-orbit-purple/20 animate-orbit-pulse">
                    <Layers className="h-5.5 w-5.5 text-orbit-purple" />
                  </div>
                  <span className="font-mono text-[8px] text-slate-600 dark:text-slate-300 font-bold uppercase">Orbit Core OS</span>
                </div>

                <div className="absolute right-6 flex flex-col items-center gap-1 z-10">
                  <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-orbit-green/10 border border-orbit-green/20">
                    <Database className="h-4.5 w-4.5 text-orbit-green" />
                  </div>
                  <span className="font-mono text-[8px] text-slate-500 dark:text-slate-400 font-bold uppercase">Security DB</span>
                </div>

                {/* SVG Connecting Flow Lines */}
                <svg className="absolute w-full h-full stroke-slate-200 dark:stroke-slate-800/40" fill="none" strokeWidth="1">
                  <path d="M 50 96 C 80 96, 120 96, 150 96" />
                  <path d="M 210 96 C 240 96, 280 96, 310 96" />
                </svg>

                {/* Flow packets */}
                {activePackets.map((packet) => (
                  <React.Fragment key={packet.id}>
                    <motion.div
                      initial={{ left: "55px", opacity: 0.8 }}
                      animate={{ left: "160px" }}
                      transition={{ duration: 1.5, ease: "linear" }}
                      className="absolute h-1.5 w-1.5 rounded-full bg-orbit-cyan shadow-[0_0_8px_#00d4ff] z-0"
                      style={{ top: "93px" }}
                    />
                    <motion.div
                      initial={{ left: "215px", opacity: 0.8 }}
                      animate={{ left: "320px" }}
                      transition={{ duration: 1.5, ease: "linear", delay: 0.3 }}
                      className="absolute h-1.5 w-1.5 rounded-full bg-orbit-green shadow-[0_0_8px_#00ff88] z-0"
                      style={{ top: "93px" }}
                    />
                  </React.Fragment>
                ))}
              </div>
            </motion.div>
          </div>
        </section>

        {/* Dynamic Metric Tiles */}
        <section className="mb-16 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-purple 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>

        {/* Technical Features Grid */}
        <section className="mb-16">
          <div className="mb-8 text-center">
            <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
              Engine <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Capabilities</span>
            </h2>
            <p className="mx-auto mt-2 max-w-xl text-xs text-slate-500">
              Low-latency systems and military-grade encryption models powering the platform.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {features.map((feat, i) => {
              const Icon = feat.icon;
              return (
                <motion.div
                  key={feat.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                >
                  <SpotlightCard className="rounded-3xl p-6 h-full flex flex-col justify-between">
                    <div>
                      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-orbit-purple/10 border border-orbit-purple/20">
                        <Icon className="h-5 w-5 text-orbit-purple" />
                      </div>
                      <h3 className="text-base font-bold text-slate-900 dark:text-white mb-2">{feat.title}</h3>
                      <p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">{feat.desc}</p>
                    </div>
                  </SpotlightCard>
                </motion.div>
              );
            })}
          </div>
        </section>

        {/* Specifications Sheet Accordion/Panel */}
        <section className="mb-16">
          <div className="mb-8 text-center">
            <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
              Platform <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Specifications</span>
            </h2>
            <p className="mx-auto mt-2 max-w-xl text-xs text-slate-500">
              Technical protocol layers, hardware connectivity bounds, and cybersecurity registries.
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2">
            {specifications.map((spec, idx) => (
              <motion.div
                key={spec.category}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: idx * 0.15 }}
                className="overflow-hidden rounded-3xl border border-orbit-border bg-orbit-bg-secondary/40 p-6 backdrop-blur-sm shadow-xl"
              >
                <h3 className="font-mono text-xs font-bold text-orbit-cyan uppercase tracking-widest border-b border-orbit-border pb-3 mb-4">
                  {spec.category}
                </h3>
                <dl className="space-y-4">
                  {spec.items.map((item) => (
                    <div key={item.name} className="flex justify-between border-b border-slate-200 dark:border-slate-900 pb-2">
                      <dt className="text-xs font-semibold text-slate-500 dark:text-slate-400">{item.name}</dt>
                      <dd className="font-mono text-xs font-bold text-slate-800 dark:text-slate-200">{item.value}</dd>
                    </div>
                  ))}
                </dl>
              </motion.div>
            ))}
          </div>
        </section>

      </main>
    </div>
  );
}