import React, { useState, useEffect, useRef } from 'react';
import { 
  Shield, 
  Wifi, 
  Send, 
  Paperclip, 
  Lock, 
  X, 
  Download, 
  Server,
  Zap,
  Activity,
  Trash2,
  FileText
} from 'lucide-react';

// Firebase Imports
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
  deleteDoc, 
  updateDoc, 
  getDoc 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';

// --- DEINE KONFIGURATION (HIER EINFÜGEN) ---

const FIREBASE_CONFIG = {
  // Ersetze dies mit deinen Daten aus der Firebase Console:
  apiKey: "DEIN_API_KEY_HIER",
  authDomain: "dein-projekt.firebaseapp.com",
  projectId: "dein-projekt",
  storageBucket: "dein-projekt.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:12345:web:abcdef"
};

const APP_ID = "secure-p2p-chat"; // Ein eindeutiger Name für deine App

// --- WEB RTC KONFIGURATION ---

const RTC_CONFIG = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:global.stun.twilio.com:3478' }
  ]
};

const CHUNK_SIZE = 16 * 1024; // 16KB Chunks (Safe for WebRTC)

// --- CRYPTO HELPERS (Native Web Crypto) ---

const generateKeyPair = async () => {
  return await window.crypto.subtle.generateKey(
    { name: "ECDH", namedCurve: "P-256" },
    true,
    ["deriveKey", "deriveBits"]
  );
};

const exportKey = async (key) => {
  const exported = await window.crypto.subtle.exportKey("spki", key);
  return btoa(String.fromCharCode(...new Uint8Array(exported)));
};

const importKey = async (base64Key) => {
  const binary = atob(base64Key);
  const buffer = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) buffer[i] = binary.charCodeAt(i);
  return await window.crypto.subtle.importKey(
    "spki",
    buffer,
    { name: "ECDH", namedCurve: "P-256" },
    true,
    []
  );
};

const deriveSessionKey = async (privateKey, publicKey) => {
  return await window.crypto.subtle.deriveKey(
    { name: "ECDH", public: publicKey },
    privateKey,
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );
};

// --- COMPONENT ---

export default function HighPerformanceP2P() {
  // Global Setup
  const [user, setUser] = useState(null);
  const [db, setDb] = useState(null);
  
  // State
  const [myCode, setMyCode] = useState('');
  const [targetCode, setTargetCode] = useState('');
  const [status, setStatus] = useState('idle'); // idle, signaling, connected
  const [messages, setMessages] = useState([]);
  const [textInput, setTextInput] = useState('');
  const [sessionKey, setSessionKey] = useState(null);
  const [fingerprint, setFingerprint] = useState('');
  
  // File Transfer State
  const [transfers, setTransfers] = useState({}); // id -> { progress, type, name }

  // Refs
  const rtcPeer = useRef(null);
  const dataChannel = useRef(null);
  const keyPair = useRef(null);
  const signalDocUnsub = useRef(null);
  
  // Receive Buffer
  const incomingFiles = useRef({}); 

  // --- FIREBASE INIT ---
  useEffect(() => {
    try {
      // Nutze die Konstante von oben statt der Umgebungsvariable
      if (FIREBASE_CONFIG.apiKey === "DEIN_API_KEY_HIER") {
        console.warn("Bitte trage deine Firebase-Config im Code ein!");
      }

      const app = initializeApp(FIREBASE_CONFIG);
      const auth = getAuth(app);
      setDb(getFirestore(app));

      // Standard Anonyme Anmeldung für einfaches Hosting
      signInAnonymously(auth).catch((err) => {
        console.error("Fehler bei der Anmeldung:", err);
      });
      
      const unsub = onAuthStateChanged(auth, (u) => {
        if (u) {
            setUser(u);
            const randomCode = Math.random().toString(36).substring(2, 10);
            setMyCode(randomCode);
        }
      });
      return () => unsub();
    } catch (e) {
      console.error("Firebase Init Error", e);
    }
  }, []);

  // --- WEBRTC SETUP ---

  const initWebRTC = async (isInitiator) => {
    rtcPeer.current = new RTCPeerConnection(RTC_CONFIG);

    rtcPeer.current.onicecandidate = (event) => {
      if (event.candidate) {
        sendSignalData({ type: 'candidate', candidate: JSON.stringify(event.candidate) });
      }
    };

    rtcPeer.current.onconnectionstatechange = () => {
      if (rtcPeer.current.connectionState === 'disconnected') {
        setStatus('idle');
        setMessages(prev => [...prev, { system: true, text: 'Verbindung verloren.' }]);
        cleanup();
      }
    };

    if (isInitiator) {
      const channel = rtcPeer.current.createDataChannel("secure-chat");
      setupDataChannel(channel);
      
      const offer = await rtcPeer.current.createOffer();
      await rtcPeer.current.setLocalDescription(offer);
      sendSignalData({ type: 'offer', sdp: JSON.stringify(offer) });
    } else {
      rtcPeer.current.ondatachannel = (event) => {
        setupDataChannel(event.channel);
      };
    }
  };

  const setupDataChannel = (channel) => {
    dataChannel.current = channel;
    channel.binaryType = 'arraybuffer';

    channel.onopen = async () => {
      setStatus('connected');
      // Bereinige Signalling-Daten
      if (myCode && db && user) {
          if (signalDocUnsub.current) signalDocUnsub.current();
      }
      
      keyPair.current = await generateKeyPair();
      const pubKey = await exportKey(keyPair.current.publicKey);
      channel.send(JSON.stringify({ type: 'key-exchange', key: pubKey }));
    };

    channel.onmessage = handleDataMessage;
  };

  // --- SIGNALING (FIREBASE) ---

  const sendSignalData = async (data) => {
    if (!db || !user) return;
    const roomId = targetCode || myCode; 
    const isHost = !targetCode;

    // Pfad angepasst für eigene Struktur
    const signalRef = doc(db, 'chat_signals', `signal_${roomId}`);
    
    try {
      if (data.type === 'offer') {
         await setDoc(signalRef, { guestSDP: data.sdp, guestCandidates: [], created: Date.now() }, { merge: true });
      } else if (data.type === 'answer') {
         await setDoc(signalRef, { hostSDP: data.sdp, hostCandidates: [] }, { merge: true });
      } else if (data.type === 'candidate') {
         const snap = await getDoc(signalRef);
         if (snap.exists()) {
           const current = snap.data();
           if (isHost) {
              const list = current.hostCandidates || [];
              await updateDoc(signalRef, { hostCandidates: [...list, data.candidate] });
           } else {
              const list = current.guestCandidates || [];
              await updateDoc(signalRef, { guestCandidates: [...list, data.candidate] });
           }
         }
      }
    } catch (err) {
      console.error("Signaling Error (Check Permissions):", err);
    }
  };

  const startHosting = async () => {
    if (!db || !user) return;
    setStatus('signaling');
    const roomId = myCode;
    // Pfad angepasst: 'chat_signals' Collection im Root
    const signalRef = doc(db, 'chat_signals', `signal_${roomId}`);
    
    await setDoc(signalRef, { created: Date.now() });

    const unsub = onSnapshot(signalRef, async (snap) => {
       const data = snap.data();
       if (!data) return;

       if (data.guestSDP && !rtcPeer.current) {
          await initWebRTC(false);
          const offer = JSON.parse(data.guestSDP);
          await rtcPeer.current.setRemoteDescription(offer);
          
          const answer = await rtcPeer.current.createAnswer();
          await rtcPeer.current.setLocalDescription(answer);
          sendSignalData({ type: 'answer', sdp: JSON.stringify(answer) });
       }

       if (data.guestCandidates && rtcPeer.current) {
          data.guestCandidates.forEach(async c => {
            try { await rtcPeer.current.addIceCandidate(JSON.parse(c)); } catch(e) {} 
          });
       }
    });
    signalDocUnsub.current = unsub;
  };

  const joinSession = async () => {
     if (!targetCode || !db) return;
     setStatus('signaling');
     const roomId = targetCode;
     const signalRef = doc(db, 'chat_signals', `signal_${roomId}`);

     await initWebRTC(true);

     const unsub = onSnapshot(signalRef, async (snap) => {
        const data = snap.data();
        if (!data) return;

        if (data.hostSDP && rtcPeer.current && rtcPeer.current.signalingState === 'have-local-offer') {
           const answer = JSON.parse(data.hostSDP);
           await rtcPeer.current.setRemoteDescription(answer);
        }

        if (data.hostCandidates && rtcPeer.current) {
           data.hostCandidates.forEach(async c => {
              try { await rtcPeer.current.addIceCandidate(JSON.parse(c)); } catch(e) {}
           });
        }
     });
     signalDocUnsub.current = unsub;
  };

  // --- DATA CHANNEL & CRYPTO ---

  const handleDataMessage = async (event) => {
    const buffer = event.data;
    
    if (typeof buffer === 'string') {
        const msg = JSON.parse(buffer);

        if (msg.type === 'key-exchange') {
            const theirKey = await importKey(msg.key);
            const shared = await deriveSessionKey(keyPair.current.privateKey, theirKey);
            setSessionKey(shared);
            const raw = await window.crypto.subtle.exportKey("raw", shared);
            const hash = await window.crypto.subtle.digest("SHA-256", raw);
            setFingerprint(Array.from(new Uint8Array(hash)).map(b=>b.toString(16).padStart(2,'0')).join('').substring(0,8).toUpperCase());
        }
        else if (msg.type === 'chat') {
            const decrypted = await decryptData(msg.iv, msg.content);
            setMessages(p => [...p, { sender: 'remote', content: decrypted, type: 'text' }]);
        }
        else if (msg.type === 'file-start') {
            incomingFiles.current[msg.id] = {
                chunks: [],
                meta: msg,
                receivedSize: 0,
                startTime: Date.now()
            };
            setTransfers(prev => ({
                ...prev, 
                [msg.id]: { progress: 0, type: 'receive', name: msg.name, size: msg.size }
            }));
        }
        else if (msg.type === 'file-end') {
            const fileData = incomingFiles.current[msg.id];
            if (fileData) {
                const blob = new Blob(fileData.chunks);
                const url = URL.createObjectURL(blob);
                setMessages(p => [...p, { 
                    sender: 'remote', 
                    content: url, 
                    type: 'file', 
                    fileName: fileData.meta.name,
                    fileSize: fileData.meta.size
                }]);
                delete incomingFiles.current[msg.id];
                setTransfers(prev => {
                    const next = { ...prev };
                    delete next[msg.id];
                    return next;
                });
            }
        }
        return;
    }

    const activeFileId = Object.keys(incomingFiles.current)[0];
    if (!activeFileId || !sessionKey) return;

    const iv = buffer.slice(0, 12);
    const content = buffer.slice(12);

    try {
        const decryptedChunk = await window.crypto.subtle.decrypt(
            { name: "AES-GCM", iv: new Uint8Array(iv) },
            sessionKey,
            content
        );
        
        const fileRecord = incomingFiles.current[activeFileId];
        fileRecord.chunks.push(decryptedChunk);
        fileRecord.receivedSize += decryptedChunk.byteLength;

        setTransfers(prev => ({
            ...prev,
            [activeFileId]: { 
                ...prev[activeFileId], 
                progress: (fileRecord.receivedSize / fileRecord.meta.size) * 100 
            }
        }));

    } catch (e) {
        console.error("Decrypt chunk failed", e);
    }
  };

  const encryptData = async (text) => {
    const enc = new TextEncoder().encode(text);
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const content = await window.crypto.subtle.encrypt(
       { name: "AES-GCM", iv }, sessionKey, enc
    );
    return { 
        iv: btoa(String.fromCharCode(...iv)), 
        content: btoa(String.fromCharCode(...new Uint8Array(content))) 
    };
  };

  const decryptData = async (ivB64, contentB64) => {
    const iv = Uint8Array.from(atob(ivB64), c => c.charCodeAt(0));
    const content = Uint8Array.from(atob(contentB64), c => c.charCodeAt(0));
    const dec = await window.crypto.subtle.decrypt(
        { name: "AES-GCM", iv }, sessionKey, content
    );
    return new TextDecoder().decode(dec);
  };

  const sendMessage = async () => {
    if (!textInput.trim() || !sessionKey) return;
    const encrypted = await encryptData(textInput);
    dataChannel.current.send(JSON.stringify({ 
        type: 'chat', 
        iv: encrypted.iv, 
        content: encrypted.content 
    }));
    setMessages(p => [...p, { sender: 'me', content: textInput, type: 'text' }]);
    setTextInput('');
  };

  const sendFile = async (file) => {
    if (!sessionKey || !dataChannel.current) return;
    const fileId = Math.random().toString(36).substring(7);
    
    dataChannel.current.send(JSON.stringify({
        type: 'file-start',
        id: fileId,
        name: file.name,
        size: file.size
    }));

    setTransfers(prev => ({
        ...prev, 
        [fileId]: { progress: 0, type: 'send', name: file.name, size: file.size }
    }));

    const reader = new FileReader();
    let offset = 0;

    const readSlice = (o) => {
        const slice = file.slice(o, o + CHUNK_SIZE);
        reader.readAsArrayBuffer(slice);
    };

    reader.onload = async (e) => {
        const buffer = e.target.result;
        
        const iv = window.crypto.getRandomValues(new Uint8Array(12));
        const encryptedBuf = await window.crypto.subtle.encrypt(
            { name: "AES-GCM", iv }, sessionKey, buffer
        );

        const packet = new Uint8Array(12 + encryptedBuf.byteLength);
        packet.set(iv, 0);
        packet.set(new Uint8Array(encryptedBuf), 12);
        
        if (dataChannel.current.bufferedAmount > 16 * 1024 * 1024) {
            await new Promise(r => setTimeout(r, 100));
        }

        try {
            dataChannel.current.send(packet);
        } catch(err) {
            console.error("Send error", err);
            return;
        }

        offset += CHUNK_SIZE;
        
        setTransfers(prev => ({
            ...prev,
            [fileId]: { ...prev[fileId], progress: Math.min(100, (offset / file.size) * 100) }
        }));

        if (offset < file.size) {
            readSlice(offset);
        } else {
            dataChannel.current.send(JSON.stringify({ type: 'file-end', id: fileId }));
            setTransfers(prev => {
                const next = { ...prev };
                delete next[fileId];
                return next;
            });
        }
    };

    readSlice(0);
  };

  const cleanup = () => {
     if(signalDocUnsub.current) signalDocUnsub.current();
     if(rtcPeer.current) rtcPeer.current.close();
     setSessionKey(null);
     setFingerprint('');
  };

  const renderLogin = () => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-neutral-900 text-white p-4 font-mono">
       <div className="w-full max-w-lg bg-neutral-800 p-8 rounded-xl border border-neutral-700 shadow-2xl">
          <div className="flex items-center gap-3 mb-6 text-emerald-400">
             <Activity className="animate-pulse" />
             <h1 className="text-xl font-bold tracking-tighter">SECURE.STREAM.P2P</h1>
          </div>
          
          <div className="space-y-6">
             <div className="bg-black/30 p-4 rounded-lg border border-neutral-700">
                <label className="text-xs text-neutral-500 uppercase">Deine ID (Teilen)</label>
                <div className="text-3xl text-white tracking-widest mt-1 select-all font-bold">
                   {myCode || '...'}
                </div>
                <button 
                  onClick={() => startHosting()}
                  className="mt-4 w-full py-3 bg-emerald-600 hover:bg-emerald-500 text-black font-bold rounded transition-colors"
                >
                  <Server className="inline mr-2 w-4 h-4"/>
                  Als Host starten (Warte auf Partner)
                </button>
             </div>

             <div className="relative flex py-2 items-center">
                <div className="flex-grow border-t border-neutral-700"></div>
                <span className="flex-shrink-0 mx-4 text-neutral-600 text-xs">ODER</span>
                <div className="flex-grow border-t border-neutral-700"></div>
             </div>

             <div>
                <input 
                  value={targetCode}
                  onChange={e => setTargetCode(e.target.value)}
                  placeholder="Partner ID eingeben..."
                  className="w-full bg-neutral-900 border border-neutral-700 p-3 rounded text-white focus:border-emerald-500 outline-none"
                />
                <button 
                   onClick={() => joinSession()}
                   disabled={!targetCode}
                   className="mt-2 w-full py-3 bg-neutral-700 hover:bg-neutral-600 disabled:opacity-50 text-white font-bold rounded transition-colors"
                >
                   <Zap className="inline mr-2 w-4 h-4"/>
                   Verbinden
                </button>
             </div>
          </div>
          
          {status === 'signaling' && (
             <div className="mt-6 text-center text-yellow-500 text-sm animate-pulse">
                Signaling via Firestore... Tausche Schlüssel aus...
             </div>
          )}
       </div>
    </div>
  );

  if (status !== 'connected') return renderLogin();

  return (
    <div className="flex flex-col h-screen bg-neutral-950 text-neutral-200 font-sans">
       {/* Header */}
       <div className="h-16 bg-neutral-900 border-b border-neutral-800 flex items-center justify-between px-6">
          <div className="flex items-center gap-4">
             <div className="w-3 h-3 bg-emerald-500 rounded-full shadow-[0_0_10px_#10b981]"></div>
             <div>
                <h2 className="font-bold text-white text-sm">SECURE LINK ESTABLISHED</h2>
                <p className="text-[10px] text-neutral-500 font-mono">AES-GCM-256 | DIRECT P2P</p>
             </div>
          </div>
          <div className="flex items-center gap-4">
             <div className="flex flex-col items-end">
                <span className="text-[10px] text-neutral-500">FINGERPRINT</span>
                <code className="text-xs text-emerald-500 font-mono bg-emerald-900/20 px-2 rounded">
                   {fingerprint || 'AUTH...'}
                </code>
             </div>
             <button onClick={() => window.location.reload()} className="p-2 hover:bg-red-900/30 text-neutral-400 hover:text-red-500 rounded transition-colors">
                <X size={18} />
             </button>
          </div>
       </div>

       {/* Chat Area */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
          <div className="text-center">
             <span className="text-[10px] bg-neutral-800 text-neutral-500 px-2 py-1 rounded">
                Kein Server speichert deine Daten. Alles fließt direkt.
             </span>
          </div>

          {messages.map((m, i) => (
             <div key={i} className={`flex ${m.sender === 'me' ? 'justify-end' : 'justify-start'}`}>
                {m.type === 'text' && (
                   <div className={`max-w-[80%] p-3 rounded-xl text-sm ${
                      m.sender === 'me' ? 'bg-emerald-700 text-white rounded-tr-none' : 'bg-neutral-800 border border-neutral-700 rounded-tl-none'
                   }`}>
                      {m.content}
                   </div>
                )}
                {m.type === 'file' && (
                   <div className="bg-neutral-800 border border-neutral-700 p-4 rounded-xl flex items-center gap-4 max-w-sm">
                      <div className="bg-neutral-900 p-3 rounded">
                         <FileText size={24} className="text-emerald-500" />
                      </div>
                      <div className="flex-1 min-w-0">
                         <div className="truncate text-white text-sm font-medium">{m.fileName}</div>
                         <div className="text-xs text-neutral-500">{(m.fileSize / (1024*1024)).toFixed(2)} MB</div>
                      </div>
                      <a href={m.content} download={m.fileName} className="p-2 bg-emerald-600 hover:bg-emerald-500 rounded-full text-black">
                         <Download size={16} />
                      </a>
                   </div>
                )}
             </div>
          ))}
          
          {/* Active Transfers */}
          {Object.entries(transfers).map(([id, t]) => (
             <div key={id} className="bg-neutral-800/50 border border-neutral-700 p-3 rounded-lg mx-auto w-3/4 animate-pulse">
                <div className="flex justify-between text-xs mb-1">
                   <span className="text-emerald-400">{t.type === 'send' ? 'Sende' : 'Empfange'}: {t.name}</span>
                   <span>{t.progress.toFixed(1)}%</span>
                </div>
                <div className="h-1 bg-neutral-700 rounded-full overflow-hidden">
                   <div className="h-full bg-emerald-500 transition-all duration-200" style={{width: `${t.progress}%`}}></div>
                </div>
             </div>
          ))}
       </div>

       {/* Input */}
       <div className="p-4 bg-neutral-900 border-t border-neutral-800 flex gap-3">
          <label className="p-3 text-neutral-400 hover:bg-neutral-800 rounded-lg cursor-pointer transition-colors">
             <Paperclip size={20} />
             <input type="file" className="hidden" onChange={e => e.target.files[0] && sendFile(e.target.files[0])} />
          </label>
          <input 
             className="flex-1 bg-neutral-800 border-none rounded-lg px-4 text-white focus:ring-1 focus:ring-emerald-500 outline-none"
             placeholder="Nachricht eingeben..."
             value={textInput}
             onChange={e => setTextInput(e.target.value)}
             onKeyDown={e => e.key === 'Enter' && sendMessage()}
          />
          <button onClick={sendMessage} className="p-3 bg-emerald-600 hover:bg-emerald-500 text-black rounded-lg font-bold">
             <Send size={20} />
          </button>
       </div>
    </div>
  );
}