"use client";

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

export default function MindmapPage() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    queueMicrotask(() => setMounted(true));
  }, []);

  if (!mounted) return null;

  return (
    <div className="min-h-screen bg-[#0a101d] text-white p-8 relative overflow-hidden font-sans">
      {/* Background Matrix Effect */}
      <div className="absolute inset-0 pointer-events-none opacity-20">
        <div className="absolute inset-0 bg-[linear-gradient(rgba(10,16,29,0)_50%,rgba(0,0,0,0.5)_50%),linear-gradient(90deg,rgba(0,255,136,0.03),rgba(168,85,247,0.03),rgba(59,130,246,0.03))] bg-size-[100%_4px,4px_100%] z-0 mix-blend-screen"></div>
      </div>

      <header className="relative z-10 flex justify-between items-center mb-12 border-b border-white/10 pb-6">
        <div>
          <h1 className="text-4xl font-black tracking-tight bg-clip-text text-transparent bg-linear-to-r from-blue-400 via-purple-500 to-green-400">
            JUMPA.ID ULTRA MINDMAP
          </h1>
          <p className="text-gray-400 mt-2 tracking-wide text-sm">Interactive Architecture Diagram (SaaS Ecosystem)</p>
        </div>
        <Link href="/supreme-admin" className="px-6 py-2 bg-white/5 hover:bg-white/10 border border-white/20 rounded-full font-bold transition-all flex items-center gap-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
          Kembali ke Dashboard
        </Link>
      </header>

      {/* SVG Mindmap Canvas */}
      <div className="relative z-10 w-full h-[75vh] bg-[#111827] rounded-3xl border border-gray-800 shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden flex items-center justify-center p-10">
        
        {/* Connection Lines */}
        <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{ zIndex: 0 }}>
           <defs>
              <linearGradient id="line-iam-vc" x1="0%" y1="0%" x2="100%" y2="100%">
                 <stop offset="0%" stopColor="#a855f7" />
                 <stop offset="100%" stopColor="#3b82f6" />
              </linearGradient>
              <linearGradient id="line-iam-chat" x1="0%" y1="0%" x2="100%" y2="100%">
                 <stop offset="0%" stopColor="#a855f7" />
                 <stop offset="100%" stopColor="#10b981" />
              </linearGradient>
           </defs>
           
           {/* Line: IAM -> VC */}
           <path d="M 500 200 Q 750 200 750 400" fill="none" stroke="url(#line-iam-vc)" strokeWidth="3" strokeDasharray="10,10" className="animate-[dash_20s_linear_infinite]" />
           
           {/* Line: IAM -> Chat */}
           <path d="M 500 200 Q 250 200 250 400" fill="none" stroke="url(#line-iam-chat)" strokeWidth="3" strokeDasharray="10,10" className="animate-[dash_20s_linear_infinite_reverse]" />
           
           {/* Line: Chat <-> VC */}
           <path d="M 250 400 Q 500 600 750 400" fill="none" stroke="#4b5563" strokeWidth="2" strokeDasharray="5,5" className="animate-[dash_10s_linear_infinite]" />
        </svg>

        <div className="relative w-full h-full max-w-5xl" style={{ zIndex: 1 }}>
          
          {/* Node: IAM */}
          <div className="absolute top-[10%] left-1/2 -translate-x-1/2 group">
            <div className="w-64 bg-purple-900/30 backdrop-blur-md border-2 border-purple-500 rounded-2xl p-6 shadow-[0_0_30px_rgba(168,85,247,0.3)] group-hover:scale-105 transition-transform cursor-pointer">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center shadow-lg">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
                </div>
                <h3 className="text-xl font-bold text-purple-400">JUMPA IAM</h3>
              </div>
              <p className="text-xs text-purple-200">Identity & Access Management. Pusat Otorisasi Zero-Trust & Billing.</p>
              <ul className="mt-4 text-[10px] space-y-1 text-purple-300 font-mono">
                <li>• QR Code Login</li>
                <li>• Billing Management</li>
                <li>• White-Label Versioning</li>
                <li>• Token Issuer (PostgreSQL)</li>
              </ul>
            </div>
          </div>

          {/* Node: Chat */}
          <div className="absolute top-[50%] left-[10%] group">
            <div className="w-64 bg-emerald-900/30 backdrop-blur-md border-2 border-emerald-500 rounded-2xl p-6 shadow-[0_0_30px_rgba(16,185,129,0.3)] group-hover:scale-105 transition-transform cursor-pointer">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center shadow-lg">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
                </div>
                <h3 className="text-xl font-bold text-emerald-400">JUMPA CHAT</h3>
              </div>
              <p className="text-xs text-emerald-200">WebSocket Server (Node.js/Socket.io). Sistem Komunikasi Persistent.</p>
              <ul className="mt-4 text-[10px] space-y-1 text-emerald-300 font-mono">
                <li>• Omni-Brain AI Interceptor</li>
                <li>• The Vault (DRM Storage)</li>
                <li>• End-to-End Encryption</li>
                <li>• FFmpeg Multi-Stream Engine</li>
              </ul>
            </div>
          </div>

          {/* Node: VC */}
          <div className="absolute top-[50%] right-[10%] group">
            <div className="w-64 bg-blue-900/30 backdrop-blur-md border-2 border-blue-500 rounded-2xl p-6 shadow-[0_0_30px_rgba(59,130,246,0.3)] group-hover:scale-105 transition-transform cursor-pointer">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center shadow-lg">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
                </div>
                <h3 className="text-xl font-bold text-blue-400">JUMPA VC</h3>
              </div>
              <p className="text-xs text-blue-200">XCU Ultra eBPF Engine. Konferensi Video Ultra-Low Latency AV1.</p>
              <ul className="mt-4 text-[10px] space-y-1 text-blue-300 font-mono">
                <li>• AI Deep-Twin Surrogate</li>
                <li>• Breakout Matrix</li>
                <li>• Supreme Eye (Multiverse CCTV)</li>
                <li>• TTE Live Canvas</li>
              </ul>
            </div>
          </div>

        </div>
      </div>
      
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes dash {
          to {
            stroke-dashoffset: -100;
          }
        }
      `}} />
    </div>
  );
}