/**
 * chat.js – SexyChat Frontend Logic (Phase 2)
 *
 * Features:
 *  - Socket.io with JWT reconnect
 *  - AES-GCM Encryption (via crypto.js)
 *  - PM Persistence & History
 *  - Violet AI (Transit-encrypted)
 *  - Trial/Paywall management
 */

"use strict";

const socket = io({
    autoConnect: false,
    auth: { token: localStorage.getItem("sexychat_token") }
});

const state = {
    username: null,
    isAdmin: false,
    role: "user",
    isRegistered: false,
    hasAiAccess: false,
    aiMessagesUsed: 0,
    currentRoom: "lobby",
    pms: {}, // room -> { username, key, messages: [] }
    nicklist: [],
    ignoredUsers: new Set(),
    cryptoKey: null, // derived from password
    isSidebarOpen: window.innerWidth > 768,
    authMode: "guest"
};

const AI_BOT_NAME = "Violet";
const AI_FREE_LIMIT = 3;

// ── Selectors ─────────────────────────────────────────────────────────────

const $ = (id) => document.getElementById(id);
const joinScreen     = $("join-screen");
const chatScreen     = $("chat-screen");
const joinForm       = $("join-form");
const usernameInput  = $("username-input");
const passwordInput  = $("password-input");
const emailInput     = $("email-input");
const modPassword    = $("mod-password-input");
const joinBtn        = $("join-btn");
const joinError      = $("join-error");
const authTabs       = document.querySelectorAll(".auth-tab");
const sidebar        = $("nicklist-sidebar");
const nicklist       = $("nicklist");
const tabBar         = $("tab-bar");
const panels         = $("panels");
const messageForm    = $("message-form");
const messageInput   = $("message-input");
const logoutBtn      = $("logout-btn");
const pmModal        = $("pm-modal");
const paywallModal   = $("paywall-modal");
const contextMenu    = $("context-menu");
const trialBadge     = $("violet-trial-badge");
const violetTyping   = $("violet-typing");
const settingsModal  = $("settings-modal");

// ── Auth & Init ───────────────────────────────────────────────────────────

// Toggle Auth Modes
authTabs.forEach(tab => {
    tab.addEventListener("click", () => {
        authTabs.forEach(t => t.classList.remove("active"));
        tab.classList.add("active");
        state.authMode = tab.dataset.mode;
        
        // UI visibility based on mode
        const isAuth = state.authMode !== "guest";
        const isReg  = state.authMode === "register";
        
        document.querySelectorAll(".auth-only").forEach(el => el.classList.toggle("hidden", !isAuth));
        document.querySelectorAll(".register-only").forEach(el => el.classList.toggle("hidden", !isReg));
        
        usernameInput.placeholder = isAuth ? "Username" : "Choose your nickname";
        passwordInput.required    = isAuth;
    });
});

// Join the Room
joinForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const username = usernameInput.value.trim();
    const password = passwordInput.value.trim();
    const email    = emailInput.value.trim();
    const modPw    = modPassword.value.trim();

    if (!username) return;
    if (state.authMode !== "guest" && !password) return;

    joinBtn.disabled = true;
    joinBtn.innerText = "Connecting...";

    // Derive Encryption Key if password provided
    if (password) {
        try {
            state.cryptoKey = await SexyChato.deriveKey(password, username);
        } catch (err) {
            console.error("Key derivation failed", err);
        }
    }

    socket.connect();
    socket.emit("join", {
        mode: state.authMode,
        username,
        password,
        email,
        mod_password: modPw
    });
});

// Handle Token Restore on Load
window.addEventListener("DOMContentLoaded", () => {
    // ── Restore Theme from localStorage ────────────────────────────────────
    const savedTheme = localStorage.getItem("sexychat_theme") || "midnight-purple";
    document.documentElement.setAttribute("data-theme", savedTheme);
    
    // Update active theme button if it exists
    const themeButtons = document.querySelectorAll("[data-theme-button]");
    themeButtons.forEach(btn => {
        btn.classList.toggle("active", btn.dataset.themeButton === savedTheme);
    });

    const token = localStorage.getItem("sexychat_token");
    if (token) {
        // Auto-restore session from stored JWT
        joinBtn.disabled = true;
        joinBtn.innerText = "Restoring session...";
        socket.connect();
        socket.emit("join", { mode: "restore" });

        // If restore fails, reset the form so user can log in manually
        const restoreTimeout = setTimeout(() => {
            joinBtn.disabled = false;
            joinBtn.innerText = "Enter the Room";
        }, 5000);

        const origJoined = socket.listeners("joined");
        socket.once("joined", () => clearTimeout(restoreTimeout));
        socket.once("error", () => {
            clearTimeout(restoreTimeout);
            joinBtn.disabled = false;
            joinBtn.innerText = "Enter the Room";
        });
    }
});

// ── Socket Events ──────────────────────────────────────────────────────────

socket.on("joined", (data) => {
    state.username = data.username;
    state.isAdmin = data.is_admin;
    state.role = data.role || "user";
    state.isRegistered = data.is_registered;
    state.hasAiAccess = data.has_ai_access;
    state.aiMessagesUsed = data.ai_messages_used;
    state.email = data.email || null;

    if (data.token) localStorage.setItem("sexychat_token", data.token);
    if (data.ignored_list) state.ignoredUsers = new Set(data.ignored_list);

    $("my-username-badge").innerText = state.username;
    joinScreen.classList.add("hidden");
    chatScreen.classList.remove("hidden");
    updateVioletBadge();

    // Show admin panel button for mods+
    const adminBtn = $("admin-btn");
    if (adminBtn) adminBtn.classList.toggle("hidden", !state.isAdmin);
});

socket.on("error", (data) => {
    joinError.innerText = data.msg;
    joinBtn.disabled = false;
    joinBtn.innerText = "Enter the Room";
    if (data.msg.includes("Session expired")) {
        localStorage.removeItem("sexychat_token");
    }
});

socket.on("nicklist", (data) => {
    state.nicklist = data.users;
    renderNicklist();
    $("user-count-badge").innerText = `${data.users.length} online`;
});

socket.on("system", (data) => {
    addMessage("lobby", { system: true, text: data.msg, ts: data.ts });
});

socket.on("message", (data) => {
    if (state.ignoredUsers.has(data.username)) return;
    addMessage("lobby", {
        sender: data.username,
        text: data.text,
        ts: data.ts,
        isAdmin: data.is_admin,
        isRegistered: data.is_registered,
        sent: data.username === state.username
    });
});

// ── Private Messaging ─────────────────────────────────────────────────────

socket.on("pm_invite", async (data) => {
    if (state.pms[data.room]) return; // Already accepted
    // Store the room key for later use
    if (data.room_key) {
        state._pendingRoomKeys = state._pendingRoomKeys || {};
        state._pendingRoomKeys[data.room] = data.room_key;
    }
    $("pm-modal-title").innerText = `${data.from} wants to whisper with you privately.`;
    pmModal.classList.remove("hidden");
    
    $("pm-accept-btn").onclick = () => {
        socket.emit("pm_accept", { room: data.room });
        openPMTab(data.from, data.room, data.room_key);
        pmModal.classList.add("hidden");
    };
    $("pm-decline-btn").onclick = () => pmModal.classList.add("hidden");
});

socket.on("pm_ready", (data) => {
    openPMTab(data.with, data.room, data.room_key);
});

async function openPMTab(otherUser, room, roomKeyB64) {
    if (state.pms[room]) {
        switchTab(room);
        return;
    }

    state.pms[room] = { username: otherUser, messages: [], sharedKey: null };

    // Import the server-provided room key for user-to-user PMs
    const isViolet = otherUser.toLowerCase() === "violet";
    if (!isViolet && roomKeyB64) {
        try {
            state.pms[room].sharedKey = await SexyChato.importKeyBase64(roomKeyB64);
        } catch (err) {
            console.error("Failed to import room key", err);
        }
    }
    
    // Create Tab
    let title = `👤 ${otherUser}`;
    if (otherUser.toLowerCase() === "violet") title = `🤖 Violet`;

    const tab = document.createElement("button");
    tab.className = "tab-btn";
    tab.dataset.room = room;
    tab.id = `tab-${room}`;
    tab.innerHTML = `<span>${title}</span>`;
    tab.onclick = () => switchTab(room);
    tabBar.appendChild(tab);

    // Create Panel
    const panel = document.createElement("div");
    panel.className = "panel";
    panel.id = `panel-${room}`;
    panel.dataset.room = room;
    panel.innerHTML = `
        <div id="messages-${room}" class="messages" role="log"></div>
        ${otherUser.toLowerCase() === 'violet' ? `<div id="typing-${room}" class="typing-indicator hidden">Violet is typing...</div>` : ''}
    `;
    panels.appendChild(panel);

    switchTab(room);

    // Load History if registered
    if (state.isRegistered && state.cryptoKey) {
        try {
            const resp = await fetch(`/api/pm/history?with=${encodeURIComponent(otherUser)}`, {
                headers: { "Authorization": `Bearer ${localStorage.getItem("sexychat_token")}` }
            });
            const histData = await resp.json();

            // Use room_key from history response if we don't have one yet
            if (!isViolet && histData.room_key && !state.pms[room].sharedKey) {
                try {
                    state.pms[room].sharedKey = await SexyChato.importKeyBase64(histData.room_key);
                } catch (err) {
                    console.error("Failed to import history room key", err);
                }
            }

            // Pick the right decryption key: room key for users, personal key for Violet
            const decryptKey = isViolet ? state.cryptoKey : (state.pms[room].sharedKey || state.cryptoKey);

            if (histData.messages) {
                for (const m of histData.messages) {
                    try {
                        const plain = await SexyChato.decrypt(decryptKey, m.ciphertext, m.nonce);
                        addMessage(room, {
                            sender: m.from_me ? state.username : otherUser,
                            text: plain,
                            ts: m.ts,
                            sent: m.from_me
                        });
                    } catch (err) {
                        addMessage(room, {
                            sender: m.from_me ? state.username : otherUser,
                            text: "[Could not decrypt message]",
                            ts: m.ts,
                            sent: m.from_me
                        });
                    }
                }
            }
        } catch (err) {
            console.error("Failed to load PM history", err);
        }
    }
}

socket.on("pm_message", async (data) => {
    if (state.ignoredUsers.has(data.from)) return;
    let text = data.text;
    if (data.ciphertext) {
        // Pick the right key: room shared key for user-to-user, personal key for Violet
        const pm = state.pms[data.room];
        const decryptKey = pm?.sharedKey || state.cryptoKey;
        if (decryptKey) {
            try {
                text = await SexyChato.decrypt(decryptKey, data.ciphertext, data.nonce);
            } catch (err) {
                text = "[Encrypted Message - Could not decrypt]";
            }
        } else {
            text = "[Encrypted Message - No key available]";
        }
    }
    
    addMessage(data.room, {
        sender: data.from,
        text: text,
        ts: data.ts,
        sent: data.from === state.username
    });

    if (state.currentRoom !== data.room) {
        const tab = $(`tab-${data.room}`);
        if (tab) tab.classList.add("unread"); 
    }
});

// ── Violet AI Logic ───────────────────────────────────────────────────────

socket.on("violet_typing", (data) => {
    const room = data.room || "lobby";
    const indicator = $(`typing-${room}`);
    if (indicator) {
        indicator.classList.toggle("hidden", !data.busy);
    }
});

socket.on("ai_response", async (data) => {
    if (data.error === "ai_limit_reached") {
        paywallModal.classList.remove("hidden");
        return;
    }

    state.aiMessagesUsed = data.ai_messages_used;
    state.hasAiAccess = data.has_ai_access;
    updateVioletBadge();

    const room = data.room || "ai-violet";
    let text = data.text || "[Decryption Error]";
    if (data.ciphertext && state.cryptoKey) {
        text = await SexyChato.decrypt(state.cryptoKey, data.ciphertext, data.nonce);
    }

    addMessage(room, {
        sender: AI_BOT_NAME,
        text: text,
        ts: data.ts || new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        sent: false
    });
});

socket.on("ai_unlock", (data) => {
    state.hasAiAccess = data.has_ai_access !== undefined ? data.has_ai_access : true;
    updateVioletBadge();
    paywallModal.classList.add("hidden");
    if (data.msg) addMessage("ai-violet", { system: true, text: data.msg });
});

socket.on("ignore_status", (data) => {
    if (data.ignored) state.ignoredUsers.add(data.target);
    else state.ignoredUsers.delete(data.target);
    renderNicklist();
});

function updateVioletBadge() {
    if (!trialBadge) return;
    if (state.hasAiAccess) {
        trialBadge.classList.add("hidden");
    } else {
        const left = AI_FREE_LIMIT - state.aiMessagesUsed;
        trialBadge.innerText = Math.max(0, left);
        trialBadge.classList.toggle("hidden", left <= 0 && state.aiMessagesUsed < AI_FREE_LIMIT);
        if (left <= 0) {
            trialBadge.innerText = "!"; // Paywall indicator
        }
    }
}

// ── UI Actions ────────────────────────────────────────────────────────────

messageForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const text = messageInput.value.trim();
    if (!text) return;

    if (state.currentRoom === "lobby") {
        socket.emit("message", { text });
    } 
    else if (state.currentRoom.startsWith("pm:")) {
        const isVioletRoom = state.currentRoom.toLowerCase().endsWith(":violet");

        // /reset command in Violet PM clears conversation memory
        if (isVioletRoom && text.toLowerCase() === "/reset") {
            socket.emit("violet_reset");
            messageInput.value = "";
            messageInput.style.height = "auto";
            return;
        }
        
        if (isVioletRoom) {
            if (state.isRegistered && state.cryptoKey) {
                // AI Transit Encryption PM Flow
                const transitKeyB64 = await SexyChato.exportKeyBase64(state.cryptoKey);
                const encrypted = await SexyChato.encrypt(state.cryptoKey, text);
                
                socket.emit("pm_message", {
                    room: state.currentRoom,
                    ciphertext: encrypted.ciphertext,
                    nonce: encrypted.nonce,
                    transit_key: transitKeyB64
                });
            } else {
                // Guest/admin plaintext fallback
                socket.emit("pm_message", { room: state.currentRoom, text });
            }
        } else if (state.isRegistered && state.cryptoKey) {
            // User-to-user encrypted PM: use the shared room key if available
            const pm = state.pms[state.currentRoom];
            const encryptKey = pm?.sharedKey || state.cryptoKey;
            const encrypted = await SexyChato.encrypt(encryptKey, text);
            socket.emit("pm_message", {
                room: state.currentRoom,
                ciphertext: encrypted.ciphertext,
                nonce: encrypted.nonce
            });
        } else {
            // Guest PM (Plaintext)
            socket.emit("pm_message", { room: state.currentRoom, text });
        }
    }

    messageInput.value = "";
    messageInput.style.height = "auto";
});

// Enter to send, Shift+Enter for newline
messageInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey && prefs.enterToSend) {
        e.preventDefault();
        messageForm.requestSubmit();
    }
});

// Auto-expand textarea
messageInput.addEventListener("input", () => {
    messageInput.style.height = "auto";
    messageInput.style.height = (messageInput.scrollHeight) + "px";
});

function switchTab(room) {
    state.currentRoom = room;
    document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
    document.querySelectorAll(".panel").forEach(p => p.classList.remove("active"));
    
    const tab = $(`tab-${room}`);
    if (tab) {
        tab.classList.add("active");
        tab.classList.remove("unread");
    }
    $(`panel-${room}`).classList.add("active");
    
    // Scroll to bottom
    const box = $(`messages-${room}`);
    if (box) box.scrollTop = box.scrollHeight;
}

function formatTs(ts) {
    if (!ts || prefs.timeFormat === "24h") return ts || "";
    // Convert HH:MM (24h) to 12h
    const parts = (ts || "").match(/^(\d{1,2}):(\d{2})$/);
    if (!parts) return ts;
    let h = parseInt(parts[1], 10);
    const m = parts[2];
    const ampm = h >= 12 ? "PM" : "AM";
    h = h % 12 || 12;
    return `${h}:${m} ${ampm}`;
}

function addMessage(room, msg) {
    const list = $(`messages-${room}`);
    if (!list) return;

    const div = document.createElement("div");
    if (msg.system) {
        div.className = "msg msg-system";
        div.innerHTML = msg.text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
    } else {
        div.className = `msg ${msg.sent ? "msg-sent" : "msg-received"}`;
        div.innerHTML = `
            <div class="msg-meta">${formatTs(msg.ts)} ${msg.sender}</div>
            <div class="msg-bubble">${escapeHTML(msg.text)}</div>
        `;
    }

    list.appendChild(div);
    list.scrollTop = list.scrollHeight;
}

function renderNicklist() {
    nicklist.innerHTML = "";
    state.nicklist.forEach(u => {
        const li = document.createElement("li");
        const isIgnored = state.ignoredUsers.has(u.username);
        const isUnverified = u.is_registered && !u.is_verified;
        const roleIcon = {root: "👑", admin: "⚔️", mod: "🛡️"}[u.role] || "";
        
        li.innerHTML = `
            <span class="${isUnverified ? 'unverified' : ''}">
                ${roleIcon ? `<span class="mod-star">${roleIcon}</span> ` : ''}
                <span class="${isIgnored ? 'dimmed' : ''}">${u.username}</span>
                ${u.is_registered ? '<span class="reg-mark">✔</span>' : ''}
                ${isIgnored ? ' <small>(ignored)</small>' : ''}
                ${isUnverified ? ' <small>(unverified)</small>' : ''}
            </span>
        `;
        
        li.oncontextmenu = (e) => showContextMenu(e, u);
        li.onclick = () => {
             if (u.username !== state.username) socket.emit("pm_open", { target: u.username });
        };
        nicklist.appendChild(li);
    });
}

function showContextMenu(e, user) {
    e.preventDefault();
    if (user.username === state.username) return;

    // Position menu
    contextMenu.style.left = `${e.pageX}px`;
    contextMenu.style.top = `${e.pageY}px`;
    contextMenu.classList.remove("hidden");

    // Configure items
    const pmItem = contextMenu.querySelector('[data-action="pm"]');
    const ignoreItem = contextMenu.querySelector('[data-action="ignore"]');
    const unignoreItem = contextMenu.querySelector('[data-action="unignore"]');
    const verifyItem = contextMenu.querySelector('[data-action="verify"]');
    const modItems = contextMenu.querySelectorAll(".mod-item");

    const isIgnored = state.ignoredUsers.has(user.username);
    const isUnverified = user.is_registered && !user.is_verified;

    ignoreItem.classList.toggle("hidden", !state.isRegistered || isIgnored);
    unignoreItem.classList.toggle("hidden", !state.isRegistered || !isIgnored);
    
    // Verify option only for admins if target is unverified
    const showVerify = state.isAdmin && isUnverified;
    if (verifyItem) verifyItem.classList.toggle("hidden", !showVerify);

    modItems.forEach(el => {
        if (el.dataset.action !== "verify") {
            el.classList.toggle("hidden", !state.isAdmin);
        }
    });

    // Store target for click handler (uses event delegation below)
    contextMenu._targetUser = user.username;

    // Remove old inline onclick handlers and re-bind
    contextMenu.querySelectorAll(".menu-item").forEach(item => {
        item.onclick = () => {
            const action = item.dataset.action;
            executeMenuAction(action, contextMenu._targetUser);
            contextMenu.classList.add("hidden");
        };
    });
}

function executeMenuAction(action, target) {
    switch(action) {
        case "pm":
            socket.emit("pm_open", { target });
            break;
        case "ignore":
            socket.emit("user_ignore", { target });
            break;
        case "unignore":
            socket.emit("user_unignore", { target });
            break;
        case "kick":
            socket.emit("mod_kick", { target });
            break;
        case "mute":
            socket.emit("mod_mute", { target });
            break;
        case "ban":
            socket.emit("mod_ban", { target });
            break;
        case "kickban":
            socket.emit("mod_kickban", { target });
            break;
        case "verify":
            socket.emit("mod_verify", { target });
            break;
    }
}

// Global click to hide context menu
window.addEventListener("click", (e) => {
    const menu = $("context-menu");
    if (menu && !menu.contains(e.target)) {
        menu.classList.add("hidden");
    }
});

// ── Admin Tools ───────────────────────────────────────────────────────────

window.modKick = (u) => socket.emit("mod_kick", { target: u });
window.modBan  = (u) => socket.emit("mod_ban", { target: u });
window.modMute = (u) => socket.emit("mod_mute", { target: u });

// ── Modals & Misc ──────────────────────────────────────────────────────────

$("sidebar-toggle").onclick = () => {
    sidebar.classList.toggle("open");
};

// tab-ai-violet is created dynamically when user opens Violet PM
$("tab-lobby").onclick = () => switchTab("lobby");

$("close-paywall").onclick = () => paywallModal.classList.add("hidden");
$("unlock-btn").onclick = async () => {
    // In production, this redirects to a real payment gateway (Stripe Checkout).
    // The server-side webhook will unlock AI access after payment confirmation.
    // For now, show a placeholder message.
    alert("Payment integration coming soon. Contact the administrator to unlock Violet.");
};

logoutBtn.onclick = () => {
    localStorage.removeItem("sexychat_token");
    location.reload();
};

// ── Settings Panel ─────────────────────────────────────────────────────────

// Load saved preferences from localStorage
const prefs = {
    fontSize:    parseInt(localStorage.getItem("sc_fontsize") || "14"),
    timeFormat:  localStorage.getItem("sc_timeformat") || "12h",
    enterToSend: localStorage.getItem("sc_enter_send") !== "false",
    sounds:      localStorage.getItem("sc_sounds") !== "false",
    theme:       localStorage.getItem("sc_theme") || "midnight-purple",
};

// Apply saved font size on load
document.documentElement.style.setProperty("--chat-font-size", prefs.fontSize + "px");
// Apply saved theme on load
document.documentElement.setAttribute("data-theme", prefs.theme);

$("settings-btn").onclick = () => {
    // Populate current values
    $("settings-username").textContent = state.username || "—";
    $("settings-email").textContent = state.email || "Not set";
    $("settings-ai-status").textContent = state.hasAiAccess ? "✓ Unlimited" : `Free (${AI_FREE_LIMIT - state.aiMessagesUsed} left)`;
    $("settings-ai-used").textContent = state.aiMessagesUsed.toString();

    // Show password change only for registered users
    document.querySelectorAll(".registered-only").forEach(el =>
        el.classList.toggle("hidden", !state.isRegistered)
    );

    // Sync toggle states
    $("settings-fontsize").value = prefs.fontSize;
    $("settings-fontsize-val").textContent = prefs.fontSize + "px";
    document.querySelectorAll("[data-tf]").forEach(b => {
        b.classList.toggle("active", b.dataset.tf === prefs.timeFormat);
    });
    $("settings-enter-send").textContent = prefs.enterToSend ? "On" : "Off";
    $("settings-enter-send").classList.toggle("active", prefs.enterToSend);
    $("settings-sounds").textContent = prefs.sounds ? "On" : "Off";
    $("settings-sounds").classList.toggle("active", prefs.sounds);

    // Sync theme picker
    document.querySelectorAll(".theme-swatch").forEach(s => {
        s.classList.toggle("active", s.dataset.theme === prefs.theme);
    });

    settingsModal.classList.remove("hidden");
};

$("close-settings").onclick = () => settingsModal.classList.add("hidden");
settingsModal.addEventListener("click", (e) => {
    if (e.target === settingsModal) settingsModal.classList.add("hidden");
});

// Tab switching
document.querySelectorAll(".settings-tab").forEach(tab => {
    tab.addEventListener("click", () => {
        document.querySelectorAll(".settings-tab").forEach(t => t.classList.remove("active"));
        document.querySelectorAll(".settings-pane").forEach(p => p.classList.remove("active"));
        tab.classList.add("active");
        $("stab-" + tab.dataset.stab).classList.add("active");
    });
});

// Font size slider
$("settings-fontsize").addEventListener("input", (e) => {
    const val = parseInt(e.target.value);
    prefs.fontSize = val;
    localStorage.setItem("sc_fontsize", val);
    $("settings-fontsize-val").textContent = val + "px";
    document.documentElement.style.setProperty("--chat-font-size", val + "px");
});

// Theme picker
document.querySelectorAll(".theme-swatch").forEach(swatch => {
    swatch.addEventListener("click", () => {
        const theme = swatch.dataset.theme;
        prefs.theme = theme;
        localStorage.setItem("sc_theme", theme);
        document.documentElement.setAttribute("data-theme", theme);
        document.querySelectorAll(".theme-swatch").forEach(s => s.classList.remove("active"));
        swatch.classList.add("active");
    });
});

// Timestamp format toggle
document.querySelectorAll("[data-tf]").forEach(btn => {
    btn.addEventListener("click", () => {
        document.querySelectorAll("[data-tf]").forEach(b => b.classList.remove("active"));
        btn.classList.add("active");
        prefs.timeFormat = btn.dataset.tf;
        localStorage.setItem("sc_timeformat", btn.dataset.tf);
    });
});

// Enter-to-send toggle
$("settings-enter-send").addEventListener("click", () => {
    prefs.enterToSend = !prefs.enterToSend;
    localStorage.setItem("sc_enter_send", prefs.enterToSend);
    $("settings-enter-send").textContent = prefs.enterToSend ? "On" : "Off";
    $("settings-enter-send").classList.toggle("active", prefs.enterToSend);
});

// Sounds toggle
$("settings-sounds").addEventListener("click", () => {
    prefs.sounds = !prefs.sounds;
    localStorage.setItem("sc_sounds", prefs.sounds);
    $("settings-sounds").textContent = prefs.sounds ? "On" : "Off";
    $("settings-sounds").classList.toggle("active", prefs.sounds);
});

// Password change
$("settings-change-pw").addEventListener("click", () => {
    const oldPw     = $("settings-old-pw").value;
    const newPw     = $("settings-new-pw").value;
    const confirmPw = $("settings-confirm-pw").value;
    const msgEl     = $("settings-pw-msg");

    if (!oldPw || !newPw) {
        msgEl.textContent = "Please fill in both fields.";
        msgEl.className = "settings-msg error";
        msgEl.classList.remove("hidden");
        return;
    }
    if (newPw.length < 6) {
        msgEl.textContent = "New password must be at least 6 characters.";
        msgEl.className = "settings-msg error";
        msgEl.classList.remove("hidden");
        return;
    }
    if (newPw !== confirmPw) {
        msgEl.textContent = "Passwords do not match.";
        msgEl.className = "settings-msg error";
        msgEl.classList.remove("hidden");
        return;
    }

    socket.emit("change_password", { old_password: oldPw, new_password: newPw });
});

socket.on("password_changed", (data) => {
    const msgEl = $("settings-pw-msg");
    if (data.success) {
        msgEl.textContent = "✓ Password updated successfully.";
        msgEl.className = "settings-msg success";
        $("settings-old-pw").value = "";
        $("settings-new-pw").value = "";
        $("settings-confirm-pw").value = "";
    } else {
        msgEl.textContent = data.msg || "Failed to change password.";
        msgEl.className = "settings-msg error";
    }
    msgEl.classList.remove("hidden");
});

// Violet memory reset from settings
$("settings-violet-reset").addEventListener("click", () => {
    socket.emit("violet_reset");
    $("settings-violet-reset").textContent = "Memory Cleared!";
    setTimeout(() => { $("settings-violet-reset").textContent = "Reset Violet Memory"; }, 2000);
});

// Premium button (placeholder)
$("settings-upgrade").addEventListener("click", () => {
    alert("Premium subscriptions are coming soon! Stay tuned.");
});

function escapeHTML(str) {
    const p = document.createElement("p");
    p.textContent = str;
    return p.innerHTML;
}

// ── Role updated (live notification) ──────────────────────────────────────

socket.on("role_updated", (data) => {
    state.role = data.role;
    state.isAdmin = ["mod", "admin", "root"].includes(data.role);
    const adminBtn = $("admin-btn");
    if (adminBtn) adminBtn.classList.toggle("hidden", !state.isAdmin);
});

// ── Admin Panel ───────────────────────────────────────────────────────────

const adminModal = $("admin-modal");
const ROLE_POWER = { user: 0, mod: 1, admin: 2, root: 3 };

if ($("admin-btn")) {
    $("admin-btn").onclick = () => {
        adminModal.classList.remove("hidden");
        socket.emit("admin_get_users");
        socket.emit("admin_get_bans");
        socket.emit("admin_get_mutes");
    };
}

$("close-admin").onclick = () => adminModal.classList.add("hidden");
adminModal.addEventListener("click", (e) => {
    if (e.target === adminModal) adminModal.classList.add("hidden");
});

// Admin tab switching
document.querySelectorAll(".admin-tab").forEach(tab => {
    tab.addEventListener("click", () => {
        document.querySelectorAll(".admin-tab").forEach(t => t.classList.remove("active"));
        document.querySelectorAll(".admin-pane").forEach(p => p.classList.remove("active"));
        tab.classList.add("active");
        $("atab-" + tab.dataset.atab).classList.add("active");
    });
});

// Admin toast helper
function adminToast(msg) {
    const t = $("admin-toast");
    t.textContent = msg;
    t.classList.remove("hidden");
    setTimeout(() => t.classList.add("hidden"), 2500);
}

socket.on("admin_action_ok", (data) => {
    adminToast(data.msg);
    // Refresh the admin user list so buttons update
    socket.emit("admin_get_users");
    socket.emit("admin_get_bans");
    socket.emit("admin_get_mutes");
});

// ── Users pane ───────────────────────────────────────────────────────────

let adminUserCache = [];

socket.on("admin_users", (data) => {
    adminUserCache = data.users;
    renderAdminUsers(adminUserCache);
});

$("admin-user-search").addEventListener("input", (e) => {
    const q = e.target.value.toLowerCase();
    renderAdminUsers(adminUserCache.filter(u => u.username.toLowerCase().includes(q)));
});

function renderAdminUsers(users) {
    const list = $("admin-user-list");
    list.innerHTML = "";
    const myPower = ROLE_POWER[state.role] || 0;

    users.forEach(u => {
        const row = document.createElement("div");
        row.className = "admin-user-row";

        const canEditRole = myPower > ROLE_POWER[u.role] && myPower >= ROLE_POWER.admin;
        const canVerify = myPower >= ROLE_POWER.mod;
        const canToggleAI = myPower >= ROLE_POWER.admin && u.role !== "root";

        // Build role selector
        let roleHTML = "";
        if (canEditRole) {
            const opts = ["user", "mod"];
            if (myPower >= ROLE_POWER.root) opts.push("admin");
            roleHTML = `<select class="au-select" data-uid="${u.id}" data-action="set-role">
                ${opts.map(r => `<option value="${r}" ${u.role === r ? "selected" : ""}>${r}</option>`).join("")}
            </select>`;
        } else {
            roleHTML = `<span class="au-role ${u.role}">${u.role}</span>`;
        }

        row.innerHTML = `
            <span class="au-name">${escapeHTML(u.username)}</span>
            ${roleHTML}
            <span class="au-badges">
                ${u.online ? '<span class="au-badge online">online</span>' : ''}
                ${u.is_verified ? '<span class="au-badge verified">verified</span>' : '<span class="au-badge unverified">unverified</span>'}
                ${u.has_ai_access ? '<span class="au-badge ai-on">AI</span>' : ''}
            </span>
            <span class="au-actions">
                ${canVerify ? `<button class="au-btn" data-uid="${u.id}" data-action="verify">${u.is_verified ? 'Unverify' : 'Verify'}</button>` : ''}
                ${canToggleAI ? `<button class="au-btn" data-uid="${u.id}" data-action="toggle-ai">${u.has_ai_access ? 'Revoke AI' : 'Grant AI'}</button>` : ''}
            </span>
        `;
        list.appendChild(row);
    });

    // Event delegation for actions
    list.onclick = (e) => {
        const btn = e.target.closest("[data-action]");
        if (!btn) return;
        const uid = parseInt(btn.dataset.uid);
        const action = btn.dataset.action;
        if (action === "verify") socket.emit("admin_verify_user", { user_id: uid });
        else if (action === "toggle-ai") socket.emit("admin_toggle_ai", { user_id: uid });
    };
    list.onchange = (e) => {
        const sel = e.target.closest("[data-action='set-role']");
        if (!sel) return;
        const uid = parseInt(sel.dataset.uid);
        socket.emit("admin_set_role", { user_id: uid, role: sel.value });
    };
}

// ── Bans pane ────────────────────────────────────────────────────────────

socket.on("admin_bans", (data) => {
    const list = $("admin-ban-list");
    const empty = $("admin-no-bans");
    list.innerHTML = "";
    empty.classList.toggle("hidden", data.bans.length > 0);

    data.bans.forEach(b => {
        const row = document.createElement("div");
        row.className = "admin-ban-row";
        row.innerHTML = `
            <div>
                <span class="ab-name">${escapeHTML(b.username)}</span>
                ${b.ip ? `<small style="color:var(--text-dim);margin-left:8px">${b.ip}</small>` : ''}
                <small style="color:var(--text-dim);margin-left:8px">${b.created_at}</small>
            </div>
            <button class="au-btn danger" data-bid="${b.id}">Unban</button>
        `;
        list.appendChild(row);
    });

    list.onclick = (e) => {
        const btn = e.target.closest("[data-bid]");
        if (!btn) return;
        socket.emit("admin_unban", { ban_id: parseInt(btn.dataset.bid) });
        btn.closest(".admin-ban-row").remove();
    };
});

// ── Mutes pane ───────────────────────────────────────────────────────────

socket.on("admin_mutes", (data) => {
    const list = $("admin-mute-list");
    const empty = $("admin-no-mutes");
    list.innerHTML = "";
    empty.classList.toggle("hidden", data.mutes.length > 0);

    data.mutes.forEach(m => {
        const row = document.createElement("div");
        row.className = "admin-mute-row";
        row.innerHTML = `
            <div>
                <span class="am-name">${escapeHTML(m.username)}</span>
                <small style="color:var(--text-dim);margin-left:8px">${m.created_at}</small>
            </div>
            <button class="au-btn danger" data-mid="${m.id}">Unmute</button>
        `;
        list.appendChild(row);
    });

    list.onclick = (e) => {
        const btn = e.target.closest("[data-mid]");
        if (!btn) return;
        socket.emit("admin_unmute", { mute_id: parseInt(btn.dataset.mid) });
        btn.closest(".admin-mute-row").remove();
    };
});