Spaces:

samirerty
/

anycoder-5bccc721

Running

File size: 40,471 Bytes

b598574

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>چت روم فارسی | Persian Chat</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts: Vazirmatn for Persian Typography -->
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Vazirmatn', 'sans-serif'],
                    },
                    colors: {
                        primary: '#6366f1', // Indigo 500
                        secondary: '#ec4899', // Pink 500
                        dark: '#0f172a', // Slate 900
                        card: '#1e293b', // Slate 800
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            background-color: #0f172a;
            color: #f8fafc;
            overflow-x: hidden;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1e293b; 
        }
        ::-webkit-scrollbar-thumb {
            background: #475569; 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #6366f1; 
        }

        .glass-panel {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gradient-text {
            background: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hidden-page {
            display: none;
        }

        .active-page {
            display: flex;
            animation: fadeIn 0.4s ease-in-out;
        }

        /* Chat Bubble Styles */
        .message-bubble {
            max-width: 80%;
            padding: 10px 15px;
            border-radius: 18px;
            margin-bottom: 10px;
            position: relative;
            word-wrap: break-word;
        }
        .message-sent {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-bottom-right-radius: 4px;
            align-self: flex-end;
        }
        .message-received {
            background: #334155;
            border-bottom-left-radius: 4px;
            align-self: flex-start;
        }
    </style>
</head>
<body class="h-screen flex flex-col font-sans antialiased selection:bg-primary selection:text-white">

    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 glass-panel border-b border-white/10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-2 cursor-pointer" onclick="router.navigate('home')">
                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold">
                        <i class="fa-solid fa-comments"></i>
                    </div>
                    <span class="font-bold text-xl tracking-tight">چت<span class="text-primary">روم</span></span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4 space-x-reverse">
                        <span id="nav-user-info" class="text-gray-300 text-sm hidden items-center gap-2">
                            <!-- Populated by JS -->
                        </span>
                        <button id="btn-logout" onclick="auth.logout()" class="hidden bg-red-500/10 hover:bg-red-500/20 text-red-400 px-3 py-1 rounded-md text-sm font-medium transition-colors">
                            خروج
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content Area -->
    <main class="flex-grow pt-16 relative">
        
        <!-- BACKGROUND EFFECTS -->
        <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
            <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
            <div class="absolute bottom-[-10%] left-[-5%] w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
        </div>

        <!-- 1. LANDING PAGE -->
        <section id="page-home" class="active-page flex-col items-center justify-center min-h-[80vh] text-center px-4">
            <div class="max-w-3xl mx-auto animate-slide-up">
                <div class="inline-block mb-4 px-4 py-1 rounded-full bg-white/5 border border-white/10 text-sm text-primary font-medium">
                    نسخه ۱.۰ • بدون نیاز به سرور
                </div>
                <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">
                    ارتباط آسان و <br>
                    <span class="gradient-text">امن</span> با دوستان
                </h1>
                <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
                    یک پلتفرم چت ساده، سریع و کاملاً محلی. بدون پیچیدگی‌های سرور، فقط کافیست ثبت نام کنید و لینک روم خود را به اشتراک بگذارید.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <button onclick="router.navigate('auth')" class="px-8 py-4 bg-primary hover:bg-indigo-600 text-white rounded-xl font-bold text-lg transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/30 flex items-center justify-center gap-2">
                        <span>شروع کنید</span>
                        <i class="fa-solid fa-arrow-left"></i>
                    </button>
                    <button onclick="alert('این یک پروژه نمونه است. داده‌ها در مرورگر شما ذخیره می‌شوند.')" class="px-8 py-4 bg-white/5 hover:bg-white/10 text-white border border-white/10 rounded-xl font-bold text-lg transition-all">
                        اطلاعات بیشتر
                    </button>
                </div>
                
                <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 text-right">
                    <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-primary/50 transition-colors">
                        <div class="w-12 h-12 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center mb-4 text-xl">
                            <i class="fa-solid fa-bolt"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">سریع و سبک</h3>
                        <p class="text-gray-400 text-sm">بدون نیاز به دیتابیس سنگین، همه چیز در لحظه لود می‌شود.</p>
                    </div>
                    <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-secondary/50 transition-colors">
                        <div class="w-12 h-12 rounded-lg bg-pink-500/20 text-pink-400 flex items-center justify-center mb-4 text-xl">
                            <i class="fa-solid fa-link"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">اشتراک‌گذاری آسان</h3>
                        <p class="text-gray-400 text-sm">با یک کلیک لینک روم خود را کپی کرده و برای دوستان بفرستید.</p>
                    </div>
                    <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-green-500/50 transition-colors">
                        <div class="w-12 h-12 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center mb-4 text-xl">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">حریم خصوصی</h3>
                        <p class="text-gray-400 text-sm">داده‌ها فقط روی دستگاه شما ذخیره می‌شوند.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. AUTHENTICATION PAGE -->
        <section id="page-auth" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4">
            <div class="w-full max-w-md p-8 rounded-2xl glass-panel shadow-2xl animate-slide-up">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold mb-2">خوش آمدید</h2>
                    <p class="text-gray-400">برای ادامه شماره خود را وارد کنید</p>
                </div>

                <!-- Tabs -->
                <div class="flex bg-dark rounded-lg p-1 mb-6">
                    <button onclick="auth.toggleMode('login')" id="tab-login" class="flex-1 py-2 rounded-md text-sm font-medium transition-all bg-primary text-white shadow">ورود</button>
                    <button onclick="auth.toggleMode('register')" id="tab-register" class="flex-1 py-2 rounded-md text-sm font-medium transition-all text-gray-400 hover:text-white">ثبت نام</button>
                </div>

                <form id="auth-form" onsubmit="auth.handleSubmit(event)" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-400 mb-1">شماره موبایل</label>
                        <div class="relative">
                            <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-mobile-screen"></i></span>
                            <input type="tel" id="auth-phone" required placeholder="09xxxxxxxxx" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" dir="ltr">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-400 mb-1">رمز عبور</label>
                        <div class="relative">
                            <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-lock"></i></span>
                            <input type="password" id="auth-password" required placeholder="••••••••" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" dir="ltr">
                        </div>
                    </div>

                    <div id="register-fields" class="hidden space-y-4">
                         <div>
                            <label class="block text-sm font-medium text-gray-400 mb-1">نام نمایشی</label>
                            <div class="relative">
                                <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-user"></i></span>
                                <input type="text" id="auth-name" placeholder="مثلاً: علی" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white font-bold py-3 rounded-lg shadow-lg shadow-indigo-500/25 transition-all transform active:scale-95 mt-2">
                        <span id="auth-btn-text">ورود به حساب</span>
                    </button>
                </form>
                
                <div class="mt-6 text-center">
                    <button onclick="router.navigate('home')" class="text-sm text-gray-500 hover:text-white transition-colors">
                        <i class="fa-solid fa-arrow-right ml-1"></i> بازگشت به صفحه اصلی
                    </button>
                </div>
            </div>
        </section>

        <!-- 3. DASHBOARD (ROOMS) -->
        <section id="page-dashboard" class="hidden-page flex-col items-center pt-10 px-4 pb-20">
            <div class="w-full max-w-5xl">
                <div class="flex justify-between items-end mb-8 border-b border-white/10 pb-4">
                    <div>
                        <h2 class="text-3xl font-bold">اتاق‌های من</h2>
                        <p class="text-gray-400 mt-1">شما می‌توانید حداکثر <span class="text-primary font-bold">3</span> اتاق داشته باشید.</p>
                    </div>
                    <button onclick="router.navigate('settings')" class="text-sm bg-white/5 hover:bg-white/10 px-4 py-2 rounded-lg transition-colors border border-white/10">
                        <i class="fa-solid fa-gear ml-2"></i> تنظیمات پروفایل
                    </button>
                </div>

                <!-- Rooms Grid -->
                <div id="rooms-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Rooms injected via JS -->
                </div>

                <!-- Empty State (If no rooms) -->
                <div id="empty-state" class="hidden flex-col items-center justify-center py-20 text-center border-2 border-dashed border-white/10 rounded-2xl bg-white/5">
                    <div class="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center text-3xl text-gray-500 mb-4">
                        <i class="fa-regular fa-folder-open"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-300">هنوز اتاقی نساخته‌اید</h3>
                    <p class="text-gray-500 mt-2 mb-6">برای شروع گفتگو، یک اتاق جدید بسازید.</p>
                </div>
            </div>
        </section>

        <!-- 4. CHAT ROOM -->
        <section id="page-chat" class="hidden-page fixed inset-0 z-40 bg-dark pt-16 flex flex-col">
            <!-- Chat Header -->
            <div class="h-16 bg-card border-b border-white/10 flex items-center justify-between px-4 shadow-md z-10">
                <div class="flex items-center gap-3">
                    <button onclick="router.navigate('dashboard')" class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors">
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                    <div class="w-10 h-10 rounded-full bg-gradient-to-tr from-primary to-secondary flex items-center justify-center text-white font-bold text-lg">
                        <i class="fa-solid fa-hashtag"></i>
                    </div>
                    <div>
                        <h3 id="chat-room-name" class="font-bold text-lg leading-tight">Room Name</h3>
                        <span class="text-xs text-green-400 flex items-center gap-1">
                            <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> آنلاین
                        </span>
                    </div>
                </div>
                <button onclick="chat.copyLink()" class="text-sm bg-primary/20 text-primary hover:bg-primary hover:text-white px-3 py-1.5 rounded-lg transition-all border border-primary/30">
                    <i class="fa-regular fa-copy ml-1"></i> کپی لینک
                </button>
            </div>

            <!-- Chat Area -->
            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]">
                <!-- Messages injected via JS -->
                <div class="text-center my-4">
                    <span class="bg-black/30 text-gray-400 text-xs px-3 py-1 rounded-full">امروز</span>
                </div>
            </div>

            <!-- Chat Input -->
            <div class="p-4 bg-card border-t border-white/10">
                <form onsubmit="chat.sendMessage(event)" class="flex gap-2">
                    <input type="text" id="chat-input" placeholder="پیام خود را بنویسید..." class="flex-1 bg-dark border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" autocomplete="off">
                    <button type="submit" class="w-12 h-12 bg-primary hover:bg-indigo-600 text-white rounded-xl flex items-center justify-center transition-all shadow-lg shadow-indigo-500/20">
                        <i class="fa-solid fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </section>

        <!-- 5. SETTINGS PAGE -->
        <section id="page-settings" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4">
            <div class="w-full max-w-2xl glass-panel rounded-2xl p-8 animate-slide-up">
                <div class="flex items-center justify-between mb-8 border-b border-white/10 pb-4">
                    <h2 class="text-2xl font-bold">تنظیمات پروفایل</h2>
                    <button onclick="router.navigate('dashboard')" class="text-gray-400 hover:text-white">
                        <i class="fa-solid fa-xmark text-xl"></i>
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Avatar Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-400 mb-3">انتخاب آواتار</label>
                        <div class="grid grid-cols-4 gap-3" id="avatar-grid">
                            <!-- Avatars injected via JS -->
                        </div>
                    </div>

                    <!-- Info Form -->
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-400 mb-2">نام نمایشی</label>
                            <input type="text" id="settings-name" class="w-full bg-dark border border-white/10 rounded-lg py-3 px-4 text-white focus:border-primary focus:outline-none transition-colors">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-400 mb-2">شماره موبایل</label>
                            <input type="text" disabled class="w-full bg-black/20 border border-white/5 rounded-lg py-3 px-4 text-gray-500 cursor-not-allowed">
                            <p class="text-xs text-gray-500 mt-1">شماره موبایل قابل تغییر نیست.</p>
                        </div>

                        <button onclick="settings.save()" class="w-full bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-lg transition-all shadow-lg shadow-indigo-500/20">
                            ذخیره تغییرات
                        </button>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- Toast Notification -->
    <div id="toast" class="fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-card border border-white/10 text-white px-6 py-3 rounded-full shadow-2xl translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-2">
        <i class="fa-solid fa-circle-check text-green-400"></i>
        <span id="toast-msg">عملیات موفقیت آمیز بود</span>
    </div>

    <!-- JAVASCRIPT LOGIC -->
    <script>
        // --- DATA & STATE MANAGEMENT ---
        const AVATARS = [
            { id: 'av1', color: 'from-blue-400 to-blue-600', icon: 'fa-user-astronaut' },
            { id: 'av2', color: 'from-purple-400 to-purple-600', icon: 'fa-robot' },
            { id: 'av3', color: 'from-pink-400 to-pink-600', icon: 'fa-ghost' },
            { id: 'av4', color: 'from-green-400 to-green-600', icon: 'fa-gamepad' },
            { id: 'av5', color: 'from-yellow-400 to-orange-500', icon: 'fa-cat' },
            { id: 'av6', color: 'from-red-400 to-red-600', icon: 'fa-dragon' },
            { id: 'av7', color: 'from-indigo-400 to-indigo-600', icon: 'fa-meteor' },
            { id: 'av8', color: 'from-teal-400 to-teal-600', icon: 'fa-frog' },
        ];

        // Mock Database (In-Memory + LocalStorage persistence)
        const db = {
            users: JSON.parse(localStorage.getItem('chat_users')) || [],
            rooms: JSON.parse(localStorage.getItem('chat_rooms')) || [],
            messages: JSON.parse(localStorage.getItem('chat_messages')) || {}, // Key: roomId, Value: Array of msgs
            
            saveUsers() { localStorage.setItem('chat_users', JSON.stringify(this.users)); },
            saveRooms() { localStorage.setItem('chat_rooms', JSON.stringify(this.rooms)); },
            saveMessages() { localStorage.setItem('chat_messages', JSON.stringify(this.messages)); }
        };

        let currentUser = JSON.parse(localStorage.getItem('chat_current_user')) || null;
        let currentRoomId = null;

        // --- UTILS ---
        const utils = {
            generateId: () => Math.random().toString(36).substr(2, 9),
            showToast: (msg) => {
                const toast = document.getElementById('toast');
                document.getElementById('toast-msg').innerText = msg;
                toast.classList.remove('translate-y-20', 'opacity-0');
                setTimeout(() => {
                    toast.classList.add('translate-y-20', 'opacity-0');
                }, 3000);
            },
            getAvatarHtml: (avatarId, size = 'w-10 h-10') => {
                const av = AVATARS.find(a => a.id === avatarId) || AVATARS[0];
                return `<div class="${size} rounded-full bg-gradient-to-br ${av.color} flex items-center justify-center text-white shadow-lg border-2 border-white/10">
                    <i class="fa-solid ${av.icon}"></i>
                </div>`;
            }
        };

        // --- ROUTER ---
        const router = {
            navigate: (pageId) => {
                // Hide all pages
                document.querySelectorAll('main > section').forEach(el => {
                    el.classList.remove('active-page');
                    el.classList.add('hidden-page');
                });
                
                // Show target page
                const target = document.getElementById(`page-${pageId}`);
                if(target) {
                    target.classList.remove('hidden-page');
                    target.classList.add('active-page');
                }

                // Auth Guard
                if (pageId !== 'home' && pageId !== 'auth' && !currentUser) {
                    router.navigate('auth');
                    return;
                }

                // Page specific init
                if (pageId === 'dashboard') dashboard.init();
                if (pageId === 'settings') settings.init();
                if (pageId === 'chat') chat.init();
            }
        };

        // --- AUTH MODULE ---
        const auth = {
            mode: 'login', // 'login' or 'register'

            toggleMode: (mode) => {
                auth.mode = mode;
                const regFields = document.getElementById('register-fields');
                const btnText = document.getElementById('auth-btn-text');
                const tabLogin = document.getElementById('tab-login');
                const tabReg = document.getElementById('tab-register');

                if (mode === 'register') {
                    regFields.classList.remove('hidden');
                    btnText.innerText = 'ایجاد حساب کاربری';
                    tabReg.classList.add('bg-primary', 'text-white', 'shadow');
                    tabReg.classList.remove('text-gray-400');
                    tabLogin.classList.remove('bg-primary', 'text-white', 'shadow');
                    tabLogin.classList.add('text-gray-400');
                } else {
                    regFields.classList.add('hidden');
                    btnText.innerText = 'ورود به حساب';
                    tabLogin.classList.add('bg-primary', 'text-white', 'shadow');
                    tabLogin.classList.remove('text-gray-400');
                    tabReg.classList.remove('bg-primary', 'text-white', 'shadow');
                    tabReg.classList.add('text-gray-400');
                }
            },

            handleSubmit: (e) => {
                e.preventDefault();
                const phone = document.getElementById('auth-phone').value;
                const password = document.getElementById('auth-password').value;

                if (auth.mode === 'register') {
                    const name = document.getElementById('auth-name').value;
                    if (!name) return utils.showToast('لطفاً نام خود را وارد کنید');

                    // Check existing
                    if (db.users.find(u => u.phone === phone)) {
                        return utils.showToast('این شماره قبلاً ثبت شده است');
                    }

                    const newUser = {
                        id: utils.generateId(),
                        phone,
                        password, // In real app, hash this!
                        name,
                        avatar: AVATARS[0].id
                    };
                    db.users.push(newUser);
                    db.saveUsers();
                    currentUser = newUser;
                    utils.showToast('ثبت نام موفقیت آمیز بود');
                } else {
                    // Login
                    const user = db.users.find(u => u.phone === phone && u.password === password);
                    if (!user) {
                        return utils.showToast('شماره یا رمز عبور اشتباه است');
                    }
                    currentUser = user;
                    utils.showToast('خوش آمدید ' + user.name);
                }

                localStorage.setItem('chat_current_user', JSON.stringify(currentUser));
                auth.updateUI();
                router.navigate('dashboard');
            },

            logout: () => {
                currentUser = null;
                localStorage.removeItem('chat_current_user');
                auth.updateUI();
                router.navigate('home');
            },

            updateUI: () => {
                const navInfo = document.getElementById('nav-user-info');
                const btnLogout = document.getElementById('btn-logout');
                
                if (currentUser) {
                    navInfo.innerHTML = `${utils.getAvatarHtml(currentUser.avatar, 'w-6 h-6 text-xs')} <span>${currentUser.name}</span>`;
                    navInfo.classList.remove('hidden');
                    navInfo.classList.add('flex');
                    btnLogout.classList.remove('hidden');
                } else {
                    navInfo.classList.add('hidden');
                    navInfo.classList.remove('flex');
                    btnLogout.classList.add('hidden');
                }
            }
        };

        // --- DASHBOARD MODULE ---
        const dashboard = {
            init: () => {
                const container = document.getElementById('rooms-container');
                const emptyState = document.getElementById('empty-state');
                container.innerHTML = '';

                const myRooms = db.rooms.filter(r => r.ownerId === currentUser.id);

                if (myRooms.length === 0) {
                    emptyState.classList.remove('hidden');
                    emptyState.classList.add('flex');
                } else {
                    emptyState.classList.add('hidden');
                    emptyState.classList.remove('flex');
                }

                // Render existing rooms
                myRooms.forEach(room => {
                    const roomCard = document.createElement('div');
                    roomCard.className = 'bg-card border border-white/10 rounded-xl p-5 hover:border-primary/50 transition-all group relative overflow-hidden';
                    roomCard.innerHTML = `
                        <div class="absolute top-0 left-0 w-1 h-full bg-primary"></div>
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-2xl text-primary">
                                <i class="fa-solid fa-comments"></i>
                            </div>
                            <button onclick="dashboard.deleteRoom('${room.id}')" class="text-gray-500 hover:text-red-400 transition-colors">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </div>
                        <h3 class="text-xl font-bold mb-1">${room.name}</h3>
                        <p class="text-gray-400 text-sm mb-4">ایجاد شده در: ${new Date(room.createdAt).toLocaleDateString('fa-IR')}</p>
                        <button onclick="router.navigate('chat'); chat.loadRoom('${room.id}')" class="w-full bg-white/5 hover:bg-primary hover:text-white text-primary border border-primary/30 py-2 rounded-lg transition-all font-medium">
                            ورود به اتاق
                        </button>
                    `;
                    container.appendChild(roomCard);
                });

                // Render "Create New" card if < 3
                if (myRooms.length < 3) {
                    const createCard = document.createElement('div');
                    createCard.className = 'border-2 border-dashed border-white/20 rounded-xl p-5 flex flex-col items-center justify-center text-gray-400 hover:border-primary hover:text-primary hover:bg-primary/5 transition-all cursor-pointer min-h-[200px]';
                    createCard.onclick = dashboard.createRoom;
                    createCard.innerHTML = `
                        <div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center text-3xl mb-3 group-hover:scale-110 transition-transform">
                            <i class="fa-solid fa-plus"></i>
                        </div>
                        <span class="font-bold">ساخت اتاق جدید</span>
                        <span class="text-xs mt-1 opacity-70">(${myRooms.length} از 3)</span>
                    `;
                    container.appendChild(createCard);
                }
            },

            createRoom: () => {
                const name = prompt("نام اتاق جدید را وارد کنید:", "اتاق گفتگوی من");
                if (name) {
                    const newRoom = {
                        id: utils.generateId(),
                        ownerId: currentUser.id,
                        name: name,
                        createdAt: Date.now()
                    };
                    db.rooms.push(newRoom);
                    db.saveRooms();
                    db.messages[newRoom.id] = []; // Init message array
                    db.saveMessages();
                    dashboard.init();
                    utils.showToast('اتاق جدید ساخته شد');
                }
            },

            deleteRoom: (id) => {
                if(confirm('آیا از حذف این اتاق اطمینان دارید؟')) {
                    db.rooms = db.rooms.filter(r => r.id !== id);
                    delete db.messages[id];
                    db.saveRooms();
                    db.saveMessages();
                    dashboard.init();
                    utils.showToast('اتاق حذف شد');
                }
            }
        };

        // --- CHAT MODULE ---
        const chat = {
            loadRoom: (roomId) => {
                currentRoomId = roomId;
                const room = db.rooms.find(r => r.id === roomId);
                document.getElementById('chat-room-name').innerText = room ? room.name : 'Unknown Room';
                chat.renderMessages();
            },

            init: () => {
                // Scroll to bottom
                const container = document.getElementById('chat-messages');
                container.scrollTop = container.scrollHeight;
            },

            renderMessages: () => {
                const container = document.getElementById('chat-messages');
                // Keep the date separator
                container.innerHTML = `<div class="text-center my-4"><span class="bg-black/30 text-gray-400 text-xs px-3 py-1 rounded-full">امروز</span></div>`;
                
                const msgs = db.messages[currentRoomId] || [];
                
                msgs.forEach(msg => {
                    const isMe = msg.userId === currentUser.id;
                    const div = document.createElement('div');
                    div.className = `flex w-full ${isMe ? 'justify-end' : 'justify-start'}`;
                    
                    // Find user details for avatar
                    const user = isMe ? currentUser : db.users.find(u => u.id === msg.userId);
                    const avatarHtml = user ? utils.getAvatarHtml(user.avatar, 'w-8 h-8 text-xs') : '';

                    div.innerHTML = `
                        <div class="flex items-end gap-2 max-w-[85%] ${isMe ? 'flex-row-reverse' : 'flex-row'}">
                            ${!isMe ? avatarHtml : ''}
                            <div class="message-bubble ${isMe ? 'message-sent' : 'message-received'}">
                                ${!isMe ? `<div class="text-xs text-gray-300 mb-1 font-bold">${user ? user.name : 'Unknown'}</div>` : ''}
                                <div class="text-sm">${msg.text}</div>
                                <div class="text-[10px] opacity-70 mt-1 text-left" dir="ltr">${msg.time}</div>
                            </div>
                            ${isMe ? avatarHtml : ''}
                        </div>
                    `;
                    container.appendChild(div);
                });
                
                container.scrollTop = container.scrollHeight;
            },

            sendMessage: (e) => {
                e.preventDefault();
                const input = document.getElementById('chat-input');
                const text = input.value.trim();
                if (!text) return;

                if (!db.messages[currentRoomId]) db.messages[currentRoomId] = [];

                db.messages[currentRoomId].push({
                    userId: currentUser.id,
                    text: text,
                    time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'})
                });

                db.saveMessages();
                input.value = '';
                chat.renderMessages();
                
                // Simulate reply after 2 seconds
                setTimeout(() => {
                    const replies = ["جالب بود!", "متوجه شدم.", "حتماً بررسی می‌کنم.", "😂😂", "ممنون از اطلاع رسانی"];
                    const randomReply = replies[Math.floor(Math.random() * replies.length)];
                    
                    // Simulate a fake user
                    const fakeUsers = db.users.filter(u => u.id !== currentUser.id);
                    const randomUser = fakeUsers.length > 0 ? fakeUsers[0] : {id: 'bot', name: 'پشتیبان', avatar: 'av2'};

                    db.messages[currentRoomId].push({
                        userId: randomUser.id,
                        text: randomReply,
                        time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'})
                    });
                    db.saveMessages();
                    chat.renderMessages();
                }, 2000);
            },

            copyLink: () => {
                const dummyLink = `https://chatapp.ir/room/${currentRoomId}`;
                navigator.clipboard.writeText(dummyLink).then(() => {
                    utils.showToast('لینک اتاق کپی شد');
                });
            }
        };

        // --- SETTINGS MODULE ---
        const settings = {
            selectedAvatar: currentUser ? currentUser.avatar : AVATARS[0].id,

            init: () => {
                document.getElementById('settings-name').value = currentUser.name;
                settings.renderAvatars();
            },

            renderAvatars: () => {
                const grid = document.getElementById('avatar-grid');
                grid.innerHTML = '';
                AVATARS.forEach(av => {
                    const div = document.createElement('div');
                    const isSelected = settings.selectedAvatar === av.id;
                    div.className = `cursor-pointer rounded-xl p-2 transition-all border-2 ${isSelected ? 'border-primary bg-primary/20' : 'border-transparent hover:bg-white/5'}`;
                    div.onclick = () => {
                        settings.selectedAvatar = av.id;
                        settings.renderAvatars();
                    };
                    div.innerHTML = `<div class="w-full aspect-square rounded-lg bg-gradient-to-br ${av.color} flex items-center justify-center text-white text-2xl">
                        <i class="fa-solid ${av.icon}"></i>
                    </div>`;
                    grid.appendChild(div);
                });
            },

            save: () => {
                const newName = document.getElementById('settings-name').value;
                if (!newName) return utils.showToast('نام نمی‌تواند خالی باشد');

                // Update current user
                currentUser.name = newName;
                currentUser.avatar = settings.selectedAvatar;
                
                // Update DB
                const userIndex = db.users.findIndex(u => u.id === currentUser.id);
                if (userIndex > -1) {
                    db.users[userIndex] = currentUser;
                    db.saveUsers();
                }
                
                localStorage.setItem('chat_current_user', JSON.stringify(currentUser));
                auth.updateUI();
                utils.showToast('تنظیمات ذخیره شد');
                router.navigate('dashboard');
            }
        };

        // --- INITIALIZATION ---
        window.addEventListener('DOMContentLoaded', () => {
            auth.updateUI();
            if (currentUser) {
                router.navigate('dashboard');
            } else {
                router.navigate('home');
            }
        });

    </script>
</body>
</html>