'use client';

import { useState, useEffect, useRef } from 'react';
import { Pixelify_Sans } from 'next/font/google';

const pixelify = Pixelify_Sans({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
});

// ==========================================
// A. KOMPONEN LOGO PI4WD ROVER
// ==========================================
const PiRoverLogo = ({ scale = 1 }: { scale?: number }) => {
  return (
    <div className="flex flex-col items-center select-none" style={{ transform: `scale(${scale})` }}>
      <div className="flex items-center gap-2 font-extrabold text-3xl md:text-4xl tracking-widest">
        <div className="w-5 h-5 md:w-6 md:h-6 border-2 border-emerald-500 bg-emerald-100 rounded-sm -rotate-45 shadow-sm"></div>
        <span className="text-red-600 relative -top-0.5">PI4</span>
        <span className="text-slate-900">WD ROVER</span>
        <div className="w-5 h-5 md:w-6 md:h-6 border-2 border-emerald-500 bg-emerald-100 rounded-sm rotate-45 shadow-sm"></div>
      </div>
    </div>
  );
};

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const RECORD_INTERVAL_MS = 50;
const DIRECTION_BRAKE_MS = 600;
const MAX_STEP_TIMEOUT_MS = 15000;
const LATENCY_COMPENSATION_TICKS = 3;

type MotionType = 'FORWARD' | 'REVERSE' | 'TURN_LEFT' | 'TURN_RIGHT' | 'STOP';
type TrajectoryStep = { x: number; y: number; target_ticks_l: number; target_ticks_r: number; motion?: MotionType; };

export default function RobotDashboard() {
  const PI_IP = '192.168.0.105';
  const streamUrl = `http://${PI_IP}:8080/stream`;

  const [isLoading, setIsLoading] = useState(true);
  const [controlMode, setControlMode] = useState<'pc-mobile' | 'gamepad'>('pc-mobile');
  const [isFullscreen, setIsFullscreen] = useState(false);
  
  const [gpVisuals, setGpVisuals] = useState({ lt: 0, rt: 0, steer: 0, btnA: false, btnB: false, btnX: false, btnY: false });
  
  const containerRef = useRef<HTMLDivElement>(null);

  const currentTicksRef = useRef({ l: 0, r: 0 });
  const lastRecordedTicksRef = useRef({ l: 0, r: 0 });
  const activeMotionRef = useRef<MotionType>('STOP');
  const lastCommandRef = useRef({ x: 0, y: 0 });
  
  const isRecordingRef = useRef(false);
  const isPlayingRef = useRef(false);
  const isSavingRef = useRef(false);
  const trajectoryRef = useRef<TrajectoryStep[]>([]);
  const prevBtnsRef = useRef({ A: false, B: false, Y: false, X: false });
  const wsRef = useRef<WebSocket | null>(null);
  
  const keysRef = useRef({ up: false, down: false, left: false, right: false });

  const sendCommand = (x: number, y: number) => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify({ x, y }));
    }
  };

  const stopRobot = () => { sendCommand(0, 0); };

  const getMotionType = (x: number, y: number): MotionType => {
    const DEADZONE = 0.10;
    if (Math.abs(x) <= DEADZONE && Math.abs(y) <= DEADZONE) return 'STOP';
    if (Math.abs(y) > DEADZONE) return y > 0 ? 'FORWARD' : 'REVERSE';
    return x > 0 ? 'TURN_RIGHT' : 'TURN_LEFT';
  };

  const executePlayback = async (reverse: boolean = false) => {
    if (isPlayingRef.current || isSavingRef.current) return;
    isPlayingRef.current = true;
    try {
      const res = await fetch(`/api/trajectory?_t=${Date.now()}`, { method: 'GET', cache: 'no-store' });
      if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
      const data = (await res.json()) as TrajectoryStep[];
      if (!Array.isArray(data) || data.length === 0) { alert('Data rute kosong!'); return; }
      const routeData = reverse ? [...data].reverse() : data;
      let lastActiveMotion: MotionType = 'STOP'; 
      for (let i = 0; i < routeData.length; i++) {
        if (!isPlayingRef.current) break;
        const step = routeData[i];
        const targetX = reverse ? -step.x : step.x;
        const targetY = reverse ? -step.y : step.y;
        const currentMotion = getMotionType(targetX, targetY);
        if (currentMotion !== 'STOP' && lastActiveMotion !== 'STOP') {
          if ((lastActiveMotion === 'FORWARD' && currentMotion === 'REVERSE') || (lastActiveMotion === 'REVERSE' && currentMotion === 'FORWARD')) {
            stopRobot(); await sleep(DIRECTION_BRAKE_MS);
          }
        }
        if (currentMotion !== 'STOP') lastActiveMotion = currentMotion;
        sendCommand(targetX, targetY);
        const startL = currentTicksRef.current.l; const startR = currentTicksRef.current.r;
        const targetL = Math.max(0, Number(step.target_ticks_l || 0)); const targetR = Math.max(0, Number(step.target_ticks_r || 0));
        const compTargetL = Math.max(0, targetL - LATENCY_COMPENSATION_TICKS); const compTargetR = Math.max(0, targetR - LATENCY_COMPENSATION_TICKS);
        if (targetL === 0 && targetR === 0) { await sleep(RECORD_INTERVAL_MS); continue; }
        const stepStartTime = Date.now();
        while (isPlayingRef.current) {
          const currentDeltaL = Math.abs(currentTicksRef.current.l - startL); const currentDeltaR = Math.abs(currentTicksRef.current.r - startR);
          let stepFinished = false;
          if (targetL > targetR) stepFinished = currentDeltaL >= compTargetL;
          else if (targetR > targetL) stepFinished = currentDeltaR >= compTargetR;
          else stepFinished = currentDeltaL >= compTargetL || currentDeltaR >= compTargetR;
          if (stepFinished || (Date.now() - stepStartTime > MAX_STEP_TIMEOUT_MS)) break;
          await sleep(10);
        }
      }
    } catch (error) { console.error('Playback Error:', error);
    } finally { stopRobot(); isPlayingRef.current = false; }
  };

  const handleAction = (action: 'RECORD' | 'SAVE' | 'PLAY_FWD' | 'PLAY_REV') => {
    if (action === 'PLAY_FWD' || action === 'PLAY_REV') {
        if (isPlayingRef.current) { isPlayingRef.current = false; stopRobot(); }
        else if (!isSavingRef.current && !isRecordingRef.current) executePlayback(action === 'PLAY_REV');
    } else if (action === 'RECORD') {
        if (!isRecordingRef.current && !isPlayingRef.current && !isSavingRef.current) {
            isRecordingRef.current = true; trajectoryRef.current = [];
            lastRecordedTicksRef.current = { l: currentTicksRef.current.l, r: currentTicksRef.current.r };
            activeMotionRef.current = 'STOP'; lastCommandRef.current = { x: 0, y: 0 }; stopRobot();
        }
    } else if (action === 'SAVE') {
        if (isRecordingRef.current) { isRecordingRef.current = false; }
    }
  };

  useEffect(() => {
    const loadingTimer = setTimeout(() => setIsLoading(false), 2000);

    const ws = new WebSocket(`ws://${PI_IP}:8765`);
    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        if (data.ticks_l !== undefined && data.ticks_r !== undefined) {
          currentTicksRef.current = { l: Number(data.ticks_l), r: Number(data.ticks_r) };
        }
      } catch (error) {}
    };
    wsRef.current = ws;

    const handleKeyDown = (e: KeyboardEvent) => {
      const key = e.key.toLowerCase();
      if (key === 'w' || key === 'arrowup') keysRef.current.up = true;
      if (key === 's' || key === 'arrowdown') keysRef.current.down = true;
      if (key === 'a' || key === 'arrowleft') keysRef.current.left = true;
      if (key === 'd' || key === 'arrowright') keysRef.current.right = true;
      
      if (e.repeat) return; 
      if (key === 'v') handleAction('RECORD');
      if (key === 'b') handleAction('SAVE');
      if (key === 'n') handleAction('PLAY_FWD');
      if (key === 'm') handleAction('PLAY_REV');
    };
    const handleKeyUp = (e: KeyboardEvent) => {
      const key = e.key.toLowerCase();
      if (key === 'w' || key === 'arrowup') keysRef.current.up = false;
      if (key === 's' || key === 'arrowdown') keysRef.current.down = false;
      if (key === 'a' || key === 'arrowleft') keysRef.current.left = false;
      if (key === 'd' || key === 'arrowright') keysRef.current.right = false;
    };
    
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleFullscreenChange);

    const interval = setInterval(() => {
      let currentX = 0; let currentY = 0;
      let gpA = false, gpB = false, gpY = false, gpX = false;
      let gpLT = 0, gpRT = 0, gpSteer = 0;

      if (controlMode === 'gamepad' && typeof navigator !== 'undefined' && navigator.getGamepads) {
        const gamepads = navigator.getGamepads();
        let activeGp: Gamepad | null = null;
        for (let i = 0; i < gamepads.length; i++) { if (gamepads[i]) { activeGp = gamepads[i]; break; } }
        
        if (activeGp) {
          gpSteer = activeGp.axes[0] || 0; 
          gpRT = activeGp.buttons[7]?.value || 0; 
          gpLT = activeGp.buttons[6]?.value || 0; 
          
          currentX = Math.abs(gpSteer) > 0.15 ? Number(gpSteer.toFixed(2)) : 0;
          currentY = Number((gpRT - gpLT).toFixed(2));

          gpA = activeGp.buttons[0]?.pressed || false;
          gpB = activeGp.buttons[1]?.pressed || false;
          gpX = activeGp.buttons[2]?.pressed || false;
          gpY = activeGp.buttons[3]?.pressed || false;
          
          setGpVisuals({ lt: gpLT, rt: gpRT, steer: gpSteer, btnA: gpA, btnB: gpB, btnX: gpX, btnY: gpY });
        }
      } else if (controlMode === 'pc-mobile') {
        currentY = (keysRef.current.down ? 1 : 0) - (keysRef.current.up ? -1 : 0); 
        currentX = (keysRef.current.right ? 1 : 0) - (keysRef.current.left ? 1 : 0); 
      }

      const currentMotion = getMotionType(currentX, currentY);

      if (gpB && !prevBtnsRef.current.B) handleAction('RECORD');
      if (gpY && !prevBtnsRef.current.Y) handleAction('SAVE');
      if (gpA && !prevBtnsRef.current.A) handleAction('PLAY_FWD');
      if (gpX && !prevBtnsRef.current.X) handleAction('PLAY_REV');
      prevBtnsRef.current = { A: gpA, B: gpB, Y: gpY, X: gpX };

      if (isPlayingRef.current || isSavingRef.current) return;
      
      if (isRecordingRef.current) {
        if (currentMotion !== activeMotionRef.current) {
          const deltaL = Math.abs(currentTicksRef.current.l - lastRecordedTicksRef.current.l); 
          const deltaR = Math.abs(currentTicksRef.current.r - lastRecordedTicksRef.current.r);
          if ((deltaL > 0 || deltaR > 0) && activeMotionRef.current !== 'STOP') {
            trajectoryRef.current.push({ x: lastCommandRef.current.x, y: lastCommandRef.current.y, target_ticks_l: deltaL, target_ticks_r: deltaR, motion: activeMotionRef.current });
          }
          lastRecordedTicksRef.current = { l: currentTicksRef.current.l, r: currentTicksRef.current.r }; 
          activeMotionRef.current = currentMotion;
        }
        if (currentMotion !== 'STOP') lastCommandRef.current = { x: currentX, y: currentY };
      }
      sendCommand(currentX, currentY);
    }, RECORD_INTERVAL_MS);

    return () => {
      clearTimeout(loadingTimer); 
      clearInterval(interval);
      window.removeEventListener('keydown', handleKeyDown); 
      window.removeEventListener('keyup', handleKeyUp);
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      if (wsRef.current) wsRef.current.close();
    };
  }, [controlMode, PI_IP]);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) { 
      if (containerRef.current) {
        containerRef.current.requestFullscreen().catch((err) => console.log(err)); 
      }
    } else { 
      if (document.exitFullscreen) {
        document.exitFullscreen(); 
      }
    }
  };

  return (
    <main 
      onContextMenu={(e) => e.preventDefault()}
      className={`min-h-screen bg-emerald-50 flex flex-col select-none touch-none overflow-x-hidden ${pixelify.className}`} 
      style={{ WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }}
    >
      {/* LOADING SCREEN */}
      <div className={`fixed inset-0 z-[200] bg-emerald-50 flex flex-col items-center justify-center transition-opacity duration-1000 ease-in-out ${isLoading ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className="scale-125 md:scale-150"><PiRoverLogo /></div>
        <div className="mt-16 flex items-center gap-3 text-slate-500 text-sm tracking-widest uppercase">
          <div className="w-3 h-3 rounded-sm bg-emerald-500 animate-pulse"></div>
          Menghubungkan ke Robot...
        </div>
      </div>

      {/* HEADER LOGO */}
      <header className="w-full flex justify-center pt-6 pb-2 md:pt-8 md:pb-4 bg-emerald-50 relative z-0">
        <PiRoverLogo />
      </header>

      {/* MAIN CAMERA FEED & OVERLAY LAYOUT - DITENGAHKAN DAN DIPERBESAR */}
      <div className="w-full px-4 md:px-8 flex-1 flex flex-col items-center justify-center relative z-10">
        <div 
          ref={containerRef}
          className={`relative bg-[#0a0a8a] overflow-hidden shadow-2xl transition-all duration-300 ${
            isFullscreen 
              ? 'fixed inset-0 z-[150] bg-black border-0 rounded-none w-full h-full' 
              : 'w-full max-w-7xl aspect-[4/3] md:aspect-video rounded-xl md:rounded-2xl border-4 border-slate-900'
          }`}
        >
          
          {/* Stream Kamera */}
          <img src={streamUrl} alt="Robot Feed" className="absolute inset-0 w-full h-full object-cover" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
          
          {/* Indikator Status Perekaman */}
          {(isRecordingRef.current || isPlayingRef.current) && (
            <div className="absolute top-16 left-1/2 -translate-x-1/2 z-20 flex gap-2">
              {isRecordingRef.current && <span className="bg-red-600 text-white px-4 py-1.5 rounded-sm text-sm tracking-wider animate-pulse shadow-lg border-2 border-red-800">MEREKAM</span>}
              {isPlayingRef.current && <span className="bg-emerald-600 text-white px-4 py-1.5 rounded-sm text-sm tracking-wider animate-pulse shadow-lg border-2 border-emerald-800">MEMUTAR RUTE</span>}
            </div>
          )}

          {/* OVERLAY: TOP BAR */}
          <div className="absolute top-4 left-0 right-0 flex justify-center z-20 pointer-events-none">
            <div className="flex gap-2 pointer-events-auto shadow-lg bg-slate-900/70 p-1.5 border-2 border-slate-700/50 backdrop-blur-sm rounded-md">
              <button 
                onClick={() => setControlMode('pc-mobile')} 
                className={`px-4 py-1.5 rounded-sm text-sm tracking-wider transition-all ${controlMode === 'pc-mobile' ? 'bg-[#b6e9c9] text-slate-900' : 'bg-transparent text-white hover:bg-white/20'}`}
              >
                PC/MOBILE
              </button>
              <button 
                onClick={() => setControlMode('gamepad')} 
                className={`px-4 py-1.5 rounded-sm text-sm tracking-wider transition-all ${controlMode === 'gamepad' ? 'bg-[#b6e9c9] text-slate-900' : 'bg-transparent text-white hover:bg-white/20'}`}
              >
                GAMEPAD
              </button>
            </div>
          </div>

          {/* OVERLAY: FULLSCREEN TOGGLE */}
          <button onClick={toggleFullscreen} className="absolute top-5 right-5 z-20 flex items-center gap-2 text-white text-sm tracking-widest drop-shadow-md hover:text-emerald-300 pointer-events-auto bg-slate-900/50 px-3 py-1.5 rounded-sm border border-white/20">
            {isFullscreen ? 'KELUAR' : 'FULLSCREEN'}
          </button>

          {/* OVERLAY: BOTTOM LEFT (MOVEMENT CONTROLS) */}
          <div className="absolute bottom-6 left-6 md:bottom-8 md:left-8 z-20 pointer-events-auto">
            {controlMode === 'pc-mobile' ? (
              <div className="flex flex-col items-center gap-2">
                <button 
                  onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); keysRef.current.up = true; }} 
                  onPointerUp={(e) => { e.currentTarget.releasePointerCapture(e.pointerId); keysRef.current.up = false; }} 
                  className="w-14 h-14 md:w-16 md:h-16 bg-[#a2dfb4] active:bg-[#8bc99d] text-slate-900 text-3xl rounded-sm shadow-[4px_4px_0_#75a884] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all border-2 border-slate-900 flex items-center justify-center pb-1"
                >
                  W
                </button>
                <div className="flex gap-2">
                  <button 
                    onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); keysRef.current.left = true; }} 
                    onPointerUp={(e) => { e.currentTarget.releasePointerCapture(e.pointerId); keysRef.current.left = false; }} 
                    className="w-14 h-14 md:w-16 md:h-16 bg-[#a2dfb4] active:bg-[#8bc99d] text-slate-900 text-3xl rounded-sm shadow-[4px_4px_0_#75a884] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all border-2 border-slate-900 flex items-center justify-center pb-1"
                  >
                    A
                  </button>
                  <button 
                    onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); keysRef.current.down = true; }} 
                    onPointerUp={(e) => { e.currentTarget.releasePointerCapture(e.pointerId); keysRef.current.down = false; }} 
                    className="w-14 h-14 md:w-16 md:h-16 bg-[#a2dfb4] active:bg-[#8bc99d] text-slate-900 text-3xl rounded-sm shadow-[4px_4px_0_#75a884] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all border-2 border-slate-900 flex items-center justify-center pb-1"
                  >
                    S
                  </button>
                  <button 
                    onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); keysRef.current.right = true; }} 
                    onPointerUp={(e) => { e.currentTarget.releasePointerCapture(e.pointerId); keysRef.current.right = false; }} 
                    className="w-14 h-14 md:w-16 md:h-16 bg-[#a2dfb4] active:bg-[#8bc99d] text-slate-900 text-3xl rounded-sm shadow-[4px_4px_0_#75a884] active:shadow-none active:translate-x-1 active:translate-y-1 transition-all border-2 border-slate-900 flex items-center justify-center pb-1"
                  >
                    D
                  </button>
                </div>
              </div>
            ) : (
              <div className="flex flex-col gap-2 pointer-events-none">
                <div className="flex gap-2">
                  <div className={`w-16 h-10 rounded-sm flex items-center justify-center text-xl border-2 transition-colors ${gpVisuals.lt > 0.1 ? 'bg-white text-slate-900 border-slate-900' : 'bg-slate-900/50 text-white border-white/50 backdrop-blur-sm'}`}>LT</div>
                  <div className={`w-16 h-10 rounded-sm flex items-center justify-center text-xl border-2 transition-colors ${gpVisuals.rt > 0.1 ? 'bg-white text-slate-900 border-slate-900' : 'bg-slate-900/50 text-white border-white/50 backdrop-blur-sm'}`}>RT</div>
                </div>
                <div className="w-full bg-slate-900/80 rounded-sm p-2 h-14 flex items-center justify-center relative shadow-lg border-2 border-white/20">
                   <div className="absolute left-3 text-white/50">L</div>
                   <div className="w-8 h-8 bg-red-500 rounded-sm transition-transform border-2 border-slate-900" style={{ transform: `translateX(${gpVisuals.steer * 40}px)` }}></div>
                   <div className="absolute right-3 text-white/50">R</div>
                </div>
              </div>
            )}
          </div>

          {/* OVERLAY: BOTTOM RIGHT (ACTION CONTROLS) */}
          <div className="absolute bottom-6 right-6 md:bottom-8 md:right-8 z-20 flex gap-2 md:gap-3 pointer-events-auto">
            {[
              { action: 'RECORD', pc: 'V', gp: 'B', color: 'bg-[#f87171] shadow-[4px_4px_0_#b91c1c]', activeColor: 'active:bg-red-500', gpState: gpVisuals.btnB },
              { action: 'SAVE', pc: 'B', gp: 'Y', color: 'bg-[#fbbf24] shadow-[4px_4px_0_#d97706]', activeColor: 'active:bg-amber-500', gpState: gpVisuals.btnY },
              { action: 'PLAY_FWD', pc: 'N', gp: 'A', color: 'bg-[#34d399] shadow-[4px_4px_0_#047857]', activeColor: 'active:bg-emerald-500', gpState: gpVisuals.btnA },
              { action: 'PLAY_REV', pc: 'M', gp: 'X', color: 'bg-[#60a5fa] shadow-[4px_4px_0_#1d4ed8]', activeColor: 'active:bg-blue-500', gpState: gpVisuals.btnX }
            ].map((btn) => (
              <div key={btn.action} className="flex flex-col items-center gap-2">
                <span className="text-[10px] md:text-xs text-white tracking-widest bg-slate-900/50 px-1.5 py-0.5 rounded-sm">
                  {btn.action === 'PLAY_FWD' ? 'PLAY' : btn.action === 'PLAY_REV' ? 'R-PLAY' : btn.action}
                </span>
                <button 
                  onClick={() => handleAction(btn.action as any)}
                  className={`w-12 h-12 md:w-14 md:h-14 ${btn.color} ${btn.activeColor} ${controlMode === 'gamepad' && btn.gpState ? 'translate-x-1 translate-y-1 shadow-none brightness-90' : ''} text-slate-900 text-2xl md:text-3xl rounded-sm active:shadow-none active:translate-x-1 active:translate-y-1 transition-all border-2 border-slate-900 flex items-center justify-center pb-1`}
                >
                  {controlMode === 'pc-mobile' ? btn.pc : btn.gp}
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* FOOTER TEXT */}
      <footer className="w-full py-6 md:py-8 flex flex-col items-center justify-center text-center px-4 relative z-0">
        <h3 className="text-slate-600 tracking-widest text-xs md:text-sm uppercase mb-1">
          LAB INSTRUMENTASI ELEKTRONIKA & KECERDASAN BUATAN
        </h3>
        <p className="text-slate-600 tracking-widest text-xs md:text-sm uppercase">
          PROGRAM STUDI TEKNIK ELEKTRO
        </p>
      </footer>
    </main>
  );
}