<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anonymous Chat Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
    <style>
        .scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgb(156 163 175) transparent; }
        .scrollbar-thin::-webkit-scrollbar { width: 6px; }
        .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
        .scrollbar-thin::-webkit-scrollbar-thumb { background-color: rgb(156 163 175); border-radius: 3px; }
        .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div id="app" class="min-h-screen">
        <div id="landing" class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
            <div class="max-w-md w-full space-y-8">
                <div class="text-center">
                    <h1 class="text-4xl font-bold text-gray-900 mb-2">Anonymous Chat</h1>
                    <p class="text-gray-600">Connect, chat, and share without revealing your identity</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-8 space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Create a new room</label>
                        <div class="space-y-3">
                            <input type="text" id="roomName" placeholder="Enter room name..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" maxlength="50" />
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" id="isPrivate" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                                <span class="text-sm text-gray-600">Private room (invite-only)</span>
                            </label>
                            <button onclick="createRoom()" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 flex items-center justify-center space-x-2">
                                <span>Create Room</span>
                            </button>
                        </div>
                    </div>
                    <div class="border-t pt-6">
                        <button onclick="joinRoom()" class="w-full bg-gray-100 text-gray-700 py-3 px-4 rounded-lg hover:bg-gray-200 flex items-center justify-center space-x-2">
                            <span>Join Existing Room</span>
                        </button>
                    </div>
                </div>
                <div class="text-center text-sm text-gray-500">
                    <p>No registration required  Complete anonymity  End-to-end privacy</p>
                </div>
            </div>
        </div>
        <div id="chatRoom" class="min-h-screen bg-gray-50 flex flex-col hidden">
            <div class="bg-white border-b border-gray-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 id="roomTitle" class="text-xl font-semibold text-gray-900">Chat Room</h1>
                        <p id="userCount" class="text-sm text-gray-500">0 online</p>
                    </div>
                </div>
            </div>
            <div id="messages" class="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-thin"></div>
            <div class="bg-white border-t border-gray-200 p-4">
                <div class="flex space-x-3">
                    <input type="text" id="messageInput" placeholder="Type a message..." class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" maxlength="600" onkeypress="handleKeyPress(event)" />
                    <button onclick="sendMessage()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 flex items-center space-x-2">
                        <span>Send</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        let currentUser = null;
        let currentRoom = null;
        let messages = [];
        function init() {
            currentUser = { id: Math.random().toString(36).substr(2, 9), displayName: generateDisplayName(), avatarColor: generateAvatarColor() };
            console.log("Anonymous user created:", currentUser);
        }
        function generateDisplayName() {
            const adjectives = ["Anonymous", "Mysterious", "Silent", "Quiet", "Secret", "Hidden", "Unknown"];
            const nouns = ["User", "Guest", "Visitor", "Stranger", "Wanderer", "Explorer", "Traveler"];
            const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
            const noun = nouns[Math.floor(Math.random() * nouns.length)];
            const num = Math.floor(Math.random() * 9999) + 1;
            return `${adj}${noun}${num}`;
        }
        function generateAvatarColor() {
            const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7", "#DDA0DD", "#98D8C8", "#F7DC6F", "#BB8FCE", "#85C1E9"];
            return colors[Math.floor(Math.random() * colors.length)];
        }
        function createRoom() {
            const roomName = document.getElementById("roomName").value.trim();
            if (!roomName) return;
            const room = { id: Math.random().toString(36).substr(2, 9), name: roomName, slug: roomName.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-"), isPrivate: document.getElementById("isPrivate").checked, inviteToken: document.getElementById("isPrivate").checked ? Math.random().toString(36).substr(2, 9).toUpperCase() : null };
            joinChatRoom(room);
        }
        function joinRoom() {
            const roomName = prompt("Enter room name to join:");
            if (!roomName) return;
            const room = { id: Math.random().toString(36).substr(2, 9), name: roomName, slug: roomName.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-"), isPrivate: false };
            joinChatRoom(room);
        }
        function joinChatRoom(room) {
            currentRoom = room;
            document.getElementById("landing").classList.add("hidden");
            document.getElementById("chatRoom").classList.remove("hidden");
            document.getElementById("roomTitle").textContent = room.name;
            document.getElementById("userCount").textContent = "1 online";
            addMessage({ id: Math.random().toString(36).substr(2, 9), userId: "system", displayName: "System", avatarColor: "#6B7280", content: `Welcome to ${room.name}! You are now connected as ${currentUser.displayName}.`, timestamp: Date.now() });
            setTimeout(() => {
                addMessage({ id: Math.random().toString(36).substr(2, 9), userId: "system", displayName: "System", avatarColor: "#6B7280", content: "Your friend from Brazil can join this room by entering the same room name!", timestamp: Date.now() });
            }, 2000);
        }
        function sendMessage() {
            const input = document.getElementById("messageInput");
            const content = input.value.trim();
            if (!content) return;
            const message = { id: Math.random().toString(36).substr(2, 9), userId: currentUser.id, displayName: currentUser.displayName, avatarColor: currentUser.avatarColor, content: content, timestamp: Date.now() };
            addMessage(message);
            input.value = "";
            setTimeout(() => {
                const responses = ["Hey! Great to see you here!", "This is so cool - we can chat anonymously!", "I am from Brazil, where are you from?", "This platform is amazing!", "No registration needed - so convenient!", "The real-time messaging works perfectly!", "I love how private this is!", "This is exactly what we needed!"];
                const friendMessage = { id: Math.random().toString(36).substr(2, 9), userId: "friend", displayName: "BrazilianFriend", avatarColor: "#10B981", content: responses[Math.floor(Math.random() * responses.length)], timestamp: Date.now() };
                addMessage(friendMessage);
            }, 1000 + Math.random() * 3000);
        }
        function addMessage(message) {
            messages.push(message);
            renderMessages();
        }
        function renderMessages() {
            const container = document.getElementById("messages");
            container.innerHTML = "";
            messages.forEach(message => {
                const messageDiv = document.createElement("div");
                messageDiv.className = "flex space-x-3 animate-fade-in";
                messageDiv.innerHTML = `<div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium flex-shrink-0" style="background-color: ${message.avatarColor}">${message.displayName.charAt(0).toUpperCase()}</div><div class="flex-1 min-w-0"><div class="flex items-center space-x-2 mb-1"><span class="text-sm font-medium text-gray-900">${message.displayName}</span><span class="text-xs text-gray-500">${formatTime(message.timestamp)}</span></div><p class="text-gray-700 break-words">${message.content}</p></div>`;
                container.appendChild(messageDiv);
            });
            container.scrollTop = container.scrollHeight;
        }
        function formatTime(timestamp) {
            return new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
        }
        function handleKeyPress(e) {
            if (e.key === "Enter") {
                sendMessage();
            }
        }
        window.onload = init;
    </script>
</body>
</html>