let socket;
let currentUser = null;
let currentToken = null;


const LANGUAGES = [
    { code: 'en', name: 'English',    flag: '🇺🇸', country: 'United States' },
    { code: 'es', name: 'Español',    flag: '🇪🇸', country: 'España' },
    { code: 'fr', name: 'Français',   flag: '🇫🇷', country: 'France' },
    { code: 'de', name: 'Deutsch',    flag: '🇩🇪', country: 'Deutschland' },
    { code: 'ja', name: '日本語',      flag: '🇯🇵', country: 'Japan' },
    { code: 'pt', name: 'Português',  flag: '🇧🇷', country: 'Brasil' },
    { code: 'ar', name: 'العربية',    flag: '🇸🇦', country: 'السعودية' },
    { code: 'zh', name: '中文',        flag: '🇨🇳', country: '中国' },
    { code: 'ru', name: 'Русский',    flag: '🇷🇺', country: 'Россия' },
    { code: 'ko', name: '한국어',      flag: '🇰🇷', country: '대한민국' },
    { code: 'tr', name: 'Türkçe',     flag: '🇹🇷', country: 'Türkiye' },
    { code: 'it', name: 'Italiano',   flag: '🇮🇹', country: 'Italia' },
];
const I18N = {
    en: { login:'Login', register:'Register', send:'Send', settings:'Settings', friends:'Friends', profile:'Profile', logout:'Logout', search:'Search...', welcome:'Welcome back!', typeMsg:'Type a message...' },
    es: { login:'Ingresar', register:'Registrarse', send:'Enviar', settings:'Ajustes', friends:'Amigos', profile:'Perfil', logout:'Cerrar sesión', search:'Buscar...', welcome:'¡Bienvenido!', typeMsg:'Escribe un mensaje...' },
    fr: { login:'Connexion', register:"S'inscrire", send:'Envoyer', settings:'Paramètres', friends:'Amis', profile:'Profil', logout:'Déconnexion', search:'Rechercher...', welcome:'Content de vous revoir!', typeMsg:'Tapez un message...' },
    de: { login:'Anmelden', register:'Registrieren', send:'Senden', settings:'Einstellungen', friends:'Freunde', profile:'Profil', logout:'Abmelden', search:'Suchen...', welcome:'Willkommen zurück!', typeMsg:'Nachricht eingeben...' },
    ja: { login:'ログイン', register:'登録', send:'送信', settings:'設定', friends:'友達', profile:'プロフィール', logout:'ログアウト', search:'検索...', welcome:'おかえりなさい！', typeMsg:'メッセージを入力...' },
    pt: { login:'Entrar', register:'Cadastrar', send:'Enviar', settings:'Configurações', friends:'Amigos', profile:'Perfil', logout:'Sair', search:'Pesquisar...', welcome:'Bem-vindo de volta!', typeMsg:'Digite uma mensagem...' },
    ar: { login:'دخول', register:'تسجيل', send:'إرسال', settings:'الإعدادات', friends:'أصدقاء', profile:'الملف الشخصي', logout:'خروج', search:'بحث...', welcome:'مرحباً بعودتك!', typeMsg:'اكتب رسالة...' },
    zh: { login:'登录', register:'注册', send:'发送', settings:'设置', friends:'朋友', profile:'个人资料', logout:'退出', search:'搜索...', welcome:'欢迎回来！', typeMsg:'输入消息...' },
    ru: { login:'Войти', register:'Регистрация', send:'Отправить', settings:'Настройки', friends:'Друзья', profile:'Профиль', logout:'Выход', search:'Поиск...', welcome:'С возвращением!', typeMsg:'Введите сообщение...' },
    ko: { login:'로그인', register:'회원가입', send:'전송', settings:'설정', friends:'친구', profile:'프로필', logout:'로그아웃', search:'검색...', welcome:'다시 오신 것을 환영해요!', typeMsg:'메시지 입력...' },
    tr: { login:'Giriş', register:'Kayıt Ol', send:'Gönder', settings:'Ayarlar', friends:'Arkadaşlar', profile:'Profil', logout:'Çıkış', search:'Ara...', welcome:'Tekrar hoş geldiniz!', typeMsg:'Mesaj yaz...' },
    it: { login:'Accedi', register:'Registrati', send:'Invia', settings:'Impostazioni', friends:'Amici', profile:'Profilo', logout:'Esci', search:'Cerca...', welcome:'Ben tornato!', typeMsg:'Scrivi un messaggio...' },
};
const UI_TRANSLATIONS = {
    en: {
        'Login': 'Login', 'Register': 'Register', 'Create Account': 'Create Account', 'Already have an account?': 'Already have an account?', "Don't have an account?": "Don't have an account?", 'Forgot password?': 'Forgot password?', 'Reset Password': 'Reset Password',
        '🪪 Account': '🪪 Account', '🛡️ Privacy': '🛡️ Privacy', '🗨️ Chat': '🗨️ Chat', '📬 Notifications': '📬 Notifications', '🪄 Appearance': '🪄 Appearance', '🧭 Language': '🧭 Language', '📈 Statistics': '📈 Statistics',
        'Settings': 'Settings', 'Message...': 'Message...', 'Send': 'Send', 'Close': 'Close', 'Communities': 'Communities', 'Groups': 'Groups', 'Open': 'Open', 'Join': 'Join', 'Manage': 'Manage', 'Create New Group': 'Create New Group',
        '⚙️ Settings': '⚙️ Settings', '➕ Create New Group': '➕ Create New Group',
        'Account Settings': 'Account Settings', 'Privacy & Safety': 'Privacy & Safety', 'Chat Settings': 'Chat Settings', 'Notifications': 'Notifications', 'Appearance': 'Appearance', '📊 Your Statistics': '📊 Your Statistics', '🌐 Language': '🌐 Language',
        'Email': 'Email', 'Change Username': 'Change Username', 'Update Username': 'Update Username', 'Delete Account': 'Delete Account', 'Switch Account': 'Switch Account', 'Desktop notifications': 'Desktop notifications', 'Message sound': 'Message sound',
        'Theme': 'Theme', 'Dark': 'Dark', 'Light': 'Light', 'Custom Colors': 'Custom Colors', 'Compact mode': 'Compact mode', 'Reset Statistics': 'Reset Statistics', '🎯 Events & Challenges': '🎯 Events & Challenges',
        'App Language': 'App Language', 'Choose your preferred language. UI text will update immediately.': 'Choose your preferred language. UI text will update immediately.', 'Current:': 'Current:', 'All messages': 'All messages', 'Only mentions': 'Only mentions', 'Nothing': 'Nothing',
        'Default Microphone': 'Default Microphone', 'Default Speaker': 'Default Speaker', 'Off': 'Off', '30 seconds': '30 seconds', '1 minute': '1 minute', '5 minutes': '5 minutes', '1 hour': '1 hour', 'Small': 'Small', 'Medium': 'Medium', 'Large': 'Large',
        'Trivia Challenge': 'Trivia Challenge', 'Question': 'Question', 'Type your answer': 'Type your answer', 'Speed Typing': 'Speed Typing', 'Type this exactly': 'Type this exactly', 'Memory Challenge': 'Memory Challenge', 'Click emojis in order': 'Click emojis in order', 'Math Blitz': 'Math Blitz', 'Riddle Challenge': 'Riddle Challenge', 'Answer the riddle': 'Answer the riddle', 'Reaction Speed': 'Reaction Speed', 'Word Scramble': 'Word Scramble', 'Unscramble the word': 'Unscramble the word',
        'Challenge cancelled': 'Challenge cancelled', 'coins earned': 'coins earned', 'correct': 'correct', 'Try again': 'Try again', 'Challenge complete': 'Challenge complete', 'Error loading': 'Error loading', 'Completed': 'Completed', 'Network error': 'Network error',
        'Success': 'Success', 'Warning': 'Warning', 'Error': 'Error', 'Info': 'Info', 'Please login': 'Please login', 'Invalid input': 'Invalid input',
        'Pending request': 'Pending request', 'Accept': 'Accept', 'Decline': 'Decline', 'No friends yet': 'No friends yet', 'Online': 'Online', 'Offline': 'Offline', 'Profile': 'Profile', 'No pending requests': 'No pending requests',
        'Premium Shop': 'Premium Shop', 'Instant equip items, profile cosmetics, and seasonal packs': 'Instant equip items, profile cosmetics, and seasonal packs', 'Live Deals: up to 20% off featured items': 'Live Deals: up to 20% off featured items',
        'No shop items available': 'No shop items available', 'Buy Now': 'Buy Now', 'Need Coins': 'Need Coins', 'Need': 'Need', 'You have': 'You have', 'Item purchased and applied!': 'Item purchased and applied!'
    },
    es: { 'Login':'Ingresar','Register':'Registrarse','Create Account':'Crear cuenta','Already have an account?':'¿Ya tienes una cuenta?','Don\'t have an account?':'¿No tienes una cuenta?','Forgot password?':'¿Olvidaste tu contraseña?','Reset Password':'Restablecer contraseña','🪪 Account':'🪪 Cuenta','🛡️ Privacy':'🛡️ Privacidad','🗨️ Chat':'🗨️ Chat','📬 Notifications':'📬 Notificaciones','🪄 Appearance':'🪄 Apariencia','🧭 Language':'🧭 Idioma','📈 Statistics':'📈 Estadísticas','⚙️ Settings':'⚙️ Ajustes','Message...':'Mensaje...','Send':'Enviar','Close':'Cerrar','Communities':'Comunidades','Groups':'Grupos','Open':'Abrir','Join':'Unirse','Manage':'Administrar','➕ Create New Group':'➕ Crear grupo','Account Settings':'Configuración de cuenta','Privacy & Safety':'Privacidad y seguridad','Chat Settings':'Configuración del chat','Notifications':'Notificaciones','Appearance':'Apariencia','📊 Your Statistics':'📊 Tus estadísticas','🌐 Language':'🌐 Idioma','Email':'Correo','Change Username':'Cambiar nombre','Update Username':'Actualizar nombre','Delete Account':'Eliminar cuenta','Switch Account':'Cambiar cuenta','Desktop notifications':'Notificaciones de escritorio','Message sound':'Sonido del mensaje','Theme':'Tema','Dark':'Oscuro','Light':'Claro','Custom Colors':'Colores personalizados','Compact mode':'Modo compacto','Reset Statistics':'Restablecer estadísticas','🎯 Events & Challenges':'🎯 Eventos y desafíos','App Language':'Idioma de la app','Choose your preferred language. UI text will update immediately.':'Elige tu idioma. La interfaz se actualiza al instante.','Current:':'Actual:','All messages':'Todos los mensajes','Only mentions':'Solo menciones','Nothing':'Nada','Default Microphone':'Micrófono predeterminado','Default Speaker':'Altavoz predeterminado','Off':'Apagado','30 seconds':'30 segundos','1 minute':'1 minuto','5 minutes':'5 minutos','1 hour':'1 hora','Small':'Pequeño','Medium':'Mediano','Large':'Grande','Trivia Challenge':'Desafío de trivia','Question':'Pregunta','Type your answer':'Escribe tu respuesta','Speed Typing':'Escritura rápida','Type this exactly':'Escribe esto exactamente','Memory Challenge':'Desafío de memoria','Click emojis in order':'Haz clic en emoji en orden','Math Blitz':'Blitz matemático','Riddle Challenge':'Desafío de adivinanzas','Answer the riddle':'Responde la adivinanza','Reaction Speed':'Velocidad de reacción','Word Scramble':'Palabras revueltas','Unscramble the word':'Descramble la palabra','Challenge cancelled':'Desafío cancelado','coins earned':'monedas ganadas','correct':'correcto','Try again':'Intenta de nuevo','Challenge complete':'Desafío completo','Error loading':'Error al cargar','Completed':'Completado','Network error':'Error de red','Success':'Éxito','Warning':'Advertencia','Error':'Error','Info':'Información','Please login':'Por favor inicia sesión','Invalid input':'Entrada inválida' },
    fr: { 'Login':'Connexion','Register':'Inscription','Create Account':'Créer un compte','Already have an account?':'Vous avez déjà un compte ?','Don\'t have an account?':'Vous n\'avez pas de compte ?','Forgot password?':'Mot de passe oublié ?','Reset Password':'Réinitialiser le mot de passe','🪪 Account':'🪪 Compte','🛡️ Privacy':'🛡️ Confidentialité','🗨️ Chat':'🗨️ Chat','📬 Notifications':'📬 Notifications','🪄 Appearance':'🪄 Apparence','🧭 Language':'🧭 Langue','📈 Statistics':'📈 Statistiques','⚙️ Settings':'⚙️ Paramètres','Message...':'Message...','Send':'Envoyer','Close':'Fermer','Communities':'Communautés','Groups':'Groupes','Open':'Ouvrir','Join':'Rejoindre','Manage':'Gérer','➕ Create New Group':'➕ Créer un groupe','Account Settings':'Paramètres du compte','Privacy & Safety':'Confidentialité et sécurité','Chat Settings':'Paramètres du chat','Notifications':'Notifications','Appearance':'Apparence','📊 Your Statistics':'📊 Vos statistiques','🌐 Language':'🌐 Langue','Email':'E-mail','Change Username':'Changer le nom','Update Username':'Mettre à jour le nom','Delete Account':'Supprimer le compte','Switch Account':'Changer de compte','Desktop notifications':'Notifications du bureau','Message sound':'Son du message','Theme':'Thème','Dark':'Sombre','Light':'Clair','Custom Colors':'Couleurs personnalisées','Compact mode':'Mode compact','Reset Statistics':'Réinitialiser les statistiques','🎯 Events & Challenges':'🎯 Événements et défis','App Language':'Langue de l\'application','Choose your preferred language. UI text will update immediately.':'Choisissez votre langue. L\'interface se met à jour immédiatement.','Current:':'Actuel :','All messages':'Tous les messages','Only mentions':'Mentions uniquement','Nothing':'Rien','Default Microphone':'Micro par défaut','Default Speaker':'Haut-parleur par défaut','Off':'Désactivé','30 seconds':'30 secondes','1 minute':'1 minute','5 minutes':'5 minutes','1 hour':'1 heure','Small':'Petit','Medium':'Moyen','Large':'Grand' },
    de: { 'Login':'Anmelden','Register':'Registrieren','Create Account':'Konto erstellen','Already have an account?':'Hast du bereits ein Konto?','Don\'t have an account?':'Noch kein Konto?','Forgot password?':'Passwort vergessen?','Reset Password':'Passwort zurücksetzen','🪪 Account':'🪪 Konto','🛡️ Privacy':'🛡️ Datenschutz','🗨️ Chat':'🗨️ Chat','📬 Notifications':'📬 Benachrichtigungen','🪄 Appearance':'🪄 Darstellung','🧭 Language':'🧭 Sprache','📈 Statistics':'📈 Statistiken','⚙️ Settings':'⚙️ Einstellungen','Message...':'Nachricht...','Send':'Senden','Close':'Schließen','Communities':'Communitys','Groups':'Gruppen','Open':'Öffnen','Join':'Beitreten','Manage':'Verwalten','➕ Create New Group':'➕ Neue Gruppe erstellen','Account Settings':'Kontoeinstellungen','Privacy & Safety':'Datenschutz und Sicherheit','Chat Settings':'Chat-Einstellungen','Notifications':'Benachrichtigungen','Appearance':'Darstellung','📊 Your Statistics':'📊 Deine Statistiken','🌐 Language':'🌐 Sprache','Email':'E-Mail','Change Username':'Benutzernamen ändern','Update Username':'Namen aktualisieren','Delete Account':'Konto löschen','Switch Account':'Konto wechseln','Desktop notifications':'Desktop-Benachrichtigungen','Message sound':'Nachrichtenton','Theme':'Thema','Dark':'Dunkel','Light':'Hell','Custom Colors':'Eigene Farben','Compact mode':'Kompaktmodus','Reset Statistics':'Statistiken zurücksetzen','🎯 Events & Challenges':'🎯 Events und Challenges','App Language':'App-Sprache','Choose your preferred language. UI text will update immediately.':'Wähle deine Sprache. Die Oberfläche wird sofort aktualisiert.','Current:':'Aktuell:','All messages':'Alle Nachrichten','Only mentions':'Nur Erwähnungen','Nothing':'Nichts','Default Microphone':'Standardmikrofon','Default Speaker':'Standardlautsprecher','Off':'Aus','30 seconds':'30 Sekunden','1 minute':'1 Minute','5 minutes':'5 Minuten','1 hour':'1 Stunde','Small':'Klein','Medium':'Mittel','Large':'Groß' },
    ja: { 'Login':'ログイン','Register':'登録','Create Account':'アカウント作成','Already have an account?':'すでにアカウントがありますか？','Don\'t have an account?':'アカウントをお持ちではありませんか？','Forgot password?':'パスワードを忘れましたか？','Reset Password':'パスワードをリセット','🪪 Account':'🪪 アカウント','🛡️ Privacy':'🛡️ プライバシー','🗨️ Chat':'🗨️ チャット','📬 Notifications':'📬 通知','🪄 Appearance':'🪄 外観','🧭 Language':'🧭 言語','📈 Statistics':'📈 統計','⚙️ Settings':'⚙️ 設定','Message...':'メッセージ...','Send':'送信','Close':'閉じる','Communities':'コミュニティ','Groups':'グループ','Open':'開く','Join':'参加','Manage':'管理','➕ Create New Group':'➕ 新しいグループを作成','Account Settings':'アカウント設定','Privacy & Safety':'プライバシーと安全','Chat Settings':'チャット設定','Notifications':'通知','Appearance':'外観','📊 Your Statistics':'📊 あなたの統計','🌐 Language':'🌐 言語','Email':'メール','Change Username':'ユーザー名を変更','Update Username':'ユーザー名を更新','Delete Account':'アカウント削除','Switch Account':'アカウント切替','Desktop notifications':'デスクトップ通知','Message sound':'メッセージ音','Theme':'テーマ','Dark':'ダーク','Light':'ライト','Custom Colors':'カスタムカラー','Compact mode':'コンパクトモード','Reset Statistics':'統計をリセット','🎯 Events & Challenges':'🎯 イベントとチャレンジ','App Language':'アプリ言語','Choose your preferred language. UI text will update immediately.':'言語を選択すると、UIがすぐに更新されます。','Current:':'現在:','All messages':'すべてのメッセージ','Only mentions':'メンションのみ','Nothing':'なし','Default Microphone':'既定のマイク','Default Speaker':'既定のスピーカー','Off':'オフ','30 seconds':'30秒','1 minute':'1分','5 minutes':'5分','1 hour':'1時間','Small':'小','Medium':'中','Large':'大' },
    pt: { 'Login':'Entrar','Register':'Registrar','Create Account':'Criar conta','Already have an account?':'Já tem uma conta?','Don\'t have an account?':'Não tem uma conta?','Forgot password?':'Esqueceu a senha?','Reset Password':'Redefinir senha','🪪 Account':'🪪 Conta','🛡️ Privacy':'🛡️ Privacidade','🗨️ Chat':'🗨️ Chat','📬 Notifications':'📬 Notificações','🪄 Appearance':'🪄 Aparência','🧭 Language':'🧭 Idioma','📈 Statistics':'📈 Estatísticas','⚙️ Settings':'⚙️ Configurações','Message...':'Mensagem...','Send':'Enviar','Close':'Fechar','Communities':'Comunidades','Groups':'Grupos','Open':'Abrir','Join':'Entrar','Manage':'Gerenciar','➕ Create New Group':'➕ Criar novo grupo','Account Settings':'Configurações da conta','Privacy & Safety':'Privacidade e segurança','Chat Settings':'Configurações do chat','Notifications':'Notificações','Appearance':'Aparência','📊 Your Statistics':'📊 Suas estatísticas','🌐 Language':'🌐 Idioma','Email':'E-mail','Change Username':'Alterar nome','Update Username':'Atualizar nome','Delete Account':'Excluir conta','Switch Account':'Trocar conta','Desktop notifications':'Notificações da área de trabalho','Message sound':'Som da mensagem','Theme':'Tema','Dark':'Escuro','Light':'Claro','Custom Colors':'Cores personalizadas','Compact mode':'Modo compacto','Reset Statistics':'Redefinir estatísticas','🎯 Events & Challenges':'🎯 Eventos e desafios','App Language':'Idioma do app','Choose your preferred language. UI text will update immediately.':'Escolha seu idioma. A interface muda imediatamente.','Current:':'Atual:','All messages':'Todas as mensagens','Only mentions':'Só menções','Nothing':'Nada','Default Microphone':'Microfone padrão','Default Speaker':'Alto-falante padrão','Off':'Desligado','30 seconds':'30 segundos','1 minute':'1 minuto','5 minutes':'5 minutos','1 hour':'1 hora','Small':'Pequeno','Medium':'Médio','Large':'Grande' },
    ar: { 'Login':'دخول','Register':'تسجيل','Create Account':'إنشاء حساب','Already have an account?':'هل لديك حساب بالفعل؟','Don\'t have an account?':'ليس لديك حساب؟','Forgot password?':'هل نسيت كلمة المرور؟','Reset Password':'إعادة تعيين كلمة المرور','🪪 Account':'🪪 الحساب','🛡️ Privacy':'🛡️ الخصوصية','🗨️ Chat':'🗨️ الدردشة','📬 Notifications':'📬 الإشعارات','🪄 Appearance':'🪄 المظهر','🧭 Language':'🧭 اللغة','📈 Statistics':'📈 الإحصائيات','⚙️ Settings':'⚙️ الإعدادات','Message...':'رسالة...','Send':'إرسال','Close':'إغلاق','Communities':'المجتمعات','Groups':'المجموعات','Open':'فتح','Join':'انضمام','Manage':'إدارة','➕ Create New Group':'➕ إنشاء مجموعة','Account Settings':'إعدادات الحساب','Privacy & Safety':'الخصوصية والأمان','Chat Settings':'إعدادات الدردشة','Notifications':'الإشعارات','Appearance':'المظهر','📊 Your Statistics':'📊 إحصاءاتك','🌐 Language':'🌐 اللغة','Email':'البريد الإلكتروني','Change Username':'تغيير الاسم','Update Username':'تحديث الاسم','Delete Account':'حذف الحساب','Switch Account':'تبديل الحساب','Desktop notifications':'إشعارات سطح المكتب','Message sound':'صوت الرسالة','Theme':'السمة','Dark':'داكن','Light':'فاتح','Custom Colors':'ألوان مخصصة','Compact mode':'الوضع المضغوط','Reset Statistics':'إعادة تعيين الإحصائيات','🎯 Events & Challenges':'🎯 الفعاليات والتحديات','App Language':'لغة التطبيق','Choose your preferred language. UI text will update immediately.':'اختر لغتك المفضلة. سيتم تحديث الواجهة فوراً.','Current:':'الحالي:','All messages':'كل الرسائل','Only mentions':'الإشارات فقط','Nothing':'لا شيء','Default Microphone':'الميكروفون الافتراضي','Default Speaker':'مكبر الصوت الافتراضي','Off':'إيقاف','30 seconds':'30 ثانية','1 minute':'دقيقة واحدة','5 minutes':'5 دقائق','1 hour':'ساعة واحدة','Small':'صغير','Medium':'متوسط','Large':'كبير' },
    zh: { 'Login':'登录','Register':'注册','Create Account':'创建账户','Already have an account?':'已经有账户了？','Don\'t have an account?':'还没有账户？','Forgot password?':'忘记密码？','Reset Password':'重置密码','🪪 Account':'🪪 账户','🛡️ Privacy':'🛡️ 隐私','🗨️ Chat':'🗨️ 聊天','📬 Notifications':'📬 通知','🪄 Appearance':'🪄 外观','🧭 Language':'🧭 语言','📈 Statistics':'📈 统计','⚙️ Settings':'⚙️ 设置','Message...':'消息...','Send':'发送','Close':'关闭','Communities':'社区','Groups':'群组','Open':'打开','Join':'加入','Manage':'管理','➕ Create New Group':'➕ 创建新群组','Account Settings':'账户设置','Privacy & Safety':'隐私与安全','Chat Settings':'聊天设置','Notifications':'通知','Appearance':'外观','📊 Your Statistics':'📊 你的统计','🌐 Language':'🌐 语言','Email':'邮箱','Change Username':'修改用户名','Update Username':'更新用户名','Delete Account':'删除账户','Switch Account':'切换账户','Desktop notifications':'桌面通知','Message sound':'消息提示音','Theme':'主题','Dark':'深色','Light':'浅色','Custom Colors':'自定义颜色','Compact mode':'紧凑模式','Reset Statistics':'重置统计','🎯 Events & Challenges':'🎯 活动与挑战','App Language':'应用语言','Choose your preferred language. UI text will update immediately.':'选择你的语言，界面会立即更新。','Current:':'当前:','All messages':'所有消息','Only mentions':'仅提及','Nothing':'无','Default Microphone':'默认麦克风','Default Speaker':'默认扬声器','Off':'关闭','30 seconds':'30秒','1 minute':'1分钟','5 minutes':'5分钟','1 hour':'1小时','Small':'小','Medium':'中','Large':'大' },
    ru: { 'Login':'Войти','Register':'Регистрация','Create Account':'Создать аккаунт','Already have an account?':'Уже есть аккаунт?','Don\'t have an account?':'Нет аккаунта?','Forgot password?':'Забыли пароль?','Reset Password':'Сбросить пароль','🪪 Account':'🪪 Аккаунт','🛡️ Privacy':'🛡️ Конфиденциальность','🗨️ Chat':'🗨️ Чат','📬 Notifications':'📬 Уведомления','🪄 Appearance':'🪄 Внешний вид','🧭 Language':'🧭 Язык','📈 Statistics':'📈 Статистика','⚙️ Settings':'⚙️ Настройки','Message...':'Сообщение...','Send':'Отправить','Close':'Закрыть','Communities':'Сообщества','Groups':'Группы','Open':'Открыть','Join':'Вступить','Manage':'Управлять','➕ Create New Group':'➕ Создать группу','Account Settings':'Настройки аккаунта','Privacy & Safety':'Конфиденциальность и безопасность','Chat Settings':'Настройки чата','Notifications':'Уведомления','Appearance':'Внешний вид','📊 Your Statistics':'📊 Ваша статистика','🌐 Language':'🌐 Язык','Email':'Эл. почта','Change Username':'Изменить имя','Update Username':'Обновить имя','Delete Account':'Удалить аккаунт','Switch Account':'Сменить аккаунт','Desktop notifications':'Уведомления на рабочем столе','Message sound':'Звук сообщения','Theme':'Тема','Dark':'Тёмная','Light':'Светлая','Custom Colors':'Свои цвета','Compact mode':'Компактный режим','Reset Statistics':'Сбросить статистику','🎯 Events & Challenges':'🎯 События и испытания','App Language':'Язык приложения','Choose your preferred language. UI text will update immediately.':'Выберите язык. Интерфейс обновится сразу.','Current:':'Текущий:','All messages':'Все сообщения','Only mentions':'Только упоминания','Nothing':'Ничего','Default Microphone':'Микрофон по умолчанию','Default Speaker':'Динамик по умолчанию','Off':'Выкл','30 seconds':'30 секунд','1 minute':'1 минута','5 minutes':'5 минут','1 hour':'1 час','Small':'Маленький','Medium':'Средний','Large':'Большой' },
    ko: { 'Login':'로그인','Register':'회원가입','Create Account':'계정 만들기','Already have an account?':'이미 계정이 있나요?','Don\'t have an account?':'계정이 없나요?','Forgot password?':'비밀번호를 잊으셨나요?','Reset Password':'비밀번호 재설정','🪪 Account':'🪪 계정','🛡️ Privacy':'🛡️ 개인정보','🗨️ Chat':'🗨️ 채팅','📬 Notifications':'📬 알림','🪄 Appearance':'🪄 화면','🧭 Language':'🧭 언어','📈 Statistics':'📈 통계','⚙️ Settings':'⚙️ 설정','Message...':'메시지...','Send':'보내기','Close':'닫기','Communities':'커뮤니티','Groups':'그룹','Open':'열기','Join':'참여','Manage':'관리','➕ Create New Group':'➕ 새 그룹 만들기','Account Settings':'계정 설정','Privacy & Safety':'개인정보 및 보안','Chat Settings':'채팅 설정','Notifications':'알림','Appearance':'화면','📊 Your Statistics':'📊 내 통계','🌐 Language':'🌐 언어','Email':'이메일','Change Username':'이름 변경','Update Username':'이름 업데이트','Delete Account':'계정 삭제','Switch Account':'계정 전환','Desktop notifications':'데스크톱 알림','Message sound':'메시지 소리','Theme':'테마','Dark':'다크','Light':'라이트','Custom Colors':'사용자 색상','Compact mode':'컴팩트 모드','Reset Statistics':'통계 초기화','🎯 Events & Challenges':'🎯 이벤트 및 챌린지','App Language':'앱 언어','Choose your preferred language. UI text will update immediately.':'원하는 언어를 선택하면 UI가 즉시 바뀝니다.','Current:':'현재:','All messages':'모든 메시지','Only mentions':'멘션만','Nothing':'없음','Default Microphone':'기본 마이크','Default Speaker':'기본 스피커','Off':'끔','30 seconds':'30초','1 minute':'1분','5 minutes':'5분','1 hour':'1시간','Small':'작게','Medium':'보통','Large':'크게' },
    tr: { 'Login':'Giriş','Register':'Kayıt Ol','Create Account':'Hesap oluştur','Already have an account?':'Zaten hesabın var mı?','Don\'t have an account?':'Hesabın yok mu?','Forgot password?':'Şifreni mi unuttun?','Reset Password':'Şifreyi sıfırla','🪪 Account':'🪪 Hesap','🛡️ Privacy':'🛡️ Gizlilik','🗨️ Chat':'🗨️ Sohbet','📬 Notifications':'📬 Bildirimler','🪄 Appearance':'🪄 Görünüm','🧭 Language':'🧭 Dil','📈 Statistics':'📈 İstatistikler','⚙️ Settings':'⚙️ Ayarlar','Message...':'Mesaj...','Send':'Gönder','Close':'Kapat','Communities':'Topluluklar','Groups':'Gruplar','Open':'Aç','Join':'Katıl','Manage':'Yönet','➕ Create New Group':'➕ Yeni grup oluştur','Account Settings':'Hesap ayarları','Privacy & Safety':'Gizlilik ve güvenlik','Chat Settings':'Sohbet ayarları','Notifications':'Bildirimler','Appearance':'Görünüm','📊 Your Statistics':'📊 İstatistiklerin','🌐 Language':'🌐 Dil','Email':'E-posta','Change Username':'Kullanıcı adını değiştir','Update Username':'Adı güncelle','Delete Account':'Hesabı sil','Switch Account':'Hesap değiştir','Desktop notifications':'Masaüstü bildirimleri','Message sound':'Mesaj sesi','Theme':'Tema','Dark':'Koyu','Light':'Açık','Custom Colors':'Özel renkler','Compact mode':'Kompakt mod','Reset Statistics':'İstatistikleri sıfırla','🎯 Events & Challenges':'🎯 Etkinlikler ve görevler','App Language':'Uygulama dili','Choose your preferred language. UI text will update immediately.':'Tercih ettiğin dili seç. Arayüz hemen güncellenir.','Current:':'Geçerli:','All messages':'Tüm mesajlar','Only mentions':'Sadece bahsetmeler','Nothing':'Hiçbiri','Default Microphone':'Varsayılan mikrofon','Default Speaker':'Varsayılan hoparlör','Off':'Kapalı','30 seconds':'30 saniye','1 minute':'1 dakika','5 minutes':'5 dakika','1 hour':'1 saat','Small':'Küçük','Medium':'Orta','Large':'Büyük' },
    it: { 'Login':'Accedi','Register':'Registrati','Create Account':'Crea account','Already have an account?':'Hai già un account?','Don\'t have an account?':'Non hai un account?','Forgot password?':'Password dimenticata?','Reset Password':'Reimposta password','🪪 Account':'🪪 Account','🛡️ Privacy':'🛡️ Privacy','🗨️ Chat':'🗨️ Chat','📬 Notifications':'📬 Notifiche','🪄 Appearance':'🪄 Aspetto','🧭 Language':'🧭 Lingua','📈 Statistics':'📈 Statistiche','⚙️ Settings':'⚙️ Impostazioni','Message...':'Messaggio...','Send':'Invia','Close':'Chiudi','Communities':'Comunità','Groups':'Gruppi','Open':'Apri','Join':'Unisciti','Manage':'Gestisci','➕ Create New Group':'➕ Crea nuovo gruppo','Account Settings':'Impostazioni account','Privacy & Safety':'Privacy e sicurezza','Chat Settings':'Impostazioni chat','Notifications':'Notifiche','Appearance':'Aspetto','📊 Your Statistics':'📊 Le tue statistiche','🌐 Language':'🌐 Lingua','Email':'Email','Change Username':'Cambia nome utente','Update Username':'Aggiorna nome utente','Delete Account':'Elimina account','Switch Account':'Cambia account','Desktop notifications':'Notifiche desktop','Message sound':'Suono messaggio','Theme':'Tema','Dark':'Scuro','Light':'Chiaro','Custom Colors':'Colori personalizzati','Compact mode':'Modalità compatta','Reset Statistics':'Reimposta statistiche','🎯 Events & Challenges':'🎯 Eventi e sfide','App Language':'Lingua app','Choose your preferred language. UI text will update immediately.':'Scegli la lingua preferita. L\'interfaccia si aggiorna subito.','Current:':'Attuale:','All messages':'Tutti i messaggi','Only mentions':'Solo menzioni','Nothing':'Niente','Default Microphone':'Microfono predefinito','Default Speaker':'Altoparlante predefinito','Off':'Disattivato','30 seconds':'30 secondi','1 minute':'1 minuto','5 minutes':'5 minuti','1 hour':'1 ora','Small':'Piccolo','Medium':'Medio','Large':'Grande' }
};
const FIRETECH_BOT_USER = {
    userId: 'bot_firetech_0',
    id: 'bot_firetech_0',
    username: '⚡ FireTech Bot',
    role: 'Security Assistant',
    isBot: true,
    avatar: null
};
const FIRETECH_SECURITY_QUOTE = 'Secure your conversations. Trust the fire.';
const preferredLanguage = localStorage.getItem('appLanguage') || 'en';
let currentLanguage = 'en';

function getUiDictionary(code) {
    return UI_TRANSLATIONS[code] || UI_TRANSLATIONS.en;
}

const reverseUiDictionaryCache = {};
function getReverseUiDictionary(code) {
    if (!code || code === 'en') return {};
    if (reverseUiDictionaryCache[code]) return reverseUiDictionaryCache[code];

    const dict = getUiDictionary(code);
    const reverse = {};
    Object.entries(dict).forEach(([english, translated]) => {
        const key = String(translated || '').trim().toLowerCase();
        if (!key) return;
        if (!reverse[key]) reverse[key] = english;
    });
    reverseUiDictionaryCache[code] = reverse;
    return reverse;
}

function getSourceSeedText(rawText, langCode) {
    const raw = String(rawText || '');
    const trimmed = raw.trim();
    if (!trimmed || !langCode || langCode === 'en') return raw;

    const reverse = getReverseUiDictionary(langCode);
    const direct = reverse[trimmed.toLowerCase()];
    if (direct) return direct;

    const emojiSplit = splitLeadingEmojiPrefix(trimmed);
    const rest = String(emojiSplit.rest || '').trim();
    const mappedRest = reverse[rest.toLowerCase()];
    if (mappedRest) return `${emojiSplit.prefix}${mappedRest}`;

    return raw;
}

const AUTO_TRANSLATION_CACHE_KEY = 'autoTranslationCache_v1';
let autoTranslationCache = {};
const i18nTextNodeSource = new WeakMap();
try {
    autoTranslationCache = JSON.parse(localStorage.getItem(AUTO_TRANSLATION_CACHE_KEY) || '{}');
} catch (_) {
    autoTranslationCache = {};
}
const autoTranslationInFlight = new Map();
const AUTO_TRANSLATION_ENABLED = localStorage.getItem('autoTranslateEnabled') !== 'false';
const AUTO_TRANSLATION_MIN_INTERVAL_MS = 350;
const AUTO_TRANSLATION_RATE_LIMIT_COOLDOWN_MS = 10 * 60 * 1000;
const AUTO_TRANSLATION_FAILURE_COOLDOWN_MS = 30 * 60 * 1000;
const AUTO_TRANSLATION_MAX_REQUESTS_PER_PAGE = 120;
let autoTranslationLastRequestAt = 0;
let autoTranslationRateLimitedUntil = 0;
const autoTranslationFailureUntil = new Map();
let autoTranslationRequestCount = 0;

function getAutoTranslationCacheKey(text, langCode) {
    return `${langCode}::${String(text || '').trim()}`;
}

function getCachedAutoTranslation(text, langCode) {
    return autoTranslationCache[getAutoTranslationCacheKey(text, langCode)] || null;
}

function setCachedAutoTranslation(text, langCode, translated) {
    autoTranslationCache[getAutoTranslationCacheKey(text, langCode)] = translated;
    try {
        localStorage.setItem(AUTO_TRANSLATION_CACHE_KEY, JSON.stringify(autoTranslationCache));
    } catch (_) {
        
    }
}

function shouldAutoTranslate(raw) {
    const text = String(raw || '').trim();
    if (!text) return false;
    if (text.length > 180) return false;
    if (/^\d+[\d\s.,:/-]*$/.test(text)) return false;
    if (/^[^\p{L}]+$/u.test(text)) return false;
    return true;
}

async function fetchAutoTranslation(text, langCode) {
    if (!AUTO_TRANSLATION_ENABLED) return null;

    const key = getAutoTranslationCacheKey(text, langCode);
    if (autoTranslationInFlight.has(key)) return autoTranslationInFlight.get(key);

    const now = Date.now();
    const blockedUntil = autoTranslationFailureUntil.get(key) || 0;
    if (blockedUntil > now) return null;
    if (autoTranslationRateLimitedUntil > now) return null;
    if (autoTranslationRequestCount >= AUTO_TRANSLATION_MAX_REQUESTS_PER_PAGE) return null;

    const request = (async () => {
        try {
            autoTranslationRequestCount += 1;
            const waitMs = Math.max(0, AUTO_TRANSLATION_MIN_INTERVAL_MS - (Date.now() - autoTranslationLastRequestAt));
            if (waitMs > 0) {
                await new Promise((resolve) => setTimeout(resolve, waitMs));
            }
            autoTranslationLastRequestAt = Date.now();

            const source = encodeURIComponent(String(text));
            const pair = encodeURIComponent(`en|${langCode}`);
            const response = await fetch(`https://api.mymemory.translated.net/get?q=${source}&langpair=${pair}`);

            if (response.status === 429) {
                autoTranslationRateLimitedUntil = Date.now() + AUTO_TRANSLATION_RATE_LIMIT_COOLDOWN_MS;
                autoTranslationFailureUntil.set(key, Date.now() + AUTO_TRANSLATION_FAILURE_COOLDOWN_MS);
                return null;
            }

            if (!response.ok) return null;
            const data = await response.json();
            const translated = String(data?.responseData?.translatedText || '').trim();
            if (!translated || translated.toLowerCase() === String(text).trim().toLowerCase()) return null;
            setCachedAutoTranslation(text, langCode, translated);
            autoTranslationFailureUntil.delete(key);
            return translated;
        } catch (_) {
            autoTranslationFailureUntil.set(key, Date.now() + AUTO_TRANSLATION_FAILURE_COOLDOWN_MS);
            return null;
        } finally {
            autoTranslationInFlight.delete(key);
        }
    })();

    autoTranslationInFlight.set(key, request);
    return request;
}

function applyAutoTranslateToElement(element, attr, originalText, langCode, dict) {
    if (!AUTO_TRANSLATION_ENABLED) return;
    if (langCode === 'en') return;
    const mapped = dict[String(originalText || '').trim()];
    if (mapped) return;
    if (!shouldAutoTranslate(originalText)) return;

    const cached = getCachedAutoTranslation(originalText, langCode);
    if (cached) {
        if (attr === 'text') {
            if (element.textContent !== cached) element.textContent = cached;
        } else if (element.getAttribute(attr) !== cached) {
            element.setAttribute(attr, cached);
        }
        return;
    }

    fetchAutoTranslation(originalText, langCode).then((translated) => {
        if (!translated) return;
        if (langCode !== currentLanguage) return;
        if (attr === 'text') {
            if (element.textContent !== translated) element.textContent = translated;
        } else if (element.getAttribute(attr) !== translated) {
            element.setAttribute(attr, translated);
        }
    });
}

let isApplyingLocalization = false;

function splitLeadingEmojiPrefix(value) {
    const raw = String(value || '');
    const match = raw.match(/^([\p{Emoji}\p{Emoji_Component}\uFE0F\s]+)([\s\S]+)$/u);
    if (!match) {
        return { prefix: '', rest: raw };
    }
    return {
        prefix: match[1] || '',
        rest: match[2] || ''
    };
}

function translateRawText(value, dict) {
    const raw = String(value || '');
    const trimmed = raw.trim();
    if (!trimmed) return value;

    if (dict[trimmed]) return dict[trimmed];

    const directCaseInsensitiveKey = Object.keys(dict).find((key) => key.toLowerCase() === trimmed.toLowerCase());
    if (directCaseInsensitiveKey) return dict[directCaseInsensitiveKey];

    const emojiSplit = splitLeadingEmojiPrefix(trimmed);
    const rest = String(emojiSplit.rest || '').trim();
    if (rest) {
        if (dict[rest]) return `${emojiSplit.prefix}${dict[rest]}`;
        const restCaseInsensitiveKey = Object.keys(dict).find((key) => key.toLowerCase() === rest.toLowerCase());
        if (restCaseInsensitiveKey) return `${emojiSplit.prefix}${dict[restCaseInsensitiveKey]}`;
    }

    return value;
}

function resolveLocalizedValue(originalText, dict, langCode) {
    const original = String(originalText || '');
    const dictTranslated = translateRawText(original, dict);
    if (dictTranslated !== original) {
        return { value: dictTranslated, shouldFetch: false };
    }

    if (AUTO_TRANSLATION_ENABLED && langCode !== 'en' && shouldAutoTranslate(original)) {
        const cached = getCachedAutoTranslation(original, langCode);
        if (cached) {
            return { value: cached, shouldFetch: false };
        }
        return { value: original, shouldFetch: true };
    }

    return { value: original, shouldFetch: false };
}

function localizeContainer(container, dict) {
    if (!container) return;
    const langCode = currentLanguage;
    container.querySelectorAll('*').forEach((element) => {
        if (['SCRIPT', 'STYLE'].includes(element.tagName)) return;

        if (element.childNodes.length > 0) {
            element.childNodes.forEach((node) => {
                if (node.nodeType !== Node.TEXT_NODE) return;

                const rawCurrent = String(node.textContent || '');
                if (!rawCurrent.trim()) return;

                if (!i18nTextNodeSource.has(node)) {
                    i18nTextNodeSource.set(node, getSourceSeedText(rawCurrent, langCode));
                }

                const sourceText = String(i18nTextNodeSource.get(node) || '');
                const match = sourceText.match(/^(\s*)([\s\S]*?)(\s*)$/);
                const leading = match ? match[1] : '';
                const core = (match ? match[2] : sourceText).trim();
                const trailing = match ? match[3] : '';
                if (!core) return;

                const resolved = resolveLocalizedValue(core, dict, langCode);
                const nextText = `${leading}${resolved.value}${trailing}`;
                if (node.textContent !== nextText) {
                    node.textContent = nextText;
                }

                if (resolved.shouldFetch) {
                    fetchAutoTranslation(core, langCode).then((translated) => {
                        if (!translated) return;
                        if (langCode !== currentLanguage) return;
                        if (!node.isConnected) return;
                        const translatedText = `${leading}${translated}${trailing}`;
                        if (node.textContent !== translatedText) {
                            node.textContent = translatedText;
                        }
                    });
                }
            });
        }

        if (element.matches('input[placeholder], textarea[placeholder]')) {
            if (!element.dataset.i18nPlaceholder) {
                element.dataset.i18nPlaceholder = getSourceSeedText(element.getAttribute('placeholder') || '', langCode);
            }
            const resolvedPlaceholder = resolveLocalizedValue(element.dataset.i18nPlaceholder, dict, langCode);
            if (element.getAttribute('placeholder') !== resolvedPlaceholder.value) {
                element.setAttribute('placeholder', resolvedPlaceholder.value);
            }
            if (resolvedPlaceholder.shouldFetch) {
                applyAutoTranslateToElement(element, 'placeholder', element.dataset.i18nPlaceholder, langCode, dict);
            }
        }

        if (element.tagName === 'OPTION') {
            if (!element.dataset.i18nText) element.dataset.i18nText = getSourceSeedText(element.textContent.trim(), langCode);
            const resolvedOption = resolveLocalizedValue(element.dataset.i18nText, dict, langCode);
            if (element.textContent !== resolvedOption.value) {
                element.textContent = resolvedOption.value;
            }
            if (resolvedOption.shouldFetch) {
                applyAutoTranslateToElement(element, 'text', element.dataset.i18nText, langCode, dict);
            }
        }

        if (element.hasAttribute('title')) {
            if (!element.dataset.i18nTitle) {
                element.dataset.i18nTitle = getSourceSeedText(element.getAttribute('title') || '', langCode);
            }
            const resolvedTitle = resolveLocalizedValue(element.dataset.i18nTitle, dict, langCode);
            if (element.getAttribute('title') !== resolvedTitle.value) {
                element.setAttribute('title', resolvedTitle.value);
            }
            if (resolvedTitle.shouldFetch) {
                applyAutoTranslateToElement(element, 'title', element.dataset.i18nTitle, langCode, dict);
            }
        }

        if (element.children.length === 0) {
            const raw = element.textContent.trim();
            if (!raw) return;
            if (!element.dataset.i18nText) element.dataset.i18nText = getSourceSeedText(raw, langCode);
            const resolvedText = resolveLocalizedValue(element.dataset.i18nText, dict, langCode);
            if (element.textContent !== resolvedText.value) {
                element.textContent = resolvedText.value;
            }
            if (resolvedText.shouldFetch) {
                applyAutoTranslateToElement(element, 'text', element.dataset.i18nText, langCode, dict);
            }
        }
    });
}

function localizeStaticUi(code) {
    const dict = getUiDictionary(code);
    if (isApplyingLocalization) return;
    isApplyingLocalization = true;
    try {
        localizeContainer(document.body, dict);
        document.body.dir = code === 'ar' ? 'rtl' : 'ltr';
    } finally {
        isApplyingLocalization = false;
    }
}

function syncAuthLanguage() {
    const dict = getUiDictionary(currentLanguage);
    const usernameFields = document.getElementById('registerFields');
    const authTitle = document.getElementById('authTitle');
    const authButton = document.getElementById('authButton');
    const authToggle = document.querySelector('.auth-toggle span');
    if (usernameFields) usernameFields.style.display = isRegistering ? 'block' : 'none';
    if (authTitle) authTitle.textContent = isRegistering ? translateRawText('Register', dict) : translateRawText('Login', dict);
    if (authButton) authButton.textContent = isRegistering ? translateRawText('Create Account', dict) : translateRawText('Login', dict);
    if (authToggle) {
        const lead = isRegistering ? translateRawText('Already have an account?', dict) : translateRawText("Don't have an account?", dict);
        const cta = isRegistering ? translateRawText('Login', dict) : translateRawText('Register', dict);
        authToggle.innerHTML = `${lead} <button type="button">${cta}</button>`;
        const button = authToggle.querySelector('button');
        if (button) button.onclick = toggleAuthMode;
    }
}

function parseFlexibleNumber(value) {
    if (typeof value === 'number') return Number.isFinite(value) ? value : NaN;
    if (value === null || value === undefined) return NaN;
    const cleaned = String(value).replace(/[^\d.-]/g, '');
    if (!cleaned || cleaned === '-' || cleaned === '.' || cleaned === '-.') return NaN;
    const parsed = Number(cleaned);
    return Number.isFinite(parsed) ? parsed : NaN;
}

function decodeJwtPayload(token) {
    try {
        if (!token || typeof token !== 'string') return null;
        const parts = token.split('.');
        if (parts.length < 2) return null;
        const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
        const padded = base64 + '='.repeat((4 - (base64.length % 4 || 4)) % 4);
        const json = atob(padded);
        const payload = JSON.parse(json);
        return payload && typeof payload === 'object' ? payload : null;
    } catch (_) {
        return null;
    }
}

function resolveCurrentUserId() {
    if (currentUser?.id) return String(currentUser.id);

    try {
        const stored = JSON.parse(localStorage.getItem('user') || '{}');
        if (stored?.id) {
            currentUser = { ...(currentUser || {}), ...stored, id: stored.id };
            return String(stored.id);
        }
    } catch (_) {
        
    }

    const payload = decodeJwtPayload(currentToken || localStorage.getItem('token'));
    if (payload?.userId) {
        currentUser = { ...(currentUser || {}), id: payload.userId };
        return String(payload.userId);
    }

    return null;
}

function getCurrentCoinBalance() {
    const candidates = [
        currentUser?.coins,
        (() => {
            try {
                const stored = JSON.parse(localStorage.getItem('user') || '{}');
                return stored?.coins;
            } catch (_) {
                return undefined;
            }
        })(),
        document.getElementById('coinsDisplay')?.textContent || ''
    ];

    for (const value of candidates) {
        const parsed = parseFlexibleNumber(value);
        if (Number.isFinite(parsed)) return parsed;
    }
    return NaN;
}

function clampPickerScale(value) {
    const numeric = Number(value);
    if (!Number.isFinite(numeric)) return 1.45;
    return Math.min(2, Math.max(1, numeric));
}

function updatePickerScaleLabel() {
    const label = document.getElementById('pickerSizeLabel');
    if (label) label.textContent = `${Math.round(pickerScale * 100)}%`;
    const slider = document.getElementById('pickerSizeRange');
    if (slider) slider.value = String(pickerScale);
}

function applyPickerScale() {
    const panel = document.getElementById('pickerPanel');
    if (!panel) return;
    panel.style.setProperty('--picker-scale', String(pickerScale));
    updatePickerScaleLabel();
}

function setPickerScale(value) {
    pickerScale = clampPickerScale(value);
    localStorage.setItem('pickerScale', String(pickerScale));
    applyPickerScale();
}

function adjustPickerSize(delta) {
    setPickerScale(pickerScale + Number(delta || 0));
}

async function syncCurrentUserCoinsFromProfile() {
    if (!currentToken) return null;

    const userId = resolveCurrentUserId();
    if (!userId) return null;

    try {
        const response = await fetch(`${API_BASE}/profile/${userId}`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        if (!response.ok) return null;
        const user = await response.json();
        if (!user || typeof user !== 'object') return null;

        currentUser = { ...currentUser, ...user };
        localStorage.setItem('user', JSON.stringify(currentUser));

        const coinsDisplay = document.getElementById('coinsDisplay');
        if (coinsDisplay) {
            coinsDisplay.textContent = `💰 Coins: ${user.coins || 0}`;
        }

        return parseFlexibleNumber(user.coins);
    } catch (_) {
        return null;
    }
}

function updateAllCoinDisplays(coins) {
    if (!Number.isFinite(coins)) return;
    
    
    const coinsDisplay = document.getElementById('coinsDisplay');
    if (coinsDisplay) {
        coinsDisplay.textContent = `💰 Coins: ${coins}`;
    }
    
   
    const coinElements = document.querySelectorAll('[data-coins-display]');
    coinElements.forEach(el => {
        el.textContent = `💰 ${coins}`;
    });
}

function syncProfilePanelForCurrentRoom() {
    const panel = document.getElementById('profilePanel');
    if (!panel) return;
    if (!currentChatContext || (currentChatContext.type !== 'group' && currentChatContext.type !== 'community')) return;

    const roomName = currentChatContext.name;
    const profile = currentChatContext.type === 'group'
        ? getGroupProfile(roomName)
        : getCommunityProfile(roomName);

    const profileName = document.getElementById('profileName');
    const profileAvatar = document.getElementById('profileAvatar');
    if (profileName) profileName.textContent = roomName;

    if (!profileAvatar) return;
    if (profile?.image) {
        profileAvatar.style.backgroundImage = `url(${profile.image})`;
        profileAvatar.style.backgroundSize = 'cover';
        profileAvatar.style.backgroundPosition = 'center';
        profileAvatar.textContent = '';
        return;
    }

    profileAvatar.style.backgroundImage = 'none';
    profileAvatar.style.backgroundSize = '';
    profileAvatar.style.backgroundPosition = '';
    profileAvatar.textContent = profile?.icon || (currentChatContext.type === 'group' ? '👥' : '🌐');
}

function refreshRoomVisuals(roomType, roomName, options = {}) {
    const { reopenDetails = false } = options;
    const dict = getUiDictionary(currentLanguage);
    const groupLabel = translateRawText('Group', dict);
    const communityLabel = translateRawText('Community', dict);

    if (roomType === 'group') {
        if (currentChatContext?.type === 'group' && currentChatContext?.name === roomName) {
            const profile = getGroupProfile(roomName);
            const chatTitle = document.getElementById('chatTitle');
            if (chatTitle) chatTitle.textContent = `${profile?.image ? '🖼️' : (profile.icon || '👥')} ${groupLabel}: ${roomName}`;
        }

        if (!document.getElementById('groupsModal')?.classList.contains('hidden')) {
            openGroupsModal();
        }
        
        
        updateAllRoomIconInstances('group', roomName);
    } else if (roomType === 'community') {
        if (currentChatContext?.type === 'community' && currentChatContext?.name === roomName) {
            const profile = getCommunityProfile(roomName);
            const chatTitle = document.getElementById('chatTitle');
            if (chatTitle) chatTitle.textContent = `${profile?.image ? '🖼️' : (profile.icon || '🌐')} ${communityLabel}: ${roomName}`;
        }

        if (!document.getElementById('communitiesModal')?.classList.contains('hidden')) {
            openCommunitiesModal();
        }
        if (reopenDetails && document.getElementById('communityDetailsModal')?.classList.contains('show')) {
            openCommunityDetails(roomName);
        }
        
        
        updateAllRoomIconInstances('community', roomName);
    }

    syncProfilePanelForCurrentRoom();
    loadFriendsForDM();
}

function updateAllRoomIconInstances(roomType, roomName) {
    const profile = roomType === 'group' ? getGroupProfile(roomName) : getCommunityProfile(roomName);
    const iconChar = profile?.image ? '🖼️' : (profile?.icon || (roomType === 'group' ? '👥' : '🌐'));
    
    
    const allChannelItems = document.querySelectorAll('.channel-item');
    allChannelItems.forEach(item => {
        
        const label = item.querySelector('.channel-label');
        if (label && label.textContent === roomName) {
            const avatar = item.querySelector('.channel-avatar');
            if (avatar) {
                if (profile?.image) {
                    avatar.style.backgroundImage = `url(${profile.image})`;
                    avatar.style.backgroundSize = 'cover';
                    avatar.style.backgroundPosition = 'center';
                    avatar.textContent = '';
                } else {
                    avatar.style.backgroundImage = 'none';
                    avatar.textContent = iconChar;
                }
            }
        }
    });
    
    
    if (roomType === 'group') {
        const groupCards = document.querySelectorAll('.group-card');
        groupCards.forEach(card => {
            const nameEl = card.querySelector('.group-name');
            if (nameEl && nameEl.textContent === roomName) {
                const avatar = card.querySelector('.group-avatar');
                if (avatar) {
                    if (profile?.image) {
                        avatar.style.backgroundImage = `url(${profile.image})`;
                        avatar.style.backgroundSize = 'cover';
                        avatar.style.backgroundPosition = 'center';
                        avatar.innerHTML = '';
                    } else {
                        avatar.style.backgroundImage = 'none';
                        avatar.innerHTML = `<span class="emoji-glyph">${iconChar}</span>`;
                    }
                }
            }
        });
    }
    
    
    if (roomType === 'community') {
        const communityCards = document.querySelectorAll('.community-card');
        communityCards.forEach(card => {
            const nameEl = card.querySelector('.group-name');
            if (nameEl && nameEl.textContent === roomName) {
                const avatar = card.querySelector('.group-avatar');
                if (avatar) {
                    if (profile?.image) {
                        avatar.style.backgroundImage = `url(${profile.image})`;
                        avatar.style.backgroundSize = 'cover';
                        avatar.style.backgroundPosition = 'center';
                        avatar.innerHTML = '';
                    } else {
                        avatar.style.backgroundImage = 'none';
                        avatar.innerHTML = `<span class="emoji-glyph">${iconChar}</span>`;
                    }
                }
            }
        });
    }
}

function normalizePinnedChats(rawValue) {
    const source = Array.isArray(rawValue) ? rawValue : [];
    const normalized = [];

    source.forEach((entry) => {
        if (!entry) return;

        if (typeof entry === 'string') {
            normalized.push(entry);
            return;
        }

        if (typeof entry === 'object') {
            if (entry.type && (entry.id || entry.name)) {
                normalized.push(`${entry.type}:${entry.id || entry.name}`);
                return;
            }
            if (entry.id) {
                normalized.push(`dm:${entry.id}`);
            }
        }
    });

    return Array.from(new Set(normalized));
}

function closeAllMessageActionRows() {
    document.querySelectorAll('.message.message-actions-open').forEach((messageEl) => {
        messageEl.classList.remove('message-actions-open');
    });
}

function ensureMessageActionInteractionBinding() {
    if (messageActionInteractionBound) return;
    messageActionInteractionBound = true;

    document.addEventListener('click', (event) => {
        if (!event.target.closest('.message')) {
            closeAllMessageActionRows();
        }
    });
}

function getVisibleMembers(users) {
    const list = Array.isArray(users) ? users : [];
    const withoutBot = list.filter((user) => String(user?.userId || user?.id || '') !== FIRETECH_BOT_USER.userId);
    return [FIRETECH_BOT_USER, ...withoutBot];
}

function applyLanguage(code, silent = false) {
    currentLanguage = code;
    autoTranslationRequestCount = 0;
    localStorage.setItem('appLanguage', code);
    const t = I18N[code] || I18N.en;
    const lang = LANGUAGES.find(l => l.code === code) || LANGUAGES[0];
    document.documentElement.lang = code;
    const msgInput = document.getElementById('messageInput');
    if (msgInput) msgInput.placeholder = t.typeMsg;
    syncAuthLanguage();
    const langDisplay = document.getElementById('currentLangDisplay');
    if (langDisplay) langDisplay.textContent = `${lang.flag} ${lang.name}`;
    localizeStaticUi(code);

    if (currentChatContext?.type === 'group' || currentChatContext?.type === 'community') {
        refreshRoomVisuals(currentChatContext.type, currentChatContext.name, { reopenDetails: true });
    }

    if (!document.getElementById('shopModal')?.classList.contains('hidden')) {
        loadShopItems();
        loadInventory();
    }

    if (!document.getElementById('friendsModal')?.classList.contains('hidden')) {
        loadFriends();
    }

    if (!document.getElementById('groupsModal')?.classList.contains('hidden')) {
        openGroupsModal();
    }

    if (!document.getElementById('communitiesModal')?.classList.contains('hidden')) {
        openCommunitiesModal();
    }

    if (document.getElementById('communityDetailsModal')?.classList.contains('show') && currentChatContext?.type === 'community') {
        openCommunityDetails(currentChatContext.name);
    }

    if (!document.getElementById('archivedChatsModal')?.classList.contains('hidden')) {
        showArchivedChats();
    }

    applyEnhancedEmoji(document.body);
    renderLangGrid();
    if (!silent) showToast(`🌐 Language set to ${lang.name}`, 'success');
}

function renderLangGrid() {
    const grid = document.getElementById('langGrid');
    if (!grid) return;
    grid.innerHTML = LANGUAGES.map(l => `
        <button class="lang-btn ${currentLanguage === l.code ? 'active' : ''}" onclick="applyLanguage('${l.code}')">
            <span class="lang-flag" aria-hidden="true">${l.flag}</span>
            <div>
                <div class="lang-info-name">${l.name}</div>
                <div class="lang-info-country">${l.country}</div>
            </div>
            ${currentLanguage === l.code ? '<span style="margin-left:auto;color:var(--primary-color);font-size:16px;">✓</span>' : ''}
        </button>
    `).join('');
}

function applyEnhancedEmoji(root = document.body) {
    if (!root || !window.twemoji || typeof window.twemoji.parse !== 'function') return;
    window.twemoji.parse(root, {
        folder: 'svg',
        ext: '.svg',
        className: 'twemoji'
    });
}

let localizationObserver = null;
let localizationRefreshTimer = null;

function ensureLocalizationObserver() {
    if (localizationObserver) return;
    localizationObserver = new MutationObserver(() => {
        if (isApplyingLocalization) return;
        if (localizationRefreshTimer) clearTimeout(localizationRefreshTimer);
        localizationRefreshTimer = setTimeout(() => {
            if (isApplyingLocalization) return;
            localizeStaticUi(currentLanguage);
            applyEnhancedEmoji(document.body);
        }, 280);
    });
    localizationObserver.observe(document.body, {
        childList: true,
        subtree: true,
        characterData: true,
        attributes: true,
        attributeFilter: ['title', 'placeholder']
    });
}

let isRegistering = false;
let currentChatFriendId = null;
let currentChatFriendName = null;
let currentChatContext = { type: 'none', id: null, name: null };
let pendingMediaDraft = null;
let pendingMediaDrafts = [];
let activeCallState = null;
let peerConnection = null;
let localCallStream = null;
let remoteCallStream = null;
let remoteIceCandidatesQueue = [];
let lastIceRecoveryAttemptAt = 0;
let lastCallWarningAt = 0;
let currentCallPeerId = null;
let currentCallPeerName = null;
let callTimerInterval = null;
let callStartedAt = null;
let incomingCallAudioContext = null;
let incomingCallInterval = null;
let remoteCallPlaybackRetryBound = false;
let remoteCallPlaybackStarted = false;
let isStartingCallSession = false;
let pendingSignalOffer = null;
let makingOffer = false;
let rtcRuntimeConfig = null;
let rtcConfigLoaded = false;
let activeIceServers = [];
let callIceFailureCount = 0;
let forceRelayOnly = false;
let pendingIceRecoveryTimer = null;
let pendingRelayFallbackTimer = null;
let pendingRemoteIceCandidates = [];
let callEventLog = [];
let currentCallProvider = 'webrtc';
let currentJitsiApi = null;
let currentCallRoomName = null;
let hasUserInteractedWithPage = false;
let activeRoomSubscription = null;
let roomMessages = JSON.parse(localStorage.getItem('roomMessages') || '{}');
let pinnedChats = [];
let joinedCommunities = [];
let joinedGroups = [];
let groupMemberRoles = JSON.parse(localStorage.getItem('groupMemberRoles') || '{}');
let cachedShopItemsById = {};
let equippedShopItems = JSON.parse(localStorage.getItem('equippedShopItems') || '{}');
let baseThemePrimaryColor = localStorage.getItem('baseThemePrimaryColor') || '';
let baseThemePrimaryHover = localStorage.getItem('baseThemePrimaryHover') || '';
let communityProfiles = JSON.parse(localStorage.getItem('communityProfiles') || '{}');
let groupProfiles = JSON.parse(localStorage.getItem('groupProfiles') || '{}');
let selectedOrbEffect = localStorage.getItem('selectedOrbEffect') || 'none';
let isCallCameraOff = false;
let notifList = JSON.parse(localStorage.getItem('notifList') || '[]');
let notifUnreadCount = 0;
let globalOnlineUsers = [];
let currentRoomMembers = [];
let roomRoleCache = JSON.parse(localStorage.getItem('roomRoleCache') || '{}');
let roomProfileCache = JSON.parse(localStorage.getItem('roomProfileCache') || '{}');
const ROOM_CACHE_MAX_PER_ROOM = 40;
const ROOM_CACHE_MEDIA_URL_MAX_CHARS = 1400;
let messageActionInteractionBound = false;
let pickerScale = Number(localStorage.getItem('pickerScale') || '1.45');
let chatSettings = {
    disappearTime: 0,
    enterToSend: true,
    showTypingIndicator: true,
    autoplayGifs: true,
    compactMode: false,
    fontSize: 'medium',
    notificationMode: 'all',
    notifyOnSent: false,
    notifyOnReceived: true,
    messageSound: true,
    desktopNotifications: false
};
let audioSettings = {
    microphoneId: 'default',
    speakerId: 'default'
};
let themeSettings = {
    mode: 'dark',
    customColors: {
        primary: '#5865F2',
        accent: '#57F287',
        background: '#1e1f22',
        sidebar: '#2b2d31',
        textPrimary: '#ffffff',
        textSecondary: '#b5bac1',
        iconColor: '#ffffff',
        borderColor: '#3f4147'
    }
};


const SERVER_URL = window.location.origin;
const API_BASE = SERVER_URL + '/api';

function getDefaultIceServers() {
    return [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
        { urls: 'stun:stun2.l.google.com:19302' },
        { urls: 'stun:stun3.l.google.com:19302' },
        { urls: 'stun:stun4.l.google.com:19302' },
        { urls: 'stun:stun.cloudflare.com:3478' }
    ];
}

function hasTurnServerConfigured(iceServers = []) {
    return iceServers.some((server) => {
        const urls = Array.isArray(server?.urls) ? server.urls : [server?.urls];
        return urls.some((url) => typeof url === 'string' && /^turns?:/i.test(url));
    });
}

async function ensureRtcConfigLoaded() {
    if (rtcConfigLoaded) return;
    rtcConfigLoaded = true;
    try {
        const response = await fetch(`${API_BASE}/rtc-config`, { cache: 'no-store' });
        if (!response.ok) return;
        const data = await response.json();
        if (Array.isArray(data?.iceServers) && data.iceServers.length > 0) {
            rtcRuntimeConfig = {
                iceServers: data.iceServers,
                iceTransportPolicy: data.iceTransportPolicy === 'relay' ? 'relay' : 'all'
            };
        }
    } catch (rtcConfigError) {
        console.warn('RTC config fetch failed, using defaults:', rtcConfigError);
    }
}

function normalizeRoomKeyClient(roomType, roomName) {
    return `${String(roomType || '').trim().toLowerCase()}:${String(roomName || '').trim().toLowerCase()}`;
}

function getRoomCacheKey(roomType, roomName) {
    return normalizeRoomKeyClient(roomType, roomName);
}

function getMyRoomRole(roomType, roomName) {
    const key = getRoomCacheKey(roomType, roomName);
    const roleMap = roomRoleCache[key] || {};
    const myId = String(currentUser?.id || '');
    const cachedRole = roleMap[myId];
    if (cachedRole) return cachedRole;

    if (roomType === 'group') {
        const localRole = groupMemberRoles?.[roomName]?.[myId];
        if (localRole) return localRole;
        if (joinedGroups.includes(roomName)) return 'Owner';
    }

    return 'Member';
}

function canManageRoomAppearance(roomType, roomName) {
    const role = getMyRoomRole(roomType, roomName);
    if (roomType === 'group') {
        const localRole = groupMemberRoles?.[roomName]?.[String(currentUser?.id || '')] || 'Member';
        if (localRole === 'Owner' || localRole === 'Admin') {
            return true;
        }
    }
    if (roomType === 'community') {
        const profile = communityProfiles[roomName];
        const localRole = Array.isArray(profile?.members)
            ? (profile.members.find((m) => String(m.id) === String(currentUser?.id))?.role || 'member')
            : 'member';
        if (localRole === 'leader' || localRole === 'vice_leader') {
            return true;
        }
    }
    return role === 'Owner' || role === 'Admin';
}

function cacheRoomProfile(roomType, roomName, profilePatch = {}) {
    const key = getRoomCacheKey(roomType, roomName);
    const prev = roomProfileCache[key] || {};
    roomProfileCache[key] = {
        ...prev,
        ...profilePatch,
        roomType,
        roomName
    };
    localStorage.setItem('roomProfileCache', JSON.stringify(roomProfileCache));
}

function emitRoomProfileUpdate(roomType, roomName, profilePatch) {
    if (!socket || !socket.connected) {
        showToast('Not connected to sync room update', 'warning');
        return;
    }
    socket.emit('update room profile', {
        roomType,
        roomName,
        profilePatch
    });
}

['pointerdown', 'touchstart', 'keydown'].forEach((eventName) => {
    window.addEventListener(eventName, () => {
        hasUserInteractedWithPage = true;
    }, { passive: true });
});

console.log(`🌐 Connected to: ${SERVER_URL}`);

async function syncBuildVersionBadge() {
    try {
        const badge = document.getElementById('buildVersionBadge');
        if (!badge) return;

        const response = await fetch(`${API_BASE}/version`, { cache: 'no-store' });
        if (!response.ok) return;

        const data = await response.json();
        if (data?.version) {
            badge.textContent = `v${data.version}`;
            badge.title = `Running backend version: ${data.version}`;
        }
    } catch (error) {
        
    }
}

function startCallTimer() {
    stopCallTimer();
    callStartedAt = Date.now();
    const timerLabel = document.getElementById('callTimerLabel');
    if (!timerLabel) return;

    callTimerInterval = setInterval(() => {
        const elapsed = Math.floor((Date.now() - callStartedAt) / 1000);
        const hrs = String(Math.floor(elapsed / 3600)).padStart(2, '0');
        const mins = String(Math.floor((elapsed % 3600) / 60)).padStart(2, '0');
        const secs = String(elapsed % 60).padStart(2, '0');
        timerLabel.textContent = `${hrs}:${mins}:${secs}`;
    }, 1000);
}

function stopCallTimer() {
    if (callTimerInterval) {
        clearInterval(callTimerInterval);
        callTimerInterval = null;
    }
    callStartedAt = null;
}

function startIncomingCallAlert() {
    stopIncomingCallAlert();

    if (navigator.vibrate && hasUserInteractedWithPage) {
        navigator.vibrate([300, 200, 300, 200, 300]);
    }

    incomingCallInterval = setInterval(() => {
        try {
            if (!incomingCallAudioContext) {
                incomingCallAudioContext = new (window.AudioContext || window.webkitAudioContext)();
            }

            const osc = incomingCallAudioContext.createOscillator();
            const gain = incomingCallAudioContext.createGain();
            osc.type = 'sine';
            osc.frequency.value = 880;
            gain.gain.value = 0.05;
            osc.connect(gain);
            gain.connect(incomingCallAudioContext.destination);
            osc.start();
            osc.stop(incomingCallAudioContext.currentTime + 0.15);
        } catch (error) {
            
        }
    }, 900);
}

function stopIncomingCallAlert() {
    if (incomingCallInterval) {
        clearInterval(incomingCallInterval);
        incomingCallInterval = null;
    }

    if (navigator.vibrate && hasUserInteractedWithPage) {
        try {
            navigator.vibrate(0);
        } catch (error) {
            
        }
    }
}

function formatMessageTimestamp(timestamp) {
    const date = timestamp ? new Date(timestamp) : new Date();
    if (Number.isNaN(date.getTime())) return 'Unknown time';
    return date.toLocaleString([], {
        month: 'short',
        day: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function ensureRemoteMediaPlayback(videoEl) {
    if (!videoEl) return;

    const tryPlay = () => {
        const playPromise = videoEl.play();
        if (!playPromise || typeof playPromise.then !== 'function') return;

        playPromise.then(() => {
            if (!remoteCallPlaybackStarted) {
                remoteCallPlaybackStarted = true;
                showToast('📞 Connected! Audio and video are live.', 'success');
            }
        }).catch((error) => {
            if (error?.name === 'AbortError') {
                setTimeout(() => {
                    if (videoEl.srcObject) {
                        videoEl.play().catch(() => {});
                    }
                }, 120);
                return;
            }

            console.warn('Remote media autoplay blocked, waiting for user gesture:', error);
            showToast('Tap once to enable call audio', 'warning');

            if (!remoteCallPlaybackRetryBound) {
                remoteCallPlaybackRetryBound = true;
                const retryPlayback = () => {
                    videoEl.play().catch((retryErr) => {
                        console.warn('Retry playback failed:', retryErr);
                    });
                    document.removeEventListener('click', retryPlayback);
                    document.removeEventListener('touchstart', retryPlayback);
                    document.removeEventListener('pointerdown', retryPlayback);
                    remoteCallPlaybackRetryBound = false;
                };
                document.addEventListener('click', retryPlayback, { once: true });
                document.addEventListener('touchstart', retryPlayback, { once: true, passive: true });
                document.addEventListener('pointerdown', retryPlayback, { once: true });
            }
        });
    };

    tryPlay();
    
    setTimeout(tryPlay, 250);
    setTimeout(tryPlay, 900);
}

function ensureLocalPreviewPlayback(videoEl) {
    if (!videoEl || !videoEl.srcObject) return;

    videoEl.muted = true;
    videoEl.autoplay = true;
    videoEl.playsInline = true;

    const tryPlay = () => {
        videoEl.play().catch(() => {});
    };

    tryPlay();
    setTimeout(tryPlay, 120);
    setTimeout(tryPlay, 500);
}

function appendCallLog(message) {
    const entry = `[${new Date().toLocaleTimeString()}] ${message}`;
    callEventLog.push(entry);
    if (callEventLog.length > 20) {
        callEventLog = callEventLog.slice(-20);
    }
    refreshCallDebug();
}

function setCallStatus(statusText) {
    const statusLabel = document.getElementById('callStatusLabel');
    if (statusLabel) {
        statusLabel.textContent = statusText || '';
    }
}

function ensureJitsiApiLoaded() {
    if (typeof window.JitsiMeetExternalAPI === 'function') {
        return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
        const existing = document.querySelector('script[data-jitsi-external-api="true"]');
        if (existing) {
            existing.addEventListener('load', () => resolve(), { once: true });
            existing.addEventListener('error', () => reject(new Error('Failed to load hosted call API')), { once: true });
            return;
        }

        const script = document.createElement('script');
        script.src = 'https://meet.jit.si/external_api.js';
        script.async = true;
        script.dataset.jitsiExternalApi = 'true';
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Failed to load hosted call API'));
        document.head.appendChild(script);
    });
}

function setHostedCallVisible(isVisible) {
    const host = document.getElementById('hostedCallContainer');
    const remoteVideo = document.getElementById('remoteCallVideo');
    const localVideo = document.getElementById('localCallVideo');
    if (host) host.style.display = isVisible ? 'block' : 'none';
    if (remoteVideo) remoteVideo.style.display = isVisible ? 'none' : 'block';
    if (localVideo) localVideo.style.display = isVisible ? 'none' : 'block';
}

async function startHostedCallRoom(peerName, roomName) {
    if (!roomName) {
        throw new Error('Missing hosted room name');
    }

    openCallDialog(peerName);
    setCallStatus('Joining hosted call...');
    appendCallLog(`Joining hosted room ${roomName}`);

    await ensureJitsiApiLoaded();

    const host = document.getElementById('hostedCallContainer');
    if (!host) {
        throw new Error('Hosted call container not found');
    }

    if (currentJitsiApi) {
        currentJitsiApi.dispose();
        currentJitsiApi = null;
    }

    host.innerHTML = '';
    setHostedCallVisible(true);
    currentCallProvider = 'hosted';
    currentCallRoomName = roomName;

    currentJitsiApi = new window.JitsiMeetExternalAPI('meet.jit.si', {
        roomName,
        parentNode: host,
        width: '100%',
        height: '100%',
        userInfo: {
            displayName: currentUser?.username || 'User'
        },
        configOverwrite: {
            prejoinPageEnabled: false,
            startWithAudioMuted: false,
            startWithVideoMuted: false,
            disableDeepLinking: true
        },
        interfaceConfigOverwrite: {
            MOBILE_APP_PROMO: false,
            SHOW_JITSI_WATERMARK: false,
            SHOW_WATERMARK_FOR_GUESTS: false
        }
    });

    currentJitsiApi.addListener('videoConferenceJoined', () => {
        setCallStatus('Connected');
        appendCallLog('Hosted room joined');
        if (!callTimerInterval) {
            startCallTimer();
        }
    });
    currentJitsiApi.addListener('participantJoined', (payload) => {
        appendCallLog(`Participant joined: ${payload?.displayName || payload?.id || 'remote user'}`);
    });
    currentJitsiApi.addListener('participantLeft', (payload) => {
        appendCallLog(`Participant left: ${payload?.id || 'remote user'}`);
    });
    currentJitsiApi.addListener('audioMuteStatusChanged', ({ muted }) => {
        const btn = document.getElementById('muteBtn');
        if (btn) {
            btn.textContent = muted ? '🔇' : '🎤';
            btn.classList.toggle('muted', !!muted);
        }
    });
    currentJitsiApi.addListener('videoMuteStatusChanged', ({ muted }) => {
        const btn = document.getElementById('cameraBtn');
        if (btn) {
            btn.textContent = muted ? '🚫' : '📷';
            btn.classList.toggle('cam-off', !!muted);
        }
    });
    currentJitsiApi.addListener('readyToClose', () => {
        appendCallLog('Hosted room requested close');
        cleanupCallSession(false);
    });
    currentJitsiApi.addListener('videoConferenceLeft', () => {
        appendCallLog('Hosted room left');
        cleanupCallSession(false);
    });
}

let callControlBindingsDone = false;
function bindCallControlButtons() {
    if (callControlBindingsDone) return;

    const bindings = [
        ['muteBtn', toggleLocalMute],
        ['cameraBtn', toggleCallCamera],
        ['endCallBtn', endVideoCall],
        ['callDebugBtn', toggleCallDebug]
    ];

    bindings.forEach(([id, action]) => {
        const button = document.getElementById(id);
        if (!button) return;

        const handlePress = (event) => {
            event.preventDefault();
            action();
        };

        button.addEventListener('click', handlePress);
        button.addEventListener('touchend', handlePress, { passive: false });
        button.style.pointerEvents = 'auto';
    });

    callControlBindingsDone = true;
}



function toggleAuthMode() {
    isRegistering = !isRegistering;
    syncAuthLanguage();
    const forgotWrap = document.getElementById('forgotPasswordWrap');
    const resetPanel = document.getElementById('resetPasswordPanel');
    if (forgotWrap) forgotWrap.style.display = isRegistering ? 'none' : 'block';
    if (resetPanel) resetPanel.classList.remove('show');
    setAuthFeedback('');
}

function toggleForgotPasswordPanel() {
    const panel = document.getElementById('resetPasswordPanel');
    if (!panel) return;
    panel.classList.toggle('show');
}

function setAuthFeedback(message, type = 'info') {
    const statusEl = document.getElementById('authStatus');
    if (!statusEl) return;
    const colors = {
        info: 'var(--text-secondary)',
        success: 'var(--success)',
        warning: '#f6c945',
        error: 'var(--danger)'
    };
    statusEl.textContent = message || '';
    statusEl.style.color = colors[type] || colors.info;
}

async function resetForgottenPassword() {
    const email = document.getElementById('resetEmail')?.value.trim();
    const newPassword = document.getElementById('resetNewPassword')?.value.trim();

    if (!email || !newPassword) {
        showToast('Enter your email and new password', 'warning');
        setAuthFeedback('Enter your email and new password', 'warning');
        return;
    }

    if (newPassword.length < 6) {
        showToast('New password must be at least 6 characters', 'warning');
        setAuthFeedback('New password must be at least 6 characters', 'warning');
        return;
    }

    try {
        setAuthFeedback('Resetting password...', 'info');
        const response = await fetch(`${API_BASE}/reset-password`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, newPassword })
        });

        const data = await response.json();
        if (!response.ok) {
            showToast(data.error || 'Failed to reset password', 'error');
            setAuthFeedback(data.error || 'Failed to reset password', 'error');
            return;
        }

        showToast('Password reset successful. You can now login.', 'success');
        document.getElementById('resetPasswordPanel')?.classList.remove('show');
        document.getElementById('resetEmail').value = email;
        document.getElementById('resetNewPassword').value = '';
        if (isRegistering) {
            toggleAuthMode();
        }
        if (document.getElementById('email')) {
            document.getElementById('email').value = email;
        }
        if (document.getElementById('password')) {
            document.getElementById('password').value = newPassword;
            document.getElementById('password').focus();
        }
        setAuthFeedback('Password reset successful. Use the pre-filled email/password and tap Login.', 'success');
    } catch (error) {
        console.error(error);
        showToast('Error resetting password', 'error');
        setAuthFeedback('Error resetting password. Please try again.', 'error');
    }
}

async function handleAuth(event) {
    event.preventDefault();
    const email = document.getElementById('email').value.trim();
    const password = document.getElementById('password').value.trim();
    const username = document.getElementById('username').value.trim();
    const authButton = document.getElementById('authButton');

    if (!email || !password) {
        showToast('Please fill in all fields', 'warning');
        setAuthFeedback('Please fill in all fields', 'warning');
        return;
    }

    try {
        if (authButton) {
            authButton.disabled = true;
            authButton.style.opacity = '0.7';
        }
        setAuthFeedback(isRegistering ? 'Creating account...' : 'Logging in...', 'info');
        let response;
        if (isRegistering) {
            if (!username) {
                showToast('Username is required', 'warning');
                setAuthFeedback('Username is required', 'warning');
                if (authButton) {
                    authButton.disabled = false;
                    authButton.style.opacity = '1';
                }
                return;
            }
            response = await fetch(`${API_BASE}/register`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, email, password })
            });
        } else {
            response = await fetch(`${API_BASE}/login`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            });
        }

        let data = {};
        try {
            data = await response.json();
        } catch (parseError) {
            data = { error: 'Server returned invalid response' };
        }
        if (!response.ok) {
            showToast(data.error || 'Authentication failed', 'error');
            setAuthFeedback(data.error || 'Authentication failed', 'error');
            return;
        }

        currentToken = data.token;
        currentUser = data.user;
        localStorage.setItem('token', currentToken);
        localStorage.setItem('user', JSON.stringify(currentUser));
        saveAccountSession();
        const authSuccessMsg = isRegistering ? 'Registration successful. You are now logged in.' : 'Login successful. Welcome back.';
        setAuthFeedback(authSuccessMsg, 'success');
        showToast(authSuccessMsg, 'success');

        showMainApp();
        connectSocket();
    } catch (error) {
        console.error(error);
        showToast('Error: ' + error.message, 'error');
        setAuthFeedback(`Error: ${error.message}`, 'error');
    } finally {
        if (authButton) {
            authButton.disabled = false;
            authButton.style.opacity = '1';
        }
    }
}

function logout(preserveAccounts = true) {
    if (!preserveAccounts) {
        localStorage.removeItem('rememberedAccounts');
    }
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    currentUser = null;
    currentToken = null;
    if (socket) socket.disconnect();
    location.reload();
}

function saveAccountSession() {
    if (!currentUser || !currentToken) return;
    const accounts = JSON.parse(localStorage.getItem('rememberedAccounts') || '[]');
    const filtered = accounts.filter(account => account.id !== currentUser.id);
    filtered.unshift({
        id: currentUser.id,
        username: currentUser.username,
        email: currentUser.email,
        token: currentToken,
        user: currentUser
    });
    localStorage.setItem('rememberedAccounts', JSON.stringify(filtered.slice(0, 5)));
}

function populateAccountSwitcher() {
    const switcher = document.getElementById('accountSwitcher');
    if (!switcher) return;
    const accounts = JSON.parse(localStorage.getItem('rememberedAccounts') || '[]');
    switcher.innerHTML = '';

    if (accounts.length === 0) {
        const option = document.createElement('option');
        option.value = '';
        option.textContent = 'No saved accounts';
        switcher.appendChild(option);
        return;
    }

    accounts.forEach(account => {
        const option = document.createElement('option');
        option.value = account.id;
        option.textContent = `${account.username} (${account.email})`;
        if (currentUser && account.id === currentUser.id) {
            option.textContent += ' - Current';
        }
        switcher.appendChild(option);
    });
}

function switchAccount() {
    const switcher = document.getElementById('accountSwitcher');
    if (!switcher) return;

    const selectedId = switcher.value;
    const accounts = JSON.parse(localStorage.getItem('rememberedAccounts') || '[]');
    const selected = accounts.find(account => account.id === selectedId);

    if (!selected) {
        showToast('Please select an account', 'warning');
        return;
    }

    localStorage.setItem('token', selected.token);
    localStorage.setItem('user', JSON.stringify(selected.user));
    showToast(`Switched to ${selected.username}`);
    setTimeout(() => location.reload(), 400);
}



function connectSocket() {
   
    if (socket && (socket.connected || socket.active)) {
        return;
    }

    
    if (socket) {
        try {
            socket.removeAllListeners();
            socket.disconnect();
        } catch (socketCleanupError) {
            console.warn('Previous socket cleanup failed:', socketCleanupError);
        }
    }

    socket = io(SERVER_URL, {
        reconnection: true,
        reconnectionDelay: 1000,
        reconnectionDelayMax: 5000,
        reconnectionAttempts: 5,
        transports: ['websocket', 'polling']
    });

    socket.on('connect', () => {
        console.log('✅ Connected to server:', SERVER_URL);
        socket.emit('join', { token: currentToken });
    });

    socket.on('users update', (users) => {
        globalOnlineUsers = getVisibleMembers(users);
        if (currentChatContext?.type === 'group' || currentChatContext?.type === 'community') {
            const byId = new Map();
            (currentRoomMembers || []).forEach((m) => {
                const uid = String(m?.id || m?.userId || '');
                if (!uid) return;
                byId.set(uid, { ...m });
            });

            (globalOnlineUsers || []).forEach((u) => {
                const uid = String(u?.userId || u?.id || u?._id || '');
                if (!uid || byId.has(uid)) return;
                byId.set(uid, {
                    id: uid,
                    username: u?.username || 'User',
                    avatar: u?.avatar || null,
                    role: 'Online'
                });
            });

            renderMembersSidebarFromRoom(Array.from(byId.values()));
        } else {
            updateMembersList(globalOnlineUsers);
        }
    });

    socket.on('room members update', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        const members = Array.isArray(payload?.members) ? payload.members : [];
        const roomKey = getRoomCacheKey(roomType, roomName);
        const nextRoles = {};
        members.forEach((m) => {
            const uid = String(m.id || m.userId || '');
            if (uid) nextRoles[uid] = m.role || 'Member';
        });
        roomRoleCache[roomKey] = nextRoles;
        localStorage.setItem('roomRoleCache', JSON.stringify(roomRoleCache));

        if (roomType === 'group' && roomName) {
            groupMemberRoles[roomName] = nextRoles;
            localStorage.setItem('groupMemberRoles', JSON.stringify(groupMemberRoles));
        }

        const expectedKey = normalizeRoomKeyClient(currentChatContext?.type, currentChatContext?.name);
        const incomingKey = normalizeRoomKeyClient(roomType, roomName);
        if (expectedKey !== incomingKey) return;

        currentRoomMembers = members;
        renderMembersSidebarFromRoom(currentRoomMembers);
    });

    socket.on('room profile updated', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        const previousRoomName = payload?.previousRoomName || roomName;
        const profile = payload?.profile || {};
        if (!roomType || !roomName) return;

        cacheRoomProfile(roomType, roomName, profile);

        if (roomType === 'group') {
            const previousProfile = groupProfiles[previousRoomName] || groupProfiles[roomName] || {};
            const merged = {
                ...previousProfile,
                ...profile,
                name: profile?.name || roomName
            };
            if (previousRoomName !== roomName) {
                delete groupProfiles[previousRoomName];
                if (groupMemberRoles[previousRoomName]) {
                    groupMemberRoles[roomName] = groupMemberRoles[previousRoomName];
                    delete groupMemberRoles[previousRoomName];
                    localStorage.setItem('groupMemberRoles', JSON.stringify(groupMemberRoles));
                }
            }
            groupProfiles[roomName] = merged;
            localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));

            const index = joinedGroups.findIndex((g) => String(g) === String(previousRoomName));
            if (index >= 0) {
                joinedGroups[index] = roomName;
                localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
            }
        }

        if (roomType === 'community') {
            const previousProfile = communityProfiles[previousRoomName] || communityProfiles[roomName] || {};
            const merged = {
                ...previousProfile,
                ...profile,
                name: profile?.name || roomName
            };
            if (previousRoomName !== roomName) {
                delete communityProfiles[previousRoomName];
            }
            communityProfiles[roomName] = merged;
            localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));

            const index = joinedCommunities.findIndex((g) => String(g) === String(previousRoomName));
            if (index >= 0) {
                joinedCommunities[index] = roomName;
                localStorage.setItem('joinedCommunities', JSON.stringify(joinedCommunities));
            }
        }

        if (currentChatContext?.type === roomType && String(currentChatContext?.name) === String(previousRoomName)) {
            const isRenameEvent = String(previousRoomName) !== String(roomName);
            currentChatContext.name = roomName;
            currentChatContext.id = roomName;

            if (isRenameEvent) {
                const oldKey = normalizeRoomKeyClient(roomType, previousRoomName);
                const nextKey = normalizeRoomKeyClient(roomType, roomName);
                if (roomMessages[oldKey] && !roomMessages[nextKey]) {
                    roomMessages[nextKey] = roomMessages[oldKey];
                    delete roomMessages[oldKey];
                    saveRoomMessages();
                }

                if (roomType === 'group') openGroupChat(roomName);
                if (roomType === 'community') openCommunityChat(roomName);
            } else {
                const titleEl = document.getElementById('chatTitle');
                if (titleEl) {
                    const profile = roomType === 'group' ? getGroupProfile(roomName) : getCommunityProfile(roomName);
                    titleEl.textContent = roomType === 'group'
                        ? `${profile?.image ? '🖼️' : (profile.icon || '👥')} Group: ${roomName}`
                        : `${profile?.image ? '🖼️' : (profile.icon || '🌐')} Community: ${roomName}`;
                }
            }
        }

        if (roomType === 'group' || roomType === 'community') {
            const expectedKey = normalizeRoomKeyClient(currentChatContext?.type, currentChatContext?.name);
            const incomingKey = normalizeRoomKeyClient(roomType, roomName);
            if (expectedKey === incomingKey) {
                renderMembersSidebarFromRoom(currentRoomMembers || []);
            }
        }

        loadFriendsForDM();
    });

    
    socket.on('room profile updated broadcast', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        const previousRoomName = payload?.previousRoomName || roomName;
        const profile = payload?.profile || {};
        if (!roomType || !roomName) return;

        cacheRoomProfile(roomType, roomName, profile);

        
        if (roomType === 'group') {
            const previousProfile = groupProfiles[previousRoomName] || groupProfiles[roomName] || {};
            groupProfiles[roomName] = {
                ...previousProfile,
                ...profile,
                name: profile?.name || roomName
            };
            if (previousRoomName !== roomName) {
                delete groupProfiles[previousRoomName];
            }
            localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));

            
            const index = joinedGroups.findIndex((g) => String(g) === String(previousRoomName));
            if (index >= 0) {
                joinedGroups[index] = roomName;
                localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
            }
        }

        if (roomType === 'community') {
            const previousProfile = communityProfiles[previousRoomName] || communityProfiles[roomName] || {};
            communityProfiles[roomName] = {
                ...previousProfile,
                ...profile,
                name: profile?.name || roomName
            };
            if (previousRoomName !== roomName) {
                delete communityProfiles[previousRoomName];
            }
            localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));

            
            const index = joinedCommunities.findIndex((g) => String(g) === String(previousRoomName));
            if (index >= 0) {
                joinedCommunities[index] = roomName;
                localStorage.setItem('joinedCommunities', JSON.stringify(joinedCommunities));
            }
        }

        
        refreshRoomVisuals(roomType, roomName);
        loadFriendsForDM();
    });

    socket.on('room chat history', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        const roomKey = normalizeRoomKeyClient(roomType, roomName);
        roomMessages[roomKey] = Array.isArray(payload?.messages) ? payload.messages : [];
        saveRoomMessages();

        const isCurrentRoom = normalizeRoomKeyClient(currentChatContext?.type, currentChatContext?.name) === normalizeRoomKeyClient(roomType, roomName);
        if (isCurrentRoom) {
            renderRoomMessages(roomKey, roomName, roomType);
        }
    });

    socket.on('room message', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        if (!roomType || !roomName) return;

        const roomKey = normalizeRoomKeyClient(roomType, roomName);
        if (!roomMessages[roomKey]) {
            roomMessages[roomKey] = [];
        }
        const msgId = payload?.messageId || payload?.id;
        const exists = msgId ? roomMessages[roomKey].some((m) => String(m?.messageId || m?.id) === String(msgId)) : false;
        if (!exists) {
            roomMessages[roomKey].push(payload);
        }
        saveRoomMessages();

        const isCurrentRoom = normalizeRoomKeyClient(currentChatContext?.type, currentChatContext?.name) === normalizeRoomKeyClient(roomType, roomName);
        if (isCurrentRoom) {
            const alreadyRendered = payload?.messageId
                ? !!document.querySelector(`.message[data-message-id="${String(payload.messageId)}"]`)
                : false;
            if (!alreadyRendered) {
                addMessageToChat(payload);
            }
        } else if (payload.from !== currentUser.id && chatSettings.notifyOnReceived) {
            
            const messagePreview = payload.mediaType === 'text' ? payload.content : `${payload.mediaType} message`;
            const roomLabel = roomType === 'community' ? 'Community' : 'Group';
            showToastClickable(
                `New message in ${roomLabel} "${roomName}" from ${payload.fromUsername}: ${messagePreview}`,
                'info',
                { type: roomType, name: roomName }
            );
            playNotificationSound();
            pushNotification(`${roomLabel === 'Community' ? '🌐' : '👥'} ${roomName}`, `${payload.fromUsername}: ${messagePreview}`, { type: roomType, name: roomName });
        }
    });

    socket.on('room chat cleared', (payload) => {
        const roomType = payload?.roomType;
        const roomName = payload?.roomName;
        if (!roomType || !roomName) return;

        const roomKey = normalizeRoomKeyClient(roomType, roomName);
        roomMessages[roomKey] = [];
        saveRoomMessages();

        const isCurrentRoom = normalizeRoomKeyClient(currentChatContext?.type, currentChatContext?.name) === normalizeRoomKeyClient(roomType, roomName);
        if (isCurrentRoom) {
            document.getElementById('messages-container').innerHTML = '';
            refreshChatScrollbar();
        }
    });

    socket.on('dm history cleared', (payload) => {
        const fromUserId = payload?.fromUserId;
        if (!fromUserId) return;

       
        if (currentChatContext?.type === 'dm' && String(currentChatContext?.id) === String(fromUserId)) {
            document.getElementById('messages-container').innerHTML = '';
            refreshChatScrollbar();
            showToast('Chat history was cleared', 'info');
        }
    });
    socket.on('dm message', (data) => {
        const fromId = String(data.from);
        const toId = String(data.to);
        const myId = String(currentUser.id);
        const isSender = fromId === myId;
        const otherUserId = isSender ? toId : fromId;
        const isCurrentChat = (
            currentChatContext.type === 'dm' &&
            currentChatContext.id &&
            String(currentChatContext.id) === String(otherUserId)
        );

        if (isCurrentChat) {
            
            if (!isSender) {
                addMessageToChat(data);
            }
        }

        if (isSender && chatSettings.notifyOnSent) {
            
        }

        if (!isSender && chatSettings.notifyOnReceived) {
            const messagePreview = data.mediaType === 'text' ? data.content : `${data.mediaType} message`;
            showToastClickable(
                `New message from ${data.fromUsername}: ${messagePreview}`, 
                'info',
                { type: 'dm', friendId: otherUserId, friendName: data.fromUsername }
            );
            showDesktopNotification(`New message from ${data.fromUsername}`, messagePreview, false);
            playNotificationSound();
            pushNotification(`💬 ${data.fromUsername}`, messagePreview, { type: 'dm', friendId: otherUserId, friendName: data.fromUsername });
        }
    });

    socket.on('dm delivery status', (data) => {
        if (data && data.delivered === false) {
            showToast('Message sent, but recipient is currently offline', 'warning');
        }
    });

    socket.on('dm user typing', (data) => {
        
        showTypingIndicator(data.username);
    });

    socket.on('dm user stop typing', (data) => {
        
        hideTypingIndicator(data.username);
    });

    socket.on('community user typing', (data) => {
        
        if (currentChatContext.type === 'community' && currentChatContext.name === data.community) {
            showTypingIndicator(data.username);
        }
    });

    socket.on('community user stop typing', (data) => {
        if (currentChatContext.type === 'community' && currentChatContext.name === data.community) {
            hideTypingIndicator();
        }
    });

    socket.on('room user typing', (data) => {
        if (currentChatContext.type === 'group' && String(currentChatContext.id) === String(data.roomId)) {
            showTypingIndicator(data.username);
        }
    });

    socket.on('room user stop typing', (data) => {
        if (currentChatContext.type === 'group' && String(currentChatContext.id) === String(data.roomId)) {
            hideTypingIndicator();
        }
    });

    socket.on('error', (msg) => {
        console.error('Socket error:', msg);
        showToast(msg || 'Realtime error', 'error');
    });

    socket.on('friend request received', (payload) => {
        const senderName = payload?.fromUsername || 'Someone';
        showToast(`New friend request from ${senderName}`, 'warning');
        if (document.getElementById('friendsModal') && !document.getElementById('friendsModal').classList.contains('hidden')) {
            loadFriends();
        }
    });

    socket.on('friend request accepted', (payload) => {
        if (!currentUser) return;
        if (String(payload?.fromId) === String(currentUser.id) || String(payload?.toId) === String(currentUser.id)) {
            loadFriendsForDM();
            if (document.getElementById('friendsModal') && !document.getElementById('friendsModal').classList.contains('hidden')) {
                loadFriends();
            }
        }
    });

    socket.on('friend request rejected', (payload) => {
        if (!currentUser) return;
        if (String(payload?.fromId) === String(currentUser.id) || String(payload?.toId) === String(currentUser.id)) {
            if (document.getElementById('friendsModal') && !document.getElementById('friendsModal').classList.contains('hidden')) {
                loadFriends();
            }
        }
    });

    socket.on('incoming video call', (payload) => {
        handleIncomingVideoCall(payload);
    });

    socket.on('video call ringing', (payload) => {
        const targetName = currentChatContext?.name || 'user';
        activeCallState = { callId: payload.callId, peerId: payload.toId, direction: 'outgoing' };
        showToast(`Calling ${targetName}...`, 'success');
    });

    socket.on('video call accepted', (payload) => {
        const byName = payload?.byUsername || 'User';
        stopIncomingCallAlert();
        showToast(`${byName} accepted the call`, 'success');
        const roomName = activeCallState?.callId || payload?.callId;
        if (roomName) {
            closeCustomDialog();
            startHostedCallRoom(byName, `firetech-${roomName}`).catch((error) => {
                console.error('Failed to start hosted call session:', error);
                showToast('Unable to join hosted call', 'error');
                cleanupCallSession(false);
            });
        }
    });

    socket.on('video call rejected', (payload) => {
        const byName = payload?.byUsername || 'User';
        stopIncomingCallAlert();
        showToast(`${byName} declined the call`, 'warning');
        activeCallState = null;
        closeCustomDialog();
        
        document.getElementById('callOverlay')?.classList.remove('active');
    });

    socket.on('video call unavailable', () => {
        stopIncomingCallAlert();
        showToast('User is currently unavailable for calls', 'warning');
        cleanupCallSession(false);
    });

    socket.on('video call ended', (payload) => {
        const byName = payload?.byUsername || 'User';
        stopIncomingCallAlert();
        showToast(`Call ended by ${byName}`, 'warning');
        cleanupCallSession(false);
    });

    socket.on('video signal', async (payload) => {
        const signal = payload?.signal;
        const fromId = payload?.fromId;
        const fromName = payload?.fromUsername || 'User';

        if (!signal || !fromId) return;

        try {
            if (signal.type === 'offer') {
                const isPolitePeer = String(currentUser?.id || '') > String(fromId || '');
                const hasPeer = !!peerConnection;
                const offerCollision = hasPeer && (makingOffer || peerConnection.signalingState !== 'stable');

                if (offerCollision) {
                    if (!isPolitePeer) {
                        console.warn('Ignoring offer collision (impolite peer)');
                        return;
                    }

                    
                    if (peerConnection.signalingState === 'have-local-offer') {
                        await peerConnection.setLocalDescription({ type: 'rollback' });
                    }
                }

                if (!activeCallState) {
                    activeCallState = { callId: payload?.callId || null, peerId: fromId, direction: 'incoming' };
                }
                if (isStartingCallSession) {
                    
                    pendingSignalOffer = { fromId, offer: signal.offer };
                    return;
                }
                if (!peerConnection) {
                    await startCallSession(fromName, fromId, false);
                }
                if (!peerConnection) return;
                await peerConnection.setRemoteDescription(new RTCSessionDescription(signal.offer));
                await flushQueuedIceCandidates();
                const answer = await peerConnection.createAnswer();
                await peerConnection.setLocalDescription(answer);

                socket.emit('video signal', {
                    toId: fromId,
                    callId: activeCallState?.callId,
                    signal: { type: 'answer', answer }
                });
            }

            if (signal.type === 'answer' && peerConnection) {
                
                if (peerConnection.signalingState !== 'have-local-offer') {
                    console.warn('Ignoring stale answer, signaling state:', peerConnection.signalingState);
                } else {
                    await peerConnection.setRemoteDescription(new RTCSessionDescription(signal.answer));
                    await flushQueuedIceCandidates();
                }
            }

            if (signal.type === 'ice-candidate' && signal.candidate) {
                await addOrQueueIceCandidate(signal.candidate);
            }
        } catch (error) {
            console.error('Video signaling error:', error);
            showToast('Video call signaling failed', 'error');
        }
    });
}

function showTypingIndicator(username) {
    if (!chatSettings.showTypingIndicator) return;
    const typingDiv = document.getElementById('typingIndicator');
    if (typingDiv) {
        typingDiv.textContent = `${username} is typing...`;
        typingDiv.style.display = 'block';
    }
}

function hideTypingIndicator() {
    const typingDiv = document.getElementById('typingIndicator');
    if (typingDiv) {
        typingDiv.style.display = 'none';
    }
}



function showMainApp() {
    document.getElementById('authContainer').style.display = 'none';
    document.getElementById('mainApp').classList.remove('hidden');
    
    try {
        
        const profilePanel = document.getElementById('profilePanel');
        if (profilePanel) {
            profilePanel.classList.remove('show');
            profilePanel.removeAttribute('style');
        }
        
       
        const settingsPanel = document.getElementById('settingsPanel');
        if (settingsPanel) {
            settingsPanel.classList.remove('show');
            settingsPanel.removeAttribute('style');
        }
        
        
        const mobileMembersPanel = document.getElementById('mobileMembersPanel');
        if (mobileMembersPanel) {
            mobileMembersPanel.classList.remove('show');
        }
        
        
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        if (sidebarOverlay) {
            sidebarOverlay.classList.remove('show');
        }
        
      
        const channelSidebar = document.getElementById('channelSidebar');
        if (channelSidebar) {
            channelSidebar.classList.remove('show');
        }
    } catch (e) {
        console.log('Error closing panels:', e);
    }
    
    loadUserProfile().finally(() => {
        loadShopItems();
    });
   
    const urlParams = new URLSearchParams(window.location.search);
    const addFriendId = urlParams.get('addFriend');
    if (addFriendId && addFriendId !== currentUser.id) {
        sendFriendRequestFromLink(addFriendId);
        
        window.history.replaceState({}, document.title, window.location.pathname);
    }
}

function showSection(section) {
    if (section === 'chat') {
        document.querySelector('.chat-area').style.display = 'flex';
        document.getElementById('friendsModal').classList.add('hidden');
        document.getElementById('shopModal').classList.add('hidden');
        if (currentChatContext.type === 'community' || currentChatContext.type === 'group') {
            subscribeToRoomChat(currentChatContext.type, currentChatContext.name);
        }
        loadFriendsForDM();
    } else if (section === 'friends') {
        document.querySelector('.chat-area').style.display = 'none';
        loadFriends();
        document.getElementById('friendsModal').classList.remove('hidden');
    } else if (section === 'shop') {
        document.querySelector('.chat-area').style.display = 'none';
        loadUserProfile().finally(() => {
            loadShopItems();
        });
        document.getElementById('shopModal').classList.remove('hidden');
    }

    localizeStaticUi(currentLanguage);
}

function openDM(friendId, friendName) {
    if (activeRoomSubscription && socket && socket.connected) {
        socket.emit('leave room chat', activeRoomSubscription);
    }
    activeRoomSubscription = null;
    currentChatFriendId = friendId;
    currentChatFriendName = friendName;
    currentChatContext = { type: 'dm', id: friendId, name: friendName };
    clearPendingMediaDraft();
    updatePinButtonState();
    
    
    const isSelfChat = String(friendId) === String(currentUser.id);
    const isBotChat = String(friendId) === FIRETECH_BOT_USER.userId;
    const displayName = isSelfChat ? `📝 ${currentUser.username} (Notes)` : isBotChat ? '⚡ FireTech Bot' : `💬 ${friendName}`;
    
    
    const chatTitleEl = document.getElementById('chatTitle');
    chatTitleEl.textContent = displayName;
    chatTitleEl.onclick = null;
    document.getElementById('messages-container').innerHTML = '';
    refreshChatScrollbar();
    
    
    document.getElementById('closeChatBtn').style.display = 'block';
    
   
    loadDMMessages(friendId);
    
   
    if (socket && socket.connected) {
        socket.emit('join dm', friendId);
    }

    currentRoomMembers = [];
    if (globalOnlineUsers.length > 0) {
        updateMembersList(globalOnlineUsers);
    }
    
    showSection('chat');
    
    
    if (window.innerWidth <= 480) {
        closeMobileSidebar();
    }
}

async function loadDMMessages(friendId) {
    if (String(friendId) === FIRETECH_BOT_USER.userId) {
        document.getElementById('messages-container').innerHTML = '';
        addMessageToChat({
            from: FIRETECH_BOT_USER.userId,
            fromUsername: FIRETECH_BOT_USER.username,
            fromAvatar: null,
            to: currentUser?.id,
            content: 'Type /firetech or @firetech for commands. I provide security tips, encryption info, and network insights.',
            mediaType: 'text',
            timestamp: new Date().toISOString(),
            isBot: true
        });
        refreshChatScrollbar();
        return;
    }
    try {
        const response = await fetch(`${API_BASE}/dms/${friendId}`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        const messages = await response.json();
        
        
        document.getElementById('messages-container').innerHTML = '';
        messages.forEach(msg => {
            addMessageToChat({
                from: msg.from,
                fromUsername: msg.fromUsername,
                fromAvatar: msg.fromAvatar || null,
                content: msg.content,
                mediaType: msg.mediaType,
                mediaUrl: msg.mediaUrl,
                timestamp: msg.timestamp
            });
        });
        refreshChatScrollbar();
    } catch (error) {
        console.error('Failed to load DM messages:', error);
    }
}

function toggleChannelSidebar() {
    const sidebar = document.getElementById('channelSidebar');
    const overlay = document.getElementById('sidebarOverlay');
    
    sidebar?.classList.toggle('show');
    if (overlay) {
        overlay.classList.toggle('show');
    }
}

function openProfile() {
    const panel = document.getElementById('profilePanel');
    if (!panel) return;
    panel.style.removeProperty('display');
    panel.style.removeProperty('visibility');
    panel.style.removeProperty('pointer-events');
    panel.style.removeProperty('opacity');
    panel.style.removeProperty('transform');
    panel.style.overflowY = 'auto';
    panel.style.webkitOverflowScrolling = 'touch';
    panel.style.height = '100dvh';
    panel.style.maxHeight = '100dvh';
    panel.style.touchAction = 'pan-y';
    panel.classList.add('show');
    panel.scrollTop = 0;
    const backdrop = document.getElementById('profileBackdrop');
    if (backdrop) backdrop.style.display = 'block';

    if (currentChatContext?.type === 'group' || currentChatContext?.type === 'community') {
        const isGroup = currentChatContext.type === 'group';
        const profile = isGroup ? getGroupProfile(currentChatContext.name) : getCommunityProfile(currentChatContext.name);
        const profileName = document.getElementById('profileName');
        const profileBio = document.getElementById('profileBio');
        const profileAvatar = document.getElementById('profileAvatar');

        if (profileName) profileName.textContent = currentChatContext.name;
        if (profileBio) profileBio.textContent = isGroup ? 'Group profile' : 'Community profile';
        if (profileAvatar) {
            if (profile?.image) {
                profileAvatar.style.backgroundImage = `url(${profile.image})`;
                profileAvatar.style.backgroundSize = 'cover';
                profileAvatar.style.backgroundPosition = 'center';
                profileAvatar.textContent = '';
            } else {
                profileAvatar.style.backgroundImage = 'none';
                profileAvatar.style.backgroundSize = '';
                profileAvatar.style.backgroundPosition = '';
                profileAvatar.textContent = profile?.icon || (isGroup ? '👥' : '🌐');
            }
        }
    } else {
        loadUserProfile();
    }
}

function shareProfileLink() {
    const profileUrl = `${window.location.origin}?addFriend=${currentUser.id}`;
    
    navigator.clipboard.writeText(profileUrl).then(() => {
        showToast('Profile link copied to clipboard! Share with friends to connect.');
    }).catch(() => {
        const tempInput = document.createElement('input');
        tempInput.value = profileUrl;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        showToast('Profile link copied!');
    });
}


const BANNER_PRESETS = [
    'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80', 
    'https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&q=80', 
    'https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?w=800&q=80', 
    'https://images.unsplash.com/photo-1550684376-efcbd6e3f031?w=800&q=80', 
    '#gradient:135,#667eea,#764ba2',
    '#gradient:135,#f093fb,#f5576c',
    '#gradient:135,#4facfe,#00f2fe',
    '#gradient:135,#43e97b,#38f9d7',
];

function openBannerPicker() {
    const presetsHtml = BANNER_PRESETS.map((p, i) => {
        const isGradient = p.startsWith('#gradient:');
        const style = isGradient
            ? (() => { const parts = p.replace('#gradient:','').split(','); return `background: linear-gradient(${parts[0]}deg, ${parts[1]}, ${parts[2]})`; })()
            : `background-image: url('${p}'); background-size: cover; background-position: center;`;
        return `<div onclick="applyBannerPreset('${p}')" style="width:100%; height:60px; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:border 0.15s; ${style}" onmouseover="this.style.borderColor='var(--primary-color)'" onmouseout="this.style.borderColor='transparent'"></div>`;
    }).join('');

    const html = `
        <div>
            <p style="color:var(--text-secondary); font-size:13px; margin-bottom:12px;">Choose a preset or upload your own image.</p>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;">${presetsHtml}</div>
            <button class="save-btn" onclick="document.getElementById('bannerFileInput').click()" style="width:100%; margin-bottom:8px;">📁 Upload Custom Banner</button>
            <input type="file" id="bannerFileInput" accept="image/*" style="display:none;" onchange="handleBannerUpload(event)">
            <button class="secondary-btn" onclick="clearBanner(); closeCustomDialog();" style="width:100%;">🗑 Remove Banner</button>
        </div>
    `;
    customAlert(html, '🖼 Profile Banner', '🖼');
}

function applyBannerPreset(preset) {
    const wrap = document.getElementById('profileBannerWrap');
    const img = document.getElementById('profileBannerImg');
    if (!wrap) return;
    if (preset.startsWith('#gradient:')) {
        const parts = preset.replace('#gradient:', '').split(',');
        wrap.style.background = `linear-gradient(${parts[0]}deg, ${parts[1]}, ${parts[2]})`;
        img.style.display = 'none';
    } else {
        img.src = preset;
        img.style.display = 'block';
        wrap.style.background = '';
    }
    localStorage.setItem('profileBanner', preset);
    closeCustomDialog();
}

function handleBannerUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
        applyBannerPreset(e.target.result);
    };
    reader.readAsDataURL(file);
    event.target.value = '';
}

function clearBanner() {
    const wrap = document.getElementById('profileBannerWrap');
    const img = document.getElementById('profileBannerImg');
    if (wrap) wrap.style.background = '';
    if (img) { img.style.display = 'none'; img.src = ''; }
    localStorage.removeItem('profileBanner');
}

function loadSavedBanner() {
    const saved = localStorage.getItem('profileBanner');
    if (saved) applyBannerPreset(saved);
}


function filterGroupsList(query) {
    const items = document.querySelectorAll('#groupsList .group-card');
    const q = query.toLowerCase();
    items.forEach(card => {
        const name = card.querySelector('.group-name')?.textContent?.toLowerCase() || '';
        card.style.display = name.includes(q) ? '' : 'none';
    });
}

function closeProfile() {
    const panel = document.getElementById('profilePanel');
    if (!panel) return;
    panel.classList.remove('show');
    const backdrop = document.getElementById('profileBackdrop');
    if (backdrop) backdrop.style.display = 'none';
}

function switchProfileTab(tab, triggerEl) {
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));

    const tabTrigger = triggerEl || (typeof event !== 'undefined' ? event.target : null);
    if (tabTrigger) {
        tabTrigger.classList.add('active');
    }
    document.getElementById(tab + 'Tab').classList.add('active');

    if (tab === 'inventory') {
        loadInventory();
    } else if (tab === 'orbs') {
        renderOrbEffects();
    } else if (tab === 'saved') {
        renderSavedItemsSummary();
    }
}

function applyOrbEffect(effect = 'none', options = {}) {
    const { silent = false } = options;
    const root = document.documentElement;
    root.classList.remove('orb-none', 'orb-aurora', 'orb-neon-pulse', 'orb-ocean-mist', 'orb-ember');

    const classMap = {
        none: 'orb-none',
        aurora: 'orb-aurora',
        neon_pulse: 'orb-neon-pulse',
        ocean_mist: 'orb-ocean-mist',
        ember: 'orb-ember'
    };

    const normalized = classMap[effect] ? effect : 'none';
    root.classList.add(classMap[normalized]);
    selectedOrbEffect = normalized;
    localStorage.setItem('selectedOrbEffect', normalized);

    const orbSelect = document.getElementById('orbEffectSelect');
    if (orbSelect) {
        orbSelect.value = normalized;
    }

    if (!silent) {
        showToast('Orb effect updated', 'success');
    }
}

function renderOrbEffects() {
    const orbSelect = document.getElementById('orbEffectSelect');
    if (orbSelect) {
        orbSelect.value = selectedOrbEffect;
    }
    applyOrbEffect(selectedOrbEffect, { silent: true });
}

function renderSavedItemsSummary() {
    const savedMediaCountEl = document.getElementById('savedMediaCount');
    const archivedMessageCountEl = document.getElementById('savedArchivedCount');
    if (savedMediaCountEl) {
        savedMediaCountEl.textContent = String(copiedMediaItems.length);
    }
    if (archivedMessageCountEl) {
        archivedMessageCountEl.textContent = String(archivedMessages.length);
    }
}

function closeFriendsModal() {
    document.getElementById('friendsModal').classList.add('hidden');
    showSection('chat');
}

function closeShopModal() {
    document.getElementById('shopModal').classList.add('hidden');
    showSection('chat');
}



async function loadUserProfile() {
    try {
        const response = await fetch(`${API_BASE}/profile/${currentUser.id}`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        const user = await response.json();

        const profileAvatar = document.getElementById('profileAvatar');
        if (user.avatar) {
            profileAvatar.style.backgroundImage = `url(${user.avatar})`;
            profileAvatar.style.backgroundSize = 'cover';
            profileAvatar.style.backgroundPosition = 'center';
            profileAvatar.textContent = '';
        } else {
            profileAvatar.style.backgroundImage = 'none';
            profileAvatar.textContent = user.username.charAt(0).toUpperCase();
        }

        document.getElementById('profileName').textContent = user.username;
        document.getElementById('profileBio').textContent = user.bio || 'No bio yet';
        document.getElementById('editUsername').value = user.username;
        document.getElementById('editBio').value = user.bio;
        const phoneInput = document.getElementById('editPhoneNumber');
        if (phoneInput) {
            phoneInput.value = user.phoneNumber || '';
        }
        document.getElementById('coinsDisplay').textContent = `💰 Coins: ${user.coins}`;

        currentUser = user;
        localStorage.setItem('user', JSON.stringify(user));
        applyPersistedShopEffects();
    } catch (error) {
        console.error('Failed to load profile:', error);
    }
}

async function saveProfile() {
    try {
        const username = document.getElementById('editUsername').value;
        const bio = document.getElementById('editBio').value;
        const phoneNumber = document.getElementById('editPhoneNumber')?.value || '';

        const response = await fetch(`${API_BASE}/profile`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ username, bio, phoneNumber, avatar: currentUser.avatar || '' })
        });

        const data = await response.json();
        if (response.ok) {
            showToast('Profile updated successfully!');
            loadUserProfile();
        } else {
            showToast(data.error, 'error');
        }
    } catch (error) {
        console.error(error);
        showToast('Error saving profile', 'error');
    }
}



function handleMessageKeypress(event) {
    if (event.key === 'Enter' && chatSettings.enterToSend) {
        sendMessage();
    }
}

function renderPendingMediaDraft() {
    const panel = document.getElementById('mediaDraftPreview');
    if (!panel) return;

    if (pendingMediaDrafts.length === 0) {
        panel.style.display = 'none';
        return;
    }

    panel.style.display = 'flex';
    const leftDiv = panel.querySelector('.draft-preview-left') || document.createElement('div');
    leftDiv.className = 'draft-preview-left';
    leftDiv.style.display = 'flex';
    leftDiv.style.gap = '10px';
    leftDiv.style.flexWrap = 'wrap';
    leftDiv.style.flex = '1';
    leftDiv.innerHTML = '';

    pendingMediaDrafts.forEach((draft, idx) => {
        const itemWrapper = document.createElement('div');
        itemWrapper.style.position = 'relative';
        itemWrapper.style.display = 'inline-block';

        if (draft.mediaType === 'image' || draft.mediaType === 'gif') {
            const img = document.createElement('img');
            img.src = draft.mediaUrl;
            img.style.maxWidth = '70px';
            img.style.maxHeight = '70px';
            img.style.borderRadius = '6px';
            img.style.border = '2px solid var(--primary-color)';
            itemWrapper.appendChild(img);
        } else if (draft.mediaType === 'sticker') {
            const emoji = document.createElement('span');
            emoji.textContent = draft.content || '😀';
            emoji.style.fontSize = '48px';
            emoji.style.display = 'flex';
            emoji.style.alignItems = 'center';
            emoji.style.justifyContent = 'center';
            emoji.style.width = '70px';
            emoji.style.height = '70px';
            emoji.style.borderRadius = '6px';
            emoji.style.background = 'var(--chat-bg)';
            emoji.style.border = '2px solid var(--primary-color)';
            itemWrapper.appendChild(emoji);
        } else if (draft.mediaType === 'video') {
            const vid = document.createElement('div');
            vid.textContent = '▶️ Video';
            vid.style.width = '70px';
            vid.style.height = '70px';
            vid.style.borderRadius = '6px';
            vid.style.background = 'var(--chat-bg)';
            vid.style.border = '2px solid var(--primary-color)';
            vid.style.display = 'flex';
            vid.style.alignItems = 'center';
            vid.style.justifyContent = 'center';
            vid.style.fontSize = '24px';
            itemWrapper.appendChild(vid);
        } else {
            const file = document.createElement('div');
            file.textContent = '📎 File';
            file.style.width = '70px';
            file.style.height = '70px';
            file.style.borderRadius = '6px';
            file.style.background = 'var(--chat-bg)';
            file.style.border = '2px solid var(--primary-color)';
            file.style.display = 'flex';
            file.style.alignItems = 'center';
            file.style.justifyContent = 'center';
            file.style.fontSize = '20px';
            itemWrapper.appendChild(file);
        }

        
        const removeBtn = document.createElement('button');
        removeBtn.innerHTML = '✕';
        removeBtn.style.position = 'absolute';
        removeBtn.style.top = '-8px';
        removeBtn.style.right = '-8px';
        removeBtn.style.width = '28px';
        removeBtn.style.height = '28px';
        removeBtn.style.borderRadius = '50%';
        removeBtn.style.background = 'var(--primary-color)';
        removeBtn.style.color = 'white';
        removeBtn.style.border = 'none';
        removeBtn.style.cursor = 'pointer';
        removeBtn.style.fontSize = '16px';
        removeBtn.style.fontWeight = 'bold';
        removeBtn.style.display = 'flex';
        removeBtn.style.alignItems = 'center';
        removeBtn.style.justifyContent = 'center';
        removeBtn.style.transition = 'transform 0.1s';
        removeBtn.onclick = () => removeMediaDraft(idx);
        removeBtn.onmouseover = () => removeBtn.style.transform = 'scale(1.2)';
        removeBtn.onmouseout = () => removeBtn.style.transform = 'scale(1)';
        itemWrapper.appendChild(removeBtn);

        leftDiv.appendChild(itemWrapper);
    });

    if (!panel.querySelector('.draft-preview-left')) {
        const existingLeft = panel.querySelector('.draft-preview-left');
        if (existingLeft) existingLeft.remove();
        panel.insertBefore(leftDiv, panel.firstChild);
    } else {
        panel.querySelector('.draft-preview-left').innerHTML = leftDiv.innerHTML;
    }
}

function removeMediaDraft(index) {
    pendingMediaDrafts.splice(index, 1);
    pendingMediaDraft = pendingMediaDrafts[0] || null;
    if (pendingMediaDrafts.length === 0) {
        document.getElementById('mediaDraftPreview').style.display = 'none';
    }
    renderPendingMediaDraft();
    showToast('Media item removed', 'info');
}

function setPendingMediaDraft(draft) {
    pendingMediaDrafts.push(draft);
    pendingMediaDraft = pendingMediaDrafts[0] || null;
    renderPendingMediaDraft();
}

function clearPendingMediaDraft() {
    pendingMediaDrafts = [];
    pendingMediaDraft = null;
    renderPendingMediaDraft();
}

function scrollChatUp() {
    const container = document.getElementById('messages-container');
    if (!container) return;
    container.scrollBy({ top: -220, behavior: 'smooth' });
}

function scrollChatDown() {
    const container = document.getElementById('messages-container');
    if (!container) return;
    container.scrollBy({ top: 220, behavior: 'smooth' });
}

let isDraggingChatThumb = false;
let chatThumbDragOffset = 0;

function refreshChatScrollbar() {
    const container = document.getElementById('messages-container');
    const rail = document.getElementById('chatScrollRail');
    const thumb = document.getElementById('chatScrollThumb');
    if (!container || !rail || !thumb) return;

    const maxScroll = container.scrollHeight - container.clientHeight;
    rail.classList.remove('hidden');
    const trackHeight = rail.clientHeight;
    const ratio = container.scrollHeight > 0 ? (container.clientHeight / container.scrollHeight) : 1;
    const thumbHeight = Math.max(56, Math.round(Math.min(1, ratio) * trackHeight));
    thumb.style.height = `${Math.min(trackHeight, thumbHeight)}px`;
    syncChatScrollbarPosition();
}

function syncChatScrollbarPosition() {
    const container = document.getElementById('messages-container');
    const rail = document.getElementById('chatScrollRail');
    const thumb = document.getElementById('chatScrollThumb');
    if (!container || !rail || !thumb || rail.classList.contains('hidden')) return;

    const maxScroll = container.scrollHeight - container.clientHeight;
    const maxThumbTravel = rail.clientHeight - thumb.offsetHeight;
    if (maxScroll <= 0 || maxThumbTravel <= 0) {
        thumb.style.transform = 'translateY(0px)';
        return;
    }

    const nextTop = (container.scrollTop / maxScroll) * maxThumbTravel;
    thumb.style.transform = `translateY(${nextTop}px)`;
}

function startChatScrollbarDrag(event) {
    const thumb = document.getElementById('chatScrollThumb');
    if (!thumb) return;
    isDraggingChatThumb = true;
    chatThumbDragOffset = event.clientY - thumb.getBoundingClientRect().top;
    event.preventDefault();
}

function stopChatScrollbarDrag() {
    isDraggingChatThumb = false;
}

function handleChatScrollbarDrag(event) {
    if (!isDraggingChatThumb) return;

    const container = document.getElementById('messages-container');
    const rail = document.getElementById('chatScrollRail');
    const thumb = document.getElementById('chatScrollThumb');
    if (!container || !rail || !thumb) return;

    const maxThumbTravel = rail.clientHeight - thumb.offsetHeight;
    const maxScroll = container.scrollHeight - container.clientHeight;
    if (maxThumbTravel <= 0 || maxScroll <= 0) return;

    const railTop = rail.getBoundingClientRect().top;
    const rawTop = event.clientY - railTop - chatThumbDragOffset;
    const clampedTop = Math.max(0, Math.min(maxThumbTravel, rawTop));
    container.scrollTop = (clampedTop / maxThumbTravel) * maxScroll;
    syncChatScrollbarPosition();
}

function jumpChatScrollbar(event) {
    if (event.target && event.target.id === 'chatScrollThumb') return;

    const container = document.getElementById('messages-container');
    const rail = document.getElementById('chatScrollRail');
    const thumb = document.getElementById('chatScrollThumb');
    if (!container || !rail || !thumb) return;

    const maxThumbTravel = rail.clientHeight - thumb.offsetHeight;
    const maxScroll = container.scrollHeight - container.clientHeight;
    if (maxThumbTravel <= 0 || maxScroll <= 0) return;

    const clickY = event.clientY - rail.getBoundingClientRect().top;
    const desiredTop = Math.max(0, Math.min(maxThumbTravel, clickY - (thumb.offsetHeight / 2)));
    container.scrollTop = (desiredTop / maxThumbTravel) * maxScroll;
    syncChatScrollbarPosition();
}

async function sendMessage() {
    const input = document.getElementById('messageInput');
    const content = input.value.trim();
    const hasDrafts = pendingMediaDrafts.length > 0;

    if (!content && !hasDrafts) {
        showToast('Type a message or pick media first', 'warning');
        return;
    }

    try {
        
        if (content) {
            updateUserStats('messagesCount', 1);
            updateUserStats('totalChars', content.length);
        }
        if (currentChatContext.type === 'community' || currentChatContext.type === 'group') {
            if (hasDrafts) {
                pendingMediaDrafts.forEach((draft, index) => {
                    sendRoomMessage({
                        content: index === 0 && content ? content : (draft.content || (draft.mediaType === 'image' ? 'Photo' : 'Media')),
                        mediaType: draft.mediaType,
                        mediaUrl: draft.mediaUrl || null
                    });
                });
            } else {
                sendRoomMessage({ content, mediaType: 'text', mediaUrl: null });
            }

            clearPendingMediaDraft();
            input.value = '';
            hideTypingIndicator();
            return;
        }

        const targetId = ensureChatTarget();
        if (!targetId) {
            showToast('Unable to find chat target', 'warning');
            return;
        }

        if (hasDrafts) {
            for (let index = 0; index < pendingMediaDrafts.length; index++) {
                const draft = pendingMediaDrafts[index];
                await sendStagedDm(targetId, {
                    content: index === 0 && content ? content : (draft.content || (draft.mediaType === 'image' ? 'Photo' : 'Media')),
                    mediaType: draft.mediaType,
                    mediaUrl: draft.mediaUrl || null
                });
            }
            clearPendingMediaDraft();
        } else {
            if (!socket || !socket.connected) {
                showToast('Connection lost. Reconnecting...', 'warning');
                connectSocket();
                return;
            }
            
           
            const optimisticMessage = {
                id: Date.now(),
                from: currentUser.id,
                fromUsername: currentUser.username,
                fromAvatar: currentUser.avatar,
                to: targetId,
                content: content,
                mediaType: 'text',
                timestamp: new Date().toISOString()
            };
            addMessageToChat(optimisticMessage);
            
            
            socket.emit('send dm', {
                toUserId: targetId,
                content: content,
                mediaType: 'text'
            });
        }

        input.value = '';
        hideTypingIndicator();
    } catch (error) {
        console.error(error);
    }
}

function addMessageToChat(data) {
    ensureMessageActionInteractionBinding();
    const container = document.getElementById('messages-container');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message';messageDiv.dataset.messageId = data.id || Date.now();
    messageDiv.dataset.sender = data.from || currentUser?.id;

    if (chatSettings.compactMode) {
        messageDiv.style.gap = '8px';
    }

    const avatar = document.createElement('div');
    avatar.className = 'message-avatar';
    const fallbackInitial = (data.fromUsername || data.sender || 'U').charAt(0).toUpperCase();
    const shouldUseCurrentUserAvatar = String(data.from) === String(currentUser?.id) && currentUser?.avatar;
    const avatarSource = data.fromAvatar || (shouldUseCurrentUserAvatar ? currentUser.avatar : null);
    if (avatarSource && (String(avatarSource).startsWith('data:') || String(avatarSource).startsWith('http'))) {
        avatar.style.backgroundImage = `url(${avatarSource})`;
        avatar.style.backgroundSize = 'cover';
        avatar.style.backgroundPosition = 'center';
        avatar.textContent = '';
    } else {
        avatar.style.backgroundImage = 'none';
        avatar.textContent = fallbackInitial;
    }

    const content = document.createElement('div');
    content.className = 'message-content';

    const header = document.createElement('div');
    header.className = 'message-header';

    const username = document.createElement('span');
    username.className = 'message-username';
    username.textContent = data.fromUsername || data.sender;

    header.appendChild(username);

    const time = document.createElement('span');
    time.className = 'message-time';
    time.textContent = formatMessageTimestamp(data.timestamp);
    time.title = formatMessageTimestamp(data.timestamp);

    const text = document.createElement('div');
    text.className = 'message-text';
    if (chatSettings.fontSize === 'small') {
        text.style.fontSize = '12px';
    } else if (chatSettings.fontSize === 'large') {
        text.style.fontSize = '16px';
    }
    
    
    if (data.mediaType === 'sticker') {
        text.style.fontSize = '96px';
        text.style.lineHeight = '1';
        text.textContent = data.content;
    } else {
        
        const emojiRegex = /^[\p{Emoji}\p{Emoji_Component}\s]+$/u;
        const isOnlyEmojis = data.content && emojiRegex.test(data.content.trim());
        
        if (isOnlyEmojis && data.content.trim().length <= 20) {
            
            text.style.fontSize = '64px';
            text.style.lineHeight = '1.2';
        }
        
        text.textContent = data.content;
    }

    content.appendChild(header);
    content.appendChild(text);
    content.appendChild(time);

    
    messageDiv.oncontextmenu = (e) => {
        e.preventDefault();
        showMessageContextMenu(e, messageDiv, data);
        return false;
    };

   
    const actions = document.createElement('div');
    actions.className = 'message-actions';
    
    const reactBtn = document.createElement('button');
    reactBtn.className = 'message-action-btn';
    reactBtn.innerHTML = '👍';
    reactBtn.title = 'React';
    reactBtn.onclick = (e) => {
        e.stopPropagation();
        showQuickReactions(messageDiv.dataset.messageId, messageDiv, data);
    };
    
    const editBtn = document.createElement('button');
    editBtn.className = 'message-action-btn';
    editBtn.innerHTML = '✏️';
    editBtn.title = 'Edit';
    editBtn.onclick = (e) => {
        e.stopPropagation();
        editMessage(messageDiv.dataset.messageId, text);
    };
    
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'message-action-btn';
    deleteBtn.innerHTML = '🗑️';
    deleteBtn.title = 'Delete';
    deleteBtn.onclick = (e) => {
        e.stopPropagation();
        deleteMessage(messageDiv.dataset.messageId, messageDiv);
    };

    const replyBtn = document.createElement('button');
    replyBtn.className = 'message-action-btn';
    replyBtn.innerHTML = '↩️';
    replyBtn.title = 'Reply';
    replyBtn.onclick = (e) => {
        e.stopPropagation();
        const input = document.getElementById('messageInput');
        if (!input) return;
        const previewText = (data.content || '').trim().slice(0, 40);
        input.value = `@${data.fromUsername || 'user'} ${previewText ? `(${previewText}) ` : ''}`;
        input.focus();
    };

    const pinChatBtn = document.createElement('button');
    pinChatBtn.className = 'message-action-btn';
    pinChatBtn.innerHTML = '📌';
    pinChatBtn.title = 'Pin this chat';
    pinChatBtn.onclick = (e) => {
        e.stopPropagation();
        togglePinCurrentChat();
    };
    
    actions.appendChild(reactBtn);
    actions.appendChild(replyBtn);
    actions.appendChild(pinChatBtn);
    if (String(data.from) === String(currentUser?.id)) {
        actions.appendChild(editBtn);
        actions.appendChild(deleteBtn);
    }
    
    content.appendChild(actions);

    messageDiv.addEventListener('click', (event) => {
        if (event.target.closest('.message-actions') || event.target.closest('.message-context-menu') || event.target.closest('.reaction-picker')) {
            return;
        }
        const wasOpen = messageDiv.classList.contains('message-actions-open');
        closeAllMessageActionRows();
        if (!wasOpen) {
            messageDiv.classList.add('message-actions-open');
        }
    });
    
    
    const reactionsDiv = document.createElement('div');
    reactionsDiv.className = 'message-reactions';
    reactionsDiv.dataset.messageId = messageDiv.dataset.messageId;
    content.appendChild(reactionsDiv);

    if (data.mediaType !== 'text' && data.mediaType !== 'sticker' && data.mediaUrl) {
        const media = document.createElement('div');
        media.className = 'message-media';

        if (data.mediaType === 'image') {
            const img = document.createElement('img');
            img.src = data.mediaUrl;
            img.alt = 'Image';
            img.onerror = function() {
                console.error('Failed to load image:', data.mediaUrl);
                this.alt = '❌ Image failed to load';
                this.style.display = 'none';
                const errorMsg = document.createElement('div');
                errorMsg.textContent = '❌ Image failed to load';
                errorMsg.style.color = '#ff6b6b';
                errorMsg.style.fontSize = '12px';
                media.appendChild(errorMsg);
            };
            img.onload = function() {
                console.log('✅ Image loaded successfully');
            };
            media.appendChild(img);
        } else if (data.mediaType === 'video') {
            const video = document.createElement('video');
            video.src = data.mediaUrl;
            video.controls = true;
            video.preload = 'metadata';
            video.playsInline = true;
            video.setAttribute('playsinline', '');
            video.setAttribute('webkit-playsinline', 'true');
            video.onerror = function() {
                console.error('Failed to load video:', data.mediaUrl);
                const errorMsg = document.createElement('div');
                errorMsg.textContent = '❌ Video failed to load';
                errorMsg.style.color = '#ff6b6b';
                errorMsg.style.fontSize = '12px';
                media.appendChild(errorMsg);
            };
            video.onloadedmetadata = function() {
                console.log('✅ Video loaded successfully');
            };
            media.appendChild(video);
        } else if (data.mediaType === 'gif') {
            const img = document.createElement('img');
            img.src = data.mediaUrl;
            img.style.maxWidth = '300px';
            img.style.borderRadius = '8px';
            img.alt = 'GIF';
            media.appendChild(img);
        } else if (data.mediaType === 'voice') {
            const audio = document.createElement('audio');
            audio.src = data.mediaUrl;
            audio.controls = true;
            audio.style.maxWidth = '300px';
            
            if (audioSettings.speakerId && audioSettings.speakerId !== 'default' && audio.setSinkId) {
                audio.setSinkId(audioSettings.speakerId).catch(err => {
                    console.warn('Could not set audio output device:', err);
                });
            }
            media.appendChild(audio);
        }
        content.appendChild(media);
    }

    messageDiv.appendChild(avatar);
    messageDiv.appendChild(content);
    container.appendChild(messageDiv);
    applyEnhancedEmoji(messageDiv);
    
    
    setTimeout(() => {
        messageDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
        refreshChatScrollbar();
    }, 10);

    if (chatSettings.disappearTime > 0) {
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.remove();
            }
        }, chatSettings.disappearTime * 1000);
    }
}

function addCurrentChatToList() {
    if (!currentChatContext || currentChatContext.type === 'none') {
        showToast('Open a chat first', 'warning');
        return;
    }

    const chatKey = `${currentChatContext.type}:${currentChatContext.id || currentChatContext.name}`;
    if (!chatKey.includes(':') || chatKey.endsWith(':')) {
        showToast('Open a valid chat first', 'warning');
        return;
    }

    if (pinnedChats.includes(chatKey)) {
        showToast('Chat already in your list', 'warning');
        return;
    }

    pinnedChats.push(chatKey);
    localStorage.setItem('pinnedChats', JSON.stringify(pinnedChats));
    updatePinButtonState();
    loadFriendsForDM();
    showToast('Chat added to list');
}

function updateMembersList(users) {
    const membersList = document.getElementById('membersList');
    membersList.innerHTML = '';

    getVisibleMembers(users).forEach(user => {
        const item = document.createElement('div');
        item.className = 'member-item';
        item.style.cursor = 'pointer';
        item.title = `Click to view ${user.username}'s profile`;

       
        const avatar = document.createElement('div');
        avatar.className = 'member-avatar';
        if (user.avatar) {
            avatar.style.backgroundImage = `url(${user.avatar})`;
            avatar.style.backgroundSize = 'cover';
            avatar.style.backgroundPosition = 'center';
        } else {
            avatar.textContent = user.username ? user.username.charAt(0).toUpperCase() : 'U';
        }

        const status = document.createElement('div');
        status.className = 'status-indicator';

        const name = document.createElement('span');
        name.textContent = user.username || 'Unknown';

        
        const userId = user.id || user._id || user.userId;
        const username = user.username || 'User';
        item.dataset.userId = String(userId || '');
        item.dataset.username = username;

        
        item.onclick = () => {
            if (String(userId) === FIRETECH_BOT_USER.userId) {
                openDM(FIRETECH_BOT_USER.userId, FIRETECH_BOT_USER.username);
                return;
            }
            if (!userId) {
                showToast('❌ User ID not available', 'error');
                return;
            }
            if (userId === currentUser.id || userId === currentUser._id) {
                openProfile();
            } else {
                visitUserProfile(userId, username);
            }
        };

        item.appendChild(avatar);
        item.appendChild(status);
        item.appendChild(name);
        membersList.appendChild(item);
    });

    
    const mobileMembersList = document.getElementById('mobileMembersList');
    if (mobileMembersList) {
        mobileMembersList.innerHTML = membersList.innerHTML;
        mobileMembersList.onclick = (e) => {
            const memberItem = e.target.closest('.member-item');
            if (!memberItem) return;
            const mobileUserId = memberItem.dataset.userId;
            const mobileUsername = memberItem.dataset.username || 'User';
            if (!mobileUserId) {
                showToast('❌ User ID not available', 'error');
                return;
            }
            if (mobileUserId === String(currentUser.id) || mobileUserId === String(currentUser._id)) {
                openProfile();
            } else {
                visitUserProfile(mobileUserId, mobileUsername);
            }
        };
    }
}

function renderMembersSidebarFromRoom(members) {
    const membersList = document.getElementById('membersList');
    if (!membersList) return;

    membersList.innerHTML = '';
    const visibleMembers = Array.isArray(members) ? [...members] : [];
    if (!visibleMembers.some((member) => String(member?.id || member?.userId || '') === FIRETECH_BOT_USER.userId)) {
        visibleMembers.push(FIRETECH_BOT_USER);
    }

    visibleMembers.forEach((member) => {
        const memberId = String(member.id || member.userId || '');
        const isSelf = memberId && (memberId === String(currentUser?.id) || memberId === String(currentUser?._id));
        const normalizedMember = {
            ...member,
            id: memberId,
            username: isSelf ? (currentUser?.username || member.username || 'You') : (member.username || 'User'),
            avatar: isSelf ? (currentUser?.avatar || member.avatar || null) : (member.avatar || null)
        };

        const item = document.createElement('div');
        item.className = 'member-item';
        item.style.cursor = 'pointer';

        const avatar = document.createElement('div');
        avatar.className = 'member-avatar';
        if (normalizedMember.avatar) {
            avatar.style.backgroundImage = `url(${normalizedMember.avatar})`;
            avatar.style.backgroundSize = 'cover';
            avatar.style.backgroundPosition = 'center';
        } else {
            avatar.textContent = String(normalizedMember.username || 'U').charAt(0).toUpperCase();
        }

        const status = document.createElement('div');
        status.className = 'status-indicator';

        const nameWrap = document.createElement('div');
        nameWrap.style.display = 'flex';
        nameWrap.style.flexDirection = 'column';
        nameWrap.style.gap = '2px';

        const name = document.createElement('span');
        name.textContent = normalizedMember.username || 'Unknown';
        name.style.fontWeight = '600';

        const role = document.createElement('span');
        role.textContent = normalizedMember.role || 'Member';
        role.style.fontSize = '11px';
        role.style.color = 'var(--text-secondary)';

        nameWrap.appendChild(name);
        nameWrap.appendChild(role);

        const memberName = normalizedMember.username || 'User';
        item.dataset.userId = String(memberId || '');
        item.dataset.username = memberName;

        item.onclick = () => {
            if (!memberId) return;
            if (memberId === FIRETECH_BOT_USER.userId) {
                openDM(FIRETECH_BOT_USER.userId, FIRETECH_BOT_USER.username);
                return;
            }
            if (String(memberId) === String(currentUser?.id) || String(memberId) === String(currentUser?._id)) {
                openProfile();
            } else {
                visitUserProfile(memberId, memberName);
            }
        };

        item.appendChild(avatar);
        item.appendChild(status);
        item.appendChild(nameWrap);
        membersList.appendChild(item);
    });

    const mobileMembersList = document.getElementById('mobileMembersList');
    if (mobileMembersList) {
        mobileMembersList.innerHTML = membersList.innerHTML;
    }
}



async function handleFileUpload(event) {
    const files = Array.from(event.target.files || []);
    if (files.length === 0) {
        return;
    }

    const hasActiveChat = currentChatContext.type === 'dm' || currentChatContext.type === 'community' || currentChatContext.type === 'group';
    if (!hasActiveChat) {
        showToast('Open a DM, group, or community first, then select media', 'warning');
        event.target.value = '';
        return;
    }

    
    const inputArea = document.querySelector('.input-area');
    let spinnerEl = null;
    if (inputArea) {
        spinnerEl = document.createElement('div');
        spinnerEl.className = 'input-upload-spinner';
        spinnerEl.innerHTML = '<div class="input-upload-spinner-bar"></div>';
        inputArea.insertBefore(spinnerEl, inputArea.firstChild);
    }

    const targetId = currentChatContext.type === 'dm' ? ensureChatTarget() : null;
    let sentCount = 0;
    const maxRawFileBytes = 24 * 1024 * 1024;

    for (const file of files) {
        if (file.size > maxRawFileBytes) {
            showToast(`⚠️ ${file.name} is too large for in-chat upload. Keep each file under 24MB.`, 'warning');
            continue;
        }
        
        const payload = await new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const data = e.target.result;
                // Support images, videos, and also treat webm/ogg/mp4 as reel videos
                let mediaType = 'image';
                const fileName = (file.name || '').toLowerCase();
                const videoByExt = /\.(mp4|webm|mov|m4v|mkv|3gp|ogv|ogg)$/i.test(fileName);
                const imageByExt = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(fileName);
                if (String(file.type || '').startsWith('video') || videoByExt) mediaType = 'video';
                else if (String(file.type || '').startsWith('image') || imageByExt) mediaType = 'image';
                resolve({
                    content: file.name || (mediaType === 'image' ? 'Photo' : 'Video'),
                    mediaType,
                    mediaUrl: data
                });
            };
            reader.onerror = () => resolve(null);
            reader.readAsDataURL(file);
        });

        if (!payload) continue;

        if (currentChatContext.type === 'community' || currentChatContext.type === 'group') {
            sendRoomMessage(payload);
            sentCount += 1;
        } else if (targetId) {
            await sendStagedDm(targetId, payload);
            sentCount += 1;
        }
    }

   
    if (spinnerEl) spinnerEl.remove();

    if (sentCount > 0) {
        showToast(`✅ Sent ${sentCount} media file(s)`, 'success');
    }

    event.target.value = '';
}

async function uploadProfileImage(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async (e) => {
        const avatar = e.target.result;
        try {
            const response = await fetch(`${API_BASE}/profile/upload`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${currentToken}`
                },
                body: JSON.stringify({ avatar })
            });

            const data = await response.json();
            if (response.ok) {
                currentUser.avatar = data.avatar;
                loadUserProfile();
                showToast('Profile image updated!');
            } else {
                showToast(data.error, 'error');
            }
        } catch (error) {
            console.error(error);
            showToast('Error uploading profile image', 'error');
        }
    };
    reader.readAsDataURL(file);

    
    event.target.value = '';
}



async function loadFriendsForDM() {
    try {
        const response = await fetch(`${API_BASE}/friends`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        const friends = await response.json();
        const dict = getUiDictionary(currentLanguage);

        const channelsList = document.getElementById('channelsList');
        channelsList.innerHTML = '';
        joinedCommunities = Array.from(new Set(joinedCommunities)).sort((a, b) => String(a).localeCompare(String(b)));
        joinedGroups = Array.from(new Set(joinedGroups)).sort((a, b) => String(a).localeCompare(String(b)));

       
        const pinnedFriends = [];
        const unpinnedFriends = [];
        
        friends.forEach(friend => {
            const chatId = `dm:${friend.id}`;
            if (pinnedChats.includes(chatId)) {
                pinnedFriends.push(friend);
            } else {
                unpinnedFriends.push(friend);
            }
        });

       
        if (pinnedFriends.length > 0) {
            const pinnedTitle = document.createElement('div');
            pinnedTitle.className = 'channel-section-title';
            pinnedTitle.textContent = `📌 ${translateRawText('Pinned', dict)}`;
            channelsList.appendChild(pinnedTitle);

            pinnedFriends.forEach(friend => {
                createFriendChannelItem(friend, channelsList, true);
            });
        }

        if (joinedCommunities.length > 0) {
            const communitiesTitle = document.createElement('div');
            communitiesTitle.className = 'channel-section-title';
            communitiesTitle.textContent = translateRawText('Communities', dict);
            channelsList.appendChild(communitiesTitle);

            joinedCommunities.forEach(community => {
                const profile = getCommunityProfile(community);
                const communityAvatar = profile.image
                    ? `<div class="channel-avatar" style="background-image:url('${profile.image}'); background-size:cover; background-position:center;"></div>`
                    : `<div class="channel-avatar">${profile.icon || '🌐'}</div>`;
                const item = document.createElement('div');
                const chatId = `community:${community}`;
                item.className = 'channel-item';
                if (pinnedChats.includes(chatId)) {
                    item.classList.add('pinned');
                }
                item.innerHTML = `
                    ${communityAvatar}
                    <span class="channel-label">${community}</span>
                    ${pinnedChats.includes(chatId) ? '<span class="pin-indicator"><i class="fas fa-thumbtack"></i></span>' : ''}
                `;
                item.style.cursor = 'pointer';
                item.onclick = () => openCommunityChat(community);
                channelsList.appendChild(item);
            });
        }

        
        if (joinedGroups.length > 0) {
            const groupsTitle = document.createElement('div');
            groupsTitle.className = 'channel-section-title';
            groupsTitle.textContent = translateRawText('Groups', dict);
            channelsList.appendChild(groupsTitle);

            joinedGroups.forEach(group => {
                const profile = getGroupProfile(group);
                const groupAvatar = profile.image
                    ? `<div class="channel-avatar" style="background-image:url('${profile.image}'); background-size:cover; background-position:center;"></div>`
                    : `<div class="channel-avatar">${profile.icon || '👥'}</div>`;
                const item = document.createElement('div');
                const chatId = `group:${group}`;
                item.className = 'channel-item';
                if (pinnedChats.includes(chatId)) {
                    item.classList.add('pinned');
                }
                item.innerHTML = `
                    ${groupAvatar}
                    <span class="channel-label">${group}</span>
                    ${pinnedChats.includes(chatId) ? '<span class="pin-indicator"><i class="fas fa-thumbtack"></i></span>' : ''}
                `;
                item.style.cursor = 'pointer';
                item.onclick = () => openGroupChat(group);
                channelsList.appendChild(item);
            });
        }

        const directTitle = document.createElement('div');
        directTitle.className = 'channel-section-title';
        directTitle.textContent = translateRawText('Direct Messages', dict);
        channelsList.appendChild(directTitle);
        
        
        const selfItem = document.createElement('div');
        selfItem.className = 'channel-item';
        
        const selfAvatar = document.createElement('div');
        selfAvatar.className = 'channel-avatar';
        if (currentUser.avatar) {
            selfAvatar.style.backgroundImage = `url(${currentUser.avatar})`;
            selfAvatar.style.backgroundSize = 'cover';
            selfAvatar.style.backgroundPosition = 'center';
        } else {
            selfAvatar.textContent = currentUser.username.charAt(0).toUpperCase();
        }
        
        const selfText = document.createElement('span');
        selfText.className = 'channel-label';
        selfText.textContent = `${currentUser.username} (${translateRawText('You', dict)})`;
        
        selfItem.appendChild(selfAvatar);
        selfItem.appendChild(selfText);
        selfItem.onclick = () => openDM(currentUser.id, `${currentUser.username} (Notes)`);
        channelsList.appendChild(selfItem);
        
        if (unpinnedFriends.length === 0 && pinnedFriends.length === 0) {
            const empty = document.createElement('div');
            empty.style.padding = '10px';
            empty.style.color = 'var(--text-secondary)';
            empty.style.fontSize = '12px';
            empty.textContent = translateRawText('No friends yet', dict);
            channelsList.appendChild(empty);
        } else {
            unpinnedFriends.forEach(friend => {
                createFriendChannelItem(friend, channelsList, false);
            });
        }
    } catch (error) {
        console.error('Failed to load friends for DM:', error);
    }
}

function createFriendChannelItem(friend, container, isPinned) {
    const item = document.createElement('div');
    item.className = 'channel-item';
    item.dataset.friendId = friend.id;
    
    if (isPinned) {
        item.classList.add('pinned');
    }
    
    
    const avatar = document.createElement('div');
    avatar.className = 'channel-avatar';
    if (friend.avatar) {
        avatar.style.backgroundImage = `url(${friend.avatar})`;
        avatar.style.backgroundSize = 'cover';
        avatar.style.backgroundPosition = 'center';
    } else {
        avatar.textContent = friend.username.charAt(0).toUpperCase();
    }
    
    
    const text = document.createElement('span');
    text.className = 'channel-label';
    const status = friend.status === 'online' ? '🟢' : '⚫';
    text.textContent = `${status} ${friend.username}`;
    
    item.appendChild(avatar);
    item.appendChild(text);
    
    if (isPinned) {
        const pinIndicator = document.createElement('span');
        pinIndicator.className = 'pin-indicator';
        pinIndicator.innerHTML = '<i class="fas fa-thumbtack"></i>';
        item.appendChild(pinIndicator);
    }
    
    item.style.cursor = 'pointer';
    item.onclick = () => openDM(friend.id, friend.username);
    
    
    item.oncontextmenu = (e) => {
        e.preventDefault();
        showFriendContextMenu(e, friend.id, friend.username);
    };
    
    container.appendChild(item);
}

async function loadFriends() {
    try {
        const [requests, friends] = await Promise.all([
            fetch(`${API_BASE}/friends/requests`, {
                headers: { 'Authorization': `Bearer ${currentToken}` }
            }).then(r => r.json()),
            fetch(`${API_BASE}/friends`, {
                headers: { 'Authorization': `Bearer ${currentToken}` }
            }).then(r => r.json())
        ]);

        const requestsDiv = document.getElementById('friendRequests');
        requestsDiv.innerHTML = '';
        const latestRequestsBySender = new Map();
        requests.forEach((req) => {
            const senderId = req?.from?.id ?? `request-${req?.id}`;
            const prev = latestRequestsBySender.get(senderId);
            if (!prev || Number(req.id) > Number(prev.id)) {
                latestRequestsBySender.set(senderId, req);
            }
        });

        const normalizedRequests = Array.from(latestRequestsBySender.values())
            .sort((a, b) => Number(b.id) - Number(a.id));

        if (normalizedRequests.length === 0) {
            const emptyMsg = document.createElement('p');
            emptyMsg.style.color = 'var(--text-secondary)';
            emptyMsg.textContent = translateRawText('No pending requests', dict);
            requestsDiv.appendChild(emptyMsg);
        }
        normalizedRequests.forEach((req) => {
            const item = document.createElement('div');
            item.className = 'friend-item';
            item.style.display = 'flex';
            item.style.justifyContent = 'space-between';
            item.style.alignItems = 'center';
            item.style.gap = '10px';
            item.style.padding = '12px';
            item.style.borderRadius = '10px';
            item.style.border = '1px solid var(--border-color)';
            item.style.background = 'rgba(255,255,255,0.02)';
            item.innerHTML = `
                <div style="flex: 1; cursor: pointer;" onclick="visitUserProfile('${req.from.id}', '${req.from.username}')">
                    <div class="friend-name">${req.from.username}</div>
                    <div class="friend-status">${translateRawText('Pending request', dict)}</div>
                </div>
                <div style="display:flex; gap:8px;">
                    <button onclick="acceptFriendRequest('${req.id}')" class="buy-btn">${translateRawText('Accept', dict)}</button>
                    <button onclick="rejectFriendRequest('${req.id}')" class="buy-btn" style="background: var(--danger);">${translateRawText('Decline', dict)}</button>
                </div>
            `;
            requestsDiv.appendChild(item);
        });

        const friendsList = document.getElementById('friendsList');
        friendsList.innerHTML = '';
        if (friends.length === 0) {
            const emptyMsg = document.createElement('p');
            emptyMsg.style.color = 'var(--text-secondary)';
            emptyMsg.textContent = translateRawText('No friends yet', dict);
            friendsList.appendChild(emptyMsg);
        }
        friends.forEach(friend => {
            const item = document.createElement('div');
            item.className = 'friend-item';
            item.style.cursor = 'pointer';
            const status = friend.status === 'online' 
                ? `🟢 ${translateRawText('Online', dict)}` 
                : `⚫ ${translateRawText('Offline', dict)}`;
            item.innerHTML = `
                <div onclick="openDM('${friend.id}', '${friend.username}')" style="flex: 1;">
                    <div class="friend-name">${friend.username}</div>
                    <div class="friend-status">${status}</div>
                </div>
                <div onclick="event.stopPropagation(); visitUserProfile('${friend.id}', '${friend.username}')" style="padding: 8px 12px; background: var(--primary-color); border: none; border-radius: 6px; cursor: pointer; color: white; font-size: 12px; font-weight: 600;">${translateRawText('Profile', dict)}</div>
            `;
            friendsList.appendChild(item);
        });
    } catch (error) {
        console.error('Failed to load friends:', error);
    }
}

async function acceptFriendRequest(requestId) {
    try {
        const response = await fetch(`${API_BASE}/friends/accept`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ requestId })
        });

        const data = await response.json();
        if (!response.ok) {
            showToast(data.error || 'Failed to accept friend request', 'error');
            return;
        }

        showToast('Friend request accepted!');
        loadFriends();
        loadFriendsForDM();
    } catch (error) {
        console.error(error);
        showToast('Could not accept friend request', 'error');
    }
}

async function sendFriendRequestFromLink(friendId) {
    try {
        const response = await fetch(`${API_BASE}/friends/request`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ toUserId: friendId })
        });

        if (response.ok) {
            showToast('Friend request sent successfully!');
        } else {
            const data = await response.json();
            showToast(data.error || 'Failed to send friend request', 'error');
        }
    } catch (error) {
        console.error('Error sending friend request:', error);
        showToast('Could not send friend request', 'error');
    }
}



async function loadShopItems() {
    try {
       
        const syncedCoins = await syncCurrentUserCoinsFromProfile();
        let userCoins = Number.isFinite(syncedCoins) ? syncedCoins : getCurrentCoinBalance();
        
        const response = await fetch(`${API_BASE}/shop`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        const payload = await response.json();
        if (!response.ok) {
            throw new Error(payload?.error || 'Failed to load shop items');
        }
        const items = Array.isArray(payload) ? payload : [];

        cachedShopItemsById = {};
        items.forEach((item) => {
            if (item?.id) cachedShopItemsById[item.id] = item;
            if (item?.itemId) cachedShopItemsById[item.itemId] = item;
        });

        const shopList = document.getElementById('shopList');
        shopList.innerHTML = '';
        const dict = getUiDictionary(currentLanguage);

        const hasKnownCoinBalance = Number.isFinite(userCoins);

        const shopHeader = document.createElement('div');
        shopHeader.className = 'shop-hero';
        shopHeader.innerHTML = `
            <div class="shop-hero-title">${translateRawText('Premium Shop', dict)}</div>
            <div class="shop-hero-subtitle">${translateRawText('Instant equip items, profile cosmetics, and seasonal packs', dict)}</div>
            <div class="shop-hero-discount">${translateRawText('Live Deals: up to 20% off featured items', dict)}</div>
            <div style="margin-top: 12px; font-size: 14px; color: var(--text-secondary);">${translateRawText('You have', dict)}: <span style="color: var(--primary-color); font-weight: 700;">${hasKnownCoinBalance ? userCoins : '...'} 💰</span></div>
        `;
        shopList.appendChild(shopHeader);

        if (items.length === 0) {
            const empty = document.createElement('p');
            empty.style.color = 'var(--text-secondary)';
            empty.textContent = translateRawText('No shop items available', dict);
            shopList.appendChild(empty);
        } else {
            items.forEach(item => {
                const itemDiv = document.createElement('div');
                const parsedItemPrice = parseFlexibleNumber(item.price);
                const itemPrice = Number.isFinite(parsedItemPrice) ? parsedItemPrice : 0;
                const canAfford = Number.isFinite(userCoins) ? userCoins >= itemPrice : false;
                const actionLabel = canAfford ? translateRawText('Buy Now', dict) : translateRawText('Need Coins', dict);
                itemDiv.className = 'shop-item';
                itemDiv.innerHTML = `
                    <div style="display:flex; flex-direction:column; gap:4px;">
                        <div style="display:flex; align-items:center; gap:8px;">
                            <div class="shop-item-name">${item.name}</div>
                            <span style="font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(88,101,242,0.15); color: var(--primary-color); border: 1px solid rgba(88,101,242,0.4);">${item.category || 'Premium'}</span>
                        </div>
                        <div style="font-size: 12px; color: var(--text-secondary);">${item.description}</div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span class="shop-item-price">${item.price} 💰</span>
                        <button onclick="buyItem('${item.id || item.itemId}')" class="buy-btn">${actionLabel}</button>
                    </div>
                `;

                if (hasKnownCoinBalance && !canAfford) {
                    itemDiv.style.opacity = '0.86';
                    itemDiv.title = `${translateRawText('Need', dict)} ${itemPrice} • ${translateRawText('You have', dict)} ${userCoins}`;
                }

                shopList.appendChild(itemDiv);
            });
        }

        localizeStaticUi(currentLanguage);
    } catch (error) {
        console.error('Failed to load shop:', error);
        showToast(error.message || 'Failed to load shop', 'error');
    }
}

async function buyItem(itemId) {
    try {
        await syncCurrentUserCoinsFromProfile();

        const response = await fetch(`${API_BASE}/shop/buy`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ itemId })
        });

        const data = await response.json();
        if (response.ok) {
            if (typeof data?.coins === 'number') {
                currentUser.coins = data.coins;
                localStorage.setItem('user', JSON.stringify(currentUser));
                
                
                updateAllCoinDisplays(data.coins);
            }

            const purchasedItem = data?.purchasedItem || cachedShopItemsById[itemId];
            if (purchasedItem?.category) {
                applyShopItem(purchasedItem.id || itemId, purchasedItem.category);
            }

            showToast('Item purchased and applied!', 'success');
            loadShopItems();
            loadInventory();
            renderSavedItemsSummary();
        } else {
            await syncCurrentUserCoinsFromProfile();
            loadShopItems();
            loadInventory();
            showToast(data?.error || 'Purchase failed', 'error');
        }
    } catch (error) {
        console.error(error);
        await syncCurrentUserCoinsFromProfile();
        loadShopItems();
        showToast('Error purchasing item', 'error');
    }
}



async function loadInventory() {
    try {
        const response = await fetch(`${API_BASE}/inventory`, {
            headers: { 'Authorization': `Bearer ${currentToken}` }
        });
        const inventory = await response.json();

        const inventoryList = document.getElementById('inventoryList');
        inventoryList.innerHTML = '';

        if (inventory.length === 0) {
            inventoryList.innerHTML = '<p style="text-align: center; color: var(--text-secondary);">No items yet</p>';
            return;
        }

        inventory.forEach(item => {
            const shopItem = item.ShopItem || item.itemId;
            if (!shopItem) return;
            const shopItemId = shopItem.id || shopItem.itemId;
            const category = shopItem.category;
            const isEquipped = Boolean(category && equippedShopItems?.[category] && String(equippedShopItems[category]) === String(shopItemId));
            const itemDiv = document.createElement('div');
            itemDiv.className = 'shop-item';
            itemDiv.style.cursor = 'pointer';
            
            
            const toggleButton = document.createElement('button');
            toggleButton.className = 'buy-btn';
            if (isEquipped) {
                toggleButton.textContent = 'Disable';
                toggleButton.style.background = 'var(--danger)';
                toggleButton.onclick = () => toggleShopItem(shopItemId, category, false);
            } else {
                toggleButton.textContent = 'Enable';
                toggleButton.style.background = 'var(--success)';
                toggleButton.onclick = () => toggleShopItem(shopItemId, category, true);
            }
            
            itemDiv.innerHTML = `
                <div style="flex: 1;">
                    <div class="shop-item-name">${shopItem.name}</div>
                    <div style="font-size: 12px; color: var(--text-secondary);">${shopItem.description}</div>
                    <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">Qty: ${item.quantity}</div>
                    <div style="font-size: 11px; color: ${isEquipped ? 'var(--success)' : 'var(--text-secondary)'}; margin-top: 4px;">${isEquipped ? '✅ Enabled' : '⭕ Disabled'}</div>
                </div>
            `;
            
            const buttonContainer = document.createElement('div');
            buttonContainer.style.display = 'flex';
            buttonContainer.style.gap = '6px';
            buttonContainer.appendChild(toggleButton);
            itemDiv.appendChild(buttonContainer);
            
            inventoryList.appendChild(itemDiv);
        });

        renderSavedItemsSummary();
    } catch (error) {
        console.error('Failed to load inventory:', error);
    }
}

function toggleShopItem(itemId, category, enable) {
    if (enable) {
        
        applyShopItem(itemId, category);
        showToast('Item enabled!', 'success');
    } else {
       
        if (category) {
            clearShopItemEffect(category);
            delete equippedShopItems[category];
            saveEquippedShopItems();
            loadInventory();
            showToast('Item disabled!', 'success');
        }
    }
}

function saveEquippedShopItems() {
    localStorage.setItem('equippedShopItems', JSON.stringify(equippedShopItems));
}

function ensureThemeColorBackup() {
    if (baseThemePrimaryColor && baseThemePrimaryHover) return;
    const styles = getComputedStyle(document.documentElement);
    baseThemePrimaryColor = baseThemePrimaryColor || styles.getPropertyValue('--primary-color').trim() || '#5865f2';
    baseThemePrimaryHover = baseThemePrimaryHover || styles.getPropertyValue('--primary-hover').trim() || '#4752c4';
    localStorage.setItem('baseThemePrimaryColor', baseThemePrimaryColor);
    localStorage.setItem('baseThemePrimaryHover', baseThemePrimaryHover);
}

function clearShopItemEffect(category) {
    if (!category) return;

    if (category === 'Banners' || category === 'Themes') {
        ensureThemeColorBackup();
        document.documentElement.style.setProperty('--primary-color', baseThemePrimaryColor || '#5865f2');
        document.documentElement.style.setProperty('--primary-hover', baseThemePrimaryHover || '#4752c4');
    }

    if (category === 'Effects') {
        document.getElementById('message-glow-effect')?.remove();
    }

    if (category === 'Avatar') {
        document.getElementById('avatar-aura-effect')?.remove();
    }

    if (category === 'Nameplates') {
        document.getElementById('nameplate-effect')?.remove();
    }
}

function unequipShopCategory(category) {
    if (!category || !equippedShopItems?.[category]) {
        showToast('Nothing equipped in this category', 'warning');
        return;
    }

    clearShopItemEffect(category);
    delete equippedShopItems[category];
    saveEquippedShopItems();
    loadInventory();
    showToast('Item unequipped', 'success');
}

function applyPersistedShopEffects() {
    if (!equippedShopItems || typeof equippedShopItems !== 'object') return;

    Object.entries(equippedShopItems).forEach(([category, itemId]) => {
        applyShopItem(itemId, category, { skipPersist: true, silent: true });
    });
}

async function flushQueuedIceCandidates() {
    if (!peerConnection || !remoteIceCandidatesQueue.length) return;

    const queued = [...remoteIceCandidatesQueue];
    remoteIceCandidatesQueue = [];
    for (const candidate of queued) {
        try {
            await peerConnection.addIceCandidate(candidate);
        } catch (error) {
            console.warn('Failed to apply queued ICE candidate:', error);
        }
    }
}

async function addOrQueueIceCandidate(candidateData) {
    if (!candidateData) return;

    
    if (!peerConnection) {
        pendingRemoteIceCandidates.push(candidateData);
        return;
    }

    const candidate = new RTCIceCandidate(candidateData);
    const hasRemoteDescription = Boolean(peerConnection.remoteDescription && peerConnection.remoteDescription.type);

    if (hasRemoteDescription) {
        try {
            await peerConnection.addIceCandidate(candidate);
        } catch (iceErr) {
            
            console.warn('ICE candidate ignored:', iceErr.message);
        }
    } else {
        remoteIceCandidatesQueue.push(candidate);
    }
}

function applyShopItem(itemId, category, options = {}) {
    const { skipPersist = false, silent = false } = options;
    const notify = (message, type = 'success') => {
        if (!silent) showToast(message, type);
    };

    const effectsMap = {
        'Banners': () => {
            ensureThemeColorBackup();
            document.documentElement.style.setProperty('--primary-color', '#00d4ff');
            document.documentElement.style.setProperty('--primary-hover', '#00b8e6');
            notify('✨ Banner effect applied! Your profile now has a neon glow.', 'success');
        },
        'Badges': () => {
            notify('🏆 Badge equipped! It now appears next to your name.', 'success');
            
        },
        'Themes': () => {
            ensureThemeColorBackup();
            const colors = ['#ff6b9d', '#c44569', '#4a69bd', '#6a89cc', '#60a3bc', '#78e08f', '#f6b93b', '#e55039'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.documentElement.style.setProperty('--primary-color', randomColor);
            document.documentElement.style.setProperty('--primary-hover', randomColor + 'dd');
            notify('🎨 Theme applied! Your accent color has changed.', 'success');
        },
        'Effects': () => {
            
            const style = document.createElement('style');
            style.id = 'message-glow-effect';
            style.textContent = `
                .message[data-sender="${currentUser.id}"] .message-content {
                    animation: messageGlow 2s ease-in-out infinite;
                }
                @keyframes messageGlow {
                    0%, 100% { box-shadow: 0 0 5px rgba(88, 101, 242, 0.3); }
                    50% { box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); }
                }
            `;
            const existing = document.getElementById('message-glow-effect');
            if (existing) existing.remove();
            document.head.appendChild(style);
            notify('✨ Message glow effect activated!', 'success');
        },
        'Avatar': () => {
            const style = document.createElement('style');
            style.id = 'avatar-aura-effect';
            style.textContent = `
                .message-avatar {
                    position: relative;
                    animation: avatarPulse 3s ease-in-out infinite;
                }
                @keyframes avatarPulse {
                    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.4); }
                    50% { box-shadow: 0 0 0 8px rgba(88, 101, 242, 0); }
                }
            `;
            const existing = document.getElementById('avatar-aura-effect');
            if (existing) existing.remove();
            document.head.appendChild(style);
            notify('🌟 Avatar aura effect activated!', 'success');
        },
        'Nameplates': () => {
            const style = document.createElement('style');
            style.id = 'nameplate-effect';
            style.textContent = `
                .message-username {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    font-weight: 700;
                }
            `;
            const existing = document.getElementById('nameplate-effect');
            if (existing) existing.remove();
            document.head.appendChild(style);
            notify('💎 Crystal nameplate effect activated!', 'success');
        },
        'Emotes': () => {
            notify('😎 Special emotes unlocked! Use them in your messages.', 'success');
        }
    };

    const applyEffect = effectsMap[category];
    if (applyEffect) {
        clearShopItemEffect(category);
        applyEffect();
        if (!skipPersist && category) {
            equippedShopItems[category] = itemId;
            saveEquippedShopItems();
            loadInventory();
        }
    } else {
        notify('Effect applied!', 'success');
    }
}



function showToast(message, type = 'success') {
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;

    const dict = getUiDictionary(currentLanguage);
    const sourceMessage = String(message || '');
    let displayMessage = translateRawText(sourceMessage, dict);
    
    const icon = type === 'success' ? '✓' : type === 'error' ? '✕' : '⚠';
    const rawTitle = type === 'success' ? 'Success' : type === 'error' ? 'Error' : 'Warning';
    const title = translateRawText(rawTitle, dict);
    
    toast.innerHTML = `
        <div class="toast-icon">${icon}</div>
        <div class="toast-content">
            <div class="toast-title">${title}</div>
            <div class="toast-message">${displayMessage}</div>
        </div>
    `;
    
    container.appendChild(toast);

    if (currentLanguage !== 'en' && displayMessage === sourceMessage && shouldAutoTranslate(sourceMessage)) {
        fetchAutoTranslation(sourceMessage, currentLanguage).then((translated) => {
            if (!translated) return;
            const messageEl = toast.querySelector('.toast-message');
            if (messageEl) messageEl.textContent = translated;
        });
    }

    applyEnhancedEmoji(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}



function openSettings() {
    const panel = document.getElementById('settingsPanel');
    if (!panel) return;
    panel.classList.add('show');
    if (currentUser) {
        document.getElementById('settingsEmail').value = currentUser.email || '';
        document.getElementById('settingsUsername').value = '';
    }
    populateAccountSwitcher();
    applySettingsToUI();
    switchSettingsTab('account', document.querySelector('.settings-nav-item'));
    localizeStaticUi(currentLanguage);
}

function closeSettings() {
    const panel = document.getElementById('settingsPanel');
    if (!panel) return;
    panel.classList.remove('show');
    panel.removeAttribute('style');
}

function switchSettingsTab(tab, triggerEl) {
    
    document.querySelectorAll('.settings-nav-item').forEach(item => {
        item.classList.remove('active');
    });
    const navTrigger = triggerEl || (typeof event !== 'undefined' ? event.target : null);
    if (navTrigger) {
        navTrigger.classList.add('active');
    }
    
    
    document.querySelectorAll('.settings-section').forEach(section => {
        section.classList.remove('active');
    });
    const targetSection = document.getElementById(tab + 'Settings');
    if (targetSection) targetSection.classList.add('active');
    if (tab === 'language') {
        renderLangGrid();
        const lang = LANGUAGES.find((l) => l.code === currentLanguage) || LANGUAGES[0];
        const langDisplay = document.getElementById('currentLangDisplay');
        if (langDisplay) langDisplay.textContent = `${lang.flag} ${lang.name}`;
    }
}

function openLanguagePicker() {
    openSettings();
    const trigger = Array.from(document.querySelectorAll('.settings-nav-item')).find((item) => item.textContent.includes('Language'));
    switchSettingsTab('language', trigger || null);
}

async function updateUsername() {
    const newUsername = document.getElementById('settingsUsername').value.trim();
    if (!newUsername) {
        showToast('Please enter a new username', 'warning');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/profile`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ username: newUsername })
        });
        
        const data = await response.json();
        if (response.ok) {
            currentUser.username = newUsername;
            localStorage.setItem('user', JSON.stringify(currentUser));
            if (socket && socket.connected) {
                socket.emit('update profile cache', {
                    username: newUsername,
                    avatar: currentUser.avatar || null
                });
            }
            showToast('Username updated successfully!');
            loadUserProfile();
            document.getElementById('settingsUsername').value = '';
        } else {
            showToast(data.error || 'Failed to update username', 'error');
        }
    } catch (error) {
        console.error(error);
        showToast('Error updating username', 'error');
    }
}



function changeTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
    showToast(`Switched to ${theme} theme`, 'success');
}

function loadTheme() {
    const savedTheme = localStorage.getItem('theme') || 'dark';
    document.documentElement.setAttribute('data-theme', savedTheme);
    const themeSelector = document.getElementById('themeSelector');
    if (themeSelector) {
        themeSelector.value = savedTheme;
    }
}



function closeCurrentChat() {
    if (activeRoomSubscription && socket && socket.connected) {
        socket.emit('leave room chat', activeRoomSubscription);
    }
    activeRoomSubscription = null;
    currentChatFriendId = null;
    currentChatFriendName = null;
    currentChatContext = { type: 'none', id: null, name: null };
    clearPendingMediaDraft();
    const chatTitleEl = document.getElementById('chatTitle');
    chatTitleEl.textContent = '💬 Select a friend to chat';
    chatTitleEl.onclick = null;
    document.getElementById('messages-container').innerHTML = '';
    document.getElementById('closeChatBtn').style.display = 'none';
    refreshChatScrollbar();
    showToast('Chat closed');
}

async function clearAndCloseCurrentChat() {
    if (!currentChatContext || currentChatContext.type === 'none') {
        showToast('No active chat to clear', 'warning');
        return;
    }

    const cleared = await clearCurrentChatHistory();
    if (cleared) {
        closeCurrentChat();
    }
}

function getCurrentRoomKey() {
    if (currentChatContext.type === 'community') return normalizeRoomKeyClient('community', currentChatContext.name);
    if (currentChatContext.type === 'group') return normalizeRoomKeyClient('group', currentChatContext.name);
    return null;
}

function saveRoomMessages() {
    const buildCompactCache = (maxPerRoom, keepMedia = true) => {
        const compact = {};
        for (const [roomKey, msgs] of Object.entries(roomMessages || {})) {
            const latest = Array.isArray(msgs) ? msgs.slice(-maxPerRoom) : [];
            compact[roomKey] = latest.map((m) => {
                const copy = {
                    messageId: m?.messageId || m?.id || null,
                    from: m?.from || null,
                    fromUsername: m?.fromUsername || 'User',
                    fromAvatar: m?.fromAvatar || null,
                    content: m?.content || '',
                    mediaType: m?.mediaType || 'text',
                    roomType: m?.roomType,
                    roomName: m?.roomName,
                    timestamp: m?.timestamp || new Date().toISOString()
                };

                const mediaUrl = typeof m?.mediaUrl === 'string' ? m.mediaUrl : '';
                if (keepMedia && mediaUrl && mediaUrl.length <= ROOM_CACHE_MEDIA_URL_MAX_CHARS) {
                    copy.mediaUrl = mediaUrl;
                } else if (copy.mediaType !== 'text') {
                    copy.mediaUrl = null;
                    if (!copy.content) copy.content = `${copy.mediaType} message`;
                }

                return copy;
            });
        }
        return compact;
    };

    const attempts = [
        () => buildCompactCache(ROOM_CACHE_MAX_PER_ROOM, true),
        () => buildCompactCache(24, false),
        () => buildCompactCache(12, false),
        () => buildCompactCache(6, false)
    ];

    for (const build of attempts) {
        try {
            localStorage.setItem('roomMessages', JSON.stringify(build()));
            return;
        } catch (error) {
            if (error?.name !== 'QuotaExceededError') {
                console.warn('Failed saving room messages cache:', error);
                return;
            }
        }
    }

    try {
        localStorage.removeItem('roomMessages');
    } catch (_) {}
}

function addRoomMessage(roomKey, message) {
    if (!roomMessages[roomKey]) roomMessages[roomKey] = [];
    roomMessages[roomKey].push(message);
    saveRoomMessages();
}

function renderRoomMessages(roomKey, roomName, roomType) {
    const container = document.getElementById('messages-container');
    container.innerHTML = '';
    const messages = roomMessages[roomKey] || [];
    if (messages.length === 0) {
        const welcome = document.createElement('div');
        welcome.className = 'message';
        welcome.innerHTML = `
            <div class="message-avatar">${roomType === 'community' ? '🌐' : '👥'}</div>
            <div class="message-content">
                <div class="message-header">
                    <span class="message-username">${roomName}</span>
                    <span class="message-time">Now</span>
                </div>
                <div class="message-text">Welcome to ${roomName}. Messages sent here stay in this ${roomType}.</div>
            </div>
        `;
        container.appendChild(welcome);
        refreshChatScrollbar();
        return;
    }

    messages.forEach(msg => addMessageToChat(msg));
    refreshChatScrollbar();
}

async function sendStagedDm(targetId, payload) {
    if (!socket || !socket.connected) {
        showToast('Connection lost. Reconnecting...', 'warning');
        connectSocket();
        throw new Error('Socket not connected');
    }

    const optimistic = {
        id: Date.now(),
        from: currentUser.id,
        fromUsername: currentUser.username,
        fromAvatar: currentUser.avatar,
        to: targetId,
        content: payload.content,
        mediaType: payload.mediaType,
        mediaUrl: payload.mediaUrl || null,
        timestamp: new Date().toISOString()
    };
    if (currentChatContext.type === 'dm' && String(currentChatContext.id) === String(targetId)) {
        addMessageToChat(optimistic);
    }

    socket.emit('send dm', {
        toUserId: targetId,
        content: payload.content,
        mediaType: payload.mediaType,
        mediaUrl: payload.mediaUrl || null
    });
}

function sendRoomMessage(payload) {
    const roomKey = getCurrentRoomKey();
    if (!roomKey) {
        showToast('Open a community/group chat first', 'warning');
        return;
    }

    if (!socket || !socket.connected) {
        showToast('Connection lost. Reconnecting...', 'warning');
        connectSocket();
        return;
    }

    socket.emit('send room message', {
        roomType: currentChatContext.type,
        roomName: currentChatContext.name,
        content: payload.content,
        mediaType: payload.mediaType,
        mediaUrl: payload.mediaUrl || null
    });
}

function ensureChatTarget() {
    if (currentChatContext.type === 'community' || currentChatContext.type === 'group') {
        return null;
    }

    if (currentChatFriendId) {
        return currentChatFriendId;
    }

    if (currentUser && currentUser.id) {
        openDM(currentUser.id, `${currentUser.username} (Notes)`);
        return currentUser.id;
    }

    return null;
}



function requestNotificationPermission() {
    if ('Notification' in window && Notification.permission === 'default') {
        Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
                showToast('Desktop notifications enabled!');
                document.getElementById('desktopNotifications').checked = true;
            }
        });
    }
}

function showDesktopNotification(title, message, isSender = false) {
    const desktopNotifEnabled = document.getElementById('desktopNotifications')?.checked;
    if (!desktopNotifEnabled || isSender) return;
    
    if ('Notification' in window && Notification.permission === 'granted') {
        new Notification(title, {
            body: message,
            icon: '/favicon.ico',
            badge: '/favicon.ico'
        });
    }
}

// ==================== IN-APP NOTIFICATION FEED ====================
function pushNotification(title, body, action = null) {
    const notif = {
        id: Date.now(),
        title,
        body,
        action,
        time: new Date().toISOString(),
        read: false
    };
    notifList.unshift(notif);
    if (notifList.length > 100) notifList.length = 100;
    localStorage.setItem('notifList', JSON.stringify(notifList));
    notifUnreadCount++;
    updateNotifBadge();
}

function updateNotifBadge() {
    const badge = document.getElementById('notifBadge');
    if (!badge) return;
    if (notifUnreadCount > 0) {
        badge.textContent = notifUnreadCount > 99 ? '99+' : notifUnreadCount;
        badge.classList.add('visible');
    } else {
        badge.classList.remove('visible');
    }
}

function openNotifPanel() {
    const panel = document.getElementById('notifPanel');
    if (!panel) return;
    panel.classList.add('show');
    // Mark all as read
    notifList.forEach(n => n.read = true);
    localStorage.setItem('notifList', JSON.stringify(notifList));
    notifUnreadCount = 0;
    updateNotifBadge();
    renderNotifList();
}

function closeNotifPanel() {
    document.getElementById('notifPanel')?.classList.remove('show');
}

function clearAllNotifications() {
    notifList = [];
    localStorage.setItem('notifList', JSON.stringify(notifList));
    notifUnreadCount = 0;
    updateNotifBadge();
    renderNotifList();
}

function renderNotifList() {
    const el = document.getElementById('notifList');
    if (!el) return;
    if (notifList.length === 0) {
        el.innerHTML = '<div style="padding:30px; text-align:center; color:var(--text-secondary);">No notifications yet</div>';
        return;
    }
    el.innerHTML = notifList.map(n => {
        const timeStr = n.time ? new Date(n.time).toLocaleString() : '';
        const unreadClass = n.read ? '' : 'notif-unread';
        const actionAttr = n.action ? `onclick="handleNotifAction(${JSON.stringify(JSON.stringify(n.action))})"` : '';
        return `<div class="notif-item ${unreadClass}" ${actionAttr}>
            <div class="notif-item-title">${n.title}</div>
            <div class="notif-item-body">${n.body}</div>
            <div class="notif-item-time">${timeStr}</div>
        </div>`;
    }).join('');
}

function handleNotifAction(actionStr) {
    try {
        const action = JSON.parse(actionStr);
        closeNotifPanel();
        if (action.type === 'dm') {
            openDM(action.friendId, action.friendName);
        } else if (action.type === 'community' || action.type === 'group') {
            if (action.type === 'community') openCommunityChat(action.name);
            else openGroupChat(action.name);
        }
    } catch(e) {}
}

function playNotificationSound() {
    if (!chatSettings.messageSound) return;
    try {
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioCtx.createOscillator();
        const gainNode = audioCtx.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        oscillator.type = 'sine';
        oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
        gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
        oscillator.start();
        oscillator.stop(audioCtx.currentTime + 0.08);
    } catch (error) {
        console.error('Sound notification failed:', error);
    }
}

function saveNotificationSettings() {
    chatSettings.notificationMode = document.getElementById('notificationMode')?.value || 'all';
    chatSettings.notifyOnSent = document.getElementById('notifyOnSent')?.checked || false;
    chatSettings.notifyOnReceived = document.getElementById('notifyOnReceived')?.checked ?? true;
    chatSettings.desktopNotifications = document.getElementById('desktopNotifications')?.checked || false;
    chatSettings.messageSound = document.getElementById('messageSound')?.checked ?? true;
    localStorage.setItem('chatSettings', JSON.stringify(chatSettings));

    if (chatSettings.desktopNotifications) {
        requestNotificationPermission();
    }
}

function saveChatSettings() {
    chatSettings.disappearTime = Number(document.getElementById('disappearTime')?.value || 0);
    chatSettings.enterToSend = document.getElementById('enterToSend')?.checked ?? true;
    chatSettings.showTypingIndicator = document.getElementById('showTypingIndicator')?.checked ?? true;
    chatSettings.autoplayGifs = document.getElementById('autoplayGifs')?.checked ?? true;
    localStorage.setItem('chatSettings', JSON.stringify(chatSettings));
}

function saveAppearanceSettings() {
    chatSettings.compactMode = document.getElementById('compactMode')?.checked || false;
    chatSettings.fontSize = document.getElementById('fontSizeSelector')?.value || 'medium';
    localStorage.setItem('chatSettings', JSON.stringify(chatSettings));
}

function applySettingsToUI() {
    const savedSettings = JSON.parse(localStorage.getItem('chatSettings') || '{}');
    chatSettings = { ...chatSettings, ...savedSettings };

    const setChecked = (id, value) => {
        const el = document.getElementById(id);
        if (el) el.checked = !!value;
    };
    const setValue = (id, value) => {
        const el = document.getElementById(id);
        if (el) el.value = value;
    };

    setValue('disappearTime', String(chatSettings.disappearTime));
    setChecked('enterToSend', chatSettings.enterToSend);
    setChecked('showTypingIndicator', chatSettings.showTypingIndicator);
    setChecked('autoplayGifs', chatSettings.autoplayGifs);
    setChecked('desktopNotifications', chatSettings.desktopNotifications);
    setChecked('messageSound', chatSettings.messageSound);
    setChecked('notifyOnSent', chatSettings.notifyOnSent);
    setChecked('notifyOnReceived', chatSettings.notifyOnReceived);
    setChecked('compactMode', chatSettings.compactMode);
    setValue('fontSizeSelector', chatSettings.fontSize);
    setValue('notificationMode', chatSettings.notificationMode);
}

function openCommunitiesModal() {
    const modal = document.getElementById('communitiesModal');
    const list = document.getElementById('communitiesList');
    const dict = getUiDictionary(currentLanguage);
    
   
    const communities = [
        { name: 'Gaming', icon: '🕹️', description: 'Talk about your favorite games' },
        { name: 'Coding', icon: '🧠', description: 'Share code and learn together' },
        { name: 'Music', icon: '🎙️', description: 'Discuss and share music' },
        { name: 'Art', icon: '🖌️', description: 'Share your creative works' },
        { name: 'Sports', icon: '🏟️', description: 'Sports fans unite' },
        { name: 'Movies', icon: '🎞️', description: 'Film enthusiasts' }
    ];
    
    list.innerHTML = communities.map(c => {
        const isJoined = joinedCommunities.includes(c.name);
        const profile = getCommunityProfile(c.name);
        const safeCommunityName = String(c.name).replace(/'/g, "\\'");
        const avatarHtml = profile.image
            ? `<div class="group-avatar" style="background-image:url('${profile.image}'); background-size:cover; background-position:center; border-radius:14px; width:48px; height:48px; flex-shrink:0;"></div>`
            : `<div class="group-avatar"><span class="emoji-glyph">${profile.icon || c.icon}</span></div>`;
        return `
            <div class="group-card community-card">
                ${avatarHtml}
                <div class="group-info">
                    <div class="group-name">${c.name}</div>
                    <div class="group-desc">${c.description}</div>
                </div>
                <div style="display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:96px;">
                    ${isJoined ? `<button class="buy-btn" onclick="openCommunityDetails('${safeCommunityName}')" style="background: var(--secondary-color);">${translateRawText('Manage', dict)}</button>` : ''}
                        <button class="buy-btn" 
                            onclick="${isJoined ? `openCommunityChat('${safeCommunityName}'); closeCommunitiesModal();` : `joinCommunity('${safeCommunityName}')`}" 
                            style="${isJoined ? 'background: var(--success);' : ''}">
                            ${translateRawText(isJoined ? 'Open' : 'Join', dict)}
                        </button>
                </div>
            </div>
        `;
    }).join('');
    
    modal.classList.remove('hidden');
    localizeStaticUi(currentLanguage);
}

function closeCommunitiesModal() {
    document.getElementById('communitiesModal').classList.add('hidden');
}

function filterCommunitiesList(query) {
    const items = document.querySelectorAll('#communitiesList .community-card');
    const q = String(query || '').toLowerCase();
    items.forEach((card) => {
        const name = card.querySelector('.group-name')?.textContent?.toLowerCase() || '';
        card.style.display = name.includes(q) ? '' : 'none';
    });
}

function openGroupsModal() {
    const modal = document.getElementById('groupsModal');
    const list = document.getElementById('groupsList');
    const dict = getUiDictionary(currentLanguage);
    
    const baseGroups = [
        { name: 'Study Group', emoji: '🧠', description: 'Study together and share notes' },
        { name: 'Project Team', emoji: '🧰', description: 'Collaborate on projects' },
        { name: 'Family', emoji: '🫶', description: 'Family group chat' },
        { name: 'Friends', emoji: '🎈', description: 'Hang out with friends' },
        { name: 'Work', emoji: '🏙️', description: 'Work related discussions' },
        { name: 'Gaming', emoji: '🕹️', description: 'Gaming sessions and talk' },
        { name: 'Music', emoji: '🎙️', description: 'Share music and playlists' }
    ];
    const groups = Array.from(new Set([...baseGroups.map((g) => g.name), ...joinedGroups])).map((groupName) => {
        const preset = baseGroups.find((g) => g.name === groupName) || { name: groupName, emoji: '👥', description: 'Custom group chat' };
        const roles = groupMemberRoles[groupName] || {};
        const dynamicCount = Math.max(1, Object.keys(roles).length || (joinedGroups.includes(groupName) ? 1 : 0));
        return { ...preset, members: dynamicCount };
    });
    
    list.innerHTML = groups.map(g => {
        const isJoined = joinedGroups.includes(g.name);
        const profile = getGroupProfile(g.name);
        const safeGroupName = String(g.name).replace(/'/g, "\\'");
        const avatarHtml = profile.image
            ? `<div class="group-avatar" style="background-image:url('${profile.image}'); background-size:cover; background-position:center; border-radius:14px; width:48px; height:48px; flex-shrink:0;"></div>`
            : `<div class="group-avatar"><span class="emoji-glyph">${profile.icon || g.emoji}</span></div>`;
        return `
            <div class="group-card">
                ${avatarHtml}
                <div class="group-info">
                    <div class="group-name">${g.name}</div>
                    <div class="group-desc">${g.description}</div>
                    <div class="group-members-count">👥 ${g.members} members</div>
                </div>
                <div style="display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:96px;">
                    <button class="buy-btn" 
                        onclick="${isJoined ? `openGroupChat('${safeGroupName}'); closeGroupsModal();` : `joinGroup('${safeGroupName}')`}" 
                        style="${isJoined ? 'background: var(--success);' : ''}">
                        ${translateRawText(isJoined ? 'Open' : 'Join', dict)}
                    </button>
                    <button class="secondary-btn" style="padding:6px 10px; font-size:12px;" onclick="openGroupAppearanceEditor('${safeGroupName}')">${translateRawText('Edit', dict)}</button>
                    ${isJoined ? `<div style="display:flex; gap:6px;"><button class="secondary-btn" style="padding:5px 8px; font-size:11px;" onclick="openGroupAppearanceEditor('${safeGroupName}')">${translateRawText('Icon', dict)}</button><button class="secondary-btn" style="padding:5px 8px; font-size:11px;" onclick="changeGroupImagePrompt('${safeGroupName}')">${translateRawText('Photo', dict)}</button></div>` : ''}
                </div>
            </div>
        `;
    }).join('');
    
    modal.classList.remove('hidden');
    localizeStaticUi(currentLanguage);
}

function closeGroupsModal() {
    document.getElementById('groupsModal').classList.add('hidden');
}

function openGroupAppearanceEditor(name) {
    const profile = getGroupProfile(name);
    const safeName = String(name).replace(/'/g, "\\'");
    const canManage = canManageRoomAppearance('group', name);
    const iconList = ['🧠', '⚡', '🔐', '🌐', '📡', '🎯', '🚀', '💎', '🏆', '🎨', '🔧', '📊', '🎭', '💼', '📚', '🎬', '🎮', '🏃', '🌟', '🔥', '❤️', '🎉', '⭐', '🎪', '🎵', '🎸', '🎤', '🎲', '🧩', '🎓'];
    const iconsHtml = iconList.map((icon) => (
        `<button onclick="setGroupIcon('${safeName}', '${icon}')" ${canManage ? '' : 'disabled'} style="font-size: 28px; padding: 8px; border: 2px solid var(--border-color); border-radius: 8px; background: var(--bg-color); cursor: ${canManage ? 'pointer' : 'not-allowed'}; opacity: ${canManage ? '1' : '0.55'};">${icon}</button>`
    )).join('');

    const html = `
        <div style="display:grid; gap:10px; min-width:280px; max-width:min(92vw, 560px); max-height:70vh; overflow-y:auto; padding-right:4px;">
            <div style="font-size:13px; color:var(--text-secondary);">Customize group appearance for <strong>${name}</strong>. ${canManage ? 'You can manage this room.' : 'Only Owner or Admin can edit this room.'}</div>
            <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;">${iconsHtml}</div>
            <button class="secondary-btn" onclick="renameGroupPrompt('${safeName}'); closeCustomDialog();" ${canManage ? '' : 'disabled'}>✏ Rename Group</button>
            <button class="save-btn" onclick="changeGroupImagePrompt('${safeName}'); closeCustomDialog();" ${canManage ? '' : 'disabled'}>🖼 Upload Group Photo</button>
            <button class="secondary-btn" onclick="showGroupRoles('${safeName}'); closeCustomDialog();">👥 View Roles</button>
            <button class="secondary-btn" onclick="resetGroupAppearance('${safeName}')" ${canManage ? '' : 'disabled'}>♻ Reset to Default</button>
        </div>
    `;
    customAlert(html, `🎨 ${name} Appearance`, '🎨');
}

function renameGroupPrompt(name) {
    if (!canManageRoomAppearance('group', name)) {
        showToast('Only Owner or Admin can rename this group', 'warning');
        return;
    }
    customPrompt('Enter new group name', '✏ Rename Group', name, name, '✏').then((newName) => {
        const trimmed = String(newName || '').trim();
        if (!trimmed || trimmed === name) return;

        const idx = joinedGroups.indexOf(name);
        if (idx >= 0) {
            joinedGroups[idx] = trimmed;
            localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
        }

        if (groupProfiles[name]) {
            groupProfiles[trimmed] = { ...groupProfiles[name], name: trimmed };
            delete groupProfiles[name];
            localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
        }

        if (groupMemberRoles[name]) {
            groupMemberRoles[trimmed] = groupMemberRoles[name];
            delete groupMemberRoles[name];
            localStorage.setItem('groupMemberRoles', JSON.stringify(groupMemberRoles));
        }

        const oldKey = normalizeRoomKeyClient('group', name);
        const newKey = normalizeRoomKeyClient('group', trimmed);
        if (roomMessages[oldKey]) {
            roomMessages[newKey] = roomMessages[oldKey];
            delete roomMessages[oldKey];
            saveRoomMessages();
        }

        if (currentChatContext.type === 'group' && currentChatContext.name === name) {
            openGroupChat(trimmed);
        }

        emitRoomProfileUpdate('group', name, { name: trimmed });

        loadFriendsForDM();
        showToast('Group renamed successfully', 'success');
    });
}

function showGroupRoles(name) {
    const roleMap = groupMemberRoles[name] || {};
    const activeMembers = Array.isArray(currentRoomMembers) && currentChatContext?.type === 'group' && currentChatContext?.name === name
        ? currentRoomMembers
        : [];

    const membersById = new Map();
    activeMembers.forEach((m) => {
        const memberId = String(m?.id || m?.userId || '');
        if (!memberId) return;
        membersById.set(memberId, {
            id: memberId,
            username: m?.username || 'User',
            role: m?.role || roleMap[memberId] || 'Member'
        });
    });

    Object.entries(roleMap).forEach(([memberId, role]) => {
        if (membersById.has(memberId)) return;
        const onlineMatch = (globalOnlineUsers || []).find((u) => String(u?.id || u?.userId || u?._id || '') === String(memberId));
        membersById.set(memberId, {
            id: String(memberId),
            username: onlineMatch?.username || `User ${String(memberId).slice(0, 6)}`,
            role: role || 'Member'
        });
    });

    const members = Array.from(membersById.values());
    const myRole = roleMap[String(currentUser?.id || '')] || 'Member';
    const canManage = myRole === 'Owner' || myRole === 'Admin';

    const rows = members.map((m) => {
        const memberId = String(m.id || m.userId || '');
        const role = m.role || roleMap[memberId] || 'Member';
        const self = memberId === String(currentUser?.id || '');
        const controls = canManage && !self
            ? `
                <div style="display:flex; gap:6px;">
                    <button class="secondary-btn" style="padding:4px 8px; font-size:11px;" onclick="assignGroupRole('${String(name).replace(/'/g, "\\'")}', '${memberId}', 'Member')">Member</button>
                    <button class="secondary-btn" style="padding:4px 8px; font-size:11px;" onclick="assignGroupRole('${String(name).replace(/'/g, "\\'")}', '${memberId}', 'Admin')">Admin</button>
                    <button class="secondary-btn" style="padding:4px 8px; font-size:11px;" onclick="assignGroupRole('${String(name).replace(/'/g, "\\'")}', '${memberId}', 'Owner')">Owner</button>
                </div>
            `
            : `<div style="font-size:12px; color:var(--text-secondary);">${role}</div>`;
        return `
            <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--border-color); border-radius:8px;">
                <div style="display:flex; flex-direction:column; gap:2px;">
                    <div style="font-weight:600;">${m.username || 'User'}</div>
                    <div style="font-size:11px; color:var(--text-secondary);">${role}${self ? ' (You)' : ''}</div>
                </div>
                ${controls}
            </div>
        `;
    }).join('');

    customAlert(`
        <div style="display:grid; gap:8px; min-width:320px;">
            <div style="font-size:13px; color:var(--text-secondary);">Backend-synced roles for active group room. Your role: <strong>${myRole}</strong>.</div>
            ${rows || '<div style="color:var(--text-secondary);">Open the group chat first to load live members.</div>'}
        </div>
    `, `👥 ${name} Roles`, '👥');
}

function assignGroupRole(groupName, targetUserId, role) {
    if (!socket || !socket.connected) {
        showToast('Not connected to server', 'warning');
        return;
    }
    socket.emit('set room role', {
        roomType: 'group',
        roomName: groupName,
        targetUserId,
        role
    });
    showToast(`Requested role change to ${role}`, 'success');
}

function setGroupIcon(name, icon) {
    if (!canManageRoomAppearance('group', name)) {
        showToast('Only Owner or Admin can change group icon', 'warning');
        return;
    }
    const profile = getGroupProfile(name);
    profile.icon = icon;
    profile.image = '';
    groupProfiles[name] = profile;
    localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
    cacheRoomProfile('group', name, { icon, image: '' });
    closeCustomDialog();
    emitRoomProfileUpdate('group', name, { icon, image: '' });
    refreshRoomVisuals('group', name, { reopenDetails: true });
    showToast('Group icon updated!', 'success');
}

function resetGroupAppearance(name) {
    if (!canManageRoomAppearance('group', name)) {
        showToast('Only Owner or Admin can reset group appearance', 'warning');
        return;
    }
    const profile = getGroupProfile(name);
    profile.image = '';
    profile.icon = '👥';
    groupProfiles[name] = profile;
    localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
    cacheRoomProfile('group', name, { icon: '👥', image: '' });
    closeCustomDialog();
    emitRoomProfileUpdate('group', name, { icon: '👥', image: '' });
    refreshRoomVisuals('group', name, { reopenDetails: true });
    showToast('Group appearance reset', 'success');
}

function subscribeToRoomChat(roomType, roomName) {
    if (!socket || !socket.connected) return;

    if (activeRoomSubscription) {
        socket.emit('leave room chat', activeRoomSubscription);
    }

    activeRoomSubscription = { roomType, roomName };
    socket.emit('join room chat', { roomType, roomName });
}

function openCommunityChat(name) {
    if (name && typeof name === 'object') {
        name = name.name || name.id || String(name);
    }
    name = String(name || 'Community');
    console.log('🌐 Opening community chat:', name);
    const profile = getCommunityProfile(name);
    const dict = getUiDictionary(currentLanguage);
    const communityLabel = translateRawText('Community', dict);
    currentChatFriendId = null;
    currentChatFriendName = `${communityLabel}: ${name}`;
    currentChatContext = { type: 'community', id: name, name };
    clearPendingMediaDraft();
    updatePinButtonState();
    const chatTitleEl = document.getElementById('chatTitle');
    chatTitleEl.textContent = `${profile?.image ? '🖼️' : (profile.icon || '🌐')} ${communityLabel}: ${name}`;
    chatTitleEl.onclick = () => openCommunityDetails(name);
    renderRoomMessages(normalizeRoomKeyClient('community', name), name, 'community');
    currentRoomMembers = [{
        id: currentUser?.id,
        username: currentUser?.username || 'You',
        avatar: currentUser?.avatar || null,
        role: getMyRoomRole('community', name) || 'Owner'
    }];
    renderMembersSidebarFromRoom(currentRoomMembers);
    subscribeToRoomChat('community', name);
    document.getElementById('closeChatBtn').style.display = 'block';
    showSection('chat');
    
    
    if (window.innerWidth <= 480) {
        closeMobileSidebar();
    }
}

function openGroupChat(name) {
    if (name && typeof name === 'object') {
        name = name.name || name.id || String(name);
    }
    name = String(name || 'Group');
    console.log('👥 Opening group chat:', name);
    const profile = getGroupProfile(name);
    const dict = getUiDictionary(currentLanguage);
    const groupLabel = translateRawText('Group', dict);
    currentChatFriendId = null;
    currentChatFriendName = `${groupLabel}: ${name}`;
    currentChatContext = { type: 'group', id: name, name };
    clearPendingMediaDraft();
    updatePinButtonState();
    const chatTitleEl = document.getElementById('chatTitle');
    chatTitleEl.textContent = `${profile?.image ? '🖼️' : (profile.icon || '👥')} ${groupLabel}: ${name}`;
    chatTitleEl.onclick = null;
    renderRoomMessages(normalizeRoomKeyClient('group', name), name, 'group');
    currentRoomMembers = [{
        id: currentUser?.id,
        username: currentUser?.username || 'You',
        avatar: currentUser?.avatar || null,
        role: getMyRoomRole('group', name) || 'Owner'
    }];
    renderMembersSidebarFromRoom(currentRoomMembers);
    subscribeToRoomChat('group', name);
    document.getElementById('closeChatBtn').style.display = 'block';
    showSection('chat');
    
    
    if (window.innerWidth <= 480) {
        closeMobileSidebar();
    }
}

function joinCommunity(name) {
    if (joinedCommunities.includes(name)) {
        showToast('Already joined this community', 'warning');
        return;
    }

    const profile = getCommunityProfile(name);
    const alreadyMember = (profile.members || []).some((m) => String(m.id) === String(currentUser?.id));
    if (!alreadyMember) {
        profile.members = profile.members || [];
        profile.members.push({
            id: currentUser?.id,
            username: currentUser?.username || 'You',
            role: profile.members.length === 0 ? 'leader' : 'member'
        });
        communityProfiles[name] = profile;
        localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));
    }

    joinedCommunities.push(name);
    localStorage.setItem('joinedCommunities', JSON.stringify(joinedCommunities));
    loadFriendsForDM();
    showToast(`Joined ${name} community!`);
}

function joinGroup(name) {
    if (joinedGroups.includes(name)) {
        showToast('Already joined this group', 'warning');
        return;
    }
    getGroupProfile(name);
    if (!groupMemberRoles[name]) {
        groupMemberRoles[name] = {};
    }
    const currentUserId = String(currentUser?.id || 'self');
    const existingRoles = groupMemberRoles[name];
    if (!existingRoles[currentUserId]) {
        existingRoles[currentUserId] = Object.keys(existingRoles).length === 0 ? 'Owner' : 'Member';
    }
    localStorage.setItem('groupMemberRoles', JSON.stringify(groupMemberRoles));
    joinedGroups.push(name);
    localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
    loadFriendsForDM();
    showToast(`Joined ${name} group!`);
}



const stickers = [
    '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
    '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙',
    '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔',
    '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥',
    '😌', '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮',
    '🤧', '🥵', '🥶', '😵', '🤯', '🤠', '🥳', '😎', '🤓', '🧐',
    '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉',
    '👆', '👇', '☝️', '✋', '🤚', '🖐', '🖖', '👋', '🤙', '💪',
    '❤️', '🧡', '💛', '💚', '💙', '💜', '🤎', '🖤', '🤍', '💔',
    '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️',
    '✝️', '☪️', '🕉', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '⚙️',
    '🔥', '💯', '✨', '🌟', '⭐', '💫', '🌈', '☀️', '🌙', '⚡',
    '☁️', '🌊', '🌺', '🌸', '🌼', '🌻', '🌷', '🌹', '🥀', '🌴'
];

const GIF_LIBRARY_BY_CATEGORY = {
    Trending: [
        'https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif',
        'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif',
        'https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif',
        'https://media.giphy.com/media/111ebonMs90YLu/giphy.gif',
        'https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif',
        'https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif',
        'https://media.giphy.com/media/XreQmk7ETCak0/giphy.gif',
        'https://media.giphy.com/media/l0HlNQ03J5JxX6lva/giphy.gif'
    ],
    Reactions: [
        'https://media.giphy.com/media/26tknCqiJrBQG6bxC/giphy.gif',
        'https://media.giphy.com/media/BPJmthQ3YRwD6QqcVD/giphy.gif',
        'https://media.giphy.com/media/g9582DNuQppxC/giphy.gif',
        'https://media.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy.gif',
        'https://media.giphy.com/media/l3q2K5jinAlChoCLS/giphy.gif',
        'https://media.giphy.com/media/H3nnOlR7yiCXXQ8e2I/giphy.gif',
        'https://media.giphy.com/media/LSKVmdIwZFeNEBKBxZ/giphy.gif',
        'https://media.giphy.com/media/aWPGuTlDqq2yc/giphy.gif'
    ],
    Celebration: [
        'https://media.giphy.com/media/3oz8xZvvOZRmKay4xy/giphy.gif',
        'https://media.giphy.com/media/YRuFixSNWFVcXaxpmX/giphy.gif',
        'https://media.giphy.com/media/3o7qDEq2bMbcbPRQ2c/giphy.gif',
        'https://media.giphy.com/media/kyLYXonQYYfwYDIeZl/giphy.gif',
        'https://media.giphy.com/media/l1J3CbFgn5o7DGRuE/giphy.gif',
        'https://media.giphy.com/media/TdfyKrN7HGTIY/giphy.gif',
        'https://media.giphy.com/media/3o7aCRloybJlXpNjSU/giphy.gif',
        'https://media.giphy.com/media/8lQyyys3SGBoUUxrUp/giphy.gif'
    ],
    Gaming: [
        'https://media.giphy.com/media/l4FGuhL4U2WyjdkaY/giphy.gif',
        'https://media.giphy.com/media/xTiTnqUxyWbsAXq7Ju/giphy.gif',
        'https://media.giphy.com/media/5GoVLqeAOo6PK/giphy.gif',
        'https://media.giphy.com/media/3og0IPxMM0erATueVW/giphy.gif',
        'https://media.giphy.com/media/10LKovKon8DENq/giphy.gif',
        'https://media.giphy.com/media/3o7TKU8RvQuomFfUUU/giphy.gif',
        'https://media.giphy.com/media/9J7tdYltWyXIY/giphy.gif',
        'https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif'
    ]
};

let currentPickerTab = 'stickers';

function togglePicker() {
    const picker = document.getElementById('pickerPanel');
    if (!picker) return;
    picker.classList.toggle('show');
    if (picker.classList.contains('show')) {
        applyPickerScale();
        loadPickerContent();
    }
}

function switchPickerTab(tab, triggerEl) {
    currentPickerTab = tab;
    document.querySelectorAll('.picker-tab').forEach(t => t.classList.remove('active'));
    const tabTrigger = triggerEl || (typeof event !== 'undefined' ? event.target : null);
    if (tabTrigger) tabTrigger.classList.add('active');
    loadPickerContent();
}

function loadPickerContent() {
    const content = document.getElementById('pickerContent');
    content.innerHTML = '';
    content.classList.toggle('gifs-mode', currentPickerTab === 'gifs');
    const dict = getUiDictionary(currentLanguage);
    
    if (currentPickerTab === 'stickers') {
        stickers.forEach(sticker => {
            const item = document.createElement('div');
            item.className = 'sticker-item';
            item.innerHTML = `<span class="emoji-glyph">${sticker}</span>`;
            item.onclick = () => sendSticker(sticker);
            content.appendChild(item);
        });
        applyEnhancedEmoji(content);
    } else if (currentPickerTab === 'gifs') {
        Object.entries(GIF_LIBRARY_BY_CATEGORY).forEach(([category, gifs]) => {
            const section = document.createElement('div');
            section.style.display = 'grid';
            section.style.gap = '10px';
            section.style.marginBottom = '16px';
            section.style.gridColumn = '1 / -1';

            const heading = document.createElement('div');
            heading.textContent = translateRawText(category, dict);
            heading.style.fontSize = '13px';
            heading.style.fontWeight = '700';
            heading.style.color = 'var(--text-secondary)';
            heading.style.letterSpacing = '0.5px';
            section.appendChild(heading);

            const grid = document.createElement('div');
            grid.style.display = 'grid';
            grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
            grid.style.gap = '12px';

            gifs.forEach(gifUrl => {
                const img = document.createElement('img');
                img.className = 'gif-item';
                img.src = gifUrl;
                img.loading = 'lazy';
                img.onclick = () => sendGif(gifUrl);
                grid.appendChild(img);
            });

            section.appendChild(grid);
            content.appendChild(section);
        });
    }

    localizeStaticUi(currentLanguage);
}

function sendSticker(sticker) {
    
    const messageInput = document.getElementById('messageInput');
    if (messageInput) {
        const currentText = messageInput.value;
        messageInput.value = currentText + sticker;
        messageInput.focus();
    }
    
    document.getElementById('pickerPanel').classList.remove('show');
}

function sendGif(gifUrl) {
    setPendingMediaDraft({
        mediaType: 'gif',
        mediaUrl: gifUrl,
        content: 'GIF'
    });
    showToast('GIF selected. Press Send to post.', 'success');
    
    document.getElementById('pickerPanel').classList.remove('show');
}



let mediaRecorder;
let audioChunks = [];
let recordingInterval;
let recordingSeconds = 0;
let recordedAudioMimeType = 'audio/webm';

function getSupportedAudioMimeType() {
    const candidates = ['audio/mp4', 'audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus'];
    for (const type of candidates) {
        if (window.MediaRecorder && MediaRecorder.isTypeSupported && MediaRecorder.isTypeSupported(type)) {
            return type;
        }
    }
    return '';
}

function toggleVoiceRecorder() {
    const recorder = document.getElementById('voiceRecorder');
    recorder.classList.toggle('show');
    if (!recorder.classList.contains('show')) {
        if (mediaRecorder && mediaRecorder.state === 'recording') {
            cancelRecording();
        }
    }
}

async function toggleRecording() {
    const button = document.getElementById('recordButton');
    const sendBtn = document.querySelector('#voiceRecorder .save-btn');
    const previewAudio = document.getElementById('voicePreview');
    const previewContainer = document.getElementById('voicePreviewContainer');

    if (!window.MediaRecorder) {
        showToast('Voice recording is not supported on this browser', 'error');
        return;
    }
    
    if (!mediaRecorder || mediaRecorder.state === 'inactive') {
        try {
            
            const stream = await getSelectedMicrophone();
            const mimeType = getSupportedAudioMimeType();
            recordedAudioMimeType = mimeType || 'audio/webm';
            mediaRecorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
            audioChunks = [];
            
           
            if (previewContainer) previewContainer.style.display = 'none';
            if (previewAudio) {
                previewAudio.pause();
                previewAudio.removeAttribute('src');
                previewAudio.load();
            }
            
            mediaRecorder.ondataavailable = (event) => {
                audioChunks.push(event.data);
            };
            
            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: recordedAudioMimeType });
                const reader = new FileReader();
                reader.onloadend = () => {
                    window.recordedAudio = reader.result;
                    showToast('🎧 Recording ready! CLICK PLAY BUTTON to hear it before sending!', 'success');
                    if (sendBtn) sendBtn.disabled = false;
                    
                    
                    if (previewContainer) previewContainer.style.display = 'block';
                    if (previewAudio) {
                        previewAudio.src = reader.result;
                        previewAudio.load();
                        
                        previewAudio.volume = 1.0;
                        
                        
                        if (audioSettings.speakerId && audioSettings.speakerId !== 'default' && previewAudio.setSinkId) {
                            previewAudio.setSinkId(audioSettings.speakerId).catch(err => {
                                console.warn('Could not set preview audio output:', err);
                            });
                        }
                        
                       
                        previewAudio.play().catch(err => {
                            console.log('Autoplay blocked, user must click play:', err);
                            showToast('⚠️ Click the PLAY button ▶️ below to hear your recording!', 'warning');
                        });
                    }
                };
                reader.readAsDataURL(audioBlob);
                if (mediaRecorder.stream) {
                    mediaRecorder.stream.getTracks().forEach(track => track.stop());
                }
            };
            
            mediaRecorder.start();
            button.classList.add('recording');
            recordingSeconds = 0;
            updateRecordTimer();
            recordingInterval = setInterval(updateRecordTimer, 1000);
            if (sendBtn) sendBtn.disabled = true;
            showToast('Recording started...', 'success');
        } catch (error) {
            console.error('Error accessing microphone:', error);
            showToast('Could not access microphone', 'error');
        }
    } else {
        mediaRecorder.stop();
        button.classList.remove('recording');
        clearInterval(recordingInterval);
    }
}

function updateRecordTimer() {
    recordingSeconds++;
    const minutes = Math.floor(recordingSeconds / 60);
    const seconds = recordingSeconds % 60;
    document.getElementById('recordTimer').textContent = 
        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function sendVoiceMessage() {
    if (!window.recordedAudio) {
        showToast('No recording found', 'warning');
        return;
    }

    if (currentChatContext.type === 'community' || currentChatContext.type === 'group') {
        sendRoomMessage({
            content: 'Voice message',
            mediaType: 'voice',
            mediaUrl: window.recordedAudio
        });
        cancelRecording();
        showToast('Voice message posted!');
        return;
    }

    const targetId = ensureChatTarget();

    if (!targetId) {
        showToast('Unable to find chat target', 'warning');
        return;
    }

    if (!socket || !socket.connected) {
        showToast('Connection lost. Cannot send voice message.', 'error');
        connectSocket();
        return;
    }

    console.log('🎤 Sending voice message to:', targetId, 'audioSize:', window.recordedAudio?.length);
    socket.emit('send dm', {
        toUserId: targetId,
        content: 'Voice message',
        mediaType: 'voice',
        mediaUrl: window.recordedAudio
    });
    
    cancelRecording();
    showToast('Voice message sent!', 'success');
}

function cancelRecording() {
    const sendBtn = document.querySelector('#voiceRecorder .save-btn');
    const previewAudio = document.getElementById('voicePreview');
    const previewContainer = document.getElementById('voicePreviewContainer');
    
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
        mediaRecorder.stream.getTracks().forEach(track => track.stop());
    }
    document.getElementById('recordButton').classList.remove('recording');
    clearInterval(recordingInterval);
    document.getElementById('recordTimer').textContent = '00:00';
    document.getElementById('voiceRecorder').classList.remove('show');
    audioChunks = [];
    window.recordedAudio = null;
    recordingSeconds = 0;
    
    
    if (previewContainer) previewContainer.style.display = 'none';
    if (previewAudio) {
        previewAudio.pause();
        previewAudio.removeAttribute('src');
        previewAudio.load();
    }
    if (sendBtn) sendBtn.disabled = true;
}



function handleChatWheel(event) {
    const container = document.getElementById('messages-container');
    if (!container) return;
    
    event.preventDefault();
    const delta = event.deltaY;
    container.scrollBy({ top: delta * 0.8, behavior: 'auto' });
}



async function refreshAudioDevices() {
    try {
        
        await navigator.mediaDevices.getUserMedia({ audio: true, video: false })
            .then(stream => stream.getTracks().forEach(track => track.stop()))
            .catch(() => console.log('Microphone permission needed'));

        const devices = await navigator.mediaDevices.enumerateDevices();
        const micSelect = document.getElementById('microphoneSelector');
        const speakerSelect = document.getElementById('speakerSelector');
        
        if (micSelect) {
            micSelect.innerHTML = '<option value="default">Default Microphone</option>';
            devices.filter(d => d.kind === 'audioinput').forEach(device => {
                const option = document.createElement('option');
                option.value = device.deviceId;
                option.textContent = device.label || `Microphone ${micSelect.options.length}`;
                micSelect.appendChild(option);
            });
            if (audioSettings.microphoneId && audioSettings.microphoneId !== 'default') {
                micSelect.value = audioSettings.microphoneId;
            }
        }

        if (speakerSelect) {
            speakerSelect.innerHTML = '<option value="default">Default Speaker</option>';
            devices.filter(d => d.kind === 'audiooutput').forEach(device => {
                const option = document.createElement('option');
                option.value = device.deviceId;
                option.textContent = device.label || `Speaker ${speakerSelect.options.length}`;
                speakerSelect.appendChild(option);
            });
            if (audioSettings.speakerId && audioSettings.speakerId !== 'default') {
                speakerSelect.value = audioSettings.speakerId;
            }
        }

        showToast('Audio devices refreshed', 'success');
    } catch (error) {
        console.error('Error enumerating devices:', error);
        showToast('Could not load audio devices', 'warning');
    }
}

function saveAudioSettings() {
    const micSelect = document.getElementById('microphoneSelector');
    const speakerSelect = document.getElementById('speakerSelector');
    
    if (micSelect) audioSettings.microphoneId = micSelect.value;
    if (speakerSelect) audioSettings.speakerId = speakerSelect.value;
    
    localStorage.setItem('audioSettings', JSON.stringify(audioSettings));
    
    
    applySpeakerToAudioElements();
    
    showToast('Audio settings saved', 'success');
}

function applySpeakerToAudioElements() {
    const speakerId = audioSettings.speakerId;
    if (!speakerId || speakerId === 'default') return;
    
    
    document.querySelectorAll('audio').forEach(audio => {
        if (audio.setSinkId) {
            audio.setSinkId(speakerId).catch(err => {
                console.warn('Could not set audio output:', err);
            });
        }
    });
    
    
    const voicePreview = document.getElementById('voicePreview');
    if (voicePreview && voicePreview.setSinkId) {
        voicePreview.setSinkId(speakerId).catch(err => {
            console.warn('Could not set voice preview output:', err);
        });
    }
}

function loadAudioSettings() {
    const saved = localStorage.getItem('audioSettings');
    if (saved) {
        try {
            audioSettings = JSON.parse(saved);
        } catch (e) {
            console.error('Failed to load audio settings:', e);
        }
    }
}

async function getSelectedMicrophone() {
    const deviceId = audioSettings.microphoneId;
    if (!deviceId || deviceId === 'default') {
        return navigator.mediaDevices.getUserMedia({ audio: true });
    }
    return navigator.mediaDevices.getUserMedia({
        audio: { deviceId: { exact: deviceId } }
    });
}



function changeTheme(theme) {
    themeSettings.mode = theme;
    const customSection = document.getElementById('customColorSection');
    
    if (theme === 'custom') {
        if (customSection) customSection.style.display = 'block';
        applyCustomColors();
    } else {
        if (customSection) customSection.style.display = 'none';
        
        const root = document.documentElement;
        if (theme === 'dark') {
            root.style.setProperty('--primary-color', '#5865F2');
            root.style.setProperty('--secondary-color', '#4e5058');
            root.style.setProperty('--bg-color', '#1e1f22');
            root.style.setProperty('--sidebar-color', '#2b2d31');
            root.style.setProperty('--text-primary', '#ffffff');
            root.style.setProperty('--text-secondary', '#b5bac1');
            root.style.setProperty('--border-color', '#3f4147');
        } else if (theme === 'light') {
            root.style.setProperty('--primary-color', '#5865F2');
            root.style.setProperty('--secondary-color', '#d4d7dc');
            root.style.setProperty('--bg-color', '#ffffff');
            root.style.setProperty('--sidebar-color', '#f2f3f5');
            root.style.setProperty('--text-primary', '#060607');
            root.style.setProperty('--text-secondary', '#4e5058');
            root.style.setProperty('--border-color', '#e3e5e8');
        }
    }
    
    localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
    showToast(`Theme changed to ${theme}`, 'success');
}

function applySimpleCustomColors() {
    const root = document.documentElement;
    const bg = document.getElementById('bgColorPicker')?.value || '#1e1f22';
    const text = document.getElementById('textColorPicker')?.value || '#ffffff';
    const icon = document.getElementById('accentColorPicker')?.value || '#5865F2';
    
    root.style.setProperty('--bg-color', bg);
    root.style.setProperty('--chat-bg', bg);
    root.style.setProperty('--sidebar-color', bg);
    root.style.setProperty('--text-primary', text);
    root.style.setProperty('--primary-color', icon);
    root.style.setProperty('--secondary-color', icon);
    root.style.setProperty('--icon-color', icon);
    
    root.style.setProperty('--ui-text-color', '#ffffff');
    
    
    const simpleTheme = { bg, text, icon, mode: 'custom' };
    localStorage.setItem('simpleTheme', JSON.stringify(simpleTheme));
}

function resetSimpleCustomColors() {
    document.getElementById('bgColorPicker').value = '#1e1f22';
    document.getElementById('textColorPicker').value = '#ffffff';
    document.getElementById('accentColorPicker').value = '#5865F2';
    
    const root = document.documentElement;
    root.style.setProperty('--bg-color', '#1e1f22');
    root.style.setProperty('--chat-bg', '#1e1f22');
    root.style.setProperty('--sidebar-color', '#2b2d31');
    root.style.setProperty('--text-primary', '#ffffff');
    root.style.setProperty('--primary-color', '#5865F2');
    root.style.setProperty('--secondary-color', '#5865F2');
    root.style.setProperty('--icon-color', '#5865F2');
    root.style.setProperty('--ui-text-color', '#ffffff');
    
    localStorage.removeItem('simpleTheme');
    showToast('✅ Colors reset to default', 'success');
}

function getBrightness(hexColor) {
    const rgb = parseInt(hexColor.replace('#', ''), 16);
    const r = (rgb >> 16) & 0xff;
    const g = (rgb >> 8) & 0xff;
    const b = (rgb >> 0) & 0xff;
    return (r * 299 + g * 587 + b * 114) / 1000;
}

function getBrightnessAdjusted(hexColor, factor = 0.85) {
    const rgb = parseInt(hexColor.replace('#', ''), 16);
    let r = (rgb >> 16) & 0xff;
    let g = (rgb >> 8) & 0xff;
    let b = (rgb >> 0) & 0xff;
    
    r = Math.round(r * factor);
    g = Math.round(g * factor);
    b = Math.round(b * factor);
    
    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
}

function resetCustomColors() {
    themeSettings.customColors = {
        primary: '#5865F2',
        accent: '#57F287',
        background: '#1e1f22',
        sidebar: '#2b2d31',
        textPrimary: '#ffffff',
        textSecondary: '#b5bac1',
        iconColor: '#ffffff',
        borderColor: '#3f4147'
    };
    
    document.getElementById('primaryColorPicker').value = '#5865F2';
    document.getElementById('accentColorPicker').value = '#57F287';
    document.getElementById('bgColorPicker').value = '#1e1f22';
    document.getElementById('sidebarColorPicker').value = '#2b2d31';
    document.getElementById('textColorPicker').value = '#ffffff';
    document.getElementById('textSecondaryColorPicker').value = '#b5bac1';
    document.getElementById('iconColorPicker').value = '#ffffff';
    
    applyCustomColors();
    showToast('Colors reset to default', 'success');
}

function loadThemeSettings() {
    const saved = localStorage.getItem('themeSettings');
    if (saved) {
        try {
            themeSettings = JSON.parse(saved);
            const themeSelector = document.getElementById('themeSelector');
            if (themeSelector) themeSelector.value = themeSettings.mode;
            
            if (themeSettings.mode === 'custom') {
                const customSection = document.getElementById('customColorSection');
                if (customSection) customSection.style.display = 'block';
                
                document.getElementById('primaryColorPicker').value = themeSettings.customColors.primary;
                document.getElementById('accentColorPicker').value = themeSettings.customColors.accent;
                document.getElementById('bgColorPicker').value = themeSettings.customColors.background;
                document.getElementById('sidebarColorPicker').value = themeSettings.customColors.sidebar;
                
                applyCustomColors();
            } else {
                changeTheme(themeSettings.mode);
            }
        } catch (e) {
            console.error('Failed to load theme settings:', e);
        }
    }
}



let messageReactions = {}; 

function showQuickReactions(messageId, messageDiv, messageData = null) {
    if (!messageDiv) return;
    const quickReactions = ['👍', '❤️', '😂', '😮', '😢', '🙏', '🔥', '🎉', '💯', '👏', '🤯', '😎'];
    
    
    document.querySelectorAll('.reaction-picker').forEach(p => p.remove());
    
    
    const picker = document.createElement('div');
    picker.className = 'reaction-picker';
    picker.style.position = 'fixed';
    picker.style.background = 'var(--chat-bg)';
    picker.style.border = '2px solid var(--primary-color)';
    picker.style.borderRadius = '12px';
    picker.style.padding = '12px';
    picker.style.display = 'flex';
    picker.style.flexDirection = 'column';
    picker.style.gap = '10px';
    picker.style.zIndex = '9999';
    picker.style.boxShadow = '0 8px 24px rgba(0,0,0,0.6)';
    picker.style.maxWidth = 'min(96vw, 460px)';
    
    
    const rect = messageDiv.getBoundingClientRect();
    // Position above message, clamped to viewport
    const estimatedPickerH = 260;
    const spaceAbove = rect.top;
    const spaceBelow = window.innerHeight - rect.bottom;
    let top;
    if (spaceAbove >= estimatedPickerH + 20) {
        top = rect.top - estimatedPickerH - 10;
    } else if (spaceBelow >= estimatedPickerH + 20) {
        top = rect.bottom + 10;
    } else {
        // Center on screen if neither fits
        top = Math.max(10, (window.innerHeight - estimatedPickerH) / 2);
    }
    picker.style.left = Math.max(12, Math.min(rect.left, window.innerWidth - 470)) + 'px';
    picker.style.top = Math.max(12, top) + 'px';

    const title = document.createElement('div');
    title.textContent = 'React or take action';
    title.style.fontSize = '12px';
    title.style.fontWeight = '700';
    title.style.color = 'var(--text-secondary)';
    picker.appendChild(title);

    const emojiGrid = document.createElement('div');
    emojiGrid.style.display = 'grid';
    emojiGrid.style.gridTemplateColumns = 'repeat(6, minmax(0, 1fr))';
    emojiGrid.style.gap = '8px';
    
    quickReactions.forEach(emoji => {
        const btn = document.createElement('button');
        btn.textContent = emoji;
        btn.style.border = '1px solid var(--border-color)';
        btn.style.background = 'var(--bg-color)';
        btn.style.cursor = 'pointer';
        btn.style.fontSize = '28px';
        btn.style.padding = '8px 12px';
        btn.style.borderRadius = '8px';
        btn.style.transition = 'all 0.15s';
        btn.onmouseover = () => {
            btn.style.transform = 'scale(1.25)';
            btn.style.background = 'var(--primary-color)';
        };
        btn.onmouseout = () => {
            btn.style.transform = 'scale(1)';
            btn.style.background = 'var(--bg-color)';
        };
        btn.onclick = (e) => {
            e.stopPropagation();
            addReaction(messageId, emoji);
            picker.remove();
        };
        emojiGrid.appendChild(btn);
    });

    picker.appendChild(emojiGrid);

    const actionsRow = document.createElement('div');
    actionsRow.style.display = 'grid';
    actionsRow.style.gridTemplateColumns = 'repeat(2, minmax(0, 1fr))';
    actionsRow.style.gap = '8px';

    const makeActionButton = (label, onClick, isDanger = false) => {
        const actionBtn = document.createElement('button');
        actionBtn.textContent = label;
        actionBtn.style.padding = '8px 10px';
        actionBtn.style.borderRadius = '8px';
        actionBtn.style.border = `1px solid ${isDanger ? 'var(--danger)' : 'var(--border-color)'}`;
        actionBtn.style.background = isDanger ? 'rgba(240,71,71,0.15)' : 'var(--bg-color)';
        actionBtn.style.color = isDanger ? 'var(--danger)' : 'var(--text-primary)';
        actionBtn.style.fontSize = '12px';
        actionBtn.style.fontWeight = '600';
        actionBtn.style.cursor = 'pointer';
        actionBtn.onclick = (e) => {
            e.stopPropagation();
            onClick();
            picker.remove();
        };
        return actionBtn;
    };

    actionsRow.appendChild(makeActionButton('↩ Reply', () => {
        const data = messageData || {
            fromUsername: messageDiv.querySelector('.message-username')?.textContent || 'user',
            content: messageDiv.querySelector('.message-text')?.textContent || ''
        };
        replyToMessage(messageId, data);
    }));
    actionsRow.appendChild(makeActionButton('📋 Copy', () => copyMessageText(messageId)));
    actionsRow.appendChild(makeActionButton('📦 Archive', () => archiveSingleMessage(messageId, messageDiv)));

    if (String(messageDiv.dataset.sender) === String(currentUser?.id)) {
        actionsRow.appendChild(makeActionButton('🗑 Delete Message', () => deleteMessage(messageId, messageDiv), true));
    }

    picker.appendChild(actionsRow);
    
    document.body.appendChild(picker);
    
    
    const closePickerHandler = (e) => {
        if (!picker.contains(e.target)) {
            picker.remove();
            document.removeEventListener('click', closePickerHandler);
        }
    };
    setTimeout(() => document.addEventListener('click', closePickerHandler), 100);
}

function showReactionPicker(messageId) {
    showQuickReactions(messageId, document.querySelector(`[data-message-id="${messageId}"]`));
}

function addReaction(messageId, emoji) {
    if (!messageReactions[messageId]) {
        messageReactions[messageId] = {};
    }
    if (!messageReactions[messageId][emoji]) {
        messageReactions[messageId][emoji] = [];
    }
    
    const userId = currentUser?.id || 'anonymous';
    const userIndex = messageReactions[messageId][emoji].indexOf(userId);
    
    if (userIndex > -1) {
       
        messageReactions[messageId][emoji].splice(userIndex, 1);
        if (messageReactions[messageId][emoji].length === 0) {
            delete messageReactions[messageId][emoji];
        }
    } else {
      
        messageReactions[messageId][emoji].push(userId);
        updateUserStats('reactionsGiven', 1);
    }
    
    renderMessageReactions(messageId);
    updateStatsDisplay();
    showToast(`Reacted with ${emoji}`, 'success');
}

function showMessageContextMenu(e, messageDiv, data) {
    
    document.querySelectorAll('.message-context-menu').forEach(m => m.remove());
    
    const menu = document.createElement('div');
    menu.className = 'message-context-menu';
    menu.style.position = 'fixed';
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
    menu.style.background = 'var(--chat-bg)';
    menu.style.border = '2px solid var(--primary-color)';
    menu.style.borderRadius = '8px';
    menu.style.zIndex = '10000';
    menu.style.minWidth = '200px';
    menu.style.boxShadow = '0 8px 24px rgba(0,0,0,0.6)';
    menu.style.overflow = 'hidden';
    
    const menuItems = [
        { label: '👍 React', action: () => showQuickReactions(messageDiv.dataset.messageId, messageDiv, data), hoverClass: 'primary-hover' },
        { label: '↩️ Reply', action: () => replyToMessage(messageDiv.dataset.messageId, data), hoverClass: 'primary-hover' },
        { label: '📋 Copy', action: () => copyMessageText(messageDiv.dataset.messageId), hoverClass: 'success-hover' },
        { label: '📦 Archive', action: () => archiveSingleMessage(messageDiv.dataset.messageId, messageDiv), hoverClass: 'primary-hover' },
    ];
    
    if (String(data.from) === String(currentUser?.id)) {
        menuItems.push({ label: '✏️ Edit', action: () => editMessage(messageDiv.dataset.messageId, messageDiv.querySelector('.message-text')), hoverClass: 'primary-hover' });
        menuItems.push({ label: '🗑️ Delete', action: () => deleteMessage(messageDiv.dataset.messageId, messageDiv), hoverClass: 'danger-hover' });
    }
    
    menuItems.forEach(item => {
        const btn = document.createElement('div');
        btn.textContent = item.label;
        btn.style.padding = '12px 16px';
        btn.style.cursor = 'pointer';
        btn.style.color = 'var(--text-primary)';
        btn.style.transition = 'all 0.2s';
        btn.style.fontWeight = '500';
        btn.style.borderBottom = '1px solid var(--border-color)';
        
        
        btn.onmouseover = () => {
            if (item.hoverClass === 'danger-hover') {
                btn.style.background = 'var(--danger)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            } else if (item.hoverClass === 'success-hover') {
                btn.style.background = 'var(--success)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            } else {
                btn.style.background = 'var(--primary-color)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            }
        };
        btn.onmouseout = () => {
            btn.style.background = 'transparent';
            btn.style.color = 'var(--text-primary)';
            btn.style.transform = 'scale(1)';
        };
        btn.onclick = () => {
            item.action();
            menu.remove();
        };
        menu.appendChild(btn);
    });
    
    
    const lastBtn = menu.lastElementChild;
    if (lastBtn) lastBtn.style.borderBottom = 'none';
    
    document.body.appendChild(menu);
    
    
    document.addEventListener('click', () => menu.remove(), { once: true });
}

function showFriendContextMenu(e, friendId, friendName) {
    
    document.querySelectorAll('.message-context-menu').forEach(m => m.remove());
    
    const menu = document.createElement('div');
    menu.className = 'message-context-menu';
    menu.style.position = 'fixed';
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.clientY + 'px';
    menu.style.background = 'var(--chat-bg)';
    menu.style.border = '2px solid var(--primary-color)';
    menu.style.borderRadius = '8px';
    menu.style.zIndex = '10000';
    menu.style.minWidth = '200px';
    menu.style.boxShadow = '0 8px 24px rgba(0,0,0,0.6)';
    menu.style.overflow = 'hidden';
    
    const menuItems = [
        { label: '👤 View Profile', action: () => visitUserProfile(friendId, friendName), hoverClass: 'primary-hover' },
        { label: '💬 Send Message', action: () => openDM(friendId, friendName), hoverClass: 'success-hover' },
        { label: '📞 Video Call', action: () => { currentChatContext = { id: friendId, name: friendName, type: 'dm' }; openVideoCallModal(); }, hoverClass: 'primary-hover' },
    ];
    
    menuItems.forEach(item => {
        const btn = document.createElement('div');
        btn.textContent = item.label;
        btn.style.padding = '12px 16px';
        btn.style.cursor = 'pointer';
        btn.style.color = 'var(--text-primary)';
        btn.style.transition = 'all 0.2s';
        btn.style.fontWeight = '500';
        btn.style.borderBottom = '1px solid var(--border-color)';
        
        
        btn.onmouseover = () => {
            if (item.hoverClass === 'danger-hover') {
                btn.style.background = 'var(--danger)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            } else if (item.hoverClass === 'success-hover') {
                btn.style.background = 'var(--success)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            } else {
                btn.style.background = 'var(--primary-color)';
                btn.style.color = 'white';
                btn.style.transform = 'scale(1.02)';
            }
        };
        btn.onmouseout = () => {
            btn.style.background = 'transparent';
            btn.style.color = 'var(--text-primary)';
            btn.style.transform = 'scale(1)';
        };
        btn.onclick = () => {
            item.action();
            menu.remove();
        };
        menu.appendChild(btn);
    });
    
    
    const lastBtn = menu.lastElementChild;
    if (lastBtn) lastBtn.style.borderBottom = 'none';
    
    document.body.appendChild(menu);
    
    
    document.addEventListener('click', () => menu.remove(), { once: true });
}

function renderMessageReactions(messageId) {
    const messageDiv = document.querySelector(`[data-message-id="${messageId}"]`);
    if (!messageDiv) return;
    
    const reactionsDiv = messageDiv.querySelector('.message-reactions');
    if (!reactionsDiv) return;
    
    reactionsDiv.innerHTML = '';
    const reactions = messageReactions[messageId] || {};
    
    Object.entries(reactions).forEach(([emoji, users]) => {
        if (!users || users.length === 0) return;
        
        const reactionItem = document.createElement('div');
        reactionItem.className = 'reaction-item';
        reactionItem.innerHTML = `${emoji} <span class="reaction-count">${users.length}</span>`;
        reactionItem.style.cursor = 'pointer';
        reactionItem.onclick = () => addReaction(messageId, emoji);
        reactionsDiv.appendChild(reactionItem);
    });
}

function replyToMessage(messageId, data) {
    const input = document.getElementById('messageInput');
    if (input) {
        input.value = `> ${data.fromUsername}: ${data.content}\n`;
        input.focus();
        showToast('Replying to message...', 'success');
    }
}

function copyMessageText(messageId) {
    const messageDiv = document.querySelector(`[data-message-id="${messageId}"]`);
    if (!messageDiv) {
        showToast('❌ Message not found', 'error');
        return;
    }
    
    const textElement = messageDiv.querySelector('.message-text');
    const imgElement = messageDiv.querySelector('img');
    const vidElement = messageDiv.querySelector('video');
    const audioElement = messageDiv.querySelector('audio');
    
    if (textElement && textElement.textContent && textElement.textContent.trim()) {
        navigator.clipboard.writeText(textElement.textContent).then(() => {
            showToast('✅ Text copied!', 'success');
        }).catch(() => {
            showToast('❌ Failed to copy', 'error');
        });
    } else if (imgElement || vidElement || audioElement) {
        const url = imgElement?.src || vidElement?.src || audioElement?.src || '';
        if (url) {
            
            if (imgElement) {
                addToMediaPreview('image', url);
            } else if (vidElement) {
                addToMediaPreview('video', url);
            }
            
            
            navigator.clipboard.writeText(url).then(() => {
                const mediaType = imgElement ? 'Image' : vidElement ? 'Video' : 'Audio';
                showToast(`✅ ${mediaType} copied! View in preview panel.`, 'success');
                
                
                if (copiedMediaItems.length > 0) {
                    setTimeout(() => openMediaPreview(), 500);
                }
            }).catch(() => {
                showToast('❌ Failed to copy', 'error');
            });
        } else {
            showToast('❌ No media URL found', 'warning');
        }
    } else {
        showToast('❌ No content to copy', 'warning');
    }
}

function editMessage(messageId, textElement) {
    const currentText = textElement.textContent;
    
    customPrompt('Edit your message:', '✏️ Edit Message', 'Enter new text...', currentText, '✏️').then(newText => {
        if (newText && newText.trim() !== '' && newText !== currentText) {
            textElement.textContent = newText;
            textElement.style.fontStyle = 'italic';
            textElement.title = 'Edited';
            
            const editedLabel = document.createElement('span');
            editedLabel.textContent = ' (edited)';
            editedLabel.style.fontSize = '10px';
            editedLabel.style.color = 'var(--text-secondary)';
            textElement.appendChild(editedLabel);
            
            showToast('✅ Message edited', 'success');
            
            
        }
    });
}

function deleteMessage(messageId, messageDiv) {
    customConfirm(
        'This message will be permanently deleted. This action cannot be undone.',
        '🗑️ Delete Message',
        '🗑️',
        true
    ).then(confirmed => {
        if (confirmed) {
            
            messageDiv.style.transition = 'all 0.3s ease-out';
            messageDiv.style.opacity = '0';
            messageDiv.style.transform = 'translateX(-100%)';
            
            
            setTimeout(() => {
                messageDiv.remove();
                showToast('✅ Message deleted', 'success');
            }, 300);
            
            
        }
    });
}



function createNewGroup() {
    customPrompt('Enter a name for your new group:', '👥 Create Group', 'My Awesome Group', '', '👥').then(groupName => {
        if (groupName === null) {
            showToast('Group creation cancelled', 'info');
            return;
        }
        if (!groupName || !groupName.trim()) {
            showToast('Group name is required', 'warning');
            return;
        }
        
        const normalizedName = groupName.trim();
        customPrompt(
            'Invite member IDs (optional, comma-separated):',
            '📧 Invite Friends',
            'e.g., 123, 456, 789',
            '',
            '📧'
        ).then(memberIds => {
            const inviteIds = String(memberIds || '')
                .split(',')
                .map(id => id.trim())
                .filter(Boolean);

            if (!joinedGroups.includes(normalizedName)) {
                joinedGroups.push(normalizedName);
                localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
            }

            const profile = getGroupProfile(normalizedName);
            if (!profile.icon) {
                profile.icon = '👥';
                groupProfiles[normalizedName] = profile;
                localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
            }

            if (!groupMemberRoles[normalizedName]) {
                groupMemberRoles[normalizedName] = {};
            }

            const ownerId = String(currentUser?.id || 'self');
            groupMemberRoles[normalizedName][ownerId] = 'Owner';
            inviteIds.forEach((id) => {
                const targetId = String(id);
                if (targetId && !groupMemberRoles[normalizedName][targetId]) {
                    groupMemberRoles[normalizedName][targetId] = 'Member';
                }
            });
            localStorage.setItem('groupMemberRoles', JSON.stringify(groupMemberRoles));

            loadFriendsForDM();
            openGroupChat(normalizedName);
            showToast(`✅ Group "${normalizedName}" created${inviteIds.length ? ` with ${inviteIds.length} invited member(s)` : ''}!`, 'success');
        });
    });
}

function changeGroupPhoto() {
    if (currentChatContext.type !== 'group') {
        showToast('Open a group chat first', 'warning');
        return;
    }
    
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onloadend = () => {
            const groupIndex = joinedGroups.findIndex(g => g.id === currentChatContext.id);
            if (groupIndex > -1) {
                joinedGroups[groupIndex].avatar = reader.result;
                localStorage.setItem('joinedGroups', JSON.stringify(joinedGroups));
                showToast('Group photo updated!', 'success');
                loadFriendsForDM();
            }
        };
        reader.readAsDataURL(file);
    };
    input.click();
}



function startVideoCall() {
    if (!currentChatContext || currentChatContext.type === 'none' || !currentChatContext.id) {
        showToast('❌ Please open a chat first', 'warning');
        return;
    }

    if (currentChatContext.type !== 'dm') {
        showToast('Video calls are currently available for direct chats only', 'warning');
        return;
    }
    
    const targetName = currentChatContext.name || 'User';
    const targetId = currentChatContext.id;
    const callType = 'Video Call';
    
    
    openVideoCallModal(targetName, targetId, callType);
}



let archivedChats = JSON.parse(localStorage.getItem('archivedChats') || '[]');

function toggleArchiveChat() {
    if (currentChatContext.type === 'none' || !currentChatContext.id) {
        showToast('Open a chat first', 'warning');
        return;
    }
    
    const chatId = currentChatContext.id;
    const chatName = currentChatContext.name || 'Unknown';
    const chatType = currentChatContext.type;
    
    const archiveIndex = archivedChats.findIndex(c => c.id === chatId && c.type === chatType);
    
    if (archiveIndex > -1) {
        
        archivedChats.splice(archiveIndex, 1);
        showToast(`${chatName} unarchived`, 'success');
    } else {
        
        archivedChats.push({ id: chatId, name: chatName, type: chatType });
        showToast(`${chatName} archived`, 'success');
        
        if (chatType === 'dm') {
            const friendIndex = friends.findIndex(f => f.id === chatId);
            if (friendIndex > -1) {
                friends.splice(friendIndex, 1);
                localStorage.setItem('friends', JSON.stringify(friends));
            }
        }
        closeCurrentChat();
    }
    
    localStorage.setItem('archivedChats', JSON.stringify(archivedChats));
    loadFriendsForDM(); 
}

function showArchivedChats() {
    if (archivedChats.length === 0) {
        showToast('No archived chats yet', 'warning');
        return;
    }
    
    const chatsHtml = archivedChats.map((chat, idx) => {
        const icon = chat.type === 'dm' ? '👤' : chat.type === 'community' ? '🌐' : '👥';
        return `
            <div style="padding: 12px; background: var(--bg-color); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border-color);" 
                 onclick="openArchivedChat('${chat.type}', '${chat.id}', '${String(chat.name).replace(/'/g, "\\'")}'); closeCustomDialog();"
                 onmouseover="this.style.background='var(--sidebar-bg)'; this.style.borderColor='var(--primary-color)';"
                 onmouseout="this.style.background='var(--bg-color)'; this.style.borderColor='var(--border-color)';">
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                    <span style="font-size: 24px;">${icon}</span>
                    <div style="flex: 1; min-width: 140px;">
                        <div style="font-weight: 600; font-size: 14px; word-break: break-word;">${chat.name}</div>
                        <div style="font-size: 12px; color: var(--text-secondary);">${chat.type === 'dm' ? 'Direct Message' : chat.type === 'community' ? 'Community' : 'Group Chat'}</div>
                    </div>
                    <div style="display:flex; gap:6px;">
                        <button onclick="event.stopPropagation(); unarchiveChat('${chat.type}', '${chat.id}');" style="padding: 6px 10px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Open</button>
                        <button onclick="event.stopPropagation(); deleteArchivedChat('${chat.type}', '${chat.id}');" style="padding: 6px 10px; background: var(--danger); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Delete</button>
                    </div>
                </div>
            </div>
        `;
    }).join('');
    
    const modal = document.getElementById('archivedChatsModal');
    const list = document.getElementById('archivedChatsList');
    if (!modal || !list) {
        showToast('Archive UI unavailable', 'error');
        return;
    }

    list.innerHTML = chatsHtml;
    modal.classList.remove('hidden');
}

function closeArchivedChatsModal() {
    document.getElementById('archivedChatsModal')?.classList.add('hidden');
}

function openArchivedChat(type, id, name) {
    if (type === 'dm') {
        openDM(id, name);
    } else if (type === 'community') {
        openCommunityChat(name);
    } else if (type === 'group') {
        openGroupChat(name);
    }
}

function unarchiveChat(type, id) {
    const index = archivedChats.findIndex(c => c.type === type && c.id === id);
    if (index > -1) {
        const chat = archivedChats[index];
        archivedChats.splice(index, 1);
        localStorage.setItem('archivedChats', JSON.stringify(archivedChats));
        showToast(`${chat.name} unarchived`, 'success');
        loadFriendsForDM();
        showArchivedChats(); 
    }
}

function deleteArchivedChat(type, id) {
    const index = archivedChats.findIndex(c => c.type === type && c.id === id);
    if (index === -1) return;
    const chat = archivedChats[index];
    archivedChats.splice(index, 1);
    localStorage.setItem('archivedChats', JSON.stringify(archivedChats));
    showToast(`Deleted archived chat: ${chat.name}`, 'success');
    showArchivedChats();
}

function clearArchivedChats() {
    archivedChats = [];
    localStorage.setItem('archivedChats', JSON.stringify(archivedChats));
    showToast('All archived chats deleted', 'success');
    closeArchivedChatsModal();
}



let userStats = JSON.parse(localStorage.getItem('userStats') || '{"messagesCount": 0, "totalChars": 0, "reactionsGiven": 0, "archiveCount": 0, "quizCorrect": 0}');

function updateUserStats(type, value = 1) {
    if (!userStats[type]) userStats[type] = 0;
    userStats[type] += value;
    localStorage.setItem('userStats', JSON.stringify(userStats));
}

function showUserStats() {
    const stats = userStats;
    const statsHtml = `
    <div style="background: var(--chat-bg); padding: 20px; border-radius: 8px; max-width: 400px;">
        <h3 style="color: var(--primary-color); margin-bottom: 16px;">📊 Your Statistics</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
            <div style="background: var(--bg-color); padding: 12px; border-radius: 6px;">
                <div style="font-size: 12px; color: var(--text-secondary);">Messages Sent</div>
                <div style="font-size: 24px; color: var(--primary-color); font-weight: bold;">${stats.messagesCount || 0}</div>
            </div>
            <div style="background: var(--bg-color); padding: 12px; border-radius: 6px;">
                <div style="font-size: 12px; color: var(--text-secondary);">Characters Typed</div>
                <div style="font-size: 24px; color: var(--primary-color); font-weight: bold;">${stats.totalChars || 0}</div>
            </div>
            <div style="background: var(--bg-color); padding: 12px; border-radius: 6px;">
                <div style="font-size: 12px; color: var(--text-secondary);">Reactions Given</div>
                <div style="font-size: 24px; color: var(--primary-color); font-weight: bold;">${stats.reactionsGiven || 0}</div>
            </div>
            <div style="background: var(--bg-color); padding: 12px; border-radius: 6px;">
                <div style="font-size: 12px; color: var(--text-secondary);">Quiz Correct</div>
                <div style="font-size: 24px; color: var(--primary-color); font-weight: bold;">${stats.quizCorrect || 0}</div>
            </div>
        </div>
        <div style="margin-top: 14px;">
            <button class="save-btn" onclick="startQuiz();" style="width:100%;">🎯 Events & Challenges</button>
        </div>
    </div>
    `;
    
    const modal = document.createElement('div');
    modal.innerHTML = statsHtml;
    modal.style.position = 'fixed';
    modal.style.top = '50%';
    modal.style.left = '50%';
    modal.style.transform = 'translate(-50%, -50%)';
    modal.style.zIndex = '5000';
    
    const backdrop = document.createElement('div');
    backdrop.style.position = 'fixed';
    backdrop.style.top = '0';
    backdrop.style.left = '0';
    backdrop.style.width = '100%';
    backdrop.style.height = '100%';
    backdrop.style.background = 'rgba(0,0,0,0.6)';
    backdrop.style.zIndex = '4999';
    backdrop.onclick = () => { backdrop.remove(); modal.remove(); };
    
    document.body.appendChild(backdrop);
    document.body.appendChild(modal);
}

function startQuiz() {
    const html = `
        <div style="display:grid; gap:10px; min-width:300px;">
            <button class="save-btn" onclick="closeCustomDialog(); setTimeout(() => startTriviaChallenge(), 20);">🧠 Trivia Challenge</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startSpeedTypingChallenge(), 20);">⌨ Speed Typing</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startMemoryChallenge(), 20);">🧩 Memory Sequence</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startMathChallenge(), 20);">🧮 Math Blitz</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startRiddleChallenge(), 20);">🕵️ Riddle Room</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startReactionChallenge(), 20);">⚡ Reaction Speed</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startWordScrambleChallenge(), 20);">🔤 Word Scramble</button>
            <div style="font-size:12px; color:var(--text-secondary);">Complete challenges to earn coins and boost your profile stats.</div>
        </div>
    `;
    customAlert(html, '🎉 Events & Challenges', '🎉');
}

function startTriviaChallenge() {
    const rounds = [
        { q: 'Which keyboard shortcut is commonly used for copy on Windows?', a: ['ctrl+c', 'control+c'] },
        { q: 'If a message is end-to-end encrypted, who should be able to read it?', a: ['only sender and receiver', 'sender and receiver', 'only the sender and receiver'] },
        { q: 'What HTTP status code usually means “Not Found”?', a: ['404'] },
        { q: 'What does DM stand for in chat apps?', a: ['direct message'] },
        { q: 'Which is safer for account protection: weak password or two-factor authentication?', a: ['two-factor authentication', '2fa'] }
    ];
    const picks = rounds.sort(() => Math.random() - 0.5).slice(0, 3);
    let score = 0;
    let index = 0;

    const askNext = () => {
        if (index >= picks.length) {
            const reward = 15 + (score * 12);
            addCoins(reward);
            if (score >= 2) updateUserStats('quizCorrect', 1);
            updateStatsDisplay();
            updateUserProfile();
            showToast(`🧠 Trivia complete: ${score}/3, +${reward} coins`, score >= 2 ? 'success' : 'warning');
            return;
        }

        const round = picks[index];
        customPrompt(`Question ${index + 1}/3\n\n${round.q}`, '🧠 Trivia Challenge', 'Type your answer...', '', '🧠').then((answer) => {
            if (answer === null) return;
            const guess = String(answer).trim().toLowerCase();
            if (round.a.includes(guess)) score++;
            index += 1;
            askNext();
        });
    };

    askNext();
}

function startSpeedTypingChallenge() {
    const phrases = [
        'Ship after testing, not before.',
        'Fast replies still need clear thinking.',
        'Reliable chat depends on stable signals.'
    ];
    const picks = phrases.sort(() => Math.random() - 0.5).slice(0, 2);
    let index = 0;
    let matches = 0;
    const startedAt = Date.now();

    const askNext = () => {
        if (index >= picks.length) {
            const elapsed = (Date.now() - startedAt) / 1000;
            const reward = matches === 2 ? (elapsed <= 16 ? 55 : 45) : matches === 1 ? 28 : 12;
            addCoins(reward);
            if (matches === 2) updateUserStats('quizCorrect', 1);
            updateStatsDisplay();
            updateUserProfile();
            showToast(`⌨ Speed Typing: ${matches}/2 clean rounds, +${reward} coins`, matches > 0 ? 'success' : 'warning');
            return;
        }

        const phrase = picks[index];
        customPrompt(`Round ${index + 1}/2\n\nType this exactly:\n\n${phrase}`, '⌨ Speed Typing', 'Type this exactly', '', '⌨').then((answer) => {
            if (answer === null) return;
            if (String(answer).trim() === phrase) matches++;
            index += 1;
            askNext();
        });
    };

    askNext();
}

function startMemoryChallenge() {
    const rounds = [4, 5];
    const pool = ['🔥', '🧿', '🌊', '⚡', '💎', '🎯', '🌙'];
    let score = 0;
    let index = 0;

    const playRound = () => {
        if (index >= rounds.length) {
            const reward = 18 + (score * 16);
            addCoins(reward);
            if (score === rounds.length) updateUserStats('quizCorrect', 1);
            updateStatsDisplay();
            updateUserProfile();
            showToast(`🧩 Memory run: ${score}/2 rounds, +${reward} coins`, score > 0 ? 'success' : 'warning');
            return;
        }

        const seq = Array.from({ length: rounds[index] }, () => pool[Math.floor(Math.random() * pool.length)]);
        const expected = seq.join(' ');
        customAlert(`<div style="font-size:24px; text-align:center; margin:10px 0;">${expected}</div><div style="font-size:12px; color:var(--text-secondary); text-align:center;">Round ${index + 1}/2. Memorize the pattern, then press OK.</div>`, '🧩 Memory Challenge', '🧩').then(() => {
            customPrompt('Enter the sequence exactly', '🧩 Memory Recall', 'Type sequence here', '', '🧩').then((answer) => {
                if (answer === null) return;
                if (String(answer).trim() === expected) score++;
                index += 1;
                playRound();
            });
        });
    };

    playRound();
}

async function startMathChallenge() {
    const ops = ['+', '-', '*'];
    let score = 0;
    for (let i = 0; i < 3; i++) {
        const a = Math.floor(Math.random() * 20) + 5;
        const b = Math.floor(Math.random() * 11) + 2;
        const op = ops[Math.floor(Math.random() * ops.length)];
        const answer = op === '+' ? a + b : op === '-' ? a - b : a * b;
        const response = await customPrompt(`Problem ${i + 1}/3\n\n${a} ${op} ${b} = ?`, '🧮 Math Blitz', 'Your answer...', '', '🧮');
        if (response === null) {
            showToast('Math Blitz cancelled', 'warning');
            return;
        }
        if (Number(String(response).trim()) === answer) score++;
    }
    const reward = 20 + (score * 10);
    addCoins(reward);
    if (score >= 2) updateUserStats('quizCorrect', 1);
    updateStatsDisplay();
    updateUserProfile();
    showToast(`🧮 Math Blitz: ${score}/3 correct, +${reward} coins`, score >= 2 ? 'success' : 'warning');
}

async function startRiddleChallenge() {
    const riddles = [
        { q: 'I speak without a mouth and hear without ears. What am I?', a: ['echo'] },
        { q: 'The more you take, the more you leave behind. What am I?', a: ['footsteps', 'steps'] },
        { q: 'What has keys but cannot open locks?', a: ['piano', 'a piano'] },
        { q: 'What has to be broken before you can use it?', a: ['egg', 'an egg'] },
        { q: 'What gets wetter the more it dries?', a: ['towel', 'a towel'] }
    ];
    const picks = riddles.sort(() => Math.random() - 0.5).slice(0, 3);
    let score = 0;
    for (let i = 0; i < picks.length; i++) {
        const response = await customPrompt(`Riddle ${i + 1}/3\n\n${picks[i].q}`, '🕵️ Riddle Room', 'Type your answer...', '', '🕵️');
        if (response === null) {
            showToast('Riddle challenge cancelled', 'warning');
            return;
        }
        const guess = String(response).trim().toLowerCase();
        if (picks[i].a.includes(guess)) score++;
    }
    const reward = 15 + (score * 12);
    addCoins(reward);
    if (score >= 2) updateUserStats('quizCorrect', 1);
    updateStatsDisplay();
    updateUserProfile();
    showToast(`🕵️ Riddle Room: ${score}/3 solved, +${reward} coins`, score >= 2 ? 'success' : 'warning');
}

function startReactionChallenge() {
    const backdrop = document.createElement('div');
    backdrop.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:7000;display:flex;align-items:center;justify-content:center;padding:16px;';
    const panel = document.createElement('div');
    panel.style.cssText = 'width:min(460px,94vw);background:var(--chat-bg);border:1px solid var(--border-color);border-radius:14px;padding:18px;display:grid;gap:12px;';
    panel.innerHTML = `
        <h3 style="margin:0;color:var(--primary-color);">⚡ Reaction Speed</h3>
        <div style="font-size:13px;color:var(--text-secondary);">Press Start, then tap as soon as the card turns green.</div>
        <button id="reactionTargetBtn" class="secondary-btn" style="height:130px;font-size:18px;">Wait for green...</button>
        <div style="display:flex;gap:8px;justify-content:flex-end;">
            <button id="reactionStartBtn" class="save-btn">Start</button>
            <button id="reactionCloseBtn" class="secondary-btn">Close</button>
        </div>
    `;
    backdrop.appendChild(panel);
    document.body.appendChild(backdrop);

    const targetBtn = panel.querySelector('#reactionTargetBtn');
    const startBtn = panel.querySelector('#reactionStartBtn');
    const closeBtn = panel.querySelector('#reactionCloseBtn');

    let active = false;
    let startedAt = 0;
    let timer = null;

    const cleanup = () => {
        if (timer) clearTimeout(timer);
        backdrop.remove();
    };

    closeBtn.onclick = cleanup;
    backdrop.onclick = (e) => { if (e.target === backdrop) cleanup(); };

    startBtn.onclick = () => {
        startBtn.disabled = true;
        targetBtn.textContent = 'Get ready...';
        targetBtn.style.background = 'var(--bg-color)';
        timer = setTimeout(() => {
            active = true;
            startedAt = performance.now();
            targetBtn.textContent = 'TAP NOW!';
            targetBtn.style.background = 'var(--success)';
            targetBtn.style.color = '#fff';
        }, 1400 + Math.random() * 2800);
    };

    targetBtn.onclick = () => {
        if (!startBtn.disabled) return;
        if (!active) {
            showToast('Too early! Tap after green.', 'warning');
            startBtn.disabled = false;
            targetBtn.textContent = 'Wait for green...';
            if (timer) clearTimeout(timer);
            return;
        }
        const ms = Math.max(1, Math.round(performance.now() - startedAt));
        const reward = ms <= 220 ? 85 : ms <= 300 ? 70 : ms <= 380 ? 55 : ms <= 500 ? 38 : 24;
        addCoins(reward);
        if (ms <= 380) updateUserStats('quizCorrect', 1);
        updateStatsDisplay();
        updateUserProfile();
        showToast(`⚡ ${ms}ms reaction! +${reward} coins`, 'success');
        cleanup();
    };
}

async function startWordScrambleChallenge() {
    const rounds = [
        { word: 'server', scrambled: 'vreser' },
        { word: 'archive', scrambled: 'vicher a'.replace(' ', '') },
        { word: 'message', scrambled: 'sgemase' },
        { word: 'profile', scrambled: 'elofipr' }
    ];
    let score = 0;
    for (let i = 0; i < rounds.length; i++) {
        const r = rounds[i];
        const response = await customPrompt(`Round ${i + 1}/4\n\nUnscramble: ${r.scrambled}`, '🔤 Word Scramble', 'Type the word...', '', '🔤');
        if (response === null) {
            showToast('Word Scramble cancelled', 'warning');
            return;
        }
        if (String(response).trim().toLowerCase() === r.word) score++;
    }
    const reward = 18 + (score * 8);
    addCoins(reward);
    if (score >= 3) updateUserStats('quizCorrect', 1);
    updateStatsDisplay();
    updateUserProfile();
    showToast(`🔤 Word Scramble: ${score}/4 correct, +${reward} coins`, score >= 2 ? 'success' : 'warning');
}

async function addCoins(amount) {
    const userJSON = localStorage.getItem('user');
    if (!userJSON) return;
    const user = JSON.parse(userJSON);
    user.coins = (user.coins || 0) + amount;
    localStorage.setItem('user', JSON.stringify(user));
    currentUser.coins = user.coins;
    
    // Update displays immediately
    const coinsDisplay = document.getElementById('coinsDisplay');
    if (coinsDisplay) coinsDisplay.textContent = `💰 Coins: ${user.coins}`;
    
    // Sync to server immediately so shop shows correct balance
    await syncCoinsToServer(user.coins);
    
    // Refresh shop if open to show new coin balance
    if (!document.getElementById('shopModal')?.classList.contains('hidden')) {
        loadShopItems();
    }
}

async function syncCoinsToServer(coins) {
    if (!currentToken) return;

    const userId = resolveCurrentUserId();
    if (userId && !currentUser?.id) {
        currentUser = { ...(currentUser || {}), id: userId };
    }

    try {
        const response = await fetch(`${API_BASE}/profile/coins`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ coins })
        });
        if (!response.ok) {
            console.warn('Failed to sync coins to server');
        }
    } catch (err) {
        console.warn('Coin sync error:', err);
    }
}

function updateUserProfile() {
    if (!currentUser) return;
    const userJSON = localStorage.getItem('user');
    if (userJSON) {
        const user = JSON.parse(userJSON);
        currentUser = user;
        const coinsDisplay = document.getElementById('coinsDisplay');
        if (coinsDisplay) coinsDisplay.textContent = `💰 Coins: ${user.coins || 0}`;
        if (!document.getElementById('shopModal')?.classList.contains('hidden')) {
            loadShopItems();
        }
    }
}

function updateStatsDisplay() {
    const stats = JSON.parse(localStorage.getItem('userStats') || '{"messagesCount": 0, "totalChars": 0, "reactionsGiven": 0, "archiveCount": 0, "quizCorrect": 0}');
    userStats = stats;
    const messagesCountEl = document.getElementById('statMessagesCount');
    const totalCharsEl = document.getElementById('statTotalChars');
    const reactionsGivenEl = document.getElementById('statReactionsGiven');
    const quizCorrectEl = document.getElementById('statQuizCorrect');
    
    if (messagesCountEl) messagesCountEl.textContent = stats.messagesCount || 0;
    if (totalCharsEl) totalCharsEl.textContent = stats.totalChars || 0;
    if (reactionsGivenEl) reactionsGivenEl.textContent = stats.reactionsGiven || 0;
    if (quizCorrectEl) quizCorrectEl.textContent = stats.quizCorrect || 0;
}

function resetUserStats() {
    customConfirm(
        'This will reset all your statistics including messages sent, reactions given, and quiz scores. This action cannot be undone.',
        '⚠️ Reset Statistics',
        '⚠️',
        true
    ).then(confirmed => {
        if (confirmed) {
            localStorage.setItem('userStats', JSON.stringify({messagesCount: 0, totalChars: 0, reactionsGiven: 0, archiveCount: 0, quizCorrect: 0}));
            updateStatsDisplay();
            showToast('Statistics reset successfully', 'success');
        }
    });
}


function showMobileSection(section) {
   
    if (window.innerWidth <= 768) {
        closeMobileSidebar();
        closeSettings();
        closeProfile();
        closeCommunitiesModal();
        closeGroupsModal();
    }

   
    document.querySelectorAll('.mobile-nav-item').forEach(item => {
        if (item.getAttribute('data-section') === section) {
            item.classList.add('active');
        } else {
            item.classList.remove('active');
        }
    });

    
    switch(section) {
        case 'chats':
            toggleChannelSidebar();
            break;
        case 'communities':
            openCommunitiesModal();
            break;
        case 'groups':
            openGroupsModal();
            break;
        case 'friends':
            showSection('friends');
            break;
        case 'settings':
            openSettings();
            break;
    }
}

function closeMobileSidebar() {
    document.getElementById('channelSidebar')?.classList.remove('show');
    document.getElementById('mobileMembersPanel')?.classList.remove('show');
    document.getElementById('sidebarOverlay')?.classList.remove('show');
}

function openQuickActionsMenu() {
    const extraActions = [];
    if (currentChatContext?.type && currentChatContext.type !== 'none') {
        extraActions.push('<button class="secondary-btn" onclick="clearCurrentChatHistory(); closeCustomDialog();">🗑️ Clear Current Chat</button>');
        if (currentChatContext.type === 'group') {
            extraActions.push('<button class="secondary-btn" onclick="openGroupAppearanceEditor(currentChatContext.name); closeCustomDialog();">✨ Change Group Icon</button>');
            extraActions.push('<button class="secondary-btn" onclick="changeGroupImagePrompt(currentChatContext.name); closeCustomDialog();">📸 Change Group Image</button>');
        }
        if (currentChatContext.type === 'community') {
            extraActions.push('<button class="secondary-btn" onclick="changeCommunityImagePrompt(currentChatContext.name); closeCustomDialog();">📸 Change Community Image</button>');
        }
    }

    const html = `
        <div style="display:grid; gap:10px; min-width:260px;">
            <button class="secondary-btn" onclick="showQRCodeModal(); closeCustomDialog();">📱 My QR Code</button>
            <button class="save-btn" onclick="openArchivedChatsFromQuickActions();">📦 Archive Center</button>
            <button class="secondary-btn" onclick="showUserStats(); closeCustomDialog();">📈 Activity Dashboard</button>
            <button class="secondary-btn" onclick="openMediaPreview(); closeCustomDialog();">🖼️ Media Gallery</button>
            <button class="secondary-btn" onclick="closeCustomDialog(); setTimeout(() => startQuiz(), 20);">🚀 Events & Challenges</button>
            ${extraActions.join('')}
            <button class="secondary-btn" onclick="closeCustomDialog();">❌ Close</button>
            <button class="save-btn" style="background: var(--danger);" onclick="logout(); closeCustomDialog();">🚪 Logout</button>
        </div>
    `;
    customAlert(html, 'Quick Actions', '🧿');
}

function openFireTechBot() {
    openDM(FIRETECH_BOT_USER.userId, FIRETECH_BOT_USER.username);
}

function showQuickActionsMenu() {
    openQuickActionsMenu();
}

function openArchivedChatsFromQuickActions() {
    closeCustomDialog();
    setTimeout(() => showArchivedChats(), 40);
}

function toggleMobileMembers() {
    const panel = document.getElementById('mobileMembersPanel');
    const overlay = document.getElementById('sidebarOverlay');
    if (!panel) return;
    
    const isShowing = panel.classList.contains('show');
    
    if (isShowing) {
        panel.classList.remove('show');
        if (overlay) overlay.classList.remove('show');
    } else {
        panel.classList.add('show');
        if (overlay) overlay.classList.add('show');
        updateMobileMembersList();
    }
}

function updateMobileMembersList() {
    const mobileList = document.getElementById('mobileMembersList');
    const desktopList = document.getElementById('membersList');
    if (!mobileList || !desktopList) return;
    
    
    mobileList.innerHTML = desktopList.innerHTML;
}

function getCommunityProfile(name) {
    const cacheKey = getRoomCacheKey('community', name);
    const synced = roomProfileCache[cacheKey] || {};
    if (!communityProfiles[name]) {
        communityProfiles[name] = {
            name: synced.name || name,
            icon: synced.icon || '',
            image: synced.image || '',
            members: [
                {
                    id: currentUser?.id || `u-${Date.now()}`,
                    username: currentUser?.username || 'You',
                    role: 'leader'
                }
            ]
        };
        localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));
    } else {
        const local = communityProfiles[name] || {};
        communityProfiles[name] = {
            ...local,
            name: local.name || synced.name || name,
            icon: local.icon || synced.icon || '',
            image: typeof local.image === 'string' ? local.image : (synced.image || ''),
            members: Array.isArray(local.members) ? local.members : []
        };
    }
    return communityProfiles[name];
}

function getGroupProfile(name) {
    const cacheKey = getRoomCacheKey('group', name);
    const synced = roomProfileCache[cacheKey] || {};
    if (!groupProfiles[name]) {
        groupProfiles[name] = {
            name: synced.name || name,
            icon: synced.icon || '👥',
            image: synced.image || ''
        };
        localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
    } else {
        const local = groupProfiles[name] || {};
        groupProfiles[name] = {
            ...local,
            name: local.name || synced.name || name,
            icon: local.icon || synced.icon || '👥',
            image: typeof local.image === 'string' ? local.image : (synced.image || '')
        };
    }
    return groupProfiles[name];
}

function openCommunityDetails(name) {
    const profile = getCommunityProfile(name);
    const modal = document.getElementById('communityDetailsModal');
    const title = document.getElementById('communityDetailsTitle');
    const body = document.getElementById('communityDetailsBody');
    if (!modal || !title || !body) return;

    const roomRole = getMyRoomRole('community', name);
    const localRole = Array.isArray(profile.members)
        ? (profile.members.find((m) => String(m.id) === String(currentUser?.id))?.role || 'member')
        : 'member';
    const canManage = roomRole === 'Owner' || roomRole === 'Admin' || localRole === 'leader' || localRole === 'vice_leader';
    const roleLabel = roomRole === 'Admin' ? 'Vice Leader' : (roomRole === 'Owner' ? 'Leader' : (localRole === 'leader' ? 'Leader' : (localRole === 'vice_leader' ? 'Vice Leader' : 'Member')));

    title.textContent = `${profile.name}`;
    const members = Array.isArray(profile.members) ? profile.members : [];
    const avatarPreview = profile.image
        ? `<div style="width:72px;height:72px;border-radius:16px;background-image:url('${profile.image}');background-size:cover;background-position:center;border:2px solid var(--border-color);"></div>`
        : `<div style="width:72px;height:72px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--bg-color);border:2px solid var(--border-color);">${profile.icon || '🌐'}</div>`;
    body.innerHTML = `
        <div style="display:grid; gap:12px; margin-bottom:14px;">
            <div style="display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-color);">
                ${avatarPreview}
                <div style="display:flex; flex-direction:column; gap:2px;">
                    <div style="font-weight:700; font-size:16px;">${profile.name}</div>
                    <div style="font-size:12px; color:var(--text-secondary);">Community profile preview</div>
                </div>
            </div>
            <button class="secondary-btn" onclick="renameCommunityPrompt('${name}')" ${canManage ? '' : 'disabled'}>✏️ Rename Community</button>
            <button class="secondary-btn" onclick="changeCommunityIconPrompt('${name}')" ${canManage ? '' : 'disabled'}>🖼️ Change Icon</button>
            <button class="secondary-btn" onclick="changeCommunityImagePrompt('${name}')" ${canManage ? '' : 'disabled'}>🖼️ Upload Cover Image</button>
            <div style="font-size:12px; color:var(--text-secondary);">Your role: <strong>${roleLabel}</strong>. Only Leader or Vice Leader can change community appearance.</div>
        </div>
        <div style="font-weight:700; margin-bottom:8px;">Members (${members.length})</div>
        ${members.map((m) => `
            <div class="community-member-card" onclick="visitUserProfile('${m.id}', '${String(m.username).replace(/'/g, "\\'")}')">
                <div class="member-avatar">${String(m.username || 'U').charAt(0).toUpperCase()}</div>
                <div style="display:flex; flex-direction:column; gap:2px;">
                    <span style="font-weight:600;">${m.username}</span>
                    <span style="font-size:12px; color:var(--text-secondary);">View full profile</span>
                </div>
                <span class="community-role-pill ${m.role === 'leader' ? 'leader' : ''}">${m.role === 'leader' ? 'Leader' : 'Member'}</span>
            </div>
        `).join('')}
    `;

    modal.classList.add('show');
}

function closeCommunityDetails() {
    document.getElementById('communityDetailsModal')?.classList.remove('show');
}

function renameCommunityPrompt(name) {
    if (!canManageRoomAppearance('community', name)) {
        showToast('Only Leader or Vice Leader can rename this community', 'warning');
        return;
    }
    customPrompt('Enter new community name', 'Rename Community', name, '', '✏️').then((newName) => {
        if (!newName || !newName.trim() || newName.trim() === name) return;
        const trimmed = newName.trim();

        const idx = joinedCommunities.indexOf(name);
        if (idx >= 0) {
            joinedCommunities[idx] = trimmed;
            localStorage.setItem('joinedCommunities', JSON.stringify(joinedCommunities));
        }

        if (communityProfiles[name]) {
            communityProfiles[trimmed] = { ...communityProfiles[name], name: trimmed };
            delete communityProfiles[name];
            localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));
        }

        if (currentChatContext.type === 'community' && currentChatContext.name === name) {
            openCommunityChat(trimmed);
        }

        emitRoomProfileUpdate('community', name, { name: trimmed });

        loadFriendsForDM();
        closeCommunityDetails();
        showToast('Community renamed', 'success');
    });
}

function changeCommunityIconPrompt(name) {
    const commonIcons = ['🌐', '💎', '🎮', '🎨', '🎵', '📚', '⚽', '🍕', '🚀', '💻', '🎯', '🏆', '🎬', '🌟', '❤️', '🔥'];
    const iconsHtml = commonIcons.map(icon => 
        `<button onclick="setCommunityIcon('${name}', '${icon}')" style="font-size: 32px; padding: 10px; border: 2px solid var(--border-color); border-radius: 8px; background: var(--bg-color); cursor: pointer; transition: all 0.2s;" onmouseover="this.style.transform='scale(1.1)'; this.style.borderColor='var(--primary-color)';" onmouseout="this.style.transform='scale(1)'; this.style.borderColor='var(--border-color)';">${icon}</button>`
    ).join('');
    
    const html = `
        <div style="max-width: 400px;">
            <p style="margin-bottom: 16px; color: var(--text-secondary); font-size: 14px;">Choose an icon for your community: "${name}"</p>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;">
                ${iconsHtml}
            </div>
            <div style="text-align: center; padding: 12px; background: var(--bg-color); border-radius: 6px; margin-bottom: 12px;">
                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">Or paste any emoji:</div>
                <input type="text" id="customIconInput" placeholder="Paste emoji here..." style="width: 100%; padding: 10px; background: var(--chat-bg); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 24px; text-align: center;" maxlength="2">
                <button class="save-btn" onclick="setCommunityIconFromInput('${name}')" style="margin-top: 8px; width: 100%;">Set Custom Icon</button>
            </div>
            <button class="secondary-btn" onclick="closeCustomDialog()" style="width: 100%;">Cancel</button>
        </div>
    `;
    customAlert(html, 'Change Community Icon', '🖼️');
}

function setCommunityIcon(name, icon) {
    if (!canManageRoomAppearance('community', name)) {
        showToast('Only Leader or Vice Leader can change icon', 'warning');
        return;
    }
    const profile = getCommunityProfile(name);
    profile.icon = icon;
    profile.image = '';
    communityProfiles[name] = profile;
    localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));
    cacheRoomProfile('community', name, { icon, image: '' });
    closeCustomDialog();
    emitRoomProfileUpdate('community', name, { icon, image: '' });
    refreshRoomVisuals('community', name, { reopenDetails: true });
    showToast('Community icon updated! 🎉', 'success');
}

function setCommunityIconFromInput(name) {
    const input = document.getElementById('customIconInput');
    if (!input || !input.value.trim()) {
        showToast('Please enter an emoji', 'warning');
        return;
    }
    setCommunityIcon(name, input.value.trim().slice(0, 2));
}

function changeCommunityImagePrompt(name) {
    if (!canManageRoomAppearance('community', name)) {
        showToast('Only Leader or Vice Leader can change image', 'warning');
        return;
    }
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = (event) => {
        const file = event.target.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onloadend = () => {
            const profile = getCommunityProfile(name);
            profile.image = reader.result;
            communityProfiles[name] = profile;
            localStorage.setItem('communityProfiles', JSON.stringify(communityProfiles));
            cacheRoomProfile('community', name, { image: reader.result });
            
         
            if (currentChatContext?.type === 'community' && currentChatContext?.name === name) {
                const profileAvatar = document.getElementById('profileAvatar');
                if (profileAvatar) {
                    profileAvatar.style.backgroundImage = `url(${reader.result})`;
                    profileAvatar.style.backgroundSize = 'cover';
                    profileAvatar.style.backgroundPosition = 'center';
                    profileAvatar.textContent = '';
                }
                const profileName = document.getElementById('profileName');
                if (profileName) {
                    profileName.textContent = name;
                }
                
                setTimeout(() => {
                    const avatarDiv = document.getElementById('profileAvatar');
                    if (avatarDiv && !avatarDiv.style.backgroundImage) {
                        avatarDiv.style.backgroundImage = `url(${reader.result})`;
                        avatarDiv.style.backgroundSize = 'cover';
                    }
                }, 100);
            }
            
            refreshRoomVisuals('community', name, { reopenDetails: true });
            emitRoomProfileUpdate('community', name, { image: reader.result });
            showToast('Community image updated (Profile updated)', 'success');
        };
        reader.readAsDataURL(file);
    };
    input.click();
}

function changeGroupImagePrompt(name) {
    if (!canManageRoomAppearance('group', name)) {
        showToast('Only Owner or Admin can change group image', 'warning');
        return;
    }
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = (event) => {
        const file = event.target.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onloadend = () => {
            const profile = getGroupProfile(name);
            profile.image = reader.result;
            groupProfiles[name] = profile;
            localStorage.setItem('groupProfiles', JSON.stringify(groupProfiles));
            cacheRoomProfile('group', name, { image: reader.result });
            
            
            if (currentChatContext?.type === 'group' && currentChatContext?.name === name) {
                const profileAvatar = document.getElementById('profileAvatar');
                if (profileAvatar) {
                    profileAvatar.style.backgroundImage = `url(${reader.result})`;
                    profileAvatar.style.backgroundSize = 'cover';
                    profileAvatar.style.backgroundPosition = 'center';
                    profileAvatar.textContent = '';
                }
                const profileName = document.getElementById('profileName');
                if (profileName) {
                    profileName.textContent = name;
                }
                
                setTimeout(() => {
                    const avatarDiv = document.getElementById('profileAvatar');
                    if (avatarDiv && !avatarDiv.style.backgroundImage) {
                        avatarDiv.style.backgroundImage = `url(${reader.result})`;
                        avatarDiv.style.backgroundSize = 'cover';
                    }
                }, 100);
            }
            
            refreshRoomVisuals('group', name, { reopenDetails: true });
            emitRoomProfileUpdate('group', name, { image: reader.result });
            showToast('Group image updated (Profile updated)', 'success');
        };
        reader.readAsDataURL(file);
    };
    input.click();
}


function toggleChannelSidebarEnhanced() {
    const sidebar = document.getElementById('channelSidebar');
    const overlay = document.getElementById('sidebarOverlay');
    
    sidebar?.classList.toggle('show');
    overlay?.classList.toggle('show');
}


function togglePinCurrentChat() {
    if (!currentChatContext || currentChatContext.type === 'none') {
        showToast('No chat selected', 'warning');
        return;
    }

    const chatId = `${currentChatContext.type}:${currentChatContext.id || currentChatContext.name}`;
    const index = pinnedChats.indexOf(chatId);
    
    if (index > -1) {
        
        pinnedChats.splice(index, 1);
        showToast('Chat unpinned', 'success');
    } else {
        
        pinnedChats.push(chatId);
        showToast('Chat pinned to top', 'success');
    }
    
    localStorage.setItem('pinnedChats', JSON.stringify(pinnedChats));
    updatePinButtonState();
    loadFriendsForDM(); 
}

function updatePinButtonState() {
    const pinBtn = document.getElementById('pinChatBtn');
    if (!pinBtn || !currentChatContext || currentChatContext.type === 'none') return;
    
    const chatId = `${currentChatContext.type}:${currentChatContext.id || currentChatContext.name}`;
    const isPinned = pinnedChats.includes(chatId);
    
    pinBtn.innerHTML = isPinned ? '<i class="fas fa-thumbtack" style="color: var(--primary-color);"></i>' : '<i class="fas fa-thumbtack"></i>';
    pinBtn.title = isPinned ? 'Unpin chat' : 'Pin chat';
}

function isChatPinned(chatType, chatId) {
    const chatKey = `${chatType}:${chatId}`;
    return pinnedChats.includes(chatKey);
}


function showToastClickable(message, type = 'success', chatContext = null) {
    const container = document.getElementById('toastContainer');
    if (!container) return;

    const toast = document.createElement('div');
    toast.className = `toast ${type} ${chatContext ? 'clickable' : ''}`;

    const iconMap = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
    };

    toast.innerHTML = `
        <div class="toast-icon">${iconMap[type] || iconMap.info}</div>
        <div class="toast-content">
            <div class="toast-title">${type.charAt(0).toUpperCase() + type.slice(1)}</div>
            <div class="toast-message">${message}</div>
            ${chatContext ? '<div style="font-size: 11px; margin-top: 4px; color: var(--primary-color);">Click to open</div>' : ''}
        </div>
    `;

    if (chatContext) {
        toast.style.cursor = 'pointer';
        toast.addEventListener('click', () => {
            
            if (chatContext.type === 'dm') {
                openDM(chatContext.friendId, chatContext.friendName);
            } else if (chatContext.type === 'community') {
                openRoomChat('community', chatContext.name);
            } else if (chatContext.type === 'group') {
                openRoomChat('group', chatContext.name);
            }
            
            
            toast.remove();
            
          
            if (window.innerWidth <= 480) {
                closeMobileSidebar();
            }
        });
    }

    container.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 5000);
}

function openRoomChat(roomType, roomName) {
    if (roomType === 'community') {
        openCommunityChat(roomName);
        return;
    }
    if (roomType === 'group') {
        openGroupChat(roomName);
    }
}

// ====== FIRE APP LOADER ======
function runAppLoader() {
    const loader = document.getElementById('appLoader');
    const bar = document.getElementById('loaderBar');
    const status = document.getElementById('loaderStatus');
    if (!loader || !bar) return;
    const messages = ['Igniting...', 'Loading modules...', 'Connecting...', 'Almost ready...', ' Ready!'];
    let p = 0, msgIdx = 0;
    const tick = () => {
        p = Math.min(100, p + Math.random() * 22 + 5);
        bar.style.width = p + '%';
        if (status) status.textContent = messages[Math.min(msgIdx, messages.length - 1)];
        msgIdx++;
        if (p < 100) {
            setTimeout(tick, 80 + Math.random() * 110);
        } else {
            bar.style.width = '100%';
            if (status) status.textContent = ' Ready!';
            setTimeout(() => {
                loader.classList.add('fade-out');
                setTimeout(() => { loader.style.display = 'none'; }, 720);
            }, 350);
        }
    };
    setTimeout(tick, 180);
}
// ====== END LOADER ======

window.addEventListener('DOMContentLoaded', () => {
    runAppLoader();
    loadTheme();
    applySettingsToUI();
    bindCallControlButtons();
    pinnedChats = normalizePinnedChats(JSON.parse(localStorage.getItem('pinnedChats') || '[]'));
    localStorage.setItem('pinnedChats', JSON.stringify(pinnedChats));
    joinedCommunities = JSON.parse(localStorage.getItem('joinedCommunities') || '[]');
    joinedGroups = JSON.parse(localStorage.getItem('joinedGroups') || '[]');
    const savedLang = preferredLanguage;
    syncAuthLanguage();
    localizeStaticUi(currentLanguage);
    applyEnhancedEmoji(document.body);
    setPickerScale(pickerScale);
    ensureLocalizationObserver();
    if (savedLang && savedLang !== 'en') setTimeout(() => applyLanguage(savedLang, true), 100);

    document.getElementById('desktopNotifications')?.addEventListener('change', saveNotificationSettings);
    document.getElementById('messageSound')?.addEventListener('change', saveNotificationSettings);
    document.getElementById('enterToSend')?.addEventListener('change', saveChatSettings);
    document.getElementById('showTypingIndicator')?.addEventListener('change', saveChatSettings);
    document.getElementById('autoplayGifs')?.addEventListener('change', saveChatSettings);
    document.getElementById('compactMode')?.addEventListener('change', saveAppearanceSettings);

    
    let typingTimeout = null;
    const typingInput = document.getElementById('messageInput');
    if (typingInput) {
        typingInput.addEventListener('input', () => {
            if (!chatSettings.showTypingIndicator) return;
            
            
            if (currentChatContext.type === 'community' && currentChatContext.name) {
                socket?.emit('community typing', { community: currentChatContext.name, username: currentUser?.username });
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    socket?.emit('community stop typing', { community: currentChatContext.name, username: currentUser?.username });
                }, 2000);
            } else if (currentChatContext.type === 'group' && currentChatContext.id) {
                socket?.emit('room typing', { roomType: 'group', roomId: currentChatContext.id, roomName: currentChatContext.name, username: currentUser?.username });
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    socket?.emit('room stop typing', { roomType: 'group', roomId: currentChatContext.id, roomName: currentChatContext.name, username: currentUser?.username });
                }, 2000);
            }
        });
    }

    const messagesContainer = document.getElementById('messages-container');
    const scrollRail = document.getElementById('chatScrollRail');
    const scrollThumb = document.getElementById('chatScrollThumb');
    messagesContainer?.addEventListener('scroll', syncChatScrollbarPosition);
    messagesContainer?.addEventListener('wheel', handleChatWheel, { passive: false });
    scrollRail?.addEventListener('mousedown', jumpChatScrollbar);
    scrollThumb?.addEventListener('mousedown', startChatScrollbarDrag);
    document.addEventListener('mousemove', handleChatScrollbarDrag);
    document.addEventListener('mouseup', stopChatScrollbarDrag);
    window.addEventListener('resize', refreshChatScrollbar);
    setTimeout(refreshChatScrollbar, 120);

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            document.getElementById('pickerPanel')?.classList.remove('show');
        }
    });

    document.addEventListener('click', (event) => {
        const picker = document.getElementById('pickerPanel');
        if (!picker || !picker.classList.contains('show')) return;
        if (picker.contains(event.target)) return;
        if (event.target.closest('[onclick="togglePicker()"]')) return;
        picker.classList.remove('show');
    });

   
    loadAudioSettings();
    loadThemeSettings();
    refreshAudioDevices();
    updateStatsDisplay();
    applyOrbEffect(selectedOrbEffect, { silent: true });
    renderSavedItemsSummary();
    loadSavedBanner();

    // Load previous notifications count
    notifUnreadCount = notifList.filter(n => !n.read).length;
    updateNotifBadge();

    // Start debug auto-refresh if call is active
    setInterval(() => {
        if (peerConnection) refreshCallDebug();
    }, 3000);

    
    syncBuildVersionBadge();
    ensureRtcConfigLoaded();

    const token = localStorage.getItem('token');
    const user = localStorage.getItem('user');

    if (token && user) {
        currentToken = token;
        currentUser = JSON.parse(user);
        showMainApp();
        connectSocket();
    } else {
        document.getElementById('authContainer').style.display = 'flex';
        document.getElementById('mainApp').classList.add('hidden');
    }
});


function customAlert(message, title = 'Notice', icon = 'ℹ️') {
    return new Promise((resolve) => {
        const dialog = document.getElementById('customDialog');
        dialog.innerHTML = `
            <div class="custom-dialog">
                <div class="custom-dialog-content">
                    <button class="custom-dialog-close" onclick="closeCustomDialog()" style="position: absolute; top: 10px; right: 10px; background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--text-secondary); padding: 5px 10px; line-height: 1;">&times;</button>
                    <div class="custom-dialog-header">
                        <div class="custom-dialog-icon">${icon}</div>
                        <div class="custom-dialog-title">${title}</div>
                    </div>
                    <div class="custom-dialog-message">${message}</div>
                    <div class="custom-dialog-buttons">
                        <button class="custom-dialog-btn custom-dialog-btn-primary primary-hover" onclick="closeCustomDialog()">OK</button>
                    </div>
                </div>
            </div>
        `;
        dialog.style.display = 'block';
        window.customDialogResolve = resolve;
    });
}

function customConfirm(message, title = 'Confirm', icon = '❓', isDanger = false) {
    return new Promise((resolve) => {
        const dialog = document.getElementById('customDialog');
        const btnClass = isDanger ? 'custom-dialog-btn-danger danger-hover' : 'custom-dialog-btn-primary primary-hover';
        const confirmText = isDanger ? 'Delete' : 'Confirm';
        
        dialog.innerHTML = `
            <div class="custom-dialog">
                <div class="custom-dialog-content">
                    <button class="custom-dialog-close" onclick="resolveCustomDialog(false)" style="position: absolute; top: 10px; right: 10px; background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--text-secondary); padding: 5px 10px; line-height: 1;">&times;</button>
                    <div class="custom-dialog-header">
                        <div class="custom-dialog-icon">${icon}</div>
                        <div class="custom-dialog-title">${title}</div>
                    </div>
                    <div class="custom-dialog-message">${message}</div>
                    <div class="custom-dialog-buttons">
                        <button class="custom-dialog-btn custom-dialog-btn-secondary" onclick="resolveCustomDialog(false)">Cancel</button>
                        <button class="custom-dialog-btn ${btnClass}" onclick="resolveCustomDialog(true)">${confirmText}</button>
                    </div>
                </div>
            </div>
        `;
        dialog.style.display = 'block';
        window.customDialogResolve = resolve;
    });
}

function customPrompt(message, title = 'Input', placeholder = '', defaultValue = '', icon = '✏️') {
    return new Promise((resolve) => {
        const dialog = document.getElementById('customDialog');
        dialog.innerHTML = `
            <div class="custom-dialog">
                <div class="custom-dialog-content">
                    <div class="custom-dialog-header">
                        <div class="custom-dialog-icon">${icon}</div>
                        <div class="custom-dialog-title">${title}</div>
                    </div>
                    <div class="custom-dialog-message">${message}</div>
                    <input type="text" class="custom-dialog-input" id="customDialogInput" placeholder="${placeholder}" value="${defaultValue}">
                    <div class="custom-dialog-buttons">
                        <button class="custom-dialog-btn custom-dialog-btn-secondary" onclick="resolveCustomDialog(null)">Cancel</button>
                        <button class="custom-dialog-btn custom-dialog-btn-primary primary-hover" onclick="resolveCustomDialog(document.getElementById('customDialogInput').value)">Submit</button>
                    </div>
                </div>
            </div>
        `;
        dialog.style.display = 'block';
        setTimeout(() => document.getElementById('customDialogInput')?.focus(), 100);
        window.customDialogResolve = resolve;
    });
}

function closeCustomDialog() {
    stopIncomingCallAlert();
    document.getElementById('customDialog').style.display = 'none';
    if (window.customDialogResolve) window.customDialogResolve(false);
}

function resolveCustomDialog(value) {
    stopIncomingCallAlert();
    document.getElementById('customDialog').style.display = 'none';
    if (window.customDialogResolve) window.customDialogResolve(value);
}



function showQRCodeModal() {
    const modal = document.getElementById('qrModal');
    const qrContainer = document.querySelector('.qr-code-container');
    const userIdSpan = document.getElementById('qrUserId');
    
    if (!currentUser || !currentUser.id) {
        showToast('❌ User not logged in', 'error');
        return;
    }
    
   
    qrContainer.innerHTML = '';
    
    
    const qrDiv = document.createElement('div');
    qrDiv.id = 'qrCodeCanvas';
    qrDiv.style.backgroundColor = '#ffffff';
    qrDiv.style.padding = '10px';
    qrDiv.style.borderRadius = '8px';
    qrDiv.style.display = 'inline-block';
    qrContainer.appendChild(qrDiv);
    
    
    userIdSpan.textContent = currentUser.id || currentUser._id || 'Unknown';
    
    
    const profileLinkData = `${window.location.origin}?addFriend=${encodeURIComponent(currentUser.id || currentUser._id)}`;
    
   
    if (typeof QRCode !== 'undefined') {
        try {
            new QRCode(qrDiv, {
                text: profileLinkData,
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });
            console.log('✅ QR Code generated successfully');
        } catch (error) {
            console.error('❌ QRCode library error:', error);
            generateQRCodeFallback(qrDiv, profileLinkData);
        }
    } else {
        console.warn('⚠️ QRCode library not loaded, using fallback');
        
        generateQRCodeFallback(qrDiv, profileLinkData);
    }
    
    modal.classList.add('show');
}

function generateQRCodeFallback(container, data) {
    console.log('📱 Using QR Code API fallback');
    
   
    const img = new Image();
    img.style.width = '200px';
    img.style.height = '200px';
    img.style.display = 'block';
    img.style.backgroundColor = '#ffffff';
    img.style.borderRadius = '8px';
    
    img.onload = () => {
        console.log('✅ QR Code loaded from API');
        container.innerHTML = '';
        container.appendChild(img);
    };
    
    img.onerror = () => {
        console.error('❌ QR Code API failed');
        
        container.innerHTML = `
            <div style="width: 200px; height: 200px; background: white; border: 2px solid #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; box-sizing: border-box;">
                <div style="font-size: 24px; margin-bottom: 10px;">📱</div>
                <div style="font-weight: bold; color: #000; margin-bottom: 8px;">Friend Request</div>
                <div style="font-size: 12px; color: #666; word-break: break-all; text-align: center;">${currentUser.username || 'User'}</div>
                <div style="font-size: 10px; color: #999; margin-top: 8px;">ID: ${(currentUser.id || currentUser._id || 'N/A').substring(0, 8)}...</div>
            </div>
        `;
    };
    
    img.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(data)}`;
}

function closeQRCodeModal() {
    document.getElementById('qrModal').classList.remove('show');
}

function scanQRCodeForFriend() {
    customPrompt(
        'Enter the QR code data or User ID to send a friend request:',
        '📷 Scan QR Code',
        'FRIEND_REQUEST:123:Username or just 123',
        '',
        '📷'
    ).then(qrData => {
        if (!qrData) return;
        
        let friendId = null;
        let friendName = 'User';
        
        
        if (qrData.startsWith('http://') || qrData.startsWith('https://')) {
            try {
                const parsed = new URL(qrData.trim());
                const addFriendId = parsed.searchParams.get('addFriend');
                if (addFriendId) {
                    friendId = addFriendId;
                    friendName = 'Friend';
                }
            } catch (error) {
                console.warn('Invalid QR URL:', error);
            }
        } else if (qrData.startsWith('FRIEND_REQUEST:')) {
            const parts = qrData.split(':');
            friendId = parts[1];
            friendName = parts[2] || 'User';
        } else {
           
            friendId = qrData.trim();
        }
        
        if (!friendId) {
            showToast('❌ Invalid QR code data', 'error');
            return;
        }
        
        
        customConfirm(
            `Send friend request to <strong>${friendName}</strong> (ID: ${friendId})?`,
            '👤 Friend Request',
            '👤',
            false
        ).then(confirmed => {
            if (confirmed) {
                if (socket && socket.connected) {
                    socket.emit('send friend request', { toUserId: friendId });
                    showToast(`✅ Friend request sent to ${friendName}!`, 'success');
                } else {
                    showToast('❌ Not connected to server', 'error');
                }
            }
        });
    });
}



function openVideoCallModal(targetName, targetId, callType) {
    targetName = targetName || currentChatContext.name || 'User';
    targetId = targetId || currentChatContext.id;
    callType = callType || 'Video Call';
    openCallDialog(targetName);
    setCallStatus('Dialing...');
    appendCallLog(`Outgoing ${callType.toLowerCase()} to ${targetName}`);

    if (socket && socket.connected && targetId) {
        socket.emit('start video call', { 
            targetId: targetId, 
            type: currentChatContext.type || 'dm',
            targetName: targetName
        });
        activeCallState = { callId: null, peerId: targetId, direction: 'outgoing' };
        showToast(`📞 Calling ${targetName}...`, 'success');
        appendCallLog('Call request emitted to signaling server');
    }
}

function handleIncomingVideoCall(payload) {
    if (!payload || !payload.callId) return;

    const callerName = payload.fromUsername || 'Unknown User';
    activeCallState = { callId: payload.callId, peerId: payload.fromId, direction: 'incoming' };
    startIncomingCallAlert();

    customConfirm(
        `${callerName} is calling you. Accept this video call?`,
        'Incoming Video Call',
        '📞',
        false
    ).then((accepted) => {
        if (!socket || !socket.connected || !activeCallState) {
            stopIncomingCallAlert();
            return;
        }

        if (accepted) {
            stopIncomingCallAlert();
            appendCallLog(`Accepted incoming call from ${callerName}`);
            socket.emit('accept video call', {
                callId: activeCallState.callId,
                toId: activeCallState.peerId
            });
            closeCustomDialog();
            startHostedCallRoom(callerName, `firetech-${activeCallState.callId}`).catch((error) => {
                console.error('Failed to initialize hosted call session:', error);
                showToast('Unable to join hosted call', 'error');
                cleanupCallSession(false);
            });
            
        } else {
            stopIncomingCallAlert();
            socket.emit('reject video call', {
                callId: activeCallState.callId,
                toId: activeCallState.peerId
            });
            showToast(`Missed call from ${callerName}`, 'warning');
            activeCallState = null;
        }
    });
}

async function ensureLocalCallStream() {
    if (localCallStream) return localCallStream;

    if (!window.isSecureContext && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
        const secureContextError = new Error('Camera and microphone require HTTPS on non-localhost devices.');
        showToast('❌ Call media blocked: open app over HTTPS on both devices.', 'error');
        throw secureContextError;
    }

    try {
        const selectedMic = audioSettings?.microphoneId;
        const constraints = {
            audio: true, // Keep it simple for better compatibility
            video: {
                facingMode: 'user',
                width: { min: 320, ideal: 640, max: 1280 }, // Use ranges, not fixed ideals
                height: { min: 240, ideal: 480, max: 720 }
            }
        };
        localCallStream = await navigator.mediaDevices.getUserMedia(constraints);
        showToast('📹 Camera and microphone enabled', 'success');
        return localCallStream;
    } catch (error) {
        console.error('Media access error:', error);

        // Retry with simpler constraints for mobile browsers that reject advanced constraints.
        try {
            localCallStream = await navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            });
            showToast('📹 Camera and microphone enabled', 'success');
            return localCallStream;
        } catch (secondaryError) {
            console.warn('Secondary media constraint attempt failed:', secondaryError);
        }

        
        try {
            localCallStream = await navigator.mediaDevices.getUserMedia({
                audio: true,
                video: false
            });
            showToast('🎤 Microphone enabled (camera unavailable on this device)', 'warning');
            return localCallStream;
        } catch (fallbackError) {
            showToast(`❌ Cannot access camera/mic: ${fallbackError.message}`, 'error');
            throw fallbackError;
        }
    }
}

function createPeerConnection(peerId) {
    if (peerConnection) {
        peerConnection.onicecandidate = null;
        peerConnection.ontrack = null;
        peerConnection.onconnectionstatechange = null;
        peerConnection.oniceconnectionstatechange = null;
        peerConnection.close();
        peerConnection = null;
    }

    const runtimeIceServers = Array.isArray(rtcRuntimeConfig?.iceServers) && rtcRuntimeConfig.iceServers.length
        ? rtcRuntimeConfig.iceServers
        : getDefaultIceServers();
    const hasTurnServersConfigured = hasTurnServerConfigured(runtimeIceServers);
    activeIceServers = runtimeIceServers;

    peerConnection = new RTCPeerConnection({
        iceServers: runtimeIceServers,
        iceCandidatePoolSize: 10,
        iceTransportPolicy: forceRelayOnly ? 'relay' : (rtcRuntimeConfig?.iceTransportPolicy || 'all')
    });

    remoteIceCandidatesQueue = [];
    remoteCallStream = new MediaStream();

    const remoteVideo = document.getElementById('remoteCallVideo');
    if (remoteVideo) {
        remoteVideo.srcObject = remoteCallStream;
        remoteVideo.autoplay = true;
        remoteVideo.playsInline = true;
        remoteVideo.muted = false;
        remoteVideo.volume = 1.0;
    }

    let hasLocalAudio = false;
    let hasLocalVideo = false;

    if (localCallStream) {
        localCallStream.getTracks().forEach((track) => {
            track.enabled = true;
            peerConnection.addTrack(track, localCallStream);
            if (track.kind === 'audio') hasLocalAudio = true;
            if (track.kind === 'video') hasLocalVideo = true;
        });
    }

    // Keep remote receiving path alive even when local media permissions fail.
    if (!hasLocalAudio) {
        peerConnection.addTransceiver('audio', { direction: 'recvonly' });
    }
    if (!hasLocalVideo) {
        peerConnection.addTransceiver('video', { direction: 'recvonly' });
    }

    // Apply candidates that arrived before peer connection was created.
    if (pendingRemoteIceCandidates.length) {
        const earlyCandidates = [...pendingRemoteIceCandidates];
        pendingRemoteIceCandidates = [];
        earlyCandidates.forEach((candidateData) => {
            addOrQueueIceCandidate(candidateData).catch((error) => {
                console.warn('Failed to apply early ICE candidate:', error);
            });
        });
    }

    peerConnection.onicecandidate = (event) => {
        if (event.candidate && socket && socket.connected) {
            socket.emit('video signal', {
                toId: peerId,
                callId: activeCallState?.callId,
                signal: { type: 'ice-candidate', candidate: event.candidate }
            });
        }
    };

    peerConnection.ontrack = (event) => {
        // Add the incoming track to our managed MediaStream so srcObject stays consistent.
        if (event.track && remoteCallStream) {
            if (!remoteCallStream.getTrackById(event.track.id)) {
                remoteCallStream.addTrack(event.track);
                appendCallLog(`Remote ${event.track.kind} track received`);
            }
        }
        const remoteVideo = document.getElementById('remoteCallVideo');
        if (remoteVideo) {
            if (remoteVideo.srcObject !== remoteCallStream) {
                remoteVideo.srcObject = remoteCallStream;
            }
            remoteVideo.muted = false;
            remoteVideo.volume = 1.0;
            ensureRemoteMediaPlayback(remoteVideo);
        }
    };
    function showCallWarningThrottled(message) {
        const now = Date.now();
        if (now - lastCallWarningAt < 5000) return;
        lastCallWarningAt = now;
        showToast(message, 'warning');
    }

    peerConnection.onconnectionstatechange = () => {
        console.log('📡 Connection state:', peerConnection.connectionState);
        
       
        if (window.userIntentionallEndedCall) {
            console.log('User ended call intentionally, skipping error messages');
            return;
        }
        if (peerConnection.connectionState === 'connecting') {
            setCallStatus('Connecting...');
            showToast('📞 Connecting call...', 'info');
        } else if (peerConnection.connectionState === 'connected') {
            callIceFailureCount = 0;
            setCallStatus('Connected');
            appendCallLog('Peer connection connected');
            showToast('📞 Call connected!', 'success');
            // Start timer only if not already running (avoids resetting a running clock)
            if (!callTimerInterval) {
                startCallTimer();
            }
            // Ensure remote media plays after ICE recovery
            const remoteVidEl = document.getElementById('remoteCallVideo');
            if (remoteVidEl) {
                if (!remoteVidEl.srcObject && remoteCallStream) {
                    remoteVidEl.srcObject = remoteCallStream;
                }
                remoteVidEl.muted = false;
                remoteVidEl.volume = 1.0;
                if (remoteVidEl.srcObject) {
                    ensureRemoteMediaPlayback(remoteVidEl);
                }
            }
        } else if (peerConnection.connectionState === 'failed') {
            setCallStatus('Connection failed');
            appendCallLog('Peer connection failed, starting recovery');
            showCallWarningThrottled('⚠️ Network issue detected, retrying call connection...');
            attemptIceRecovery(peerId);
        } else if (peerConnection.connectionState === 'closed') {
            
            cleanupCallSession(false);
        }
    };

    peerConnection.oniceconnectionstatechange = () => {
        if (!peerConnection) return;
        console.log('ICE connection state:', peerConnection.iceConnectionState);
        appendCallLog(`ICE state: ${peerConnection.iceConnectionState}`);

        if (peerConnection.iceConnectionState === 'connected' || peerConnection.iceConnectionState === 'completed') {
            callIceFailureCount = 0;
            if (pendingIceRecoveryTimer) {
                clearTimeout(pendingIceRecoveryTimer);
                pendingIceRecoveryTimer = null;
            }
            if (pendingRelayFallbackTimer) {
                clearTimeout(pendingRelayFallbackTimer);
                pendingRelayFallbackTimer = null;
            }
            return;
        }

        if (peerConnection.iceConnectionState === 'checking' && forceRelayOnly && !pendingRelayFallbackTimer) {
            // If relay-only stalls, fall back to mixed ICE so STUN/P2P can connect.
            pendingRelayFallbackTimer = setTimeout(() => {
                pendingRelayFallbackTimer = null;
                if (!peerConnection) return;
                if (peerConnection.iceConnectionState !== 'checking') return;
                try {
                    forceRelayOnly = false;
                    peerConnection.setConfiguration({
                        iceServers: activeIceServers,
                        iceTransportPolicy: 'all'
                    });
                    showToast('Retrying call with mixed network mode...', 'warning');
                    appendCallLog('Fallback from relay-only to mixed mode');
                    attemptIceRecovery(peerId);
                } catch (fallbackError) {
                    console.warn('Relay fallback failed:', fallbackError);
                }
            }, 10000);
        }

        if (peerConnection.iceConnectionState === 'disconnected') {
            if (pendingIceRecoveryTimer) {
                clearTimeout(pendingIceRecoveryTimer);
            }
            // 'disconnected' can be temporary on mobile networks; wait before forcing ICE restart.
            pendingIceRecoveryTimer = setTimeout(() => {
                pendingIceRecoveryTimer = null;
                if (!peerConnection) return;
                if (peerConnection.iceConnectionState === 'disconnected' || peerConnection.iceConnectionState === 'failed') {
                    showCallWarningThrottled('⚠️ Connection unstable, trying to reconnect...');
                    attemptIceRecovery(peerId);
                }
            }, 3000);
            return;
        }

        if (peerConnection.iceConnectionState === 'failed') {
            if (pendingIceRecoveryTimer) {
                clearTimeout(pendingIceRecoveryTimer);
                pendingIceRecoveryTimer = null;
            }
            attemptIceRecovery(peerId);
        }
    };

    async function attemptIceRecovery(recoveryPeerId) {
        if (!peerConnection || !socket || !socket.connected) return;

        const now = Date.now();
        if (now - lastIceRecoveryAttemptAt < 4000) return;
        lastIceRecoveryAttemptAt = now;
        callIceFailureCount += 1;

        try {
            if (callIceFailureCount >= 2 && !forceRelayOnly && hasTurnServersConfigured) {
                forceRelayOnly = true;
                peerConnection.setConfiguration({
                    iceServers: activeIceServers,
                    iceTransportPolicy: 'relay'
                });
                showToast('Switching call to relay mode for network compatibility...', 'warning');
                appendCallLog('Switching to relay mode for recovery');
            } else if (callIceFailureCount >= 2 && !hasTurnServersConfigured) {
                showToast('Retrying call without relay fallback...', 'warning');
                appendCallLog('No TURN available, retrying direct ICE only');
            }

            peerConnection.restartIce?.();

            if (peerConnection.signalingState === 'stable') {
                const recoveryOffer = await peerConnection.createOffer({
                    iceRestart: true,
                    offerToReceiveAudio: true,
                    offerToReceiveVideo: true
                });
                await peerConnection.setLocalDescription(recoveryOffer);
                appendCallLog('ICE restart offer created and sent');

                socket.emit('video signal', {
                    toId: recoveryPeerId,
                    callId: activeCallState?.callId,
                    signal: { type: 'offer', offer: recoveryOffer }
                });
            }
        } catch (recoveryError) {
            console.warn('ICE recovery attempt failed:', recoveryError);
        }
    }
}

function openCallDialog(peerName) {
    // Use the new full-screen call overlay instead of a custom dialog
    const overlay = document.getElementById('callOverlay');
    if (overlay) {
        overlay.classList.toggle('desktop-window', window.innerWidth > 700);
        callEventLog = [];
        document.getElementById('callOverlayPeerName').textContent = `📞 ${peerName}`;
        document.getElementById('callTimerLabel').textContent = '00:00:00';
        setCallStatus('Preparing call...');
        const muteBtn = document.getElementById('muteBtn');
        if (muteBtn) { muteBtn.textContent = '🎤'; muteBtn.classList.remove('muted'); }
        const camBtn = document.getElementById('cameraBtn');
        if (camBtn) { camBtn.textContent = '📷'; camBtn.classList.remove('cam-off'); }
        isCallCameraOff = false;
        overlay.classList.add('active');
        const dbg = document.getElementById('callDebugPanel');
        if (dbg) dbg.style.display = 'block';
        appendCallLog(`Call window opened for ${peerName}`);
    }
}

async function startCallSession(peerName, peerId, isCaller) {
    if (peerConnection && currentCallPeerId && String(currentCallPeerId) === String(peerId)) {
        return;
    }
    if (isStartingCallSession) return;
    isStartingCallSession = true;

    try {
    currentCallPeerId = peerId;
    currentCallPeerName = peerName;
    callIceFailureCount = 0;
    await ensureRtcConfigLoaded();
    forceRelayOnly = rtcRuntimeConfig?.iceTransportPolicy === 'relay';
    appendCallLog(`Starting session as ${isCaller ? 'caller' : 'callee'}`);

    openCallDialog(peerName);
    // Start timer from session start to avoid "stuck at 00:00" perception on unstable networks.
    if (!callTimerInterval) {
        startCallTimer();
    }
    try {
        await ensureLocalCallStream();
    } catch (mediaError) {
        // Do not abort the call - continue in receive-only mode so user can still hear/see remote party.
        console.warn('Local media unavailable, continuing receive-only call:', mediaError);
        localCallStream = null;
        appendCallLog(`Local media unavailable: ${mediaError?.message || mediaError}`);
        showToast('Starting call in receive-only mode (local camera/mic unavailable)', 'warning');
    }

    const localVideo = document.getElementById('localCallVideo');
    if (localVideo && localCallStream) {
        localVideo.srcObject = localCallStream;
        ensureLocalPreviewPlayback(localVideo);
    } else if (localVideo) {
        localVideo.srcObject = null;
    }

    createPeerConnection(peerId);
    appendCallLog('Peer connection created');

    if (isCaller && peerConnection) {
        makingOffer = true;
        try {
            const offer = await peerConnection.createOffer({
                offerToReceiveAudio: true,
                offerToReceiveVideo: true
            });
            await peerConnection.setLocalDescription(offer);
            appendCallLog('Offer created and sent');
            socket.emit('video signal', {
                toId: peerId,
                callId: activeCallState?.callId,
                signal: { type: 'offer', offer }
            });
        } finally {
            makingOffer = false;
        }
    }

    // Handle an offer that arrived while this session was being set up
    if (!isCaller && pendingSignalOffer && peerConnection) {
        const po = pendingSignalOffer;
        pendingSignalOffer = null;
        try {
            await peerConnection.setRemoteDescription(new RTCSessionDescription(po.offer));
            appendCallLog('Pending remote offer applied');
            await flushQueuedIceCandidates();
            const answer = await peerConnection.createAnswer();
            await peerConnection.setLocalDescription(answer);
            appendCallLog('Answer created for pending offer');
            socket.emit('video signal', {
                toId: po.fromId,
                callId: activeCallState?.callId,
                signal: { type: 'answer', answer }
            });
        } catch (pendingOfferErr) {
            console.error('Failed to handle pending offer:', pendingOfferErr);
        }
    }
    } finally {
        isStartingCallSession = false;
    }
}

function endVideoCall() {
    if (currentCallProvider === 'hosted' && currentJitsiApi) {
        currentJitsiApi.executeCommand('hangup');
    }
    
    window.userIntentionallEndedCall = true;
    
    
    if (socket && socket.connected && currentCallPeerId) {
        socket.emit('end video call', {
            callId: activeCallState?.callId,
            toId: currentCallPeerId
        });
    }

    cleanupCallSession(false);
}

function toggleLocalMute() {
    if (currentCallProvider === 'hosted' && currentJitsiApi) {
        currentJitsiApi.executeCommand('toggleAudio');
        return;
    }
    if (!localCallStream) {
        showToast('Microphone unavailable on this device/browser', 'warning');
        return;
    }
    
    const audioTracks = localCallStream.getAudioTracks();
    if (!audioTracks.length) {
        showToast('No microphone track available', 'warning');
        return;
    }
    const currentlyEnabled = audioTracks.some(track => track.enabled);
    
    audioTracks.forEach(track => {
        track.enabled = !currentlyEnabled;
    });
    
    const btn = document.getElementById('muteBtn');
    if (btn) {
        const nowMuted = currentlyEnabled;
        btn.textContent = nowMuted ? '🔇' : '🎤';
        if (nowMuted) btn.classList.add('muted'); else btn.classList.remove('muted');
    }
    
    showToast(currentlyEnabled ? '🔇 Microphone muted' : '🎤 Microphone on', 'info');
}

function toggleCallCamera() {
    if (currentCallProvider === 'hosted' && currentJitsiApi) {
        currentJitsiApi.executeCommand('toggleVideo');
        return;
    }
    if (!localCallStream) {
        showToast('Camera unavailable on this device/browser', 'warning');
        return;
    }
    const videoTracks = localCallStream.getVideoTracks();
    if (!videoTracks.length) {
        showToast('No camera track available', 'warning');
        return;
    }
    isCallCameraOff = !isCallCameraOff;
    videoTracks.forEach(track => { track.enabled = !isCallCameraOff; });
    const btn = document.getElementById('cameraBtn');
    if (btn) {
        btn.textContent = isCallCameraOff ? '🚫' : '📷';
        if (isCallCameraOff) btn.classList.add('cam-off'); else btn.classList.remove('cam-off');
    }
    showToast(isCallCameraOff ? '📷 Camera off' : '📷 Camera on', 'info');
}

function toggleCallDebug() {
    const dbg = document.getElementById('callDebugPanel');
    if (!dbg) return;
    if (dbg.style.display === 'block') {
        dbg.style.display = 'none';
        return;
    }
    dbg.style.display = 'block';
    refreshCallDebug();
}

function refreshCallDebug() {
    const dbg = document.getElementById('callDebugPanel');
    if (!dbg || dbg.style.display !== 'block') return;

    const connState = peerConnection ? peerConnection.connectionState : 'none';
    const iceState = peerConnection ? peerConnection.iceConnectionState : 'none';
    const sigState = peerConnection ? peerConnection.signalingState : 'none';
    const localTracks = localCallStream ? localCallStream.getTracks().map(t => `${t.kind}[${t.enabled ? 'on' : 'off'}]`).join(', ') : 'none';
    const remoteTracks = remoteCallStream ? remoteCallStream.getTracks().map(t => `${t.kind}[${t.readyState}]`).join(', ') : 'none';
    const remoteVid = document.getElementById('remoteCallVideo');
    const vidState = remoteVid ? `paused:${remoteVid.paused} muted:${remoteVid.muted} vol:${remoteVid.volume}` : 'none';
    const socketStr = socket ? (socket.connected ? `connected [${socket.id}]` : 'disconnected') : 'null';

    dbg.innerHTML = `
        <div class="dbg-row">🔗 Connection: <b>${connState}</b></div>
        <div class="dbg-row">❄️ ICE State: <b>${iceState}</b></div>
        <div class="dbg-row">📡 Signaling: <b>${sigState}</b></div>
        <div class="dbg-row">🎤 Local Tracks: ${localTracks}</div>
        <div class="dbg-row">🔊 Remote Tracks: ${remoteTracks}</div>
        <div class="dbg-row">📺 Remote Video: ${vidState}</div>
        <div class="dbg-row">🔌 Socket: ${socketStr}</div>
        <div class="dbg-row">⏱ Call duration: ${document.getElementById('callTimerLabel')?.textContent || 'n/a'}</div>
        <div class="dbg-row">📋 Status: ${document.getElementById('callStatusLabel')?.textContent || 'n/a'}</div>
        <div class="dbg-log">${callEventLog.map((entry) => `<div>${entry}</div>`).join('')}</div>
        <div style="margin-top:8px;">
            <button onclick="forceRestartIce()" style="background:#00ff88;color:#000;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:700;">🔄 Restart ICE</button>
            <button onclick="refreshCallDebug()" style="background:rgba(255,255,255,0.2);color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:10px;margin-left:4px;">↻ Refresh</button>
        </div>
    `;
}

function forceRestartIce() {
    if (!peerConnection || !currentCallPeerId) {
        showToast('No active call to restart ICE', 'warning');
        return;
    }
    peerConnection.restartIce?.();
    showToast('♻️ ICE restart triggered', 'info');
    refreshCallDebug();
}

function cleanupCallSession(keepDialogOpen = false) {
    
    window.userIntentionallEndedCall = false;
    
    
    stopIncomingCallAlert();
    stopCallTimer();

    if (currentJitsiApi) {
        try {
            currentJitsiApi.dispose();
        } catch (_) {
        }
        currentJitsiApi = null;
    }
    currentCallProvider = 'webrtc';
    currentCallRoomName = null;
    setHostedCallVisible(false);

    if (peerConnection) {
        peerConnection.onicecandidate = null;
        peerConnection.ontrack = null;
        peerConnection.onconnectionstatechange = null;
        peerConnection.oniceconnectionstatechange = null;
        peerConnection.close();
        peerConnection = null;
    }

    remoteIceCandidatesQueue = [];
    remoteCallStream = null;
    remoteCallPlaybackRetryBound = false;
    remoteCallPlaybackStarted = false;
    lastIceRecoveryAttemptAt = 0;
    lastCallWarningAt = 0;
    isStartingCallSession = false;
    pendingSignalOffer = null;
    makingOffer = false;
    callIceFailureCount = 0;
    forceRelayOnly = false;
    activeIceServers = [];
    if (pendingIceRecoveryTimer) {
        clearTimeout(pendingIceRecoveryTimer);
        pendingIceRecoveryTimer = null;
    }
    if (pendingRelayFallbackTimer) {
        clearTimeout(pendingRelayFallbackTimer);
        pendingRelayFallbackTimer = null;
    }
    pendingRemoteIceCandidates = [];

    if (localCallStream) {
        localCallStream.getTracks().forEach((track) => track.stop());
        localCallStream = null;
    }

    currentCallPeerId = null;
    currentCallPeerName = null;
    activeCallState = null;
    callEventLog = [];
    setCallStatus('');

    // Close the overlay
    const overlay = document.getElementById('callOverlay');
    if (overlay) overlay.classList.remove('active');

    // Also close any old dialog if still open
    if (!keepDialogOpen) {
        closeCustomDialog();
    }

    // Clear debug panel
    const dbg = document.getElementById('callDebugPanel');
    if (dbg) { dbg.style.display = 'none'; dbg.innerHTML = ''; }
}

function visitUserProfile(userId, userName = 'User') {
    
    if (!userId || userId === 'undefined') {
        showToast('❌ Invalid user ID', 'error');
        return;
    }

    
    const isOnline = (globalOnlineUsers || []).some((u) => String(u?.id || u?.userId || u?._id || '') === String(userId));
    const dict = getUiDictionary(currentLanguage);
    const onlineText = isOnline ? translateRawText('Online', dict) : translateRawText('Offline', dict);
    const statusColor = isOnline ? 'var(--success)' : 'var(--text-secondary)';

    const html = `
        <div style="text-align: center; padding: 20px 0;">
            <div style="width: 100px; height: 100px; background: linear-gradient(135deg, var(--primary-color), #4752c4); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: white;">
                ${userName.charAt(0).toUpperCase()}
            </div>
            <h3 style="margin: 10px 0; color: var(--text-primary);">${userName}</h3>
            <p style="margin: 5px 0; color: var(--text-secondary); font-size: 13px;">${translateRawText('Status', dict)}: <span style="color: ${statusColor};">●</span> ${onlineText}</p>
            <div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;">
                <button onclick="(function() { 
                    currentChatContext = { id: '${userId}', name: '${userName}', type: 'dm' }; 
                    openDM('${userId}', '${userName}');
                    closeCustomDialog();
                })()" style="padding: 10px 20px; background: var(--success); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s;">
                    💬 ${translateRawText('Send Message', dict)}
                </button>
                <button onclick="(function() { 
                    currentChatContext = { id: '${userId}', name: '${userName}', type: 'dm' }; 
                    closeCustomDialog();
                    setTimeout(() => startVideoCall(), 200);
                })()" style="padding: 10px 20px; background: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s;">
                    📞 ${translateRawText('Video Call', dict)}
                </button>
                <button onclick="(function() { 
                    sendFriendRequest('${userId}', '${userName}');
                })()" style="padding: 10px 20px; background: #8e44ad; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s;">
                    👥 ${translateRawText('Add Friend', dict)}
                </button>
            </div>
        </div>
    `;
    
    customAlert(html, `👤 ${userName}'s Profile`, '👤');
    localizeStaticUi(currentLanguage);
}

function sendFriendRequest(userId, userName = 'User') {
    customConfirm(
        `Send friend request to <strong>${userName}</strong>?`,
        '👥 Add Friend',
        '👥',
        false
    ).then(async confirmed => {
        if (!confirmed) return;
        
        try {
            const response = await fetch(`${API_BASE}/friends/request`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${currentToken}`
                },
                body: JSON.stringify({ toUserId: userId })
            });

            if (response.ok) {
                showToast(`✅ Friend request sent to ${userName}!`, 'success');
            } else {
                const data = await response.json();
                showToast(data.error || 'Failed to send friend request', 'error');
            }
        } catch (error) {
            console.error('Error sending friend request:', error);
            showToast('❌ Could not send friend request', 'error');
        }
    });
}



let copiedMediaItems = [];

function addToMediaPreview(type, url) {
    copiedMediaItems.push({ type, url, timestamp: Date.now() });
    renderMediaPreview();
    showToast('✅ Media added to preview!', 'success');
}

function renderMediaPreview() {
    const content = document.getElementById('mediaPreviewContent');
    if (!content) return;
    content.innerHTML = '';

    if (copiedMediaItems.length === 0) {
        content.innerHTML = `
            <div style="padding: 20px; color: var(--text-secondary); text-align: center; border: 1px dashed var(--border-color); border-radius: 8px;">
                No saved media yet. Use message actions like copy/archive on images or videos to add them here.
            </div>
        `;
        return;
    }
    
    copiedMediaItems.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'media-preview-item';
        
        if (item.type === 'image') {
            const img = document.createElement('img');
            img.src = item.url;
            img.alt = 'Copied image';
            div.appendChild(img);
        } else if (item.type === 'video') {
            const video = document.createElement('video');
            video.src = item.url;
            video.controls = true;
            div.appendChild(video);
        }
        
        content.appendChild(div);
    });
}

function openMediaPreview() {
    renderMediaPreview();
    document.getElementById('mediaPreviewPanel').classList.add('show');
}

function closeMediaPreview() {
    document.getElementById('mediaPreviewPanel').classList.remove('show');
}



function filterFriends(searchText) {
    const channelsList = document.getElementById('channelsList');
    const channels = channelsList.querySelectorAll('.channel-item');
    
    searchText = searchText.toLowerCase().trim();
    
    channels.forEach(channel => {
        const username = channel.textContent.toLowerCase();
        if (username.includes(searchText)) {
            channel.style.display = 'flex';
        } else {
            channel.style.display = 'none';
        }
    });
}



let archivedMessages = JSON.parse(localStorage.getItem('archivedMessages') || '[]');

function archiveSingleMessage(messageId, messageDiv) {
    const textElement = messageDiv.querySelector('.message-text');
    const imgElement = messageDiv.querySelector('img');
    const vidElement = messageDiv.querySelector('video');
    
    const messageData = {
        id: messageId,
        text: textElement?.textContent || '',
        mediaUrl: imgElement?.src || vidElement?.src || null,
        mediaType: imgElement ? 'image' : vidElement ? 'video' : 'text',
        timestamp: Date.now(),
        sender: messageDiv.dataset.sender || 'Unknown'
    };
    
    archivedMessages.push(messageData);
    localStorage.setItem('archivedMessages', JSON.stringify(archivedMessages));
    
    
    messageDiv.style.transition = 'all 0.4s ease';
    messageDiv.style.opacity = '0.5';
    messageDiv.style.transform = 'translateX(-20px)';
    
    showToast('📦 Message archived!', 'success');
    
    setTimeout(() => {
        messageDiv.style.opacity = '1';
        messageDiv.style.transform = 'translateX(0)';
    }, 500);
}

function showArchivedMessages() {
    const modal = document.getElementById('archivedChatsModal');
    const list = document.getElementById('archivedChatsList');
    if (!modal || !list) {
        showToast('Archive UI unavailable', 'error');
        return;
    }

    const chatsHtml = archivedChats.map((chat) => {
        const icon = chat.type === 'dm' ? '👤' : chat.type === 'community' ? '🌐' : '👥';
        const safeName = String(chat.name || '').replace(/'/g, "\\'");
        return `
            <div style="padding: 12px; background: var(--bg-color); border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border-color);">
                <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                    <span style="font-size:20px;">${icon}</span>
                    <div style="flex:1; min-width:140px;">
                        <div style="font-weight:600; word-break:break-word;">${chat.name}</div>
                        <div style="font-size:12px; color:var(--text-secondary);">${chat.type}</div>
                    </div>
                    <div style="display:flex; gap:6px;">
                        <button class="secondary-btn" style="padding:6px 10px; font-size:12px;" onclick="openArchivedChat('${chat.type}', '${chat.id}', '${safeName}'); closeArchivedChatsModal();">Open</button>
                        <button class="save-btn" style="padding:6px 10px; font-size:12px; background:var(--danger);" onclick="deleteArchivedChat('${chat.type}', '${chat.id}');">Delete</button>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    const messageItems = archivedMessages.slice().reverse().slice(0, 80).map((m) => {
        const preview = String(m.text || '[Media message]').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return `
            <div style="padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; background: var(--bg-color);">
                <div style="font-size:12px; color:var(--text-secondary); margin-bottom:4px;">${new Date(m.timestamp).toLocaleString()}</div>
                <div style="font-size:13px; line-height:1.4; word-break:break-word; overflow-wrap:anywhere;">${preview}</div>
            </div>
        `;
    }).join('');

    list.innerHTML = `
        <div style="font-size:13px; color: var(--text-secondary); margin-bottom: 12px;">
            Archived chats: <strong>${archivedChats.length}</strong> | Archived single messages: <strong>${archivedMessages.length}</strong>
        </div>
        ${archivedChats.length > 0 ? `<div style="font-weight:700; margin-bottom:6px;">Chats</div>${chatsHtml}` : ''}
        ${archivedMessages.length > 0 ? `<div style="font-weight:700; margin: 10px 0 6px;">Single Messages</div>${messageItems}` : ''}
        ${archivedChats.length === 0 && archivedMessages.length === 0 ? '<div style="color: var(--text-secondary);">No archived content yet.</div>' : ''}
    `;

    modal.classList.remove('hidden');
}

async function clearCurrentChatHistory() {
    if (!currentChatContext || currentChatContext.type === 'none') {
        showToast('Open a chat first', 'warning');
        return false;
    }

    const confirmed = await customConfirm(
        'This will permanently clear all messages in the current chat for your account.',
        'Clear Chat History',
        '🧹',
        true
    );

    if (!confirmed) return false;

    try {
        if (currentChatContext.type === 'dm') {
            const response = await fetch(`${API_BASE}/dms/${currentChatContext.id}`, {
                method: 'DELETE',
                headers: { 'Authorization': `Bearer ${currentToken}` }
            });

            if (!response.ok) {
                const data = await response.json().catch(() => ({}));
                showToast(data.error || 'Failed to clear chat history', 'error');
                return false;
            }
        } else {
            socket?.emit('clear room chat', {
                roomType: currentChatContext.type,
                roomName: currentChatContext.name
            });
            const roomKey = normalizeRoomKeyClient(currentChatContext.type, currentChatContext.name);
            roomMessages[roomKey] = [];
            saveRoomMessages();
        }

        document.getElementById('messages-container').innerHTML = '';
        refreshChatScrollbar();
        showToast('Chat history cleared', 'success');
        return true;
    } catch (error) {
        console.error(error);
        showToast('Failed to clear chat history', 'error');
        return false;
    }
}

async function rejectFriendRequest(requestId) {
    try {
        const response = await fetch(`${API_BASE}/friends/reject`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${currentToken}`
            },
            body: JSON.stringify({ requestId })
        });

        const data = await response.json();
        if (!response.ok) {
            showToast(data.error || 'Failed to decline friend request', 'error');
            return;
        }

        showToast('Friend request declined', 'warning');
        loadFriends();
    } catch (error) {
        console.error(error);
        showToast('Could not decline friend request', 'error');
    }
}