import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  doc, 
  setDoc, 
  getDoc, 
  onSnapshot, 
  collection, 
  addDoc, 
  updateDoc 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { Video, VideoOff, Mic, MicOff, Phone, PhoneOff, Copy, UserPlus } from 'lucide-react';

// Configuración de Firebase desde el entorno
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'video-call-default';

// Servidores STUN gratuitos de Google para facilitar la conexión P2P
const servers = {
  iceServers: [
    {
      urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'],
    },
  ],
  iceCandidatePoolSize: 10,
};

export default function App() {
  const [user, setUser] = useState(null);
  const [callId, setCallId] = useState('');
  const [inputCallId, setInputCallId] = useState('');
  const [status, setStatus] = useState('idle'); // idle, calling, connected
  const [isMicOn, setIsMicOn] = useState(true);
  const [isCameraOn, setIsCameraOn] = useState(true);

  const pc = useRef(new RTCPeerConnection(servers));
  const localVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);
  const localStream = useRef(null);

  // 1. Inicialización de Autenticación
  useEffect(() => {
    const initAuth = async () => {
      try {
        await signInAnonymously(auth);
      } catch (error) {
        console.error("Auth Error:", error);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Configuración de Medios Locales
  useEffect(() => {
    const startWebcam = async () => {
      try {
        localStream.current = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        
        if (localVideoRef.current) {
          localVideoRef.current.srcObject = localStream.current;
        }

        // Añadir tracks al PeerConnection
        localStream.current.getTracks().forEach((track) => {
          pc.current.addTrack(track, localStream.current);
        });
      } catch (e) {
        console.error("Error accediendo a periféricos:", e);
      }
    };

    startWebcam();

    // Listener para tracks remotos
    pc.current.ontrack = (event) => {
      if (remoteVideoRef.current) {
        remoteVideoRef.current.srcObject = event.streams[0];
        setStatus('connected');
      }
    };

    return () => {
      localStream.current?.getTracks().forEach(t => t.stop());
    };
  }, []);

  // Función para crear una llamada (Generar Oferta)
  const createCall = async () => {
    if (!user) return;
    setStatus('calling');

    const callDoc = doc(collection(db, 'artifacts', appId, 'public', 'data', 'calls'));
    const offerCandidates = collection(callDoc, 'offerCandidates');
    const answerCandidates = collection(callDoc, 'answerCandidates');

    setCallId(callDoc.id);

    pc.current.onicecandidate = (event) => {
      if (event.candidate) {
        addDoc(offerCandidates, event.candidate.toJSON());
      }
    };

    const offerDescription = await pc.current.createOffer();
    await pc.current.setLocalDescription(offerDescription);

    const offer = {
      sdp: offerDescription.sdp,
      type: offerDescription.type,
    };

    await setDoc(callDoc, { offer });

    // Escuchar respuesta
    onSnapshot(callDoc, (snapshot) => {
      const data = snapshot.data();
      if (!pc.current.currentRemoteDescription && data?.answer) {
        const answerDescription = new RTCSessionDescription(data.answer);
        pc.current.setRemoteDescription(answerDescription);
      }
    });

    // Escuchar candidatos remotos
    onSnapshot(answerCandidates, (snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          const data = change.doc.data();
          pc.current.addIceCandidate(new RTCIceCandidate(data));
        }
      });
    });
  };

  // Función para unirse a una llamada (Responder Oferta)
  const joinCall = async () => {
    if (!user || !inputCallId) return;
    setStatus('calling');

    const callDoc = doc(db, 'artifacts', appId, 'public', 'data', 'calls', inputCallId);
    const answerCandidates = collection(callDoc, 'answerCandidates');
    const offerCandidates = collection(callDoc, 'offerCandidates');

    pc.current.onicecandidate = (event) => {
      if (event.candidate) {
        addDoc(answerCandidates, event.candidate.toJSON());
      }
    };

    const callData = (await getDoc(callDoc)).data();
    if (!callData) {
      alert("ID de llamada no encontrado");
      setStatus('idle');
      return;
    }

    const offerDescription = callData.offer;
    await pc.current.setRemoteDescription(new RTCSessionDescription(offerDescription));

    const answerDescription = await pc.current.createAnswer();
    await pc.current.setLocalDescription(answerDescription);

    const answer = {
      type: answerDescription.type,
      sdp: answerDescription.sdp,
    };

    await updateDoc(callDoc, { answer });

    onSnapshot(offerCandidates, (snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          const data = change.doc.data();
          pc.current.addIceCandidate(new RTCIceCandidate(data));
        }
      });
    });
  };

  const toggleMic = () => {
    if (localStream.current) {
      const audioTrack = localStream.current.getAudioTracks()[0];
      audioTrack.enabled = !audioTrack.enabled;
      setIsMicOn(audioTrack.enabled);
    }
  };

  const toggleCamera = () => {
    if (localStream.current) {
      const videoTrack = localStream.current.getVideoTracks()[0];
      videoTrack.enabled = !videoTrack.enabled;
      setIsCameraOn(videoTrack.enabled);
    }
  };

  const copyId = () => {
    document.execCommand('copy');
    // En un entorno real usaríamos navigator.clipboard, pero seguimos la instrucción del sistema
    const el = document.createElement('textarea');
    el.value = callId;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-white p-4 md:p-8 flex flex-col items-center font-sans">
      <header className="mb-8 text-center">
        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
          WebRTC Video Chat
        </h1>
        <p className="text-zinc-400 mt-2">Conexión directa P2P segura</p>
      </header>

      <main className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 gap-6 relative">
        {/* Video Remoto (Principal) */}
        <div className="relative aspect-video bg-zinc-900 rounded-3xl overflow-hidden border border-zinc-800 shadow-2xl">
          <video
            ref={remoteVideoRef}
            autoPlay
            playsInline
            className="w-full h-full object-cover"
          />
          {status !== 'connected' && (
            <div className="absolute inset-0 flex items-center justify-center bg-zinc-900/80 backdrop-blur-sm">
              <p className="text-zinc-500 text-lg animate-pulse">
                {status === 'calling' ? 'Conectando...' : 'Esperando conexión remota...'}
              </p>
            </div>
          )}
          <div className="absolute bottom-4 left-4 bg-black/40 px-3 py-1 rounded-full backdrop-blur-md text-sm">
            Remoto
          </div>
        </div>

        {/* Video Local */}
        <div className="relative aspect-video bg-zinc-900 rounded-3xl overflow-hidden border border-zinc-800 shadow-2xl">
          <video
            ref={localVideoRef}
            autoPlay
            muted
            playsInline
            className="w-full h-full object-cover -scale-x-100"
          />
          <div className="absolute bottom-4 left-4 bg-black/40 px-3 py-1 rounded-full backdrop-blur-md text-sm">
            Tú (Local)
          </div>
          
          {/* Controles flotantes sobre video local */}
          <div className="absolute bottom-4 right-4 flex gap-2">
            <button 
              onClick={toggleMic}
              className={`p-3 rounded-full transition-all ${isMicOn ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-red-500 hover:bg-red-600'}`}
            >
              {isMicOn ? <Mic size={20} /> : <MicOff size={20} />}
            </button>
            <button 
              onClick={toggleCamera}
              className={`p-3 rounded-full transition-all ${isCameraOn ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-red-500 hover:bg-red-600'}`}
            >
              {isCameraOn ? <Video size={20} /> : <VideoOff size={20} />}
            </button>
          </div>
        </div>
      </main>

      {/* Panel de Control */}
      <section className="mt-10 w-full max-w-2xl bg-zinc-900 p-6 rounded-3xl border border-zinc-800 shadow-xl">
        {status === 'idle' ? (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="flex flex-col gap-4">
              <h2 className="text-xl font-semibold flex items-center gap-2">
                <UserPlus size={20} className="text-blue-400" />
                Iniciar nueva llamada
              </h2>
              <button
                onClick={createCall}
                className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 rounded-2xl flex items-center justify-center gap-2 transition-all active:scale-95"
              >
                <Phone size={20} /> Crear Sala
              </button>
            </div>

            <div className="flex flex-col gap-4">
              <h2 className="text-xl font-semibold flex items-center gap-2">
                <Phone size={20} className="text-emerald-400" />
                Unirse a una sala
              </h2>
              <div className="flex gap-2">
                <input
                  type="text"
                  placeholder="ID de la llamada..."
                  value={inputCallId}
                  onChange={(e) => setInputCallId(e.target.value)}
                  className="flex-1 bg-zinc-800 border border-zinc-700 rounded-2xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                />
                <button
                  onClick={joinCall}
                  className="bg-emerald-600 hover:bg-emerald-500 p-3 rounded-2xl transition-all active:scale-95"
                >
                  Unirse
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex flex-col items-center gap-4">
            {callId && (
              <div className="w-full text-center space-y-3">
                <p className="text-zinc-400 text-sm uppercase tracking-widest font-bold">Tu ID de Llamada</p>
                <div className="flex items-center justify-center gap-3">
                  <code className="bg-zinc-800 px-6 py-3 rounded-2xl text-lg font-mono text-blue-300 border border-zinc-700 select-all">
                    {callId}
                  </code>
                  <button 
                    onClick={copyId}
                    className="p-3 bg-zinc-800 hover:bg-zinc-700 rounded-2xl transition-all"
                    title="Copiar ID"
                  >
                    <Copy size={20} />
                  </button>
                </div>
                <p className="text-zinc-500 text-sm italic">Comparte este ID con la otra persona para que se una.</p>
              </div>
            )}
            
            <button
              onClick={() => window.location.reload()}
              className="mt-4 px-8 py-3 bg-red-500/10 hover:bg-red-500/20 text-red-500 border border-red-500/50 rounded-2xl font-bold flex items-center gap-2 transition-all"
            >
              <PhoneOff size={20} /> Finalizar Llamada
            </button>
          </div>
        )}
      </section>

      <footer className="mt-auto py-8 text-zinc-600 text-sm">
        ID de Usuario: <span className="font-mono">{user?.uid || 'Anon'}</span>
      </footer>
    </div>
  );
}