Upload App.tsx

src/App.tsx

@@ -0,0 +1,758 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { 
+  Video, VideoOff, Mic, MicOff, Send, SkipForward, 
+  StopCircle, MessageSquare, User, Loader2, Camera,
+  Shield, Globe, Zap, Target, ChevronDown, ChevronUp,
+  MessageCircle, Sparkles, Users, Lock
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+
+type Page = 'landing' | 'setup' | 'chat';
+type ChatType = 'text' | 'video';
+type Message = { sender: 'me' | 'stranger' | 'system'; text: string };
+
+// ✅ FIXED: ExpressTURN free TURN server (replaces broken openrelay)
+const STUN_SERVERS = {
+  iceServers: [
+    { urls: "stun:stun.l.google.com:19302" },
+    { urls: "stun:stun1.l.google.com:19302" },
+    { urls: "stun:stun2.l.google.com:19302" },
+    {
+      urls: "turn:free.expressturn.com:3478",
+      username: "000000002092388734",
+      credential: "hLJdGxtDrgYmtIB4JWcBgXm6Xw0="
+    },
+    {
+      urls: "turn:free.expressturn.com:3478?transport=tcp",
+      username: "000000002092388734",
+      credential: "hLJdGxtDrgYmtIB4JWcBgXm6Xw0="
+    }
+  ]
+};
+
+export default function App() {
+  const [currentPage, setCurrentPage] = useState<Page>('landing');
+  const [chatType, setChatType] = useState<ChatType>('text');
+  const [interests, setInterests] = useState('');
+  const [onlineCount, setOnlineCount] = useState(0);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVideoOff, setIsVideoOff] = useState(false);
+  const [showPermissionModal, setShowPermissionModal] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isConnected, setIsConnected] = useState(false); // ✅ NEW: track if matched
+  const [error, setError] = useState<string | null>(null);
+
+  const socketRef = useRef<Socket | null>(null);
+  const localStreamRef = useRef<MediaStream | null>(null);
+  const pcRef = useRef<RTCPeerConnection | null>(null);
+  const localVideoRef = useRef<HTMLVideoElement>(null);
+  const remoteVideoRef = useRef<HTMLVideoElement>(null);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const hasJoinedQueueRef = useRef(false);
+  const isMatchedRef = useRef(false); // ✅ NEW: prevent re-joining after match
+
+  // Initialize socket
+  useEffect(() => {
+    const socket = io({ transports: ["websocket"] });
+    socketRef.current = socket;
+
+    socket.on('online_count', (count: number) => {
+      setOnlineCount(count);
+    });
+
+    socket.on('waiting', () => {
+      setIsSearching(true);
+      setIsConnected(false);
+      setMessages([{ sender: 'system', text: 'Looking for a stranger...' }]);
+    });
+
+    socket.on('matched', async ({ role, type }) => {
+      // ✅ FIXED: Mark as matched immediately so no more queue joins happen
+      isMatchedRef.current = true;
+      hasJoinedQueueRef.current = true;
+      setIsSearching(false);
+      setIsConnected(true);
+      setMessages([{ sender: 'system', text: `You are now chatting with a random stranger. Say hi!` }]);
+      
+      if (type === 'video') {
+        await setupWebRTC(role);
+      }
+    });
+
+    socket.on('signal', async (data) => {
+      if (!pcRef.current) return;
+      try {
+        if (data.type === 'offer') {
+          await pcRef.current.setRemoteDescription(new RTCSessionDescription(data));
+          const answer = await pcRef.current.createAnswer();
+          await pcRef.current.setLocalDescription(answer);
+          socketRef.current?.emit('signal', answer);
+        } else if (data.type === 'answer') {
+          await pcRef.current.setRemoteDescription(new RTCSessionDescription(data));
+        } else if (data.type === 'ice') {
+          await pcRef.current.addIceCandidate(new RTCIceCandidate(data.candidate));
+        }
+      } catch (err) {
+        console.error('Signaling error:', err);
+      }
+    });
+
+    socket.on('receive-message', (text: string) => {
+      setMessages(prev => [...prev, { sender: 'stranger', text }]);
+    });
+
+    socket.on('partner-disconnected', () => {
+      cleanupPC();
+      isMatchedRef.current = false;
+      setIsConnected(false);
+      setMessages(prev => [...prev, { sender: 'system', text: 'Stranger has disconnected.' }]);
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const cleanupPC = () => {
+    if (pcRef.current) {
+      pcRef.current.close();
+      pcRef.current = null;
+    }
+    if (remoteVideoRef.current) {
+      remoteVideoRef.current.srcObject = null;
+    }
+    if (localStreamRef.current) {
+      localStreamRef.current.getTracks().forEach(track => track.stop());
+      localStreamRef.current = null;
+    }
+    if (localVideoRef.current) {
+      localVideoRef.current.srcObject = null;
+    }
+  };
+
+  const setupWebRTC = async (role: 'initiator' | 'receiver') => {
+    cleanupPC();
+
+    // ✅ Get fresh media stream before creating peer connection
+    const stream = await getMedia();
+    if (!stream) {
+      console.error('No media stream available for WebRTC');
+      return;
+    }
+
+    const pc = new RTCPeerConnection(STUN_SERVERS);
+    pcRef.current = pc;
+
+    // ✅ Log ICE connection state for debugging
+    pc.oniceconnectionstatechange = () => {
+      console.log('ICE state:', pc.iceConnectionState);
+    };
+
+    pc.onicecandidate = (event) => {
+      if (event.candidate) {
+        socketRef.current?.emit('signal', { type: 'ice', candidate: event.candidate });
+      }
+    };
+
+    pc.ontrack = (event) => {
+      console.log('Got remote track!', event.streams[0]);
+      if (remoteVideoRef.current && event.streams[0]) {
+        remoteVideoRef.current.srcObject = event.streams[0];
+        // ✅ Force play on mobile
+        remoteVideoRef.current.play().catch(e => console.log('Play error:', e));
+      }
+    };
+
+    // ✅ Add tracks from fresh stream
+    stream.getTracks().forEach(track => {
+      pc.addTrack(track, stream);
+    });
+
+    if (role === 'initiator') {
+      const offer = await pc.createOffer({
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true
+      });
+      await pc.setLocalDescription(offer);
+      socketRef.current?.emit('signal', offer);
+    }
+  };
+
+  const getMedia = async () => {
+    if (localStreamRef.current) return localStreamRef.current;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } }, 
+        audio: true 
+      });
+      localStreamRef.current = stream;
+      if (localVideoRef.current) {
+        localVideoRef.current.srcObject = stream;
+        localVideoRef.current.play().catch(e => console.log('Local play error:', e));
+      }
+      return stream;
+    } catch (err) {
+      console.error('Media access error:', err);
+      setError('Please allow camera & microphone access to use video chat.');
+      return null;
+    }
+  };
+
+  const startChatting = async (type: ChatType) => {
+    setChatType(type);
+    if (type === 'video') {
+      const hasPermission = localStorage.getItem('camera_permission_granted');
+      if (!hasPermission) {
+        setShowPermissionModal(true);
+        return;
+      }
+      const stream = await getMedia();
+      if (!stream) return;
+    }
+    
+    setCurrentPage('chat');
+    setMessages([]);
+    isMatchedRef.current = false; // ✅ Reset match state
+    if (!hasJoinedQueueRef.current) {
+      hasJoinedQueueRef.current = true;
+      socketRef.current?.emit('join-queue', { type, interests });
+    }
+  };
+
+  const handlePermissionConfirm = async () => {
+    setShowPermissionModal(false);
+    const stream = await getMedia();
+    if (stream) {
+      localStorage.setItem('camera_permission_granted', 'true');
+      setCurrentPage('chat');
+      setMessages([]);
+      isMatchedRef.current = false; // ✅ Reset match state
+      if (!hasJoinedQueueRef.current) {
+        hasJoinedQueueRef.current = true;
+        socketRef.current?.emit('join-queue', { type: 'video', interests });
+      }
+    }
+  };
+
+  const handleNext = () => {
+    cleanupPC();
+    setMessages([]);
+    isMatchedRef.current = false; // ✅ Reset for next match
+    hasJoinedQueueRef.current = true;
+    setIsConnected(false);
+    socketRef.current?.emit('leave-chat');
+    socketRef.current?.emit('join-queue', { type: chatType, interests });
+  };
+
+  const handleStop = () => {
+    cleanupPC();
+    hasJoinedQueueRef.current = false;
+    isMatchedRef.current = false;
+    socketRef.current?.emit('leave-chat');
+    setCurrentPage('setup');
+    setMessages([]);
+    setIsSearching(false);
+    setIsConnected(false);
+  };
+
+  const sendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (inputText.trim()) {
+      socketRef.current?.emit('send-message', inputText);
+      setMessages(prev => [...prev, { sender: 'me', text: inputText }]);
+      setInputText('');
+    }
+  };
+
+  const toggleMute = () => {
+    if (localStreamRef.current) {
+      localStreamRef.current.getAudioTracks().forEach(track => {
+        track.enabled = !track.enabled;
+      });
+      setIsMuted(prev => !prev);
+    }
+  };
+
+  const toggleVideo = () => {
+    if (localStreamRef.current) {
+      localStreamRef.current.getVideoTracks().forEach(track => {
+        track.enabled = !track.enabled;
+      });
+      setIsVideoOff(prev => !prev);
+    }
+  };
+
+  const FeatureCard = ({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) => (
+    <div className="p-6 rounded-2xl flex flex-col items-center text-center gap-3 bg-zinc-900/40 border border-zinc-800/50 hover:border-indigo-500/30 transition-all group">
+      <div className="p-3 rounded-xl bg-indigo-500/10 text-indigo-400 group-hover:scale-110 transition-transform">
+        <Icon size={24} />
+      </div>
+      <h3 className="text-sm font-bold uppercase tracking-widest text-zinc-200">{title}</h3>
+      <p className="text-[10px] text-zinc-500 leading-relaxed">{desc}</p>
+    </div>
+  );
+
+  const FAQItem = ({ question }: { question: string }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <div className="border-b border-zinc-800/50">
+        <button 
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full py-5 flex items-center justify-between text-left group"
+        >
+          <span className="text-sm font-medium text-zinc-300 group-hover:text-indigo-400 transition-colors">{question}</span>
+          {isOpen ? <ChevronUp size={18} className="text-indigo-500" /> : <ChevronDown size={18} className="text-zinc-600" />}
+        </button>
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div 
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="overflow-hidden"
+            >
+              <div className="pb-5 text-xs text-zinc-500 leading-relaxed">
+                MingleHub uses advanced matching algorithms to connect you with people who share your interests while maintaining a safe and moderated environment for everyone.
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-screen font-sans overflow-hidden bg-[#050505] text-white">
+      <AnimatePresence mode="wait">
+        {/* PAGE 1: LANDING */}
+        {currentPage === 'landing' && (
+          <motion.div 
+            key="landing"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="h-full flex flex-col"
+          >
+            <header className="h-20 border-b border-zinc-900 flex items-center justify-between px-8">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-600/20">
+                  <Sparkles size={24} className="text-white" />
+                </div>
+                <span className="text-2xl font-black tracking-tighter uppercase italic">MingleHub</span>
+              </div>
+              <div className="hidden md:flex items-center gap-8 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+                <button 
+                  onClick={() => window.open(window.location.href, '_blank')}
+                  className="flex items-center gap-2 px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-lg hover:text-indigo-400 hover:border-indigo-500/30 transition-all"
+                >
+                  <Globe size={14} />
+                  Open in New Tab
+                </button>
+                <a href="#" className="hover:text-indigo-400 transition-colors">Safety</a>
+                <a href="#" className="hover:text-indigo-400 transition-colors">Community</a>
+                <a href="#" className="hover:text-indigo-400 transition-colors">Support</a>
+              </div>
+            </header>
+
+            <main className="flex-1 overflow-y-auto">
+              <div className="max-w-4xl mx-auto py-20 px-8 space-y-24">
+                <div className="text-center space-y-8">
+                  <motion.div
+                    initial={{ y: 20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ delay: 0.2 }}
+                  >
+                    <h1 className="text-5xl md:text-7xl font-black tracking-tight leading-none">
+                      Connect with the <br />
+                      <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">World Instantly.</span>
+                    </h1>
+                  </motion.div>
+                  
+                  <p className="max-w-xl mx-auto text-zinc-400 text-lg leading-relaxed">
+                    MingleHub is a premium anonymous video and text chat platform. Meet interesting people, make new friends, and explore the world from your screen.
+                  </p>
+                  
+                  <div className="pt-8 flex flex-col items-center gap-6">
+                    <button 
+                      onClick={() => setCurrentPage('setup')}
+                      className="group relative px-10 py-5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl transition-all transform active:scale-95 shadow-xl shadow-indigo-600/20 overflow-hidden"
+                    >
+                      <span className="relative z-10 flex items-center gap-2">
+                        START MINGLING NOW
+                        <Zap size={18} className="group-hover:animate-pulse" />
+                      </span>
+                    </button>
+                    <div className="flex items-center gap-2 text-[10px] font-bold text-zinc-600 uppercase tracking-widest">
+                      <Users size={14} className="text-indigo-500" />
+                      {onlineCount.toLocaleString()} PEOPLE CURRENTLY ONLINE
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <FeatureCard icon={Lock} title="Private & Secure" desc="End-to-end encrypted signaling and anonymous profiles keep your identity safe." />
+                  <FeatureCard icon={Globe} title="Global Reach" desc="Connect with people from over 190 countries instantly with low latency." />
+                  <FeatureCard icon={Zap} title="Zero Lag" desc="Optimized WebRTC infrastructure ensures smooth video and instant messaging." />
+                </div>
+
+                <div className="space-y-8 pt-12">
+                  <h2 className="text-3xl font-black text-center">Common Questions</h2>
+                  <div className="max-w-2xl mx-auto space-y-2">
+                    <FAQItem question="How does MingleHub ensure user safety?" />
+                    <FAQItem question="Do I need to create an account to chat?" />
+                    <FAQItem question="Is MingleHub free to use?" />
+                    <FAQItem question="Can I use MingleHub on my mobile device?" />
+                  </div>
+                </div>
+
+                <footer className="pt-20 pb-12 border-t border-zinc-900 flex flex-col md:flex-row items-center justify-between gap-8 text-[10px] text-zinc-600 uppercase tracking-widest font-bold">
+                  <div className="flex items-center gap-2">
+                    <Sparkles size={14} className="text-indigo-500" />
+                    <span>© 2026 MingleHub Global</span>
+                  </div>
+                  <div className="flex gap-8">
+                    <a href="#" className="hover:text-indigo-400">Terms</a>
+                    <a href="#" className="hover:text-indigo-400">Privacy</a>
+                    <a href="#" className="hover:text-indigo-400">Guidelines</a>
+                    <a href="#" className="hover:text-indigo-400">Contact</a>
+                  </div>
+                </footer>
+              </div>
+            </main>
+          </motion.div>
+        )}
+
+        {/* PAGE 2: SETUP */}
+        {currentPage === 'setup' && (
+          <motion.div 
+            key="setup"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="h-full flex flex-col"
+          >
+            <header className="h-20 border-b border-zinc-900 flex items-center justify-between px-8">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
+                  <Sparkles size={24} className="text-white" />
+                </div>
+                <span className="text-2xl font-black tracking-tighter uppercase italic">MingleHub</span>
+              </div>
+              <div className="flex items-center gap-6">
+                <button 
+                  onClick={() => window.open(window.location.href, '_blank')}
+                  className="hidden md:flex items-center gap-2 px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-indigo-400 hover:border-indigo-500/30 transition-all"
+                >
+                  <Globe size={14} />
+                  Open in New Tab
+                </button>
+                <button 
+                  onClick={() => setCurrentPage('landing')}
+                  className="text-[10px] font-bold text-zinc-500 hover:text-white uppercase tracking-widest transition-colors"
+                >
+                  Back to Home
+                </button>
+              </div>
+            </header>
+
+            <main className="flex-1 overflow-y-auto">
+              <div className="max-w-xl mx-auto py-20 px-8 space-y-12">
+                <div className="text-center space-y-4">
+                  <h1 className="text-4xl font-black tracking-tight">Configure Chat</h1>
+                  <p className="text-zinc-500 text-sm">Choose how you want to connect today.</p>
+                </div>
+
+                <div className="space-y-10">
+                  <div className="grid grid-cols-2 gap-4">
+                    <button 
+                      onClick={() => startChatting('text')}
+                      className={`p-8 rounded-3xl border-2 transition-all flex flex-col items-center gap-4 group ${chatType === 'text' ? 'border-indigo-600 bg-indigo-600/10' : 'border-zinc-800 bg-zinc-900/50 hover:border-zinc-700'}`}
+                    >
+                      <div className={`p-4 rounded-2xl transition-colors ${chatType === 'text' ? 'bg-indigo-600 text-white' : 'bg-zinc-800 text-zinc-500 group-hover:text-zinc-300'}`}>
+                        <MessageSquare size={32} />
+                      </div>
+                      <span className="font-bold uppercase tracking-widest text-sm">Text Chat</span>
+                    </button>
+                    <button 
+                      onClick={() => startChatting('video')}
+                      className={`p-8 rounded-3xl border-2 transition-all flex flex-col items-center gap-4 group ${chatType === 'video' ? 'border-indigo-600 bg-indigo-600/10' : 'border-zinc-800 bg-zinc-900/50 hover:border-zinc-700'}`}
+                    >
+                      <div className={`p-4 rounded-2xl transition-colors ${chatType === 'video' ? 'bg-indigo-600 text-white' : 'bg-zinc-800 text-zinc-500 group-hover:text-zinc-300'}`}>
+                        <Video size={32} />
+                      </div>
+                      <span className="font-bold uppercase tracking-widest text-sm">Video Chat</span>
+                    </button>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <label className="text-xs font-bold uppercase tracking-widest text-zinc-500">Your Interests</label>
+                      <span className="text-[10px] text-zinc-600 font-bold uppercase tracking-widest">Optional</span>
+                    </div>
+                    <input 
+                      type="text"
+                      value={interests}
+                      onChange={(e) => setInterests(e.target.value)}
+                      placeholder="e.g. Music, Travel, Coding..."
+                      className="w-full px-6 py-4 bg-zinc-900 border border-zinc-800 rounded-2xl text-sm focus:outline-none focus:border-indigo-600 transition-all text-white placeholder:text-zinc-700"
+                    />
+                  </div>
+
+                  <div className="p-6 bg-indigo-600/5 border border-indigo-500/10 rounded-2xl flex items-start gap-4">
+                    <Shield size={20} className="text-indigo-500 shrink-0 mt-1" />
+                    <div className="space-y-1">
+                      <h4 className="text-xs font-bold uppercase tracking-widest text-indigo-400">Safety First</h4>
+                      <p className="text-[10px] text-zinc-500 leading-relaxed">
+                        MingleHub is a moderated community. Please be respectful to others. Harassment or inappropriate behavior will result in a permanent ban.
+                      </p>
+                    </div>
+                  </div>
+
+                  <button 
+                    onClick={() => startChatting(chatType)}
+                    className="w-full py-5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl transition-all transform active:scale-95 shadow-xl shadow-indigo-600/20"
+                  >
+                    ENTER CHAT ROOM
+                  </button>
+                </div>
+              </div>
+            </main>
+          </motion.div>
+        )}
+
+        {/* PAGE 3: CHAT */}
+        {currentPage === 'chat' && (
+          <motion.div 
+            key="chat"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="h-full flex flex-col bg-[#050505]"
+          >
+            <header className="h-16 border-b border-zinc-900 flex items-center justify-between px-6">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
+                  <Sparkles size={18} className="text-white" />
+                </div>
+                <span className="font-black tracking-tighter text-sm uppercase italic">MingleHub</span>
+              </div>
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-2 px-3 py-1 bg-green-500/10 border border-green-500/20 rounded-full">
+                  <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
+                  <span className="text-[9px] font-bold text-green-500 uppercase tracking-widest">Live</span>
+                </div>
+                {chatType === 'video' && (
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={toggleMute}
+                      className={`p-2 rounded-lg transition-colors ${isMuted ? 'bg-red-500/20 text-red-400' : 'text-zinc-500 hover:text-white'}`}
+                    >
+                      {isMuted ? <MicOff size={18} /> : <Mic size={18} />}
+                    </button>
+                    <button
+                      onClick={toggleVideo}
+                      className={`p-2 rounded-lg transition-colors ${isVideoOff ? 'bg-red-500/20 text-red-400' : 'text-zinc-500 hover:text-white'}`}
+                    >
+                      {isVideoOff ? <VideoOff size={18} /> : <Video size={18} />}
+                    </button>
+                  </div>
+                )}
+                <button 
+                  onClick={handleStop}
+                  className="p-2 text-zinc-600 hover:text-white transition-colors"
+                >
+                  <StopCircle size={22} />
+                </button>
+              </div>
+            </header>
+
+            <main className="flex-1 flex flex-col md:flex-row overflow-hidden">
+              <div className="flex-1 flex flex-col bg-black relative">
+                {chatType === 'video' ? (
+                  <div className="flex-1 grid grid-rows-2 md:grid-rows-1 md:grid-cols-2 gap-1 p-1">
+                    <div className="relative bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-800/50">
+                      <video 
+                        ref={remoteVideoRef} 
+                        autoPlay 
+                        playsInline 
+                        className="w-full h-full object-cover" 
+                      />
+                      <div className="absolute top-4 left-4 px-3 py-1 bg-black/60 backdrop-blur-md rounded-lg text-[9px] font-bold uppercase tracking-widest border border-white/5">Stranger</div>
+                      {!isConnected && !isSearching && (
+                        <div className="absolute inset-0 flex items-center justify-center flex-col gap-4">
+                          <User size={48} className="text-zinc-800" />
+                          <p className="text-zinc-600 text-[10px] font-bold uppercase tracking-widest">Waiting for video...</p>
+                        </div>
+                      )}
+                    </div>
+                    <div className="relative bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-800/50">
+                      <video 
+                        ref={localVideoRef} 
+                        autoPlay 
+                        muted 
+                        playsInline 
+                        className="w-full h-full object-cover scale-x-[-1]" 
+                      />
+                      <div className="absolute top-4 left-4 px-3 py-1 bg-black/60 backdrop-blur-md rounded-lg text-[9px] font-bold uppercase tracking-widest border border-white/5">You</div>
+                      {isVideoOff && (
+                        <div className="absolute inset-0 bg-zinc-950 flex items-center justify-center">
+                          <VideoOff size={32} className="text-zinc-800" />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex-1 flex items-center justify-center flex-col gap-8 p-12 text-center">
+                    <div className="w-28 h-28 bg-indigo-600/10 rounded-full flex items-center justify-center border border-indigo-500/20">
+                      <MessageSquare size={48} className="text-indigo-500" />
+                    </div>
+                    <div className="space-y-3">
+                      <h2 className="text-3xl font-black tracking-tight">Secure Text Chat</h2>
+                      <p className="text-zinc-500 text-sm max-w-xs mx-auto">You are now connected with a stranger. Be kind and enjoy the conversation.</p>
+                    </div>
+                  </div>
+                )}
+
+                {isSearching && (
+                  <div className="absolute inset-0 z-50 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center gap-8">
+                    <div className="relative">
+                      <div className="w-20 h-20 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin" />
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <Globe size={28} className="text-zinc-700" />
+                      </div>
+                    </div>
+                    <div className="text-center space-y-3">
+                      <h3 className="text-2xl font-black tracking-tight">Searching...</h3>
+                      <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-[0.2em]">Matching with a global stranger</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="w-full md:w-[450px] flex flex-col border-l border-zinc-900 bg-[#080808]">
+                <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide">
+                  <AnimatePresence initial={false}>
+                    {messages.map((msg, i) => (
+                      <motion.div
+                        key={i}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className={`flex flex-col ${msg.sender === 'me' ? 'items-end' : msg.sender === 'system' ? 'items-center' : 'items-start'}`}
+                      >
+                        {msg.sender === 'system' ? (
+                          <div className="px-5 py-2 bg-zinc-900/40 border border-zinc-800/50 rounded-full text-[9px] font-bold text-zinc-500 uppercase tracking-[0.15em]">
+                            {msg.text}
+                          </div>
+                        ) : (
+                          <>
+                            <span className="text-[8px] font-black uppercase tracking-widest text-zinc-600 mb-1.5 px-1">
+                              {msg.sender === 'me' ? 'You' : 'Stranger'}
+                            </span>
+                            <div className={`px-5 py-3 rounded-2xl text-[13px] max-w-[85%] leading-relaxed ${
+                              msg.sender === 'me' 
+                                ? 'bg-indigo-600 text-white rounded-tr-none shadow-lg shadow-indigo-600/10' 
+                                : 'bg-zinc-900 text-zinc-200 rounded-tl-none border border-zinc-800/50'
+                            }`}>
+                              {msg.text}
+                            </div>
+                          </>
+                        )}
+                      </motion.div>
+                    ))}
+                  </AnimatePresence>
+                  <div ref={chatEndRef} />
+                </div>
+
+                <div className="p-6 border-t border-zinc-900 space-y-6 bg-[#080808]">
+                  <div className="flex gap-3">
+                    <button 
+                      onClick={handleStop}
+                      className="px-6 py-4 bg-zinc-900 hover:bg-zinc-800 text-zinc-400 font-bold rounded-2xl transition-all text-xs uppercase tracking-widest"
+                    >
+                      Stop
+                    </button>
+                    <button 
+                      onClick={handleNext}
+                      className="flex-1 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl transition-all flex items-center justify-center gap-3 shadow-lg shadow-indigo-600/20 uppercase tracking-widest text-xs"
+                    >
+                      <SkipForward size={18} />
+                      Next Partner
+                    </button>
+                  </div>
+                  
+                  <form onSubmit={sendMessage} className="relative">
+                    <input 
+                      type="text"
+                      value={inputText}
+                      onChange={(e) => setInputText(e.target.value)}
+                      placeholder="Type something..."
+                      className="w-full bg-zinc-900 border border-zinc-800 rounded-2xl py-5 pl-6 pr-16 text-sm focus:outline-none focus:border-indigo-600 transition-all text-white placeholder:text-zinc-700"
+                    />
+                    <button 
+                      type="submit"
+                      disabled={!inputText.trim()}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 p-3 text-indigo-500 hover:text-indigo-400 disabled:text-zinc-800 transition-colors"
+                    >
+                      <Send size={22} />
+                    </button>
+                  </form>
+                </div>
+              </div>
+            </main>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Permission Modal */}
+      <AnimatePresence>
+        {showPermissionModal && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-6">
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-black/95 backdrop-blur-2xl"
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.9, y: 20 }}
+              className="relative w-full max-w-sm bg-zinc-900 border border-zinc-800 rounded-[40px] p-12 text-center space-y-10 shadow-2xl"
+            >
+              <div className="w-28 h-28 bg-indigo-600/10 rounded-full flex items-center justify-center mx-auto border border-indigo-500/20">
+                <Camera size={56} className="text-indigo-500" />
+              </div>
+              <div className="space-y-4">
+                <h2 className="text-4xl font-black tracking-tight text-white leading-none">Enable <br /> Camera</h2>
+                <p className="text-zinc-500 text-sm leading-relaxed">
+                  To connect via video, MingleHub requires access to your camera and microphone.
+                </p>
+              </div>
+              <div className="flex flex-col gap-4">
+                <button 
+                  onClick={handlePermissionConfirm}
+                  className="w-full py-6 bg-indigo-600 text-white font-black rounded-3xl hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-600/20 uppercase tracking-widest text-xs"
+                >
+                  ALLOW ACCESS
+                </button>
+                <button 
+                  onClick={() => setShowPermissionModal(false)}
+                  className="w-full py-6 bg-zinc-800 text-zinc-500 font-bold rounded-3xl hover:bg-zinc-700 transition-all uppercase tracking-widest text-[10px]"
+                >
+                  MAYBE LATER
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}