"use client";

import React, { useRef, useState, useEffect, useMemo } from 'react';
import { motion, useSpring, useMotionValue, useTransform, AnimatePresence } from 'framer-motion';

/**
 * VELOCITY NEURAL CORE v12.0
 * Purpose: AI Inference Orchestration & VRAM Management
 * Style: Industrial Hardware / High-Density Dashboard
 */

export default function VelocityNeuralCore() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isClient, setIsClient] = useState(false);
  
  // LOGIC STATES
  const [isQuantized, setIsQuantized] = useState(false);
  const [vramUsage, setVramUsage] = useState(4.2);
  const [tokenRate, setTokenRate] = useState(0);
  const [logs, setLogs] = useState<string[]>(["KERNEL_LOADED", "VRAM_INITIALIZED", "READY"]);

  // 1. KINETIC ENGINE (GPU ACCELERATED)
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const spring = { stiffness: 120, damping: 20, mass: 1.5 };
  
  const sX = useSpring(mouseX, spring);
  const sY = useSpring(mouseY, spring);

  const rotateX = useTransform(sY, [-400, 400], [10, -10]);
  const rotateY = useTransform(sX, [-400, 400], [-10, 10]);

  // Optical Refraction
  const glareX = useTransform(sX, [-200, 200], [0, 100]);
  const glareY = useTransform(sY, [-200, 200], [0, 100]);
  const dynamicGlare = useTransform([glareX, glareY], ([gx, gy]) => 
    `radial-gradient(600px circle at ${gx}% ${gy}%, rgba(255,255,255,0.06), transparent 40%)`
  );

  // 2. SIMULATED NEURAL TELEMETRY
  useEffect(() => {
    setIsClient(true);
    const interval = setInterval(() => {
      setTokenRate(prev => {
        const base = isQuantized ? 120 : 45;
        return Math.floor(base + Math.random() * 20);
      });
      setVramUsage(prev => {
        const target = isQuantized ? 2.8 : 8.4;
        return prev + (target - prev) * 0.1;
      });
    }, 800);
    return () => clearInterval(interval);
  }, [isQuantized]);

  const toggleQuantization = () => {
    const next = !isQuantized;
    setIsQuantized(next);
    const newLog = next ? "QUANTIZATION_ACTIVE: 4-BIT_MODE" : "FP16_PRECISION_RESTORED";
    setLogs(prev => [newLog, ...prev].slice(0, 3));
  };

  if (!isClient) return null;

  return (
    <div className="flex items-center justify-center min-h-[700px] w-full bg-transparent font-mono selection:bg-cyan-500/30">
      
      <motion.div
        ref={containerRef}
        onMouseMove={(e) => {
          const rect = containerRef.current?.getBoundingClientRect();
          if (rect) {
            mouseX.set(e.clientX - (rect.left + rect.width / 2));
            mouseY.set(e.clientY - (rect.top + rect.height / 2));
          }
        }}
        onMouseLeave={() => { mouseX.set(0); mouseY.set(0); }}
        style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
        className="relative group cursor-crosshair"
      >
        
        {/* ATMOSPHERIC DEPTH */}
        <motion.div 
          animate={{ opacity: isQuantized ? 0.4 : 0.2, scale: isQuantized ? 1.2 : 1 }}
          className={`absolute -inset-40 blur-[140px] rounded-full -z-10 transition-colors duration-1000 ${
            isQuantized ? 'bg-cyan-500/20' : 'bg-purple-600/10'
          }`} 
        />

        {/* --- THE CHASSIS: NEURAL ENGINE --- */}
        <div className="relative z-20 w-[640px] h-[260px] mx-auto rounded-[1.5rem] border border-white/10 bg-[#080808] flex flex-col shadow-[0_0_100px_rgba(0,0,0,1)] overflow-hidden">
          
          {/* TOP RAIL: Hardware Meta */}
          <div className="h-12 border-b border-white/5 flex items-center px-6 justify-between bg-white/[0.01]">
            <div className="flex items-center gap-3">
              <div className="w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_8px_#06b6d4]" />
              <span className="text-[10px] text-white/40 tracking-[0.4em] uppercase font-black">Neural_Core_v12.x</span>
            </div>
            <div className="flex gap-4 text-[9px] text-white/20 uppercase tracking-widest">
              <span>Temp: 44°C</span>
              <span>Fan: 2400RPM</span>
              <span className="text-cyan-500/50">Prec: {isQuantized ? 'INT4' : 'FP16'}</span>
            </div>
          </div>

          <div className="flex-1 flex p-8 gap-10">
            {/* LEFT: LIVE METRICS */}
            <div className="w-1/2 flex flex-col justify-between border-r border-white/5 pr-10">
              <div className="space-y-6">
                <div className="space-y-2">
                  <div className="flex justify-between items-end">
                    <span className="text-[10px] text-white/30 uppercase">Inference_Speed</span>
                    <span className="text-cyan-400 text-xl tabular-nums">{tokenRate} <span className="text-[10px] opacity-40">T/s</span></span>
                  </div>
                  <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                    <motion.div 
                      animate={{ width: `${(tokenRate / 150) * 100}%` }}
                      className="h-full bg-cyan-500 shadow-[0_0_10px_#06b6d4]" 
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between items-end">
                    <span className="text-[10px] text-white/30 uppercase">VRAM_Allocation</span>
                    <span className="text-white/80 text-xl tabular-nums">{vramUsage.toFixed(1)} <span className="text-[10px] opacity-40">GB</span></span>
                  </div>
                  <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                    <motion.div 
                      animate={{ width: `${(vramUsage / 12) * 100}%` }}
                      className="h-full bg-white/40" 
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* RIGHT: CONTROL & LOGS */}
            <div className="flex-1 flex flex-col justify-between">
              <div className="bg-black/40 rounded-lg p-4 border border-white/5 flex-1 mb-6 overflow-hidden">
                <div className="text-[8px] text-white/20 uppercase mb-3 tracking-widest border-b border-white/5 pb-2">Event_Log</div>
                <div className="space-y-2">
                  {logs.map((log, i) => (
                    <motion.div initial={{ opacity: 0, x: -5 }} animate={{ opacity: 1, x: 0 }} key={i} className="text-[9px] font-mono flex gap-3">
                      <span className="text-cyan-500/50">[{new Date().toLocaleTimeString()}]</span>
                      <span className="text-white/60">{log}</span>
                    </motion.div>
                  ))}
                </div>
              </div>

              <div className="flex gap-4">
                <button 
                  onClick={toggleQuantization}
                  className={`flex-1 h-12 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${
                    isQuantized ? 'bg-cyan-600 text-black' : 'bg-white/5 text-white hover:bg-white/10 border border-white/10'
                  }`}
                >
                  {isQuantized ? 'Disable Quant' : 'Quantize (4-bit)'}
                </button>
              </div>
            </div>
          </div>

          <motion.div className="absolute inset-0 z-10 pointer-events-none" style={{ background: dynamicGlare }} />
        </div>

        {/* --- THE MODULE: VRAM_SHIFTER --- */}
        <AnimatePresence>
          {isQuantized && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8, x: -100 }}
              animate={{ opacity: 1, scale: 1, x: 400, y: -80 }}
              exit={{ opacity: 0, scale: 0.8, x: 0 }}
              style={{ translateZ: 120 }}
              className="absolute top-0 left-0 w-44 h-28 rounded-2xl bg-[#0a0a0a] border border-cyan-500/40 shadow-2xl z-40 p-5 flex flex-col justify-between"
            >
              <div className="flex justify-between items-start">
                <span className="text-[9px] text-cyan-500 font-bold uppercase">Buffer_Shift</span>
                <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-ping" />
              </div>
              
              <div className="space-y-1">
                <div className="flex justify-between text-[8px] text-white/40 uppercase">
                  <span>Compression</span>
                  <span>74.2%</span>
                </div>
                <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                   <motion.div animate={{ x: ["-100%", "100%"] }} transition={{ repeat: Infinity, duration: 1.5, ease: "linear" }} className="w-1/2 h-full bg-cyan-500" />
                </div>
              </div>

              <div className="text-[8px] text-white/20 uppercase tracking-tighter">Offloading to L3 Cache...</div>
            </motion.div>
          )}
        </AnimatePresence>

      </motion.div>
    </div>
  );
}