"use client";

import { useState } from "react";
import Link from "next/link";

export default function DokumentasiPage() {
  const [activeTab, setActiveTab] = useState<'anatomi' | 'roadmap' | 'mindmap'>('anatomi');
  const [activeNode, setActiveNode] = useState<string | null>(null);

  const roadmapData = [
    { id: 'v1', time: 'Masa Lalu (Genesis)', title: 'Monolithic Era', desc: 'Sistem tunggal SSR yang berat dan rentan tumbang. Penuh ketergantungan pada satu database.' },
    { id: 'v2', time: 'Q1 2026', title: 'Microservices Split', desc: 'Pemecahan paksa tulang punggung. IAM, XCU Ultra, dan Chat WebSocket berdiri di server masing-masing.' },
    { id: 'v3', time: 'Q2 2026', title: 'Breakout Multiverse', desc: 'Kemampuan membelah dimensi kamar VC tanpa jeda loading, ditambah Quantum Record untuk privasi absolut.' },
    { id: 'v4', time: 'Q3 2026', title: 'Omniversal & Temporal', desc: 'Ekspansi jaringan. 1 Aliran Video ke VPS dibelah menggunakan TEE-Muxer FFmpeg ke YouTube, TikTok, dan Twitter secara simultan. In-Memory Scheduler untuk chat.' },
    { id: 'v5', time: 'Masa Depan (Quantum Leap)', title: 'AI Hologram Host', desc: 'Integrasi avatar 3D kecerdasan buatan sebagai moderator otomatis dalam kamar yang menganalisa sentimen emosi partisipan.' }
  ];

  const anatomyData = [
    { id: 'otak', icon: '🧠', name: 'Otak (Brain)', tech: 'PostgreSQL & Redis', detail: 'Matriks logika absolut. Mengingat miliaran token JWT dan mencatat setiap detak nadi transaksi penagihan tanpa kesalahan.' },
    { id: 'jantung', icon: '🫀', name: 'Jantung (Heart)', tech: 'XCU eBPF Engine', detail: 'Mesin pemompa video. Menerima tetesan data dari peramban dan memancarkannya ke ribuan layar dengan latensi di bawah 50ms.' },
    { id: 'syaraf', icon: '⚡', name: 'Syaraf (Nerves)', tech: 'Node.js WebSockets', detail: 'Jaringan listrik real-time. Membawa sinyal chat, peringatan gempa UI, dan komando Temporal Scheduler dalam kecepatan cahaya.' },
    { id: 'nadi', icon: '🩸', name: 'Nadi (Pulse)', tech: 'Next.js API', detail: 'Sirkulasi darah. Meneruskan data autentikasi dari Otak ke Kulit dengan pengamanan SSL dan Enkripsi End-to-End.' },
    { id: 'tulang', icon: '🦴', name: 'Tulang (Bones)', tech: 'Microservices', detail: 'Kerangka baja. Memastikan jika aplikasi Chat lumpuh, aplikasi Video Conference tetap hidup tanpa gangguan.' },
    { id: 'kulit', icon: '🖐️', name: 'Kulit (Skin)', tech: 'Tailwind CSS', detail: 'Sensasi sentuhan antarmuka kelas dunia. Responsif, dinamis, dan diwarnai dengan gradien neon masa depan.' },
    { id: 'ruh', icon: '🌌', name: 'Ruh (Soul)', tech: 'Zero-Downtime Philosophy', detail: 'Kesadaran platform bahwa server harus ringan. Mengorbankan browser klien untuk bekerja keras (Client-Side Rendering) demi stabilitas abadi.' }
  ];

  return (
    <div className="min-h-screen bg-[#050b14] p-6 md:p-12 text-[#e9edef] font-sans">
      <div className="max-w-6xl mx-auto space-y-8">
        
        {/* HEADER */}
        <div className="flex items-center justify-between border-b border-gray-800 pb-4">
          <h1 className="text-3xl font-black text-brand drop-shadow-[0_0_15px_rgba(0,255,136,0.5)]">KITAB SUCI JUMPA.ID</h1>
          <Link href="/supreme-admin/about" className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold transition-colors">
            Kembali ke Version Engine
          </Link>
        </div>

        {/* TAB NAVIGATION */}
        <div className="flex gap-4 border-b border-gray-800 pb-2">
          <button 
            onClick={() => setActiveTab('anatomi')}
            className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'anatomi' ? 'bg-brand text-black' : 'text-gray-500 hover:text-white'}`}
          >
            Anatomi Biologis
          </button>
          <button 
            onClick={() => setActiveTab('mindmap')}
            className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'mindmap' ? 'bg-blue-500 text-white shadow-[0_-5px_20px_rgba(59,130,246,0.3)]' : 'text-gray-500 hover:text-white'}`}
          >
            Interactive Mindmap
          </button>
          <button 
            onClick={() => setActiveTab('roadmap')}
            className={`px-6 py-3 font-bold rounded-t-xl transition-all ${activeTab === 'roadmap' ? 'bg-purple-500 text-white shadow-[0_-5px_20px_rgba(168,85,247,0.3)]' : 'text-gray-500 hover:text-white'}`}
          >
            Ultra Roadmap
          </button>
        </div>

        {/* CONTENT AREA */}
        <div className="bg-[#0b141a] border border-gray-800 rounded-b-2xl rounded-tr-2xl p-8 min-h-[60vh] shadow-2xl relative overflow-hidden">
          
          {/* TAB 1: ANATOMI */}
          {activeTab === 'anatomi' && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
              <div className="space-y-4">
                <h2 className="text-2xl font-bold text-brand mb-6">Struktur Kehidupan Platform</h2>
                {anatomyData.map((item) => (
                  <div 
                    key={item.id} 
                    onMouseEnter={() => setActiveNode(item.id)}
                    className={`p-4 rounded-xl border cursor-pointer transition-all duration-300 ${activeNode === item.id ? 'bg-gray-800 border-brand scale-105 z-10 relative shadow-2xl' : 'bg-transparent border-gray-800 hover:border-gray-600'}`}
                  >
                    <div className="flex items-center gap-4">
                      <span className="text-4xl">{item.icon}</span>
                      <div>
                        <h3 className="text-lg font-bold text-white">{item.name}</h3>
                        <p className="text-sm font-mono text-brand">{item.tech}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="flex items-center justify-center p-8">
                {activeNode ? (
                  <div className="bg-[#111b21] border border-brand p-8 rounded-3xl shadow-[0_0_50px_rgba(0,255,136,0.1)] animate-in zoom-in duration-300">
                    <span className="text-7xl block mb-6 text-center">{anatomyData.find(a => a.id === activeNode)?.icon}</span>
                    <h3 className="text-2xl font-bold text-white mb-2 text-center">{anatomyData.find(a => a.id === activeNode)?.name}</h3>
                    <p className="text-center text-brand font-mono text-sm mb-6">{anatomyData.find(a => a.id === activeNode)?.tech}</p>
                    <p className="text-gray-400 text-lg leading-relaxed text-center">
                      {anatomyData.find(a => a.id === activeNode)?.detail}
                    </p>
                  </div>
                ) : (
                  <div className="text-center text-gray-600">
                    <svg className="w-24 h-24 mx-auto mb-4 opacity-20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm0-2h2V7h-2z"/></svg>
                    <p>Arahkan kursor ke salah satu elemen di sebelah kiri untuk melihat detail jiwa.</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* TAB 2: INTERACTIVE MINDMAP */}
          {activeTab === 'mindmap' && (
            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 h-[600px] flex items-center justify-center relative bg-gradient-to-br from-[#050B14] via-[#0A192F] to-[#00ff88]/10">
              <div className="absolute inset-0 bg-blue-900/5 mix-blend-overlay"></div>
              
              {/* Custom CSS Mindmap Tree */}
              <div className="relative z-10 flex flex-col items-center">
                {/* Node Pusat */}
                <div className="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black text-2xl shadow-[0_0_30px_rgba(37,99,235,0.6)] z-20 hover:scale-110 transition-transform cursor-crosshair">
                  JUMPA.ID OMNIVERSE
                </div>
                
                {/* Garis Vertikal */}
                <div className="w-1 h-12 bg-blue-500/50"></div>
                
                {/* Cabang Horizontal */}
                <div className="w-[800px] h-1 bg-blue-500/50 flex justify-between relative">
                  <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-400 rounded-full"></div>
                  <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-blue-400 rounded-full"></div>
                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-400 rounded-full"></div>
                </div>
                
                {/* 3 Pilar */}
                <div className="flex w-[800px] justify-between">
                  {/* Pilar 1: IAM */}
                  <div className="flex flex-col items-center">
                    <div className="w-1 h-8 bg-blue-500/50"></div>
                    <div className="bg-[#111b21] border-2 border-emerald-500 text-emerald-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
                      IAM (Identity Access)
                    </div>
                    <div className="w-1 h-8 bg-emerald-500/30"></div>
                    <div className="flex flex-col gap-3">
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Master Owner Dashboard</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Tenant Management</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Ultra Billing Engine</div>
                    </div>
                  </div>

                  {/* Pilar 2: VC */}
                  <div className="flex flex-col items-center">
                    <div className="w-1 h-8 bg-blue-500/50"></div>
                    <div className="bg-[#111b21] border-2 border-red-500 text-red-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
                      XCU Ultra Engine
                    </div>
                    <div className="w-1 h-8 bg-red-500/30"></div>
                    <div className="flex flex-col gap-3">
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Webinar / Podcast Mode</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Breakout Multiverse</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Quantum Local Record</div>
                    </div>
                  </div>

                  {/* Pilar 3: CHAT */}
                  <div className="flex flex-col items-center">
                    <div className="w-1 h-8 bg-blue-500/50"></div>
                    <div className="bg-[#111b21] border-2 border-purple-500 text-purple-400 px-6 py-3 rounded-xl font-bold shadow-[0_0_15px_rgba(168,85,247,0.3)] hover:-translate-y-2 transition-transform cursor-pointer">
                      WebSocket Chat
                    </div>
                    <div className="w-1 h-8 bg-purple-500/30"></div>
                    <div className="flex flex-col gap-3">
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">Temporal Scheduler</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">TEE-Muxer Omniversal</div>
                      <div className="bg-gray-800 text-gray-300 text-sm px-4 py-2 rounded-lg border border-gray-700">End-to-End Encryption</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 3: ULTRA ROADMAP */}
          {activeTab === 'roadmap' && (
            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 relative py-12">
              <div className="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-1 bg-linear-to-b from-gray-800 via-purple-500 to-var(--color-brand)"></div>
              
              <div className="space-y-12">
                {roadmapData.map((node, index) => (
                  <div key={node.id} className={`flex items-center w-full ${index % 2 === 0 ? 'justify-start' : 'justify-end'} relative`}>
                    
                    {/* Lingkaran Garis Waktu */}
                    <div className="absolute left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-[#111b21] border-4 border-purple-500 z-10 flex items-center justify-center">
                       <div className="w-2 h-2 bg-white rounded-full"></div>
                    </div>

                    <div className={`w-5/12 ${index % 2 === 0 ? 'pr-12 text-right' : 'pl-12 text-left'}`}>
                       <div className="bg-[#111b21] p-6 rounded-2xl border border-gray-700 hover:border-purple-500 transition-colors shadow-xl group">
                          <span className="text-purple-400 font-mono text-sm block mb-2">{node.time}</span>
                          <h3 className="text-2xl font-bold text-white mb-2 group-hover:text-purple-300 transition-colors">{node.title}</h3>
                          <p className="text-gray-400 leading-relaxed text-sm">{node.desc}</p>
                       </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

      </div>
    </div>
  );
}