"use client";

import { useEffect, useState, useRef } from "react";
import { useDictionary } from "@/lib/dictionary";
import { useRouter } from "next/navigation";

export default function PanopticonTelemetry() {
  const { t } = useDictionary();
  const [logs, setLogs] = useState<{ id: string; time: string; action: string; target: string; status: string }[]>([]);
  const [activeConnections, setActiveConnections] = useState(14029);
  const [bandwidth, setBandwidth] = useState(24.5);
  const [targetKillId, setTargetKillId] = useState("");
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const router = useRouter();
  const [isCheckingAuth, setIsCheckingAuth] = useState(true);

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const res = await fetch("/api/superadmin/supreme-dashboard");
        const data = await res.json();
        if (data.error) {
          router.push("/");
        } else {
          setIsCheckingAuth(false);
        }
      } catch (err) {
        router.push("/");
      }
    };
    checkAuth();
  }, [router]);

  // Move conditional return AFTER all hooks to comply with React Rules of Hooks
  // (early return is placed after line 124 instead)

  // WebGL-Style Waveform Simulation using Canvas for Zero-Error absolute performance
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let time = 0;

    const resize = () => {
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
    };
    window.addEventListener("resize", resize);
    resize();

    const draw = () => {
      time += 0.05;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      const width = canvas.width;
      const height = canvas.height;
      const centerY = height / 2;

      // Draw multiple waves
      for (let i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.moveTo(0, centerY);
        
        for (let x = 0; x < width; x++) {
          const frequency = 0.01 + (i * 0.005);
          const amplitude = 30 + (i * 15) + Math.sin(time + x * 0.02) * 10;
          const y = Math.sin(x * frequency + time + i * 2) * amplitude;
          ctx.lineTo(x, centerY + y);
        }

        // WhatsApp Emerald to Zoom Blue Gradient
        const gradient = ctx.createLinearGradient(0, 0, width, 0);
        gradient.addColorStop(0, "rgba(37, 211, 102, 0.4)"); // WhatsApp Green
        gradient.addColorStop(0.5, "rgba(11, 92, 255, 0.6)"); // Zoom Blue
        gradient.addColorStop(1, "rgba(255, 0, 128, 0.3)"); // XCU Magenta
        
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 2 + i;
        ctx.stroke();
      }
      
      animationFrameId = requestAnimationFrame(draw);
    };
    draw();

    return () => {
      window.removeEventListener("resize", resize);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  // Fetch real telemetry data from PANOPTICON backend
  useEffect(() => {
    const fetchTelemetry = async () => {
      try {
        const res = await fetch("/api/superadmin/telemetry");
        if (res.ok) {
          const data = await res.json();
          // Transform quantum logs into UI log format
          const formattedLogs = data.logs.map((log: any) => ({
            id: log.id,
            time: log.nanoTimestamp ? new Date(log.nanoTimestamp).toISOString().split("T")[1].substring(0, 8) : "00:00:00",
            action: log.action,
            target: log.targetId,
            status: log.action.includes("KILL") ? "TERMINATED" : "OK",
          }));
          setLogs(formattedLogs);
          
          setActiveConnections(data.stats.totalTelemetryRecords); 
          setBandwidth(parseFloat(data.stats.totalBandwidthBytes) / 1024 / 1024 / 1024);
        }
      } catch (err) {
        console.error("PANOPTICON Sync Error:", err);
      }
    };

    fetchTelemetry();
    const interval = setInterval(fetchTelemetry, 2000);
    return () => clearInterval(interval);
  }, []);

  // Auth guard AFTER all hooks (React Rules of Hooks compliance)
  if (isCheckingAuth) {
    return <div className="min-h-screen bg-black flex items-center justify-center text-purple-500 font-mono text-sm">INITIALIZING SECURE CONNECTION...</div>;
  }

  const executeLiveKill = async () => {
    if (!targetKillId) return;
    
    // Spectactular Kill Trigger Effect
    document.body.style.animation = "shake 0.5s cubic-bezier(.36,.07,.19,.97) both";
    setTimeout(() => document.body.style.animation = "", 500);

    const res = await fetch("/api/telemetry/live-kill", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        targetType: "USER",
        targetId: targetKillId,
        reason: "SUPREME_ADMIN_OVERRIDE"
      })
    });
    
    if (res.ok) {
      setLogs(prev => [{
        id: "KILL_" + Date.now(),
        time: new Date().toISOString().split("T")[1].substring(0, 8),
        action: "LIVE_KILL_EXECUTE",
        target: targetKillId,
        status: "TERMINATED"
      }, ...prev]);
      setTargetKillId("");
      alert("XCU MoQ Ejection Berhasil. Sesi Dihanguskan.");
    } else {
      alert("Akses Ditolak: Quantum Jurisdiction");
    }
  };

  return (
    <div className="min-h-screen bg-[#050914] text-gray-200 font-sans selection:bg-blue-500/30 overflow-hidden relative">
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes shake {
          10%, 90% { transform: translate3d(-1px, 0, 0); }
          20%, 80% { transform: translate3d(2px, 0, 0); }
          30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
          40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        .matrix-bg {
          background-image: 
            linear-gradient(rgba(11, 92, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(37, 211, 102, 0.05) 1px, transparent 1px);
          background-size: 30px 30px;
        }
      `}} />

      {/* Decorative Grid */}
      <div className="absolute inset-0 matrix-bg pointer-events-none z-0"></div>

      <div className="relative z-10 p-6 md:p-10 max-w-7xl mx-auto flex flex-col gap-8 h-screen">
        
        {/* HEADER */}
        <header className="flex justify-between items-center border-b border-white/10 pb-6">
          <div>
            <h1 className="text-3xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-[#25D366] via-[#0b5cff] to-[#ff0080]">
              PANOPTICON OMNISCIENT
            </h1>
            <p className="text-sm font-mono text-blue-400/80 uppercase tracking-widest mt-1">
              Supreme Admin XCU • Level 1 Akses Absolut
            </p>
          </div>
          <div className="flex gap-4 items-center">
            <div className="px-4 py-2 rounded-lg bg-green-500/10 border border-green-500/30 flex items-center gap-2 shadow-[0_0_15px_rgba(37,211,102,0.2)]">
              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
              <span className="font-mono text-green-400 text-sm font-bold">CLUSTER STABLE</span>
            </div>
            <a href="/supreme-admin" className="px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-sm font-bold transition-all">
              Tutup Dasbor
            </a>
          </div>
        </header>

        {/* TOP METRICS */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-black/40 backdrop-blur-xl border border-white/5 rounded-2xl p-6 relative overflow-hidden group">
            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <p className="text-sm font-mono text-gray-500 uppercase">XCU Active MoC Streams</p>
            <p className="text-5xl font-black mt-2 text-white font-mono tracking-tighter">
              {activeConnections.toLocaleString()}
            </p>
          </div>
          <div className="bg-black/40 backdrop-blur-xl border border-white/5 rounded-2xl p-6 relative overflow-hidden group">
            <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <p className="text-sm font-mono text-gray-500 uppercase">Global Bandwidth (Gbps)</p>
            <p className="text-5xl font-black mt-2 text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500 font-mono tracking-tighter">
              {bandwidth.toFixed(2)}
            </p>
          </div>
          <div className="bg-black/40 backdrop-blur-xl border border-red-500/20 rounded-2xl p-6 relative shadow-[0_0_30px_rgba(255,0,0,0.1)]">
            <p className="text-sm font-bold text-red-500 uppercase mb-4 flex items-center gap-2">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L1 21h22M12 6l7.5 13h-15M11 10h2v5h-2M11 16h2v2h-2"/></svg>
              GUILLOTINE PANEL
            </p>
            <div className="flex gap-2">
              <input 
                type="text" 
                value={targetKillId}
                onChange={(e) => setTargetKillId(e.target.value)}
                placeholder="Target ID (e.g. tsm@pc24.id)" 
                className="w-full bg-black/50 border border-red-500/30 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-red-500 text-white placeholder-gray-600"
              />
              <button 
                onClick={executeLiveKill}
                className="bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-lg font-bold text-sm tracking-widest shadow-[0_0_15px_rgba(255,0,0,0.4)] transition-all hover:scale-105 active:scale-95"
              >
                KILL
              </button>
            </div>
          </div>
        </div>

        {/* VISUALIZATION & LOGS */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
          
          {/* Waveform Canvas */}
          <div className="lg:col-span-2 bg-black/40 backdrop-blur-xl border border-white/5 rounded-2xl relative overflow-hidden flex flex-col">
            <div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/40">
              <p className="text-xs font-mono text-blue-400">LIVE XCU eBPF TELEMETRY (ZOOM x WA MULTIPLEXING)</p>
              <div className="flex gap-2">
                <span className="w-2 h-2 rounded-full bg-blue-500"></span>
                <span className="w-2 h-2 rounded-full bg-green-500"></span>
              </div>
            </div>
            <div className="flex-1 relative">
              <canvas ref={canvasRef} className="absolute inset-0 w-full h-full opacity-80 mix-blend-screen"></canvas>
            </div>
          </div>

          {/* Hacker Log Stream */}
          <div className="bg-black/60 backdrop-blur-xl border border-white/5 rounded-2xl flex flex-col overflow-hidden relative shadow-inner">
            <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-blue-500/10 to-transparent z-10 pointer-events-none"></div>
            <div className="p-4 border-b border-white/5 bg-[#0a0a0a]">
              <p className="text-xs font-mono text-gray-400 flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-red-500 animate-ping"></span>
                QUANTUM TRACE LOGS
              </p>
            </div>
            <div className="flex-1 overflow-y-auto p-4 font-mono text-xs flex flex-col gap-1">
              {logs.map((log, i) => (
                <div key={log.id + i} className="flex gap-3 hover:bg-white/5 px-2 py-1 rounded transition-colors group">
                  <span className="text-gray-600">[{log.time}]</span>
                  <span className={log.status === 'TERMINATED' ? 'text-red-500 font-bold' : log.status === 'WARN' ? 'text-yellow-500' : 'text-green-400'}>
                    {log.action}
                  </span>
                  <span className="text-blue-300 ml-auto opacity-70 group-hover:opacity-100">{log.target}</span>
                </div>
              ))}
            </div>
          </div>

        </div>

      </div>
    </div>
  );
}
