/* eslint-disable */
// [TSM.ID].[11031972] -- All Rights Reserved. Proprietary & Confidential.
import React, { useEffect, useRef, useState, useCallback } from 'react';
import { Socket } from '../lib/zero-socket';

interface QuantumCallProps {
  room: string;
  socket: Socket | null;
  username: string;
  onClose: () => void;
  isAudioOnly?: boolean;
}

export function QuantumP2PCall({ room, socket, username, onClose, isAudioOnly = false }: QuantumCallProps) {
  const localVideoRef = useRef<HTMLVideoElement>(null);
  const remoteVideoRef = useRef<HTMLVideoElement>(null);
  const pcRef = useRef<RTCPeerConnection | null>(null);
  const localStreamRef = useRef<MediaStream | null>(null);
  const remoteStreamRef = useRef<MediaStream | null>(null);
  
  // Audio Analyser Refs
  const audioContextRef = useRef<AudioContext | null>(null);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const dataArrayRef = useRef<Uint8Array | null>(null);
  const animationFrameRef = useRef<number>(0);

  const [isMicOn, setIsMicOn] = useState(true);
  const [isCameraOn, setIsCameraOn] = useState(!isAudioOnly);
  const [connectionState, setConnectionState] = useState<string>('Membuka Terowongan Kuantum...');
  
  // Audio Aura Level (0 to 100)
  const [remoteAudioLevel, setRemoteAudioLevel] = useState<number>(0);
  
  // Zero-UI Cinematic Mode
  const [showControls, setShowControls] = useState(true);
  const idleTimerRef = useRef<NodeJS.Timeout | null>(null);

  // Draggable PiP (Picture in Picture)
  const [pipPos, setPipPos] = useState({ x: window.innerWidth - 220, y: window.innerHeight - 320 });
  const [isDragging, setIsDragging] = useState(false);
  const dragOffset = useRef({ x: 0, y: 0 });

  const resetIdleTimer = useCallback(() => {
    setShowControls(true);
    if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
    idleTimerRef.current = setTimeout(() => setShowControls(false), 3000);
  }, []);

  useEffect(() => {
    window.addEventListener('mousemove', resetIdleTimer);
    resetIdleTimer();
    return () => {
      window.removeEventListener('mousemove', resetIdleTimer);
      if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
    };
  }, [resetIdleTimer]);

  useEffect(() => {
    if (!socket) return;

    // Phase 83: Omni-Relay Inject
    const configuration = {
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
        {
          urls: 'turn:160.187.143.172:3478',
          username: 'xcu ULTRA',
          credential: 'quantum_mesh'
        }
      ]
    };
    
    const pc = new RTCPeerConnection(configuration);
    pcRef.current = pc;

    pc.onicecandidate = (event) => {
      if (event.candidate) {
        socket.emit('quantum_candidate', {
          target: getTargetFromRoom(room),
          sender: username,
          candidate: event.candidate,
          room
        });
      }
    };

    pc.onconnectionstatechange = () => {
      setConnectionState(pc.connectionState);
    };

    pc.ontrack = (event) => {
      if (remoteVideoRef.current && event.streams[0]) {
        remoteStreamRef.current = event.streams[0];
        remoteVideoRef.current.srcObject = event.streams[0];
        setupAudioAnalyser(event.streams[0]);
      }
    };

    navigator.mediaDevices.getUserMedia({
      video: !isAudioOnly ? { width: { ideal: 1280 }, height: { ideal: 720 } } : false,
      audio: true
    }).then((stream) => {
      localStreamRef.current = stream;
      if (localVideoRef.current && !isAudioOnly) {
        localVideoRef.current.srcObject = stream;
      }
      stream.getTracks().forEach((track) => pc.addTrack(track, stream));
      createOffer();
    }).catch(e => {
      console.error("Gagal mengakses media:", e);
      setConnectionState("Akses Kamera/Mic Ditolak!");
    });

    socket.on('quantum_offer_received', async (data: any) => {
      if (data.caller !== username && pcRef.current) {
        await pcRef.current.setRemoteDescription(new RTCSessionDescription(data.sdp));
        const answer = await pcRef.current.createAnswer();
        await pcRef.current.setLocalDescription(answer);
        socket.emit('quantum_answer', {
          target: data.caller,
          responder: username,
          sdp: answer,
          room
        });
      }
    });

    socket.on('quantum_answer_received', async (data: any) => {
      if (data.responder !== username && pcRef.current) {
         await pcRef.current.setRemoteDescription(new RTCSessionDescription(data.sdp));
      }
    });

    socket.on('quantum_candidate_received', async (data: any) => {
      if (data.sender !== username && pcRef.current) {
         try {
           await pcRef.current.addIceCandidate(new RTCIceCandidate(data.candidate));
         } catch(e) { console.error(e); }
      }
    });

    socket.on('quantum_call_ended_broadcast', (data: any) => {
       if (data.sender !== username) {
          handleEndCall();
       }
    });

    return () => {
      socket.off('quantum_offer_received');
      socket.off('quantum_answer_received');
      socket.off('quantum_candidate_received');
      socket.off('quantum_call_ended_broadcast');
      cleanup();
    };
  }, [socket, room]);

  const setupAudioAnalyser = (stream: MediaStream) => {
    try {
      const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
      const analyser = audioCtx.createAnalyser();
      analyser.fftSize = 256;
      const source = audioCtx.createMediaStreamSource(stream);
      source.connect(analyser);
      
      audioContextRef.current = audioCtx;
      analyserRef.current = analyser;
      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);

      const updateAura = () => {
        if (!analyserRef.current || !dataArrayRef.current) return;
        analyserRef.current.getByteFrequencyData(dataArrayRef.current as any);
        
        let sum = 0;
        for (let i = 0; i < dataArrayRef.current.length; i++) {
          sum += dataArrayRef.current[i];
        }
        const average = sum / dataArrayRef.current.length;
        // Normalize 0-100
        const level = Math.min(100, Math.round((average / 255) * 100 * 2)); 
        setRemoteAudioLevel(level);
        
        animationFrameRef.current = requestAnimationFrame(updateAura);
      };
      
      updateAura();
    } catch (e) {
      console.error("Audio Context Error", e);
    }
  };

  const cleanup = () => {
    if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
    if (audioContextRef.current) audioContextRef.current.close();
    if (localStreamRef.current) localStreamRef.current.getTracks().forEach(track => track.stop());
    if (pcRef.current) pcRef.current.close();
  };

  const createOffer = async () => {
    if (!pcRef.current || !socket) return;
    try {
       const offer = await pcRef.current.createOffer();
       await pcRef.current.setLocalDescription(offer);
       socket.emit('quantum_offer', {
         target: getTargetFromRoom(room),
         caller: username,
         sdp: offer,
         room
       });
    } catch (e) {
       console.error("Offer creation failed", e);
    }
  };

  const getTargetFromRoom = (roomId: string) => {
     if (roomId.startsWith('DM_')) {
        const users = roomId.replace('DM_', '').split('_');
        return users.find(u => u !== username) || '';
     }
     return '';
  };

  const toggleMic = () => {
    if (localStreamRef.current) {
      localStreamRef.current.getAudioTracks().forEach(track => track.enabled = !isMicOn);
      setIsMicOn(!isMicOn);
    }
  };

  const toggleCamera = () => {
    if (localStreamRef.current) {
      localStreamRef.current.getVideoTracks().forEach(track => track.enabled = !isCameraOn);
      setIsCameraOn(!isCameraOn);
    }
  };

  const handleEndCall = () => {
    if (socket) {
       socket.emit('quantum_call_ended', { sender: username, room, target: getTargetFromRoom(room) });
    }
    cleanup();
    onClose();
  };

  // Drag Logic
  const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true);
    dragOffset.current = {
      x: e.clientX - pipPos.x,
      y: e.clientY - pipPos.y
    };
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return;
    setPipPos({
      x: e.clientX - dragOffset.current.x,
      y: e.clientY - dragOffset.current.y
    });
  };

  const handleMouseUp = () => setIsDragging(false);

  // Deep Sapphire Blue Aura Calculation
  const auraBlur = 20 + (remoteAudioLevel * 0.8);
  const auraSpread = remoteAudioLevel * 0.5;
  const boxShadowStyle = `0 0 ${auraBlur}px ${auraSpread}px rgba(15, 82, 186, ${remoteAudioLevel > 10 ? 0.6 : 0.1})`;

  return (
    <div 
      className="absolute inset-0 z-[100] flex items-center justify-center pointer-events-auto bg-black/70 backdrop-blur-xl overflow-hidden"
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
       {/* Status Bar */}
       <div className={`absolute top-6 left-6 text-blue-300 text-xs font-mono bg-blue-900/30 px-4 py-2 rounded-full border border-blue-500/20 shadow-[0_0_15px_rgba(15,82,186,0.5)] transition-opacity duration-700 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
          <span className="animate-pulse mr-2">●</span> {connectionState}
       </div>
       
       <div className="w-full h-full relative flex items-center justify-center p-8">
          
          {/* Main Remote Video (Deep Sapphire Blue Aura) */}
          <div 
             className="relative w-full max-w-5xl aspect-video rounded-[2rem] overflow-hidden transition-all duration-300"
             style={{ boxShadow: boxShadowStyle }}
          >
             {/* Glassmorphism Border */}
             <div className="absolute inset-0 rounded-[2rem] border-[1px] border-white/10 z-10 pointer-events-none"></div>
             <video 
                ref={remoteVideoRef} 
                autoPlay 
                playsInline 
                className="w-full h-full object-cover"
                style={{ filter: 'contrast(1.05) saturate(1.1)' }}
             />
             
             {/* Fallback Audio Only Avatar */}
             {isAudioOnly && (
               <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
                 <div className="w-32 h-32 rounded-full bg-blue-600/20 flex items-center justify-center" style={{ transform: `scale(${1 + remoteAudioLevel/100})`, transition: 'transform 0.1s ease-out' }}>
                   <span className="text-5xl text-blue-400 font-bold">{getTargetFromRoom(room).charAt(0).toUpperCase()}</span>
                 </div>
               </div>
             )}
          </div>
          
          {/* Draggable PiP (Local Video) */}
          <div 
             className="absolute w-48 h-72 rounded-2xl overflow-hidden cursor-move border-[1px] border-white/20 shadow-[0_20px_50px_rgba(0,0,0,0.5)] z-30 transition-shadow hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]"
             style={{ 
                left: pipPos.x, top: pipPos.y,
                backdropFilter: 'blur(20px)',
                backgroundColor: 'rgba(15, 23, 42, 0.4)'
             }}
             onMouseDown={handleMouseDown}
          >
             {isCameraOn ? (
               <video 
                  ref={localVideoRef} 
                  autoPlay 
                  playsInline 
                  muted 
                  className="w-full h-full object-cover transform -scale-x-100"
               />
             ) : (
               <div className="w-full h-full flex items-center justify-center">
                  <svg className="w-10 h-10 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2zM3 3l18 18"></path></svg>
               </div>
             )}
          </div>

          {/* Cinematic Controls (Zero-UI) */}
          <div className={`absolute bottom-10 left-1/2 -translate-x-1/2 flex items-center gap-6 bg-slate-900/60 backdrop-blur-2xl px-10 py-5 rounded-full border border-white/5 shadow-2xl z-40 transition-all duration-700 transform ${showControls ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0 pointer-events-none'}`}>
             
             {/* Mic Toggle */}
             <button onClick={toggleMic} className={`relative group w-14 h-14 rounded-full flex items-center justify-center transition-all duration-300 ${isMicOn ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-red-500/80 text-white shadow-[0_0_20px_rgba(239,68,68,0.4)]'}`}>
                {isMicOn ? (
                   <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-1.7z"/></svg>
                ) : (
                   <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c-.37-.05-.74-.12-1.1-.22l2.83 2.83 1.27-1.27L4.27 3z"/></svg>
                )}
             </button>
             
             {/* Camera Toggle */}
             <button onClick={toggleCamera} className={`relative group w-14 h-14 rounded-full flex items-center justify-center transition-all duration-300 ${isCameraOn ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-red-500/80 text-white shadow-[0_0_20px_rgba(239,68,68,0.4)]'}`}>
                {isCameraOn ? (
                   <svg className="w-6 h-6" 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>
                ) : (
                   <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 .64-.15 1.14-.39L20.73 22 22 20.73 3.27 2z"/></svg>
                )}
             </button>

             {/* End Call */}
             <button onClick={handleEndCall} className="w-16 h-16 rounded-full flex items-center justify-center bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 text-white shadow-[0_0_30px_rgba(225,29,72,0.6)] transition-all duration-300 transform hover:scale-110">
                <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg>
             </button>
          </div>
       </div>
    </div>
  );
}