document.addEventListener('DOMContentLoaded', () => {
    const fileUpload = document.getElementById('file-upload');
    const chatForm = document.getElementById('chat-form');
    const chatInput = document.getElementById('chat-input');
    const messagesList = document.getElementById('messages-list');
    const typingIndicator = document.getElementById('typing-indicator');

    // Emoji list for reactions
    const EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🔥', '✅', '🚀'];

    // Scroll to bottom
    messagesList.scrollTop = messagesList.scrollHeight;

    const currentChannel = new URLSearchParams(window.location.search).get('channel_id') || 1;
    let typingTimeout;

    // Notification Permission
    if ("Notification" in window && Notification.permission === "default") {
        Notification.requestPermission();
    }

    // WebSocket for real-time
    let ws;
    let voiceHandler;

    function connectWS() {
        try {
            ws = new WebSocket('ws://' + window.location.hostname + ':8080');
            
            if (typeof VoiceChannel !== 'undefined') {
                voiceHandler = new VoiceChannel(ws);
            }

            ws.onmessage = (e) => {
                const msg = JSON.parse(e.data);
                
                // Voice signaling
                if (msg.type && msg.type.startsWith('voice_')) {
                    if (voiceHandler) voiceHandler.handleSignaling(msg);
                    return;
                }

                if (msg.type === 'message') {
                    const data = JSON.parse(msg.data);
                    if (data.channel_id == currentChannel) {
                        appendMessage(data);
                        messagesList.scrollTop = messagesList.scrollHeight;

                        // Desktop Notifications for mentions
                        if (data.content.includes(`@${window.currentUsername}`) && data.user_id != window.currentUserId) {
                            if (Notification.permission === "granted" && !window.isDndMode) {
                                new Notification(`Mention in #${window.currentChannelName}`, {
                                    body: `${data.username}: ${data.content}`,
                                    icon: data.avatar_url || ''
                                });
                            }
                        }
                    }
                } else if (msg.type === 'typing') {
                    if (msg.channel_id == currentChannel && msg.user_id != window.currentUserId) {
                        showTyping(msg.username);
                    }
                } else if (msg.type === 'reaction') {
                    updateReactionUI(msg.message_id, msg.reactions);
                } else if (msg.type === 'message_edit') {
                    const el = document.querySelector(`.message-item[data-id="${msg.message_id}"] .message-text`);
                    if (el) el.innerHTML = msg.content.replace(/\n/g, '<br>');
                } else if (msg.type === 'message_delete') {
                    document.querySelector(`.message-item[data-id="${msg.message_id}"]`)?.remove();
                } else if (msg.type === 'presence') {
                    updatePresenceUI(msg.user_id, msg.status);
                }
            };
            ws.onopen = () => {
                ws.send(JSON.stringify({
                    type: 'presence',
                    user_id: window.currentUserId,
                    status: 'online'
                }));
            };
            ws.onclose = () => setTimeout(connectWS, 3000);
        } catch (e) {
            console.warn('WebSocket connection failed.');
        }
    }
    connectWS();

    function showTyping(username) {
        typingIndicator.textContent = `${username} is typing...`;
        clearTimeout(typingTimeout);
        typingTimeout = setTimeout(() => {
            typingIndicator.textContent = '';
        }, 3000);
    }

    chatInput.addEventListener('input', () => {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'typing',
                channel_id: currentChannel,
                user_id: window.currentUserId,
                username: window.currentUsername
            }));
        }
    });

    chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const content = chatInput.value.trim();
        const file = fileUpload.files[0];
        if (!content && !file) return;

        chatInput.value = '';
        const formData = new FormData();
        formData.append('content', content);
        formData.append('channel_id', currentChannel);
        
        const progressContainer = document.getElementById('upload-progress-container');
        const progressBar = document.getElementById('upload-progress-bar');
        const progressPercent = document.getElementById('upload-percentage');
        const progressFilename = document.getElementById('upload-filename');

        if (file) {
            formData.append('file', file);
            fileUpload.value = ''; // Clear file input
            
            // Show progress bar
            progressContainer.style.display = 'block';
            progressFilename.textContent = `Uploading: ${file.name}`;
            progressBar.style.width = '0%';
            progressPercent.textContent = '0%';
        }

        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'api_v1_messages.php', true);

        xhr.upload.onprogress = (ev) => {
            if (ev.lengthComputable && file) {
                const percent = Math.round((ev.loaded / ev.total) * 100);
                progressBar.style.width = percent + '%';
                progressPercent.textContent = percent + '%';
            }
        };

        xhr.onload = () => {
            if (xhr.status === 200) {
                const result = JSON.parse(xhr.responseText);
                if (result.success) {
                    if (ws && ws.readyState === WebSocket.OPEN) {
                        ws.send(JSON.stringify({
                            type: 'message',
                            data: JSON.stringify({
                                ...result.message,
                                channel_id: currentChannel
                            })
                        }));
                    } else {
                        appendMessage(result.message);
                        messagesList.scrollTop = messagesList.scrollHeight;
                    }
                } else {
                    alert(result.error || 'Failed to send message');
                }
            }
            progressContainer.style.display = 'none';
        };

        xhr.onerror = () => {
            console.error('XHR Error');
            progressContainer.style.display = 'none';
            alert('An error occurred during the upload.');
        };

        xhr.send(formData);
    });

    // Handle Reaction Clicks
    document.addEventListener('click', (e) => {
        const badge = e.target.closest('.reaction-badge');
        if (badge) {
            const msgId = badge.parentElement.dataset.messageId;
            const emoji = badge.dataset.emoji;
            toggleReaction(msgId, emoji);
            return;
        }

        const addBtn = e.target.closest('.add-reaction-btn');
        if (addBtn) {
            const msgId = addBtn.parentElement.dataset.messageId;
            showEmojiPicker(addBtn, msgId);
            return;
        }

        // Close picker if click outside
        if (!e.target.closest('.emoji-picker')) {
            const picker = document.querySelector('.emoji-picker');
            if (picker) picker.remove();
        }
    });

    async function toggleReaction(messageId, emoji) {
        try {
            const resp = await fetch('api_v1_reactions.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message_id: messageId, emoji: emoji })
            });
            const result = await resp.json();
            if (result.success) {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify({
                        type: 'reaction',
                        message_id: messageId,
                        reactions: result.reactions
                    }));
                }
                updateReactionUI(messageId, result.reactions);
            }
        } catch (e) { console.error(e); }
    }

    function showEmojiPicker(anchor, messageId) {
        document.querySelector('.emoji-picker')?.remove();
        const picker = document.createElement('div');
        picker.className = 'emoji-picker';
        EMOJIS.forEach(emoji => {
            const span = document.createElement('span');
            span.textContent = emoji;
            span.onclick = () => {
                toggleReaction(messageId, emoji);
                picker.remove();
            };
            picker.appendChild(span);
        });
        document.body.appendChild(picker);
        const rect = anchor.getBoundingClientRect();
        picker.style.top = `${rect.top - picker.offsetHeight - 5}px`;
        picker.style.left = `${rect.left}px`;
    }

    function updateReactionUI(messageId, reactions) {
        const container = document.querySelector(`.message-reactions[data-message-id="${messageId}"]`);
        if (!container) return;

        const addBtn = container.querySelector('.add-reaction-btn');
        container.innerHTML = '';
        reactions.forEach(r => {
            const badge = document.createElement('span');
            const userList = r.users.split(',');
            const active = userList.includes(String(window.currentUserId));
            badge.className = `reaction-badge ${active ? 'active' : ''}`;
            badge.dataset.emoji = r.emoji;
            badge.innerHTML = `${r.emoji} <span class="count">${r.count}</span>`;
            container.appendChild(badge);
        });
        container.appendChild(addBtn);
    }

    function updatePresenceUI(userId, status) {
        const memberItem = document.querySelector(`.start-dm-btn[data-user-id="${userId}"] .message-avatar`);
        if (memberItem) {
            let indicator = memberItem.querySelector('.presence-indicator');
            if (!indicator) {
                indicator = document.createElement('div');
                indicator.className = 'presence-indicator';
                memberItem.appendChild(indicator);
            }
            indicator.style.position = 'absolute';
            indicator.style.bottom = '0';
            indicator.style.right = '0';
            indicator.style.width = '10px';
            indicator.style.height = '10px';
            indicator.style.borderRadius = '50%';
            indicator.style.border = '2px solid var(--bg-members)';
            indicator.style.backgroundColor = status === 'online' ? '#23a559' : '#80848e';
        }
    }

    // Voice
    if (voiceHandler) {
        document.querySelectorAll('.voice-item').forEach(item => {
            item.addEventListener('click', () => {
                const cid = item.dataset.channelId;
                if (voiceHandler.currentChannelId == cid) {
                    voiceHandler.leave();
                    item.classList.remove('active');
                } else {
                    voiceHandler.join(cid);
                    document.querySelectorAll('.voice-item').forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                }
            });
        });
    }

    // Message Actions (Edit/Delete)
    document.addEventListener('click', async (e) => {
        const editBtn = e.target.closest('.action-btn.edit');
        if (editBtn) {
            const msgId = editBtn.dataset.id;
            const msgItem = editBtn.closest('.message-item');
            const textEl = msgItem.querySelector('.message-text');
            const originalContent = textEl.innerText;
            
            const input = document.createElement('input');
            input.type = 'text';
            input.className = 'form-control bg-dark text-white';
            input.value = originalContent;
            
            textEl.innerHTML = '';
            textEl.appendChild(input);
            input.focus();
            
            input.onkeydown = async (ev) => {
                if (ev.key === 'Enter') {
                    const newContent = input.value.trim();
                    if (newContent && newContent !== originalContent) {
                        const resp = await fetch('api_v1_messages.php', {
                            method: 'PUT',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ id: msgId, content: newContent })
                        });
                        if ((await resp.json()).success) {
                            textEl.innerHTML = newContent.replace(/\n/g, '<br>');
                            ws?.send(JSON.stringify({ type: 'message_edit', message_id: msgId, content: newContent }));
                        }
                    } else {
                        textEl.innerHTML = originalContent.replace(/\n/g, '<br>');
                    }
                } else if (ev.key === 'Escape') {
                    textEl.innerHTML = originalContent.replace(/\n/g, '<br>');
                }
            };
            return;
        }

        const deleteBtn = e.target.closest('.action-btn.delete');
        if (deleteBtn) {
            if (!confirm('Delete this message?')) return;
            const msgId = deleteBtn.dataset.id;
            const resp = await fetch('api_v1_messages.php', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: msgId })
            });
            if ((await resp.json()).success) {
                deleteBtn.closest('.message-item').remove();
                ws?.send(JSON.stringify({ type: 'message_delete', message_id: msgId }));
            }
            return;
        }

        const pinBtn = e.target.closest('.action-btn.pin');
        if (pinBtn) {
            const msgId = pinBtn.dataset.id;
            const isPinned = pinBtn.dataset.pinned == '1';
            const action = isPinned ? 'unpin' : 'pin';
            
            const resp = await fetch('api_v1_messages.php', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: msgId, action: action })
            });
            const result = await resp.json();
            if (result.success) {
                location.reload(); // Simplest way to reflect changes across UI
            }
            return;
        }

        const pinnedMessagesBtn = document.getElementById('pinned-messages-btn');
        if (e.target.closest('#pinned-messages-btn')) {
            const container = document.getElementById('pinned-messages-container');
            container.innerHTML = '<div class="p-3 text-center text-muted">Loading pinned messages...</div>';
            const modal = new bootstrap.Modal(document.getElementById('pinnedMessagesModal'));
            modal.show();

            const resp = await fetch(`api_v1_messages.php?channel_id=${currentChannel}&pinned=1`);
            const data = await resp.json();
            if (data.success && data.messages.length > 0) {
                container.innerHTML = '';
                data.messages.forEach(msg => {
                    const div = document.createElement('div');
                    div.className = 'message-item p-2 border-bottom border-secondary';
                    div.style.backgroundColor = 'transparent';
                    div.innerHTML = `
                        <div class="d-flex align-items-start">
                            <div class="message-avatar" style="width: 32px; height: 32px; margin-right: 10px; ${msg.avatar_url ? `background-image: url('${msg.avatar_url}');` : ''}"></div>
                            <div style="flex: 1;">
                                <div class="message-author" style="font-size: 0.85em;">
                                    ${escapeHTML(msg.username)}
                                    <span class="message-time">${msg.time}</span>
                                </div>
                                <div class="message-text" style="font-size: 0.9em;">
                                    ${escapeHTML(msg.content).replace(/\n/g, '<br>')}
                                </div>
                            </div>
                        </div>
                    `;
                    container.appendChild(div);
                });
            } else {
                container.innerHTML = '<div class="p-3 text-center text-muted">No pinned messages in this channel.</div>';
            }
            return;
        }
        
        // Start DM
        const dmBtn = e.target.closest('.start-dm-btn');
        if (dmBtn) {
            const userId = dmBtn.dataset.userId;
            const formData = new FormData();
            formData.append('user_id', userId);
            const resp = await fetch('api_v1_dms.php', { method: 'POST', body: formData });
            const result = await resp.json();
            if (result.success) {
                window.location.href = `?server_id=dms&channel_id=${result.channel_id}`;
            }
        }
    });

    // Global Search
    const searchInput = document.getElementById('global-search');
    const searchType = document.getElementById('search-type');
    const searchResults = document.getElementById('search-results');
    
    searchInput?.addEventListener('input', async () => {
        const q = searchInput.value.trim();
        const type = searchType.value;
        if (q.length < 2) {
            searchResults.style.display = 'none';
            return;
        }
        
        const resp = await fetch(`api_v1_search.php?q=${encodeURIComponent(q)}&type=${type}&channel_id=${currentChannel}`);
        const data = await resp.json();
        
        if (data.success && data.results.length > 0) {
            searchResults.innerHTML = '';
            data.results.forEach(res => {
                const item = document.createElement('div');
                item.className = 'search-result-item d-flex align-items-center gap-2';
                if (type === 'users') {
                    item.innerHTML = `
                        <div class="message-avatar" style="width: 24px; height: 24px; ${res.avatar_url ? `background-image: url('${res.avatar_url}');` : ''}"></div>
                        <div class="flex-grow-1">
                            <div class="search-result-author">${res.username}</div>
                            <div class="small text-muted" style="font-size: 0.7em;">Click to start conversation</div>
                        </div>
                    `;
                    item.onclick = () => {
                        const formData = new FormData();
                        formData.append('user_id', res.id);
                        fetch('api_v1_dms.php', { method: 'POST', body: formData })
                            .then(r => r.json())
                            .then(resDM => {
                                if (resDM.success) window.location.href = `?server_id=dms&channel_id=${resDM.channel_id}`;
                            });
                    };
                } else {
                    item.innerHTML = `
                        <div class="flex-grow-1">
                            <div class="search-result-author">${res.username}</div>
                            <div class="search-result-text">${res.content}</div>
                        </div>
                    `;
                }
                searchResults.appendChild(item);
            });
            searchResults.style.display = 'block';
        } else {
            searchResults.innerHTML = '<div class="p-2 text-muted">No results found</div>';
            searchResults.style.display = 'block';
        }
    });

    // Channel Permissions Management
    const channelPermissionsTabBtn = document.getElementById('channel-permissions-tab-btn');
    const channelPermissionsList = document.getElementById('channel-permissions-list');
    const addPermRoleList = document.getElementById('add-permission-role-list');

    channelPermissionsTabBtn?.addEventListener('click', async () => {
        const channelId = document.getElementById('edit-channel-id').value;
        loadChannelPermissions(channelId);
        loadRolesForPermissions(channelId);
    });

    async function loadChannelPermissions(channelId) {
        channelPermissionsList.innerHTML = '<div class="text-center p-3 text-muted small">Loading permissions...</div>';
        const resp = await fetch(`api_v1_channel_permissions.php?channel_id=${channelId}`);
        const data = await resp.json();
        if (data.success) {
            renderChannelPermissions(channelId, data.permissions);
        }
    }

    async function loadRolesForPermissions(channelId) {
        addPermRoleList.innerHTML = '';
        const resp = await fetch(`api_v1_roles.php?server_id=${activeServerId}`);
        const data = await resp.json();
        if (data.success) {
            data.roles.forEach(role => {
                const li = document.createElement('li');
                li.innerHTML = `<a class="dropdown-item d-flex align-items-center gap-2" href="#">
                    <div style="width: 10px; height: 10px; border-radius: 50%; background-color: ${role.color};"></div>
                    ${role.name}
                </a>`;
                li.onclick = async (e) => {
                    e.preventDefault();
                    await fetch('api_v1_channel_permissions.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ channel_id: channelId, role_id: role.id, allow: 0, deny: 0 })
                    });
                    loadChannelPermissions(channelId);
                };
                addPermRoleList.appendChild(li);
            });
        }
    }

    function renderChannelPermissions(channelId, permissions) {
        channelPermissionsList.innerHTML = '';
        if (permissions.length === 0) {
            channelPermissionsList.innerHTML = '<div class="text-center p-3 text-muted small">No role overrides.</div>';
            return;
        }
        permissions.forEach(p => {
            const item = document.createElement('div');
            item.className = 'list-group-item bg-transparent text-white border-secondary p-2';
            item.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="d-flex align-items-center">
                        <div style="width: 10px; height: 10px; border-radius: 50%; background-color: ${p.role_color}; margin-right: 8px;"></div>
                        <span class="small fw-bold">${p.role_name}</span>
                    </div>
                    <button class="btn btn-sm text-danger remove-perm-btn" data-role-id="${p.role_id}">×</button>
                </div>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm bg-dark text-white border-secondary perm-select" data-role-id="${p.role_id}">
                        <option value="allow" ${p.allow_permissions ? 'selected' : ''}>Allow Sending Messages</option>
                        <option value="deny" ${p.deny_permissions ? 'selected' : ''}>Deny Sending Messages</option>
                        <option value="neutral" ${!p.allow_permissions && !p.deny_permissions ? 'selected' : ''}>Neutral</option>
                    </select>
                </div>
            `;
            channelPermissionsList.appendChild(item);
        });
    }

    channelPermissionsList?.addEventListener('click', async (e) => {
        const channelId = document.getElementById('edit-channel-id').value;
        if (e.target.classList.contains('remove-perm-btn')) {
            const roleId = e.target.dataset.roleId;
            await fetch('api_v1_channel_permissions.php', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ channel_id: channelId, role_id: roleId })
            });
            loadChannelPermissions(channelId);
        }
    });

    channelPermissionsList?.addEventListener('change', async (e) => {
        if (e.target.classList.contains('perm-select')) {
            const channelId = document.getElementById('edit-channel-id').value;
            const roleId = e.target.dataset.roleId;
            const val = e.target.value;
            let allow = 0, deny = 0;
            if (val === 'allow') allow = 1;
            if (val === 'deny') deny = 1;
            
            await fetch('api_v1_channel_permissions.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ channel_id: channelId, role_id: roleId, allow, deny })
            });
        }
    });

    document.addEventListener('click', (e) => {
        if (!e.target.closest('.search-container')) {
            searchResults.style.display = 'none';
        }
    });

        // Roles Management
        const channelSettingsBtns = document.querySelectorAll('.channel-settings-btn');
        channelSettingsBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const modal = document.getElementById('editChannelModal');
                modal.querySelector('#edit-channel-id').value = btn.dataset.id;
                modal.querySelector('#edit-channel-name').value = btn.dataset.name;
                modal.querySelector('#edit-channel-files').checked = btn.dataset.files == '1';
                modal.querySelector('#edit-channel-limit').value = btn.dataset.limit || '';
                modal.querySelector('#edit-channel-theme').value = btn.dataset.theme || '#5865f2';
                modal.querySelector('#delete-channel-id').value = btn.dataset.id;
            });
        });

    // Clear Channel History
    const clearHistoryBtn = document.getElementById('clear-channel-history-btn');
    clearHistoryBtn?.addEventListener('click', async () => {
        const channelId = document.getElementById('edit-channel-id').value;
        if (!confirm('Voulez-vous vraiment vider tout l\'historique de ce salon ? Cette action est irréversible.')) return;
        
        try {
            const formData = new FormData();
            formData.append('channel_id', channelId);
            const resp = await fetch('api_v1_clear_channel.php', {
                method: 'POST',
                body: formData
            });
            const result = await resp.json();
            if (result.success) {
                location.reload();
            } else {
                alert(result.error || 'Erreur lors du nettoyage de l\'historique');
            }
        } catch (e) { console.error(e); }
    });

    // Roles Management
    const rolesTabBtn = document.getElementById('roles-tab-btn');
    const rolesList = document.getElementById('roles-list');
    const addRoleBtn = document.getElementById('add-role-btn');
    const activeServerId = new URLSearchParams(window.location.search).get('server_id') || 1;

    rolesTabBtn?.addEventListener('click', loadRoles);

    async function loadRoles() {
        rolesList.innerHTML = '<div class="text-center p-3 text-muted">Loading roles...</div>';
        try {
            const resp = await fetch(`api_v1_roles.php?server_id=${activeServerId}`);
            const data = await resp.json();
            if (data.success) {
                renderRoles(data.roles);
            }
        } catch (e) { console.error(e); }
    }

    function renderRoles(roles) {
        rolesList.innerHTML = '';
        roles.forEach(role => {
            const item = document.createElement('div');
            item.className = 'list-group-item bg-transparent text-white border-secondary d-flex justify-content-between align-items-center p-2';
            item.innerHTML = `
                <div class="d-flex align-items-center">
                    <div style="width: 12px; height: 12px; border-radius: 50%; background-color: ${role.color}; margin-right: 10px;"></div>
                    <span>${role.name}</span>
                </div>
                <div>
                    <button class="btn btn-sm btn-outline-light edit-role-btn" data-id="${role.id}">Edit</button>
                    <button class="btn btn-sm btn-outline-danger delete-role-btn" data-id="${role.id}">×</button>
                </div>
            `;
            rolesList.appendChild(item);
        });
    }

    addRoleBtn?.addEventListener('click', async () => {
        const name = prompt('Role name:');
        if (!name) return;
        const color = prompt('Role color (hex):', '#99aab5');
        
        try {
            const resp = await fetch('api_v1_roles.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: 'create', server_id: activeServerId, name, color })
            });
            if ((await resp.json()).success) loadRoles();
        } catch (e) { console.error(e); }
    });

    rolesList?.addEventListener('click', async (e) => {
        if (e.target.classList.contains('delete-role-btn')) {
            if (!confirm('Delete this role?')) return;
            const roleId = e.target.dataset.id;
            const resp = await fetch('api_v1_roles.php', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: roleId })
            });
            if ((await resp.json()).success) loadRoles();
        }
        
        if (e.target.classList.contains('edit-role-btn')) {
            const roleId = e.target.dataset.id;
            const name = prompt('New name:');
            const color = prompt('New color (hex):');
            if (!name || !color) return;
            
            const resp = await fetch('api_v1_roles.php', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: roleId, name, color, permissions: 0 })
            });
            if ((await resp.json()).success) loadRoles();
        }
    });

    // Webhooks Management
    const webhooksTabBtn = document.getElementById('webhooks-tab-btn');
    const webhooksList = document.getElementById('webhooks-list');
    const addWebhookBtn = document.getElementById('add-webhook-btn');

    webhooksTabBtn?.addEventListener('click', loadWebhooks);

    async function loadWebhooks() {
        webhooksList.innerHTML = '<div class="text-center p-3 text-muted">Loading webhooks...</div>';
        try {
            const resp = await fetch(`api_v1_webhook.php?server_id=${activeServerId}`);
            const data = await resp.json();
            if (data.success) {
                renderWebhooks(data.webhooks);
            }
        } catch (e) { console.error(e); }
    }

    function renderWebhooks(webhooks) {
        webhooksList.innerHTML = '';
        if (webhooks.length === 0) {
            webhooksList.innerHTML = '<div class="text-center p-3 text-muted">No webhooks found.</div>';
            return;
        }
        webhooks.forEach(wh => {
            const item = document.createElement('div');
            item.className = 'list-group-item bg-transparent text-white border-secondary p-2 mb-2';
            const url = `${window.location.origin}/api_v1_webhook.php?token=${wh.token}`;
            item.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span class="fw-bold">${wh.name}</span>
                    <button class="btn btn-sm btn-outline-danger delete-webhook-btn" data-id="${wh.id}">×</button>
                </div>
                <div class="small text-muted mb-2">Channel: #${wh.channel_name}</div>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control bg-dark text-white border-secondary" value="${url}" readonly>
                    <button class="btn btn-outline-secondary" type="button" onclick="navigator.clipboard.writeText('${url}')">Copy</button>
                </div>
            `;
            webhooksList.appendChild(item);
        });
    }

    addWebhookBtn?.addEventListener('click', async () => {
        const name = prompt('Webhook name:', 'Bot Name');
        if (!name) return;
        
        // Fetch channels for this server to let user pick one
        const respChannels = await fetch(`api_v1_channels.php?server_id=${activeServerId}`);
        const dataChannels = await respChannels.json();
        if (!dataChannels.length) return alert('Create a channel first.');
        
        const channelId = prompt('Enter Channel ID:\n' + dataChannels.map(c => `${c.id}: #${c.name}`).join('\n'));
        if (!channelId) return;

        try {
            const resp = await fetch('api_v1_webhook.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ channel_id: channelId, name: name })
            });
            if ((await resp.json()).success) loadWebhooks();
        } catch (e) { console.error(e); }
    });

    webhooksList?.addEventListener('click', async (e) => {
        if (e.target.classList.contains('delete-webhook-btn')) {
            if (!confirm('Delete this webhook?')) return;
            const whId = e.target.dataset.id;
            const resp = await fetch('api_v1_webhook.php', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: whId })
            });
            if ((await resp.json()).success) loadWebhooks();
        }
    });

    // Stats Management
    const statsTabBtn = document.getElementById('stats-tab-btn');
    statsTabBtn?.addEventListener('click', loadStats);

    async function loadStats() {
        try {
            const resp = await fetch(`api_v1_stats.php?server_id=${activeServerId}`);
            const data = await resp.json();
            if (data.success) {
                document.getElementById('stat-members').textContent = data.stats.total_members;
                document.getElementById('stat-messages').textContent = data.stats.total_messages;
                
                const topUsersList = document.getElementById('top-users-list');
                topUsersList.innerHTML = '';
                data.stats.top_users.forEach(user => {
                    const item = document.createElement('div');
                    item.className = 'd-flex justify-content-between align-items-center mb-1 p-2 bg-dark rounded';
                    item.innerHTML = `<span>${user.username}</span><span class="badge bg-primary">${user.message_count} msgs</span>`;
                    topUsersList.appendChild(item);
                });

                const activity = document.getElementById('activity-chart-placeholder');
                activity.innerHTML = '';
                data.stats.history.forEach(day => {
                    const bar = document.createElement('div');
                    bar.className = 'd-flex align-items-center mb-1';
                    const percent = Math.min(100, (day.count / 100) * 100); // Normalize to 100 for visual
                    bar.innerHTML = `
                        <div style="width: 80px;" class="small">${day.date}</div>
                        <div class="flex-grow-1 mx-2" style="height: 10px; background: #1e1f22; border-radius: 5px;">
                            <div style="width: ${percent}%; height: 100%; background: var(--blurple); border-radius: 5px;"></div>
                        </div>
                        <div style="width: 30px;" class="small text-end">${day.count}</div>
                    `;
                    activity.appendChild(bar);
                });
                if (data.stats.history.length === 0) {
                    activity.innerHTML = '<div class="text-muted">No activity in the last 7 days.</div>';
                }
            }
        } catch (e) { console.error(e); }
    }

    // Server Settings
    const searchServerIconBtn = document.getElementById('search-server-icon-btn');
    const serverIconResults = document.getElementById('server-icon-search-results');
    const serverIconPreview = document.getElementById('server-icon-preview');
    const serverIconUrlInput = document.getElementById('server-icon-url');

    searchServerIconBtn?.addEventListener('click', async () => {
        const query = prompt('Search for a server icon:', 'abstract');
        if (!query) return;
        
        serverIconResults.innerHTML = '<div class="text-muted small">Searching...</div>';
        try {
            const resp = await fetch(`api/pexels.php?action=search&query=${encodeURIComponent(query)}`);
            const data = await resp.json();
            serverIconResults.innerHTML = '';
            data.forEach(photo => {
                const img = document.createElement('img');
                img.src = photo.url;
                img.className = 'avatar-pick';
                img.style.width = '50px';
                img.style.height = '50px';
                img.onclick = () => {
                    serverIconUrlInput.value = photo.url;
                    serverIconPreview.style.backgroundImage = `url('${photo.url}')`;
                    serverIconResults.innerHTML = '';
                };
                serverIconResults.appendChild(img);
            });
        } catch (e) {
            serverIconResults.innerHTML = '<div class="text-danger small">Error fetching icons</div>';
        }
    });

    // User Settings - Avatar Search
    const avatarSearchBtn = document.getElementById('search-avatar-btn');
    const avatarSearchQuery = document.getElementById('avatar-search-query');
    const avatarResults = document.getElementById('avatar-results');
    const avatarPreview = document.getElementById('settings-avatar-preview');
    const avatarUrlInput = document.getElementById('settings-avatar-url');

    avatarSearchBtn?.addEventListener('click', async () => {
        const q = avatarSearchQuery.value.trim();
        if (!q) return;
        avatarResults.innerHTML = '<div class="text-muted small">Searching...</div>';
        try {
            const resp = await fetch(`api/pexels.php?action=search&query=${encodeURIComponent(q)}`);
            const data = await resp.json();
            avatarResults.innerHTML = '';
            data.forEach(photo => {
                const img = document.createElement('img');
                img.src = photo.url;
                img.className = 'avatar-pick';
                img.style.width = '60px';
                img.style.height = '60px';
                img.style.cursor = 'pointer';
                img.onclick = () => {
                    avatarUrlInput.value = photo.url;
                    avatarPreview.style.backgroundImage = `url('${photo.url}')`;
                };
                avatarResults.appendChild(img);
            });
        } catch (e) { console.error(e); }
    });

    // User Settings - Save
    const saveSettingsBtn = document.getElementById('save-settings-btn');
    saveSettingsBtn?.addEventListener('click', async () => {
        const form = document.getElementById('user-settings-form');
        const formData = new FormData(form);
        const dndMode = document.getElementById('dnd-switch').checked ? '1' : '0';
        formData.append('dnd_mode', dndMode);
        
        const theme = form.querySelector('input[name="theme"]:checked').value;
        document.body.setAttribute('data-theme', theme);

        const resp = await fetch('api_v1_user.php', {
            method: 'POST',
            body: formData
        });
        const result = await resp.json();
        if (result.success) {
            location.reload();
        } else {
            alert(result.error || 'Failed to save settings');
        }
    });
});

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

    function appendMessage(msg) {
        const messagesList = document.getElementById('messages-list');
        const div = document.createElement('div');
        div.className = 'message-item';
        div.dataset.id = msg.id;
        const avatarStyle = msg.avatar_url ? `background-image: url('${msg.avatar_url}');` : '';
        
        let attachmentHtml = '';
        if (msg.attachment_url) {
            const ext = msg.attachment_url.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
                attachmentHtml = `<div class="message-attachment mt-2"><img src="${msg.attachment_url}" class="img-fluid rounded message-img-preview" alt="Attachment" style="max-height: 300px; cursor: pointer;" onclick="window.open(this.src)"></div>`;
            } else {
                attachmentHtml = `<div class="message-attachment mt-2"><a href="${msg.attachment_url}" target="_blank" class="attachment-link d-inline-flex align-items-center p-2 rounded bg-dark text-white text-decoration-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>${msg.attachment_url.split('/').pop()}</a></div>`;
            }
        }

        let embedHtml = '';
        if (msg.metadata) {
            const meta = typeof msg.metadata === 'string' ? JSON.parse(msg.metadata) : msg.metadata;
            embedHtml = `
                <div class="rich-embed mt-2 p-3 rounded" style="background: rgba(0,0,0,0.1); border-left: 4px solid var(--blurple); max-width: 520px;">
                    ${meta.site_name ? `<div class="embed-site-name mb-1" style="font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; font-weight: bold;">${escapeHTML(meta.site_name)}</div>` : ''}
                    ${meta.title ? `<a href="${meta.url}" target="_blank" class="embed-title d-block mb-1 text-decoration-none" style="font-weight: 600; color: #00a8fc;">${escapeHTML(meta.title)}</a>` : ''}
                    ${meta.description ? `<div class="embed-description mb-2" style="font-size: 0.9em; color: var(--text-normal);">${escapeHTML(meta.description)}</div>` : ''}
                    ${meta.image ? `<div class="embed-image"><img src="${meta.image}" class="rounded" style="max-width: 100%; max-height: 300px; object-fit: contain;"></div>` : ''}
                </div>
            `;
        }

        const isMe = msg.user_id == window.currentUserId || msg.username == window.currentUsername;
        // Check if user is server owner (could be passed in window object)
        const isOwner = window.isServerOwner || false;

        const pinHtml = `
            <span class="action-btn pin ${msg.is_pinned ? 'active' : ''}" title="${msg.is_pinned ? 'Unpin' : 'Pin'}" data-id="${msg.id}" data-pinned="${msg.is_pinned ? '1' : '0'}">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
            </span>
        `;

        const actionsHtml = (isMe || isOwner) ? `
            <div class="message-actions-menu">
                ${pinHtml}
                ${isMe ? `
                    <span class="action-btn edit" title="Edit" data-id="${msg.id}">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                    </span>
                    <span class="action-btn delete" title="Delete" data-id="${msg.id}">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                    </span>
                ` : ''}
            </div>
        ` : '';

        const pinnedBadge = msg.is_pinned ? `
            <span class="pinned-badge ms-2" title="Pinned Message">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path></svg>
                Pinned
            </span>
        ` : '';

        const mentionRegex = new RegExp(`@${window.currentUsername}\\b`, 'g');
        if (msg.content.match(mentionRegex)) {
            div.classList.add('mentioned');
        }
        if (msg.is_pinned) div.classList.add('pinned');

        div.innerHTML = `
            <div class="message-avatar" style="${avatarStyle}"></div>
            <div class="message-content">
                <div class="message-author">
                    ${escapeHTML(msg.username)}
                    <span class="message-time">${msg.time}</span>
                    ${pinnedBadge}
                    ${actionsHtml}
                </div>
                <div class="message-text">
                    ${escapeHTML(msg.content).replace(/\n/g, '<br>').replace(mentionRegex, `<span class="mention">@${window.currentUsername}</span>`)}
                    ${attachmentHtml}
                    ${embedHtml}
                </div>
                <div class="message-reactions mt-1" data-message-id="${msg.id}">
                    <span class="add-reaction-btn" title="Add Reaction">+</span>
                </div>
            </div>
        `;
        messagesList.appendChild(div);
    }