import React, { useState, useEffect, useRef, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, onSnapshot, addDoc, 
  doc, updateDoc, deleteDoc, serverTimestamp, 
  query, orderBy, where, getDocs 
} from 'firebase/firestore';
import { 
  getAuth, signInAnonymously, onAuthStateChanged, 
  signInWithCustomToken 
} from 'firebase/auth';
import { 
  Mic, MicOff, Video, VideoOff, PhoneOff, 
  Monitor, MessageSquare, Users, Copy, Check,
  Share2, Settings
} from 'lucide-react';

// --- Firebase Configuration & Initialization ---
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 : 'default-app-id';

// --- WebRTC Configuration ---
const rtcConfig = {
  iceServers: [
    { urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'] }
  ]
};

export default function OpenMeet() {
  const [user, setUser] = useState(null);
  const [joined, setJoined] = useState(false);
  const [roomId, setRoomId] = useState('');
  const [userName, setUserName] = useState('');
  
  // Initialize Auth
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  if (!user) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-900 text-white">
        <div className="animate-pulse flex flex-col items-center">
          <div className="h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
          <p>Initializing Secure Connection...</p>
        </div>
      </div>
    );
  }

  return joined ? (
    <MeetingRoom 
      user={user} 
      roomId={roomId} 
      userName={userName} 
      onLeave={() => setJoined(false)} 
    />
  ) : (
    <Lobby 
      userName={userName} 
      setUserName={setUserName} 
      roomId={roomId} 
      setRoomId={setRoomId} 
      onJoin={() => setJoined(true)} 
    />
  );
}

// --- Lobby Component ---
function Lobby({ userName, setUserName, roomId, setRoomId, onJoin }) {
  const generateRoomId = () => Math.random().toString(36).substring(2, 8).toUpperCase();

  return (
    <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4 text-white font-sans">
      <div className="w-full max-w-md space-y-8">
        <div className="text-center">
          <div className="mx-auto h-16 w-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30">
            <Video className="h-8 w-8 text-white" />
          </div>
          <h2 className="text-3xl font-bold tracking-tight">OpenMeet</h2>
          <p className="mt-2 text-gray-400">Secure, P2P, Unlimited Video Conferencing</p>
        </div>

        <div className="bg-gray-800 p-8 rounded-2xl shadow-xl space-y-6 border border-gray-700">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Display Name</label>
            <input
              type="text"
              required
              className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition text-white placeholder-gray-500"
              placeholder="Enter your name"
              value={userName}
              onChange={(e) => setUserName(e.target.value)}
            />
          </div>

          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-600"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-gray-800 text-gray-400">Join or Create</span>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Room ID</label>
            <div className="flex gap-2">
              <input
                type="text"
                required
                className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none transition text-white uppercase tracking-wider font-mono placeholder-gray-500"
                placeholder="XR72K9"
                value={roomId}
                onChange={(e) => setRoomId(e.target.value.toUpperCase())}
              />
              <button
                onClick={() => setRoomId(generateRoomId())}
                className="px-4 py-3 bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-xl transition text-gray-300"
                title="Generate Random ID"
              >
                <Share2 className="h-5 w-5" />
              </button>
            </div>
          </div>

          <button
            onClick={() => {
              if (userName && roomId) onJoin();
            }}
            disabled={!userName || !roomId}
            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all transform active:scale-95"
          >
            Enter Meeting
          </button>
        </div>
        
        <p className="text-center text-xs text-gray-500">
          No signup required • Unlimited participants • P2P Encrypted
        </p>
      </div>
    </div>
  );
}

// --- Main Meeting Room Component ---
function MeetingRoom({ user, roomId, userName, onLeave }) {
  const [localStream, setLocalStream] = useState(null);
  const [peers, setPeers] = useState({}); // { [userId]: { stream, userName } }
  const [audioEnabled, setAudioEnabled] = useState(true);
  const [videoEnabled, setVideoEnabled] = useState(true);
  const [screenSharing, setScreenSharing] = useState(false);
  const [messages, setMessages] = useState([]);
  const [showChat, setShowChat] = useState(false);
  const [newMessage, setNewMessage] = useState("");
  const [copied, setCopied] = useState(false);
  
  // Refs for WebRTC management
  const pcsRef = useRef({}); // { [peerId]: RTCPeerConnection }
  const localStreamRef = useRef(null);
  const peersRef = useRef({}); // To access current peers in closures

  // Determine collection name based on room (Strict Path Rule)
  // We use a safe alphanumeric version of room ID
  const safeRoomId = roomId.replace(/[^a-zA-Z0-9]/g, '');
  const collectionName = `meet_${safeRoomId}`;
  
  // --- 1. Setup Local Stream ---
  useEffect(() => {
    const startStream = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ 
          video: true, 
          audio: true 
        });
        setLocalStream(stream);
        localStreamRef.current = stream;
        
        // Add presence to Firestore
        await addDoc(collection(db, 'artifacts', appId, 'public', 'data', collectionName), {
          type: 'join',
          userId: user.uid,
          userName: userName,
          timestamp: serverTimestamp()
        });
      } catch (err) {
        console.error("Error accessing media devices:", err);
        alert("Could not access camera/microphone. Please allow permissions.");
      }
    };
    startStream();

    // Cleanup on unmount
    return () => {
      if (localStreamRef.current) {
        localStreamRef.current.getTracks().forEach(track => track.stop());
      }
      // Ideally we would delete the join doc here, but difficult reliably on close
    };
  }, []); // Run once on mount

  // --- 2. Signaling Logic (The Core P2P Mesh) ---
  useEffect(() => {
    if (!user) return;

    // Listen to the room's signal collection
    const q = query(
      collection(db, 'artifacts', appId, 'public', 'data', collectionName),
      orderBy('timestamp', 'asc') // Process in order
    );

    const unsubscribe = onSnapshot(q, async (snapshot) => {
      snapshot.docChanges().forEach(async (change) => {
        if (change.type === 'added') {
          const data = change.doc.data();
          
          // Ignore our own messages
          if (data.userId === user.uid) return;

          // A. New User Joined -> Initiate Connection (if I'm the "older" peer or just based on ID sort to avoid duplicate pairs)
          // We use a simple rule: The existing users connect to the new user.
          // However, in a pure event log, everyone sees everyone "added".
          // Strategy: Connect if we don't have a PC yet.
          // To avoid glare (both offering), we use ID comparison string sort.
          // If myID > theirID, I offer.
          
          if (data.type === 'join') {
            handleUserJoined(data.userId, data.userName);
          }
          
          if (data.to === user.uid) {
            if (data.type === 'offer') {
              await handleOffer(data);
            } else if (data.type === 'answer') {
              await handleAnswer(data);
            } else if (data.type === 'candidate') {
              await handleCandidate(data);
            }
          }
          
          if (data.type === 'chat') {
            setMessages(prev => [...prev, { sender: data.userName, text: data.text, time: data.timestamp }]);
          }
        }
      });
    }, (error) => {
      console.error("Signaling error:", error);
    });

    return () => unsubscribe();
  }, [user]);

  // --- WebRTC Handlers ---

  const createPeerConnection = (targetId, targetName) => {
    if (pcsRef.current[targetId]) return pcsRef.current[targetId];

    const pc = new RTCPeerConnection(rtcConfig);
    
    // Add local tracks
    if (localStreamRef.current) {
      localStreamRef.current.getTracks().forEach(track => {
        pc.addTrack(track, localStreamRef.current);
      });
    }

    // Handle ICE candidates
    pc.onicecandidate = (event) => {
      if (event.candidate) {
        addDoc(collection(db, 'artifacts', appId, 'public', 'data', collectionName), {
          type: 'candidate',
          userId: user.uid,
          to: targetId,
          candidate: JSON.stringify(event.candidate),
          timestamp: serverTimestamp()
        });
      }
    };

    // Handle remote stream
    pc.ontrack = (event) => {
      console.log(`Received track from ${targetName}`);
      setPeers(prev => ({
        ...prev,
        [targetId]: { 
          stream: event.streams[0], 
          userName: targetName 
        }
      }));
      peersRef.current = { ...peersRef.current, [targetId]: { userName: targetName }};
    };

    // Handle connection state
    pc.onconnectionstatechange = () => {
      if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
        setPeers(prev => {
          const newPeers = { ...prev };
          delete newPeers[targetId];
          return newPeers;
        });
        delete pcsRef.current[targetId];
      }
    };

    pcsRef.current[targetId] = pc;
    return pc;
  };

  const handleUserJoined = async (targetId, targetName) => {
    // If I have a larger ID, I initiate the offer. This prevents collision.
    // Simpler approach for this demo: If I'm already here and see a join, I offer.
    // But since 'join' events replay, we need to be careful.
    // Let's stick to: If my ID > their ID, I offer.
    if (user.uid > targetId) {
      const pc = createPeerConnection(targetId, targetName);
      
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);

      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', collectionName), {
        type: 'offer',
        userId: user.uid,
        userName: userName,
        to: targetId,
        sdp: JSON.stringify(offer),
        timestamp: serverTimestamp()
      });
    }
  };

  const handleOffer = async (data) => {
    const pc = createPeerConnection(data.userId, data.userName);
    await pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.sdp)));
    
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);

    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', collectionName), {
      type: 'answer',
      userId: user.uid,
      to: data.userId,
      sdp: JSON.stringify(answer),
      timestamp: serverTimestamp()
    });
  };

  const handleAnswer = async (data) => {
    const pc = pcsRef.current[data.userId];
    if (pc) {
      await pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.sdp)));
    }
  };

  const handleCandidate = async (data) => {
    const pc = pcsRef.current[data.userId];
    if (pc) {
      await pc.addIceCandidate(new RTCIceCandidate(JSON.parse(data.candidate)));
    }
  };

  // --- Features ---

  const toggleAudio = () => {
    if (localStream) {
      localStream.getAudioTracks().forEach(track => track.enabled = !audioEnabled);
      setAudioEnabled(!audioEnabled);
    }
  };

  const toggleVideo = () => {
    if (localStream) {
      localStream.getVideoTracks().forEach(track => track.enabled = !videoEnabled);
      setVideoEnabled(!videoEnabled);
    }
  };

  const toggleScreenShare = async () => {
    if (!screenSharing) {
      try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        const videoTrack = screenStream.getVideoTracks()[0];
        
        // Replace track in all PeerConnections
        Object.values(pcsRef.current).forEach(pc => {
          const sender = pc.getSenders().find(s => s.track.kind === 'video');
          if (sender) sender.replaceTrack(videoTrack);
        });
        
        // Update local view
        setLocalStream(screenStream); // Temporarily show screen locally
        setScreenSharing(true);
        setVideoEnabled(true);

        // Handle stop sharing via browser UI
        videoTrack.onended = () => {
          stopScreenShare();
        };

      } catch (err) {
        console.error("Error sharing screen", err);
      }
    } else {
      stopScreenShare();
    }
  };

  const stopScreenShare = async () => {
    // Revert to camera
    try {
      const camStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      const videoTrack = camStream.getVideoTracks()[0];
      
      Object.values(pcsRef.current).forEach(pc => {
        const sender = pc.getSenders().find(s => s.track.kind === 'video');
        if (sender) sender.replaceTrack(videoTrack);
      });

      setLocalStream(camStream);
      localStreamRef.current = camStream;
      setScreenSharing(false);
      setVideoEnabled(true);
    } catch (err) {
      console.error("Error reverting to camera", err);
    }
  };

  const sendMessage = async (e) => {
    e.preventDefault();
    if (!newMessage.trim()) return;

    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', collectionName), {
      type: 'chat',
      userId: user.uid,
      userName: userName,
      text: newMessage,
      timestamp: serverTimestamp()
    });
    setNewMessage("");
  };

  const copyRoomId = () => {
    const text = roomId;
    // Use fallback for clipboard in iframe
    const textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }
    document.body.removeChild(textArea);
  };

  return (
    <div className="flex h-screen bg-gray-900 text-white overflow-hidden">
      
      {/* Main Video Area */}
      <div className={`flex-1 flex flex-col transition-all duration-300 ${showChat ? 'mr-80' : 'mr-0'}`}>
        
        {/* Header */}
        <div className="h-16 bg-gray-800 border-b border-gray-700 flex items-center justify-between px-6 z-10">
          <div className="flex items-center gap-4">
            <h1 className="font-bold text-xl tracking-tight">OpenMeet</h1>
            <div className="bg-gray-700 rounded-full px-3 py-1 flex items-center gap-2 text-sm border border-gray-600">
              <Users size={14} className="text-blue-400" />
              <span>{Object.keys(peers).length + 1} online</span>
            </div>
          </div>
          <div className="flex items-center gap-3">
             <button 
                onClick={copyRoomId}
                className="flex items-center gap-2 bg-gray-700 hover:bg-gray-600 px-3 py-1.5 rounded-lg text-sm transition font-mono"
              >
                <span>{roomId}</span>
                {copied ? <Check size={14} className="text-green-400"/> : <Copy size={14} />}
              </button>
          </div>
        </div>

        {/* Video Grid */}
        <div className="flex-1 p-4 overflow-y-auto custom-scrollbar">
          <div className={`grid gap-4 h-full content-center ${
            Object.keys(peers).length === 0 ? 'grid-cols-1' :
            Object.keys(peers).length === 1 ? 'grid-cols-1 md:grid-cols-2' :
            Object.keys(peers).length <= 3 ? 'grid-cols-2' :
            'grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
          }`}>
            
            {/* My Video */}
            <div className="relative bg-gray-800 rounded-2xl overflow-hidden aspect-video shadow-lg ring-1 ring-gray-700 group">
              <video 
                ref={el => { if(el) el.srcObject = localStream }} 
                autoPlay 
                muted 
                playsInline
                className={`w-full h-full object-cover ${!videoEnabled ? 'hidden' : ''} transform scale-x-[-1]`}
              />
              {!videoEnabled && (
                <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
                  <div className="h-20 w-20 rounded-full bg-gray-700 flex items-center justify-center text-2xl font-bold text-gray-400 border border-gray-600">
                    {userName.charAt(0).toUpperCase()}
                  </div>
                </div>
              )}
              <div className="absolute bottom-4 left-4 bg-black/60 backdrop-blur-md px-3 py-1 rounded-lg text-sm font-medium flex items-center gap-2">
                <span>You {screenSharing && '(Presenting)'}</span>
                {!audioEnabled && <MicOff size={12} className="text-red-400" />}
              </div>
            </div>

            {/* Peer Videos */}
            {Object.entries(peers).map(([id, peer]) => (
              <div key={id} className="relative bg-gray-800 rounded-2xl overflow-hidden aspect-video shadow-lg ring-1 ring-gray-700">
                <VideoPlayer stream={peer.stream} />
                <div className="absolute bottom-4 left-4 bg-black/60 backdrop-blur-md px-3 py-1 rounded-lg text-sm font-medium">
                  {peer.userName}
                </div>
              </div>
            ))}

            {/* Empty State / Waiting */}
            {Object.keys(peers).length === 0 && (
               <div className="hidden md:flex flex-col items-center justify-center text-gray-500 border-2 border-dashed border-gray-700 rounded-2xl bg-gray-800/50">
                 <Users className="h-12 w-12 mb-2 opacity-50" />
                 <p>Waiting for others to join...</p>
                 <p className="text-sm mt-1">Share Room ID: <span className="font-mono text-blue-400">{roomId}</span></p>
               </div>
            )}

          </div>
        </div>

        {/* Controls Bar */}
        <div className="h-20 bg-gray-800 border-t border-gray-700 flex items-center justify-center gap-4 px-4 pb-2">
          
          <ControlButton 
            onClick={toggleAudio} 
            active={audioEnabled} 
            icon={audioEnabled ? <Mic /> : <MicOff />} 
            activeClass="bg-gray-700 hover:bg-gray-600"
            inactiveClass="bg-red-500 hover:bg-red-600 text-white border-transparent"
          />
          
          <ControlButton 
            onClick={toggleVideo} 
            active={videoEnabled} 
            icon={videoEnabled ? <Video /> : <VideoOff />} 
            activeClass="bg-gray-700 hover:bg-gray-600"
            inactiveClass="bg-red-500 hover:bg-red-600 text-white border-transparent"
          />

          <ControlButton 
            onClick={toggleScreenShare} 
            active={!screenSharing} 
            icon={<Monitor />} 
            activeClass="bg-gray-700 hover:bg-gray-600"
            inactiveClass="bg-green-500 hover:bg-green-600 text-white border-transparent"
            title="Share Screen"
          />

          <ControlButton 
            onClick={() => setShowChat(!showChat)} 
            active={!showChat} 
            icon={<MessageSquare />} 
            activeClass="bg-gray-700 hover:bg-gray-600"
            inactiveClass="bg-blue-500 hover:bg-blue-600 text-white border-transparent"
            badge={!showChat && messages.length > 0}
          />

          <div className="w-px h-8 bg-gray-700 mx-2"></div>

          <button 
            onClick={onLeave}
            className="h-12 px-6 rounded-xl bg-red-500 hover:bg-red-600 text-white flex items-center gap-2 font-medium transition active:scale-95"
          >
            <PhoneOff size={20} />
            <span className="hidden sm:inline">Leave</span>
          </button>
        </div>
      </div>

      {/* Chat Sidebar */}
      <div className={`fixed inset-y-0 right-0 w-80 bg-gray-800 border-l border-gray-700 transform transition-transform duration-300 z-20 flex flex-col ${showChat ? 'translate-x-0' : 'translate-x-full'}`}>
        <div className="h-16 border-b border-gray-700 flex items-center justify-between px-4 bg-gray-800">
          <h2 className="font-bold">Meeting Chat</h2>
          <button onClick={() => setShowChat(false)} className="p-2 hover:bg-gray-700 rounded-lg">
             <Share2 className="transform rotate-180" size={18}/>
          </button>
        </div>
        
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {messages.map((msg, idx) => (
            <div key={idx} className={`flex flex-col ${msg.sender === userName ? 'items-end' : 'items-start'}`}>
              <div className="flex items-baseline gap-2 mb-1">
                 <span className="text-xs font-bold text-gray-400">{msg.sender}</span>
                 <span className="text-[10px] text-gray-600">{msg.time ? new Date(msg.time.seconds * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : ''}</span>
              </div>
              <div className={`px-3 py-2 rounded-2xl max-w-[85%] text-sm ${
                msg.sender === userName 
                  ? 'bg-blue-600 text-white rounded-tr-none' 
                  : 'bg-gray-700 text-gray-200 rounded-tl-none'
              }`}>
                {msg.text}
              </div>
            </div>
          ))}
          {messages.length === 0 && (
            <div className="text-center text-gray-500 mt-10 text-sm">
              <MessageSquare className="mx-auto h-8 w-8 mb-2 opacity-30" />
              No messages yet
            </div>
          )}
        </div>

        <form onSubmit={sendMessage} className="p-4 border-t border-gray-700 bg-gray-800">
          <div className="relative">
            <input
              type="text"
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              placeholder="Type a message..."
              className="w-full pl-4 pr-10 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-white text-sm"
            />
            <button 
              type="submit"
              disabled={!newMessage.trim()}
              className="absolute right-2 top-2 p-1.5 text-blue-400 hover:bg-gray-600 rounded-lg disabled:opacity-50 transition"
            >
              <Share2 size={16} />
            </button>
          </div>
        </form>
      </div>

    </div>
  );
}

// --- Helper Components ---
function VideoPlayer({ stream }) {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

  return (
    <video
      ref={videoRef}
      autoPlay
      playsInline
      className="w-full h-full object-cover"
    />
  );
}

function ControlButton({ onClick, active, icon, activeClass, inactiveClass, badge, title }) {
  return (
    <button
      onClick={onClick}
      className={`relative h-12 w-12 rounded-xl flex items-center justify-center transition-all duration-200 border ${active ? activeClass : inactiveClass} active:scale-95`}
      title={title}
    >
      {React.cloneElement(icon, { size: 20 })}
      {badge && (
        <span className="absolute top-0 right-0 -mt-1 -mr-1 h-3 w-3 bg-red-500 rounded-full border-2 border-gray-800"></span>
      )}
    </button>
  );
}