import React, { useEffect, useState } from "react";
import {
  Brain,
  Image,
  Video,
  Code2,
  Globe,
  Music4,
  Sparkles,
  TrendingUp,
  Search,
  Filter,
  ExternalLink,
  MessageSquare,
  Zap,
  Cpu,
  Network,
} from "lucide-react";

export default function AdvancedAIEcosystem() {
  const [particles, setParticles] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState("ALL");
  const [search, setSearch] = useState("");
  const [chatInput, setChatInput] = useState("");
  const [activeNodes, setActiveNodes] = useState([]);

  useEffect(() => {
    const generated = Array.from({ length: 70 }, (_, i) => ({
      id: i,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`,
      size: `${5 + Math.random() * 18}px`,
      opacity: 0.06 + Math.random() * 0.25,
      duration: `${3 + Math.random() * 8}s`,
    }));

    setParticles(generated);
  }, []);

  const aiNodes = [
    {
      id: 1,
      name: "ChatGPT",
      category: "TEXT",
      description:
        "Conversational AI for productivity, reasoning and automation workflows.",
      users: "800M+",
      color: "from-cyan-500 to-blue-600",
      border: "border-cyan-400/30",
      bg: "bg-cyan-500/10",
      icon: Brain,
      x: "4%",
      y: "10%",
      w: "360px",
      h: "240px",
    },

    {
      id: 2,
      name: "Claude",
      category: "TEXT",
      description:
        "Long context assistant specialized in advanced reasoning and analysis.",
      users: "90M+",
      color: "from-blue-500 to-indigo-600",
      border: "border-blue-400/30",
      bg: "bg-blue-500/10",
      icon: Brain,
      x: "30%",
      y: "8%",
      w: "250px",
      h: "190px",
    },

    {
      id: 3,
      name: "Gemini",
      category: "MULTIMODAL",
      description:
        "Google multimodal ecosystem combining text, coding and image understanding.",
      users: "400M+",
      color: "from-fuchsia-500 to-purple-600",
      border: "border-fuchsia-400/30",
      bg: "bg-fuchsia-500/10",
      icon: Sparkles,
      x: "49%",
      y: "10%",
      w: "350px",
      h: "220px",
    },

    {
      id: 4,
      name: "Runway",
      category: "VIDEO",
      description:
        "Professional cinematic AI video generation and editing platform.",
      users: "35M+",
      color: "from-red-500 to-orange-500",
      border: "border-red-400/30",
      bg: "bg-red-500/10",
      icon: Video,
      x: "76%",
      y: "8%",
      w: "220px",
      h: "290px",
    },

    {
      id: 5,
      name: "Cursor",
      category: "CODE",
      description:
        "AI-powered coding environment for developers and engineers.",
      users: "20M+",
      color: "from-emerald-500 to-green-600",
      border: "border-emerald-400/30",
      bg: "bg-emerald-500/10",
      icon: Code2,
      x: "8%",
      y: "42%",
      w: "260px",
      h: "250px",
    },

    {
      id: 6,
      name: "Midjourney",
      category: "IMAGE",
      description:
        "AI image generation focused on artistic and cinematic visuals.",
      users: "19M+",
      color: "from-purple-500 to-pink-600",
      border: "border-purple-400/30",
      bg: "bg-purple-500/10",
      icon: Image,
      x: "30%",
      y: "36%",
      w: "320px",
      h: "240px",
    },

    {
      id: 7,
      name: "Perplexity",
      category: "SEARCH",
      description:
        "AI search engine with real-time citations and internet reasoning.",
      users: "60M+",
      color: "from-yellow-400 to-amber-500",
      border: "border-yellow-300/30",
      bg: "bg-yellow-400/10",
      icon: Globe,
      x: "60%",
      y: "40%",
      w: "330px",
      h: "190px",
    },

    {
      id: 8,
      name: "Suno",
      category: "MUSIC",
      description:
        "AI music generation platform capable of creating complete songs.",
      users: "15M+",
      color: "from-pink-500 to-rose-600",
      border: "border-pink-400/30",
      bg: "bg-pink-500/10",
      icon: Music4,
      x: "74%",
      y: "44%",
      w: "220px",
      h: "180px",
    },

    {
      id: 9,
      name: "Ideogram",
      category: "IMAGE",
      description:
        "Typography-focused AI image generation platform.",
      users: "12M+",
      color: "from-violet-500 to-purple-700",
      border: "border-violet-400/30",
      bg: "bg-violet-500/10",
      icon: Image,
      x: "16%",
      y: "74%",
      w: "260px",
      h: "170px",
    },

    {
      id: 10,
      name: "Kling",
      category: "VIDEO",
      description:
        "High realism cinematic AI video generation platform.",
      users: "18M+",
      color: "from-orange-500 to-red-600",
      border: "border-orange-400/30",
      bg: "bg-orange-500/10",
      icon: Video,
      x: "48%",
      y: "72%",
      w: "300px",
      h: "190px",
    },
  ];

  const categories = [
    "ALL",
    "TEXT",
    "IMAGE",
    "VIDEO",
    "CODE",
    "SEARCH",
    "MUSIC",
    "MULTIMODAL",
  ];

  const topAI = [
    "ChatGPT",
    "Gemini",
    "Claude",
    "Midjourney",
    "Runway",
    "Perplexity",
    "Cursor",
    "Kling",
    "Suno",
    "Ideogram",
  ];

  const filteredNodes = aiNodes.filter((node) => {
    const categoryMatch =
      selectedCategory === "ALL" || node.category === selectedCategory;

    const searchMatch = node.name
      .toLowerCase()
      .includes(search.toLowerCase());

    return categoryMatch && searchMatch;
  });

  const handleChat = () => {
    const lower = chatInput.toLowerCase();

    if (lower.includes("video")) {
      setActiveNodes(["Runway", "Kling"]);
    } else if (lower.includes("imagen")) {
      setActiveNodes(["Midjourney", "Ideogram"]);
    } else if (lower.includes("codigo")) {
      setActiveNodes(["Cursor"]);
    } else if (lower.includes("texto")) {
      setActiveNodes(["ChatGPT", "Claude"]);
    } else {
      setActiveNodes([]);
    }
  };

  return (
    <div className="relative min-h-screen overflow-hidden bg-[#040816] text-white">
      {/* ===================================================== */}
      {/* FUTURISTIC BACKGROUND */}
      {/* ===================================================== */}

      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(0,200,255,0.16),transparent_35%)]" />

      <div className="absolute inset-0 opacity-[0.05] bg-[linear-gradient(rgba(255,255,255,1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,1)_1px,transparent_1px)] bg-[size:70px_70px]" />

      <div className="absolute top-[-250px] left-[-250px] w-[900px] h-[900px] rounded-full bg-cyan-500/10 blur-[180px]" />

      <div className="absolute bottom-[-300px] right-[-200px] w-[900px] h-[900px] rounded-full bg-blue-600/10 blur-[200px]" />

      {/* ===================================================== */}
      {/* FLOATING PARTICLES */}
      {/* ===================================================== */}

      {particles.map((p) => (
        <div
          key={p.id}
          className="absolute rounded-full bg-cyan-400/20 animate-pulse"
          style={{
            left: p.left,
            top: p.top,
            width: p.size,
            height: p.size,
            opacity: p.opacity,
            animationDuration: p.duration,
          }}
        />
      ))}

      {/* ===================================================== */}
      {/* HEADER */}
      {/* ===================================================== */}

      <header className="relative z-50 border-b border-white/10 bg-[#040816]/70 backdrop-blur-3xl">
        <div className="flex items-center justify-between px-8 py-6">
          <div>
            <h1 className="text-5xl font-black tracking-tight">
              AI <span className="text-cyan-400">Universe</span>
            </h1>

            <p className="mt-2 text-xs uppercase tracking-[0.4em] text-cyan-300/50">
              VISUAL ECOSYSTEM MAP
            </p>
          </div>

          <div className="hidden lg:flex items-center gap-4">
            <div className="px-4 py-2 rounded-full border border-white/10 bg-white/[0.03] text-zinc-400 text-sm">
              GLOBAL AI TRACKER
            </div>

            <div className="px-4 py-2 rounded-full border border-cyan-400/20 bg-cyan-500/10 text-cyan-300 text-sm animate-pulse">
              1200+ AI INDEXED
            </div>
          </div>
        </div>
      </header>

      {/* ===================================================== */}
      {/* MAIN LAYOUT */}
      {/* ===================================================== */}

      <main className="relative z-10 flex min-h-[calc(100vh-95px)]">
        {/* ===================================================== */}
        {/* LEFT CONTENT */}
        {/* ===================================================== */}

        <section className="relative flex-1 overflow-auto pb-[170px]">
          <div className="relative min-w-[1700px] min-h-[1200px]">
            {/* ===================================================== */}
            {/* BIG TITLE */}
            {/* ===================================================== */}

            <div className="absolute top-10 left-10 z-20">
              <h2 className="text-[140px] font-black leading-none text-white/[0.04]">
                AI MAP
              </h2>

              <div className="absolute top-10 left-5">
                <h3 className="text-5xl font-black">
                  Artificial Intelligence Ecosystem
                </h3>

                <p className="mt-4 max-w-2xl text-zinc-400 leading-relaxed text-lg">
                  Explore the world’s most advanced AI systems through an
                  interactive cinematic interface with categories, rankings,
                  filters and intelligent recommendations.
                </p>
              </div>
            </div>

            {/* ===================================================== */}
            {/* FILTERS BAR */}
            {/* ===================================================== */}

            <div className="absolute top-[230px] left-10 z-40 flex items-center gap-4 flex-wrap max-w-[1100px]">
              <div className="flex items-center gap-3 px-5 py-3 rounded-2xl border border-white/10 bg-white/[0.03] backdrop-blur-xl">
                <Filter size={18} className="text-cyan-300" />
                <span className="text-sm uppercase tracking-[0.25em] text-zinc-300">
                  Filters
                </span>
              </div>

              {categories.map((category) => (
                <button
                  key={category}
                  onClick={() => setSelectedCategory(category)}
                  className={`px-5 py-3 rounded-2xl border transition-all duration-300 text-sm tracking-[0.2em] uppercase ${
                    selectedCategory === category
                      ? "border-cyan-400/40 bg-cyan-500/10 text-cyan-300"
                      : "border-white/10 bg-white/[0.03] text-zinc-400 hover:border-cyan-400/20"
                  }`}
                >
                  {category}
                </button>
              ))}

              <div className="flex items-center gap-3 px-5 py-3 rounded-2xl border border-white/10 bg-white/[0.03] backdrop-blur-xl min-w-[300px]">
                <Search size={18} className="text-cyan-300" />

                <input
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Search AI..."
                  className="bg-transparent outline-none text-sm w-full text-white placeholder:text-zinc-500"
                />
              </div>
            </div>

            {/* ===================================================== */}
            {/* CONNECTION LINES */}
            {/* ===================================================== */}

            <div className="absolute top-[390px] left-[420px] w-[500px] h-[2px] bg-gradient-to-r from-cyan-400/0 via-cyan-400/40 to-cyan-400/0 blur-[1px]" />

            <div className="absolute top-[640px] left-[290px] w-[400px] h-[2px] bg-gradient-to-r from-purple-400/0 via-purple-400/40 to-purple-400/0 blur-[1px] rotate-[20deg]" />

            {/* ===================================================== */}
            {/* AI CARDS */}
            {/* ===================================================== */}

            {filteredNodes.map((node) => {
              const Icon = node.icon;

              const isActive = activeNodes.includes(node.name);

              return (
                <div
                  key={node.id}
                  className={`absolute group transition-all duration-700 hover:scale-[1.04] ${
                    isActive ? "scale-[1.06] z-50" : ""
                  }`}
                  style={{
                    left: node.x,
                    top: node.y,
                    width: node.w,
                    height: node.h,
                  }}
                >
                  {/* GLOW */}

                  <div
                    className={`absolute -inset-[3px] rounded-[34px] blur-2xl opacity-0 group-hover:opacity-100 transition-all duration-700 bg-gradient-to-br ${node.color} ${
                      isActive ? "opacity-100" : ""
                    }`}
                  />

                  {/* CARD */}

                  <div
                    className={`relative h-full overflow-hidden rounded-[34px] border ${node.border} ${node.bg} backdrop-blur-3xl p-6 shadow-[0_0_80px_rgba(0,200,255,0.05)]`}
                  >
                    {/* GRADIENT */}

                    <div
                      className={`absolute inset-0 bg-gradient-to-br ${node.color} opacity-[0.14]`}
                    />

                    {/* GRID */}

                    <div className="absolute inset-0 opacity-[0.05] bg-[linear-gradient(rgba(255,255,255,1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,1)_1px,transparent_1px)] bg-[size:24px_24px]" />

                    {/* TOP */}

                    <div className="relative z-10 flex items-start justify-between">
                      <div
                        className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${node.color} flex items-center justify-center shadow-2xl`}
                      >
                        <Icon size={30} />
                      </div>

                      <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] text-white/50">
                        <TrendingUp size={12} />
                        LIVE
                      </div>
                    </div>

                    {/* CONTENT */}

                    <div className="relative z-10 mt-7">
                      <h3 className="text-4xl font-black tracking-tight">
                        {node.name}
                      </h3>

                      <div className="mt-2 text-[11px] uppercase tracking-[0.35em] text-white/50">
                        {node.category} AI
                      </div>

                      <p className="mt-5 text-zinc-300 leading-relaxed text-sm">
                        {node.description}
                      </p>
                    </div>

                    {/* FOOTER */}

                    <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between">
                      <div>
                        <div className="text-xs text-zinc-500">
                          Estimated Users
                        </div>

                        <div className="text-xl font-bold text-white mt-1">
                          {node.users}
                        </div>
                      </div>

                      <button className="w-14 h-14 rounded-2xl border border-white/10 bg-white/[0.04] flex items-center justify-center hover:bg-white/[0.1] transition-all duration-300">
                        <ExternalLink size={18} />
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* ===================================================== */}
        {/* RIGHT SIDEBAR */}
        {/* ===================================================== */}

        <aside className="hidden xl:flex relative w-[260px] border-l border-white/10 bg-[#040816]/80 backdrop-blur-3xl flex-col items-center py-8 overflow-y-auto">
          <div className="flex items-center gap-3 mb-10">
            <Network size={18} className="text-cyan-300" />

            <span className="text-xs uppercase tracking-[0.35em] text-cyan-300/50">
              TOP AI WORLD
            </span>
          </div>

          <div className="flex flex-col gap-4">
            {topAI.map((ai, index) => (
              <div
                key={ai}
                className="group relative transition-all duration-500 hover:translate-x-[-12px]"
                style={{
                  marginLeft: `${index * 10}px`,
                }}
              >
                <div className="w-[180px] rounded-3xl border border-white/10 bg-white/[0.03] backdrop-blur-xl p-5 hover:border-cyan-400/30 hover:bg-cyan-500/10 transition-all duration-500 overflow-hidden relative">
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-700 bg-gradient-to-br from-cyan-400/10 via-transparent to-blue-500/10" />

                  <div className="relative z-10 flex items-center justify-between">
                    <span className="text-xs text-zinc-500">
                      #{index + 1}
                    </span>

                    <div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
                  </div>

                  <div className="relative z-10 mt-4 text-xl font-bold group-hover:text-cyan-300 transition-all duration-300">
                    {ai}
                  </div>

                  <div className="relative z-10 mt-1 text-[10px] uppercase tracking-[0.3em] text-zinc-500">
                    TRENDING AI
                  </div>
                </div>
              </div>
            ))}
          </div>
        </aside>
      </main>

      {/* ===================================================== */}
      {/* BOTTOM AI CHAT */}
      {/* ===================================================== */}

      <div className="fixed bottom-0 left-0 right-0 z-50 p-5">
        <div className="max-w-[1800px] mx-auto rounded-[34px] border border-cyan-400/10 bg-[#040816]/85 backdrop-blur-3xl overflow-hidden shadow-[0_0_90px_rgba(0,200,255,0.08)]">
          {/* TOP BAR */}

          <div className="flex items-center justify-between px-6 py-4 border-b border-white/5">
            <div className="flex items-center gap-4">
              <div className="w-3 h-3 rounded-full bg-cyan-400 animate-pulse" />

              <div>
                <div className="text-sm uppercase tracking-[0.35em] text-cyan-300">
                  AI Ecosystem Assistant
                </div>

                <div className="text-xs text-zinc-500 mt-1">
                  Ask anything about AI tools, categories, trends and workflows.
                </div>
              </div>
            </div>

            <div className="hidden md:flex items-center gap-3 text-zinc-500 text-xs uppercase tracking-[0.25em]">
              <Cpu size={15} />
              REAL TIME AI GUIDE
            </div>
          </div>

          {/* SUGGESTIONS */}

          <div className="px-6 py-4 border-b border-white/5 flex flex-wrap gap-3">
            {[
              "Best free AI for video",
              "Show image AI",
              "Best coding AI",
              "Top AI for students",
              "AI similar to ChatGPT",
            ].map((suggestion) => (
              <button
                key={suggestion}
                onClick={() => setChatInput(suggestion)}
                className="px-4 py-2 rounded-full border border-white/10 bg-white/[0.03] text-zinc-400 text-sm hover:border-cyan-400/20 hover:bg-cyan-500/10 hover:text-cyan-300 transition-all duration-300"
              >
                {suggestion}
              </button>
            ))}
          </div>

          {/* INPUT */}

          <div className="flex items-center gap-4 p-5">
            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-[0_0_50px_rgba(0,200,255,0.35)]">
              <MessageSquare size={28} />
            </div>

            <input
              value={chatInput}
              onChange={(e) => setChatInput(e.target.value)}
              placeholder="Ask about AI tools, workflows, comparisons, rankings or categories..."
              className="flex-1 h-16 rounded-2xl border border-white/10 bg-white/[0.03] px-6 text-white outline-none focus:border-cyan-400/30 focus:bg-white/[0.05] placeholder:text-zinc-500"
            />

            <button
              onClick={handleChat}
              className="h-16 px-10 rounded-2xl bg-cyan-400 text-black font-black tracking-[0.15em] hover:scale-105 transition-all duration-300 shadow-[0_0_40px_rgba(34,211,238,0.35)] flex items-center gap-3"
            >
              <Zap size={18} />
              ANALYZE
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}