Blame for static/script.js

(function() {
    'use strict';
    // --- State ---
    let currentUser = null;
    let token = localStorage.getItem('token');
    let ws = null;
    let messages = {};           // id -> msg object
    let messageIds = [];         // ordered
    let oldestMessageId = null;
    let replyToId = null;
    let typingTimer = null;
    let pendingFile = null;     // {file_path, file_type, file_name}

    const API = window.location.origin;

    // DOM elements
    const authScreen = document.getElementById('auth-screen');
    const chatScreen = document.getElementById('chat-screen');
    const authForm = document.getElementById('auth-form');
    const authUsername = document.getElementById('auth-username');
    const authPassword = document.getElementById('auth-password');
    const authDisplayName = document.getElementById('auth-display-name');
    const displayNameGroup = document.getElementById('display-name-group');
    const authSubmit = document.getElementById('auth-submit');
    const authError = document.getElementById('auth-error');
    const loginTab = document.getElementById('login-tab');
    const signupTab = document.getElementById('signup-tab');
    const messagesList = document.getElementById('messages-list');
    const composeForm = document.getElementById('compose-form');
    const messageInput = document.getElementById('message-input');
    const sendBtn = document.getElementById('send-btn');
    const attachBtn = document.getElementById('attach-btn');
    const fileInput = document.getElementById('file-input');
    const replyPreview = document.getElementById('reply-preview');
    const replyPreviewText = document.getElementById('reply-preview-text');
    const cancelReply = document.getElementById('cancel-reply');
    const typingIndicator = document.getElementById('typing-indicator');
    const onlineCountSpan = document.getElementById('online-count');
    const loadOlderBtn = document.getElementById('load-older-btn');
    const settingsBtn = document.getElementById('settings-btn');
    const logoutBtn = document.getElementById('logout-btn');
    const settingsModal = document.getElementById('settings-modal');
    const saveSettingsBtn = document.getElementById('save-settings');
    const closeSettingsBtn = document.getElementById('close-settings');
    const themeSelect = document.getElementById('theme-select');
    const customThemeSettings = document.getElementById('custom-theme-settings');
    const customSelfColor = document.getElementById('custom-self-color');
    const customOtherColor = document.getElementById('custom-other-color');
    const customTextColor = document.getElementById('custom-text-color');
    const settingDisplayName = document.getElementById('setting-display-name');
    const settingAvatar = document.getElementById('setting-avatar');
    const avatarPreview = document.getElementById('avatar-preview');
    const uploadProgress = document.getElementById('upload-progress');
    const uploadBar = document.getElementById('upload-bar');
    const uploadFilename = document.getElementById('upload-filename');

    let isLogin = true;

    // --- Theme ---
    function applyTheme(name) {
        document.body.className = name;
        localStorage.setItem('theme', name);
        if (name === 'theme-custom') {
            const self = localStorage.getItem('customSelfColor') || '#25D366';
            const other = localStorage.getItem('customOtherColor') || '#E5E5EA';
            const txt = localStorage.getItem('customTextColor') || '#000';
            document.documentElement.style.setProperty('--bubble-self', self);
            document.documentElement.style.setProperty('--bubble-other', other);
            document.documentElement.style.setProperty('--bubble-text-self', txt);
            document.documentElement.style.setProperty('--bubble-text-other', txt);
        }
    }
    function loadTheme() {
        const saved = localStorage.getItem('theme') || 'theme-light';
        themeSelect.value = saved;
        if (saved === 'theme-custom') customThemeSettings.classList.remove('hidden');
        applyTheme(saved);
    }

    // --- Auth ---
    loginTab.addEventListener('click', ()=>{
        isLogin=true; loginTab.classList.add('active'); signupTab.classList.remove('active');
        displayNameGroup.style.display='none'; authSubmit.textContent='Login';
    });
    signupTab.addEventListener('click', ()=>{
        isLogin=false; signupTab.classList.add('active'); loginTab.classList.remove('active');
        displayNameGroup.style.display='block'; authSubmit.textContent='Sign Up';
    });
    authForm.addEventListener('submit', async (e)=>{
        e.preventDefault();
        const u = authUsername.value.trim(), p = authPassword.value, d = authDisplayName.value.trim();
        if(!u||!p){ authError.textContent='Fill all fields.'; return; }
        try{
            const url = isLogin ? `${API}/login?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}`
                                : `${API}/signup?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}&display_name=${encodeURIComponent(d)}`;
            const res = await fetch(url, {method:'POST'});
            if(!res.ok) throw new Error((await res.json()).detail||'Auth failed');
            const data = await res.json();
            token = data.token;
            currentUser = { id: data.id, username: data.username, display_name: data.display_name, avatar_path: data.avatar_path };
            localStorage.setItem('token', token);
            showChat();
        }catch(err){ authError.textContent=err.message; }
    });

    async function autoLogin() {
        if(!token) return false;
        try{
            const res = await fetch(`${API}/me`, {headers:{token}});
            if(!res.ok){ token=null; localStorage.removeItem('token'); return false; }
            currentUser = await res.json();
            return true;
        }catch{ return false; }
    }

    function showChat() {
        authScreen.classList.add('hidden');
        chatScreen.classList.remove('hidden');
        connectWS();
        loadMessages();
    }

    // --- WebSocket ---
    function connectWS() {
        if(ws && ws.readyState===WebSocket.OPEN) return;
        const proto = location.protocol==='https:'?'wss:':'ws:';
        ws = new WebSocket(`${proto}//${location.host}/ws?token=${encodeURIComponent(token)}`);
        ws.onopen = ()=>{ console.log('WS open'); };
        ws.onmessage = (ev)=> handleWSMessage(JSON.parse(ev.data));
        ws.onclose = ()=> setTimeout(connectWS, 3000);
        ws.onerror = ()=> {};
    }

    function handleWSMessage(msg) {
        switch(msg.type){
            case 'online_users': onlineCountSpan.textContent = `(${msg.users.length} online)`; break;
            case 'user_online': break;
            case 'user_offline': break;
            case 'new_message':
                if(messages[msg.id]) return;
                messages[msg.id] = msg;
                messageIds.push(msg.id);
                renderMessage(msg);
                scrollBottom();
                if(document.visibilityState==='visible') ws.send(JSON.stringify({type:'mark_read', up_to_message_id:msg.id}));
                break;
            case 'messages_batch':
                if(msg.messages.length>0){
                    for(const m of msg.messages){
                        if(!messages[m.id]){ messages[m.id]=m; messageIds.unshift(m.id); }
                    }
                    renderAll();
                    scrollBottom();
                }
                if(msg.messages.length<50) loadOlderBtn.classList.add('hidden');
                else loadOlderBtn.classList.remove('hidden');
                break;
            case 'typing_update':
                typingIndicator.textContent = msg.is_typing ? `${msg.username} is typing…` : ''; break;
            case 'edit_message':
                if(messages[msg.message_id]){
                    messages[msg.message_id].content = msg.content;
                    messages[msg.message_id].is_edited = true;
                    updateBubble(msg.message_id);
                }
                break;
            case 'delete_message':
                if(messages[msg.message_id]){
                    messages[msg.message_id].is_deleted = true;
                    updateBubble(msg.message_id);
                }
                break;
            case 'read_receipt':
                if(messages[msg.message_id] && messages[msg.message_id].sender_id === currentUser.id){
                    // Update status to "read"
                    messages[msg.message_id].status = 'read';
                    updateBubble(msg.message_id);
                }
                break;
        }
    }

    // --- Render ---
    function renderMessage(msg) {
        const el = document.getElementById(`msg-${msg.id}`);
        if(el){
            updateBubble(msg.id);
            return;
        }
        const div = document.createElement('div');
        div.id = `msg-${msg.id}`;
        div.className = `message-bubble ${msg.sender_id===currentUser.id?'message-self':'message-other'}`;
        div.innerHTML = buildHTML(msg);
        messagesList.appendChild(div);
    }
    function buildHTML(msg) {
        if(msg.is_deleted) return `<em>This message was deleted</em>`;
        let html = '';
        if(msg.reply_to_id && messages[msg.reply_to_id]){
            const reply = messages[msg.reply_to_id];
            html += `<div class="reply-indicator">↩ ${reply.display_name||reply.username}: ${truncate(reply.content,40)}</div>`;
        }
        html += `<div class="message-info"><span>${msg.display_name||msg.username}</span><span class="timestamp">${formatTime(msg.timestamp_ms)}</span></div>`;
        html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
        if(msg.is_edited) html += ` <em class="edited-label">[edited]</em>`;
        if(msg.file_path) html += renderAttachment(msg);
        if(msg.sender_id===currentUser.id && !msg.is_deleted){
            const statusIcon = msg.status==='read' ? '✓✓' : '✓';
            html += `<div class="read-status double-check">${statusIcon}</div>`;
            html += `<div class="message-actions">
                        <button onclick="window.editMsg(${msg.id})">✏️</button>
                        <button onclick="window.deleteMsg(${msg.id})">🗑️</button>
                        <button onclick="window.replyTo(${msg.id})">↩</button>
                     </div>`;
        }
        return html;
    }
    function renderAttachment(msg) {
        const url = `${API}/download/${msg.file_path}?token=${encodeURIComponent(token)}`;
        if(msg.file_type.startsWith('image/')) return `<div class="attachment"><img src="${url}" alt="${msg.file_name}" onerror="this.parentElement.innerHTML='Failed to decode'"></div>`;
        if(msg.file_type.startsWith('video/')) return `<div class="attachment"><video controls><source src="${url}" type="${msg.file_type}"></video></div>`;
        if(msg.file_type.startsWith('audio/')) return `<div class="attachment"><audio controls src="${url}"></audio></div>`;
        return `<div class="attachment"><div class="file-preview" onclick="window.open('${url}')">📄 ${escapeHtml(msg.file_name)}</div></div>`;
    }
    function updateBubble(id) {
        const el = document.getElementById(`msg-${id}`);
        if(!el) return;
        const msg = messages[id];
        el.className = `message-bubble ${msg.sender_id===currentUser.id?'message-self':'message-other'}`;
        if(msg.is_deleted) el.classList.add('deleted-bubble');
        el.innerHTML = buildHTML(msg);
    }
    function renderAll() {
        messagesList.innerHTML = '';
        messageIds.forEach(id => { if(messages[id]) { renderMessage(messages[id]); } });
    }
    function scrollBottom() {
        document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
    }

    // --- Actions ---
    window.replyTo = function(id){ replyToId=id; const m=messages[id]; if(m){ replyPreviewText.textContent=`Replying to ${m.display_name||m.username}: ${truncate(m.content,30)}`; replyPreview.classList.remove('hidden'); } };
    cancelReply.addEventListener('click', ()=>{ replyToId=null; replyPreview.classList.add('hidden'); });
    window.editMsg = function(id){
        const newContent = prompt('Edit:', messages[id]?.content);
        if(newContent!==null && newContent.trim()!=='') ws.send(JSON.stringify({type:'edit_message', message_id:id, content:newContent}));
    };
    window.deleteMsg = function(id){
        if(confirm('Delete permanently?')) ws.send(JSON.stringify({type:'delete_message', message_id:id}));
    };

    // --- Sending ---
    composeForm.addEventListener('submit', (e)=>{
        e.preventDefault();
        const content = messageInput.value.trim();
        if(!content && !pendingFile) return;
        const msg = { type:'chat_message', content, reply_to_id:replyToId, client_id:Date.now().toString(36)+Math.random().toString(36).slice(2) };
        if(pendingFile){
            msg.file_path = pendingFile.file_path;
            msg.file_type = pendingFile.file_type;
            msg.file_name = pendingFile.file_name;
            pendingFile = null;
        }
        ws.send(JSON.stringify(msg));
        messageInput.value = '';
        clearReply();
    });
    function clearReply(){ replyToId=null; replyPreview.classList.add('hidden'); }

    // -- Typing --
    messageInput.addEventListener('input', ()=>{
        ws.send(JSON.stringify({type:'typing', is_typing:true}));
        clearTimeout(typingTimer);
        typingTimer = setTimeout(()=> ws.send(JSON.stringify({type:'typing', is_typing:false})), 2000);
    });

    // -- File upload (chunked) --
    attachBtn.addEventListener('click', ()=> fileInput.click());
    fileInput.addEventListener('change', async (e)=>{
        const file = e.target.files[0];
        if(!file) return;
        const CHUNK = 5*1024*1024;
        const total = Math.ceil(file.size / CHUNK);
        const uploadId = Date.now().toString(36)+Math.random().toString(36).slice(2);
        uploadProgress.classList.remove('hidden');
        uploadFilename.textContent = file.name;
        uploadBar.value=0; uploadBar.max=100;
        for(let i=0;i<total;i++){
            const start = i*CHUNK, end = Math.min(start+CHUNK, file.size);
            const blob = file.slice(start,end);
            const fd = new FormData(); fd.append('file', blob);
            const url = `${API}/upload_chunk?chunk_index=${i}&total_chunks=${total}&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type||'application/octet-stream')}&upload_id=${uploadId}`;
            try{
                const res = await fetch(url, {method:'POST', body:fd, headers:{token}});
                if(!res.ok) throw new Error('Upload failed');
                const data = await res.json();
                if(data.status==='complete'){
                    pendingFile = {file_path:data.file_path, file_type:data.file_type, file_name:data.file_name};
                    alert('File ready! Add a message and send.');
                    uploadProgress.classList.add('hidden');
                    break;
                }
                uploadBar.value = ((i+1)/total)*100;
            }catch(err){
                alert('Upload error: '+err.message);
                uploadProgress.classList.add('hidden');
                break;
            }
        }
        fileInput.value='';
    });

    // -- Load older --
    loadOlderBtn.addEventListener('click', ()=>{
        if(ws) ws.send(JSON.stringify({type:'load_messages', before_id: oldestMessageId, limit:50}));
    });

    function loadMessages(){
        if(ws && ws.readyState===WebSocket.OPEN) ws.send(JSON.stringify({type:'load_messages', limit:50}));
    }

    // --- Settings ---
    settingsBtn.addEventListener('click', ()=>{
        settingDisplayName.value = currentUser?.display_name || '';
        if(currentUser?.avatar_path){
            avatarPreview.src = `${API}/download/${currentUser.avatar_path}?token=${token}`;
            avatarPreview.style.display='block';
        }else avatarPreview.style.display='none';
        settingsModal.classList.remove('hidden');
    });
    closeSettingsBtn.addEventListener('click', ()=> settingsModal.classList.add('hidden'));
    saveSettingsBtn.addEventListener('click', async ()=>{
        const newName = settingDisplayName.value.trim();
        if(newName !== currentUser.display_name){
            await fetch(`${API}/update_profile?display_name=${encodeURIComponent(newName)}`, {method:'POST', headers:{token}});
            currentUser.display_name = newName;
        }
        const avatarFile = settingAvatar.files[0];
        if(avatarFile){
            const fd = new FormData(); fd.append('file', avatarFile);
            const res = await fetch(`${API}/upload_avatar`, {method:'POST', body:fd, headers:{token}});
            if(res.ok){
                const data = await res.json();
                currentUser.avatar_path = data.avatar_path;
                avatarPreview.src = `${API}/download/${data.avatar_path}?token=${token}`;
            }
        }
        const theme = themeSelect.value;
        if(theme==='theme-custom'){
            localStorage.setItem('customSelfColor', customSelfColor.value);
            localStorage.setItem('customOtherColor', customOtherColor.value);
            localStorage.setItem('customTextColor', customTextColor.value);
        }
        applyTheme(theme);
        settingsModal.classList.add('hidden');
    });
    themeSelect.addEventListener('change', (e)=>{
        if(e.target.value==='theme-custom') customThemeSettings.classList.remove('hidden');
        else customThemeSettings.classList.add('hidden');
    });

    logoutBtn.addEventListener('click', async ()=>{
        if(ws) ws.close();
        if(token) await fetch(`${API}/logout?token=${encodeURIComponent(token)}`, {method:'GET'});
        localStorage.removeItem('token');
        token=null; currentUser=null; messages={}; messageIds=[];
        authScreen.classList.remove('hidden'); chatScreen.classList.add('hidden');
    });

    // --- Notification permission ---
    if(window.Notification && Notification.permission==='default') Notification.requestPermission();

    // --- Utils ---
    function truncate(s,n){ return s.length>n ? s.slice(0,n-1)+'…' : s; }
    function escapeHtml(t){ const d=document.createElement('div'); d.textContent=t; return d.innerHTML; }
    function formatTime(ms){
        const d = new Date(ms), now = new Date();
        if(d.toDateString()===now.toDateString()) return `Today at ${d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}`;
        return d.toLocaleDateString() +' '+ d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
    }

    // -- Init --
    loadTheme();
    (async ()=>{
        if(token && await autoLogin()) showChat();
    })();
})();