"use client"; import { useEffect, useState, useRef } from "react"; import { useDictionary } from "@/lib/dictionary"; import { useOmni } from "@/components/OmniSyncProvider"; import Link from "next/link"; import { useRouter } from "next/navigation"; interface NeuralSubject { id: string; name: string; attentionScore: number; cognitiveLoad: number; alphaWave: number; status: "FOCUSED" | "DISTRACTED" | "ZONED_OUT"; } export default function TelepathyMatrix() { const { t } = useDictionary(); const { theme, locale } = useOmni(); const router = useRouter(); const [isCheckingAuth, setIsCheckingAuth] = useState(true); // ALL HOOKS MUST BE DECLARED BEFORE ANY CONDITIONAL RETURN (React Rules of Hooks) const [subjects, setSubjects] = useState([ { id: "xcu_subj_01", name: "Commander Alpha", attentionScore: 95, cognitiveLoad: 80, alphaWave: 0.8, status: "FOCUSED" }, { id: "xcu_subj_02", name: "Operative Bravo", attentionScore: 88, cognitiveLoad: 60, alphaWave: 0.6, status: "FOCUSED" }, { id: "xcu_subj_03", name: "Spectre 7", attentionScore: 45, cognitiveLoad: 30, alphaWave: 0.4, status: "DISTRACTED" }, { id: "xcu_subj_04", name: "Agent Echo", attentionScore: 12, cognitiveLoad: 10, alphaWave: 0.1, status: "ZONED_OUT" }, { id: "xcu_subj_05", name: "Node Delta", attentionScore: 78, cognitiveLoad: 70, alphaWave: 0.7, status: "FOCUSED" }, { id: "xcu_subj_06", name: "Vanguard 1", attentionScore: 25, cognitiveLoad: 15, alphaWave: 0.2, status: "ZONED_OUT" }, ]); const canvasRef = useRef(null); 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]); // Brainwave Visualization Effect - MUST be before conditional return (React Rules of Hooks) useEffect(() => { if (isCheckingAuth) return; 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.parentElement?.clientWidth || 800; canvas.height = 150; }; 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 3 Brainwaves (Alpha, Beta, Gamma) const waves = [ { color: "rgba(11, 92, 255, 0.8)", freq: 0.02, amp: 20, speed: 1.5 }, // Alpha (Blue) { color: "rgba(37, 211, 102, 0.8)", freq: 0.05, amp: 10, speed: 2.5 }, // Beta (Green) { color: "rgba(255, 0, 128, 0.8)", freq: 0.1, amp: 5, speed: 4.0 } // Gamma (Magenta) ]; waves.forEach((wave, i) => { ctx.beginPath(); ctx.moveTo(0, centerY); for (let x = 0; x < width; x++) { const y = Math.sin(x * wave.freq + time * wave.speed + i) * wave.amp + Math.sin(x * wave.freq * 0.5 + time) * (wave.amp * 0.5); ctx.lineTo(x, centerY + y); } ctx.strokeStyle = wave.color; ctx.lineWidth = 2; ctx.stroke(); }); // Draw grid overlay ctx.strokeStyle = "rgba(255,255,255,0.05)"; ctx.lineWidth = 1; for (let x = 0; x < width; x += 30) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } for (let y = 0; y < height; y += 30) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); } animationFrameId = requestAnimationFrame(draw); }; draw(); return () => { window.removeEventListener("resize", resize); cancelAnimationFrame(animationFrameId); }; }, [isCheckingAuth]); // Simulate real-time neural data updates - MUST be before conditional return useEffect(() => { if (isCheckingAuth) return; const interval = setInterval(() => { setSubjects(prev => prev.map(s => { let newScore = s.attentionScore + (Math.random() * 10 - 5); newScore = Math.max(0, Math.min(100, newScore)); let newStatus: "FOCUSED" | "DISTRACTED" | "ZONED_OUT" = "FOCUSED"; if (newScore < 30) newStatus = "ZONED_OUT"; else if (newScore < 60) newStatus = "DISTRACTED"; return { ...s, attentionScore: newScore, cognitiveLoad: Math.max(0, Math.min(100, s.cognitiveLoad + (Math.random() * 6 - 3))), status: newStatus }; })); }, 2000); return () => clearInterval(interval); }, [isCheckingAuth]); if (isCheckingAuth) { return
INITIALIZING SECURE CONNECTION...
; } const sendSensoryPing = (id: string, name: string) => { // Flash the screen to simulate ping const el = document.getElementById(`card-${id}`); if (el) { el.classList.add("ring-4", "ring-[#ff0080]", "ring-opacity-100", "scale-105"); setTimeout(() => el.classList.remove("ring-4", "ring-[#ff0080]", "ring-opacity-100", "scale-105"), 500); } alert(`Sensory Ping (Haptic & Audio) disuntikkan langsung ke korteks partisipan [${name}]`); }; return (