// Command Center SPA Router
const sections = document.querySelectorAll('.panel');
const links = document.querySelectorAll('.nav-links a');

function navigate(hash) {
    const target = hash.replace('#', '') || 'agents';
    sections.forEach(s => s.hidden = s.id !== target);
    links.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + target));
    // Init config panel when navigated to
    if (target === 'config') {
        initConfigPanel();
    }
}

links.forEach(l => l.addEventListener('click', e => {
    e.preventDefault();
    window.location.hash = l.getAttribute('href');
}));

window.addEventListener('hashchange', () => navigate(window.location.hash));
navigate(window.location.hash || '#agents');

// ── Config File Editor ────────────────────────────────────────────────

let configState = {
    files: [],
    currentFile: null,
    currentContent: '',
    currentPath: '',
    dirty: false,
    lastSaved: null,
};

function initConfigPanel() {
    if (configState.files.length === 0) {
        loadFileList();
    }
}

async function loadFileList() {
    const container = document.getElementById('config-files-container');
    container.innerHTML = '<p class="loading-text">Loading files...</p>';
    try {
        const res = await fetch('/api/config/list');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        configState.files = data.files;
        renderFileList(data.files);
    } catch (err) {
        container.innerHTML = `<p class="error-text">Failed to load files: ${err.message}</p>`;
    }
}

function renderFileList(files) {
    const container = document.getElementById('config-files-container');
    const countEl = document.getElementById('config-count');
    countEl.textContent = `${files.length} file${files.length !== 1 ? 's' : ''}`;

    if (files.length === 0) {
        container.innerHTML = '<p class="empty-text">No config files found.</p>';
        return;
    }

    container.innerHTML = '';
    files.forEach(f => {
        const item = document.createElement('div');
        item.className = 'config-file-item';
        if (configState.currentPath === f.path) {
            item.classList.add('selected');
        }
        item.dataset.path = f.path;

        const nameSpan = document.createElement('span');
        nameSpan.className = 'file-item-name';
        nameSpan.textContent = f.label || f.filename;

        const metaSpan = document.createElement('span');
        metaSpan.className = 'file-item-meta';
        if (f.missing) {
            metaSpan.textContent = 'missing';
            metaSpan.style.color = 'var(--text-muted)';
        } else {
            metaSpan.textContent = formatFileSize(f.size) + ' · ' + f.line_count + ' lines';
        }

        item.appendChild(nameSpan);
        item.appendChild(metaSpan);
        item.addEventListener('click', () => openFile(f.path));
        container.appendChild(item);
    });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const units = ['B', 'KB', 'MB'];
    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), 2);
    return (bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
}

async function openFile(path) {
    configState.dirty = false;
    configState.currentPath = path;
    configState.lastSaved = null;

    // Show editor view
    document.getElementById('config-file-list').hidden = true;
    document.getElementById('config-editor').hidden = false;
    document.getElementById('config-editor-textarea').disabled = true;
    document.getElementById('config-editor-textarea').value = 'Loading...';
    document.getElementById('editor-line-numbers').innerHTML = '';
    document.getElementById('editor-filename').textContent = '';
    document.getElementById('status-path').textContent = 'Loading...';
    document.getElementById('status-meta').textContent = '';
    document.getElementById('status-saved').textContent = '';

    try {
        const res = await fetch('/api/config/read?path=' + encodeURIComponent(path));
        if (!res.ok) {
            const err = await res.json();
            throw new Error(err.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        configState.currentFile = data;
        configState.currentContent = data.content;

        const filename = data.label || data.filename;
        document.getElementById('editor-filename').textContent = filename;
        document.getElementById('config-editor-textarea').value = data.content;
        document.getElementById('config-editor-textarea').disabled = false;
        document.getElementById('config-editor-textarea').focus();

        // Status bar
        document.getElementById('status-path').textContent = data.path;
        document.getElementById('status-meta').textContent = formatFileSize(data.size) + ' · ' + data.line_count + ' lines';
        document.getElementById('status-saved').textContent = data.last_modified
            ? 'Last modified: ' + formatTimestamp(data.last_modified)
            : '';

        updateLineNumbers();
        document.getElementById('config-editor-textarea').addEventListener('input', onEditorChange);
        document.getElementById('config-editor-textarea').addEventListener('scroll', syncScroll);
        document.getElementById('config-editor-textarea').addEventListener('keydown', handleEditorKeydown);

        // Highlight selected in file list
        renderFileList(configState.files);
    } catch (err) {
        showToast('Error loading file: ' + err.message, 'error');
        document.getElementById('config-editor-textarea').value = '';
        document.getElementById('config-editor-textarea').disabled = true;
    }
}

function onEditorChange() {
    configState.dirty = true;
    updateLineNumbers();
    updateSaveButton();
}

function updateSaveButton() {
    const btn = document.getElementById('config-save-btn');
    if (configState.dirty) {
        btn.textContent = 'Save';
        btn.style.background = 'var(--accent)';
    } else {
        btn.textContent = 'Saved ✓';
        btn.style.background = 'var(--success)';
    }
}

function syncScroll() {
    const textarea = document.getElementById('config-editor-textarea');
    const lineNumbers = document.getElementById('editor-line-numbers');
    lineNumbers.scrollTop = textarea.scrollTop;
}

function handleEditorKeydown(e) {
    // Tab key support
    if (e.key === 'Tab') {
        e.preventDefault();
        const textarea = document.getElementById('config-editor-textarea');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const val = textarea.value;
        textarea.value = val.substring(0, start) + '    ' + val.substring(end);
        textarea.selectionStart = textarea.selectionEnd = start + 4;
        onEditorChange();
    }
    // Ctrl+S / Cmd+S
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        saveFile();
    }
}

function updateLineNumbers() {
    const textarea = document.getElementById('config-editor-textarea');
    const lineNumbers = document.getElementById('editor-line-numbers');
    const lines = textarea.value.split('\n');
    const count = lines.length;
    let html = '';
    for (let i = 1; i <= count; i++) {
        html += '<div class="ln">' + i + '</div>';
    }
    lineNumbers.innerHTML = html;
}

function goBackToList() {
    if (configState.dirty) {
        if (!confirm('You have unsaved changes. Discard them?')) {
            return;
        }
    }
    document.getElementById('config-file-list').hidden = false;
    document.getElementById('config-editor').hidden = true;
    configState.currentFile = null;
    configState.currentContent = '';
    configState.currentPath = '';
    configState.dirty = false;
    renderFileList(configState.files);
}

async function saveFile() {
    if (!configState.dirty) return;

    const textarea = document.getElementById('config-editor-textarea');
    const content = textarea.value;
    const path = configState.currentPath;

    // Confirmation dialog
    if (!confirm('Save changes to ' + (configState.currentFile?.label || path) + '?')) {
        return;
    }

    const btn = document.getElementById('config-save-btn');
    btn.disabled = true;
    btn.textContent = 'Saving...';

    try {
        const res = await fetch('/api/config/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ path, content }),
        });
        const data = await res.json();

        if (!res.ok) {
            throw new Error(data.error || `HTTP ${res.status}`);
        }

        configState.dirty = false;
        configState.lastSaved = new Date();
        configState.currentContent = content;

        // Update status
        document.getElementById('status-meta').textContent = formatFileSize(data.size) + ' · ' + data.line_count + ' lines';
        document.getElementById('status-saved').textContent = 'Saved: ' + formatTimestamp(new Date().toISOString());

        showToast('File saved successfully. Backup: ' + data.backup_path, 'success');
        updateSaveButton();

        // Refresh file list metadata
        loadFileList();
    } catch (err) {
        showToast('Save failed: ' + err.message, 'error');
    } finally {
        btn.disabled = false;
    }
}

function formatTimestamp(iso) {
    try {
        const d = new Date(iso);
        return d.toLocaleString(undefined, {
            month: 'short', day: 'numeric',
            hour: '2-digit', minute: '2-digit', second: '2-digit',
        });
    } catch {
        return iso;
    }
}

function showToast(message, type) {
    const toast = document.getElementById('config-toast');
    toast.textContent = message;
    toast.className = 'config-toast toast-' + (type || 'info');
    toast.hidden = false;

    // Position toast
    const editor = document.querySelector('.config-editor');
    if (!editor.hidden) {
        const rect = editor.getBoundingClientRect();
        toast.style.top = (rect.top + 20) + 'px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
    }

    clearTimeout(toast._timeout);
    toast._timeout = setTimeout(() => {
        toast.hidden = true;
    }, 4000);
}

// ── Agent Chat ────────────────────────────────────────────────────

let chatState = {
    profiles: [],
    activeProfile: null,
    messages: {},
    sending: false,
};

const PROFILE_ICONS = {
    coder: '💻',
    assistant: '🤖',
    artist: '🎨',
    kanban: '📋',
};

async function loadAgentProfiles() {
    try {
        const res = await fetch('/api/agents');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        chatState.profiles = data.agents || [];
        renderProfileTabs();
        // If we have an active profile, re-check its status
        if (chatState.activeProfile) {
            selectProfile(chatState.activeProfile);
        } else if (chatState.profiles.length > 0) {
            // Auto-select first online profile, or first profile
            const online = chatState.profiles.find(p => p.status === 'online');
            selectProfile(online || chatState.profiles[0]);
        }
    } catch (err) {
        console.error('Failed to load profiles:', err);
    }
}

function renderProfileTabs() {
    const container = document.getElementById('chat-profile-tabs');
    container.innerHTML = '';
    chatState.profiles.forEach(p => {
        const tab = document.createElement('button');
        tab.className = 'chat-profile-tab';
        if (p.profile === chatState.activeProfile?.profile) {
            tab.classList.add('active');
        }
        const icon = PROFILE_ICONS[p.profile] || '🤖';
        tab.innerHTML = `
            <span class="status-dot ${p.status}"></span>
            ${icon} ${p.label || p.profile}
        `;
        tab.title = p.status === 'online' ? 'Online' : 'Offline';
        tab.addEventListener('click', () => selectProfile(p));
        container.appendChild(tab);
    });
}

function selectProfile(profile) {
    chatState.activeProfile = profile;
    // Update tab UI
    document.querySelectorAll('.chat-profile-tab').forEach(tab => {
        const txt = tab.textContent.trim();
        tab.classList.toggle('active', txt.includes(profile.label || profile.profile));
    });
    // Clear messages area
    const msgArea = document.getElementById('chat-messages');
    msgArea.innerHTML = '';
    // Show welcome if no history, or loading
    if (!chatState.messages[profile.profile]) {
        showWelcome(profile);
    }
    // Enable input
    document.getElementById('chat-input').disabled = false;
    document.getElementById('chat-input').focus();
    updateSendButton();
    // Load history
    loadConversationHistory(profile.profile);
}

function showWelcome(profile) {
    const msgArea = document.getElementById('chat-messages');
    const icon = PROFILE_ICONS[profile.profile] || '🤖';
    msgArea.innerHTML = `
        <div class="chat-welcome">
            <div class="chat-welcome-icon">${icon}</div>
            <h3>${profile.label || profile.profile}</h3>
            <p>${profile.status === 'online'
                ? 'This agent is online. Type a message to start a conversation.'
                : 'This agent is offline. Start the gateway to chat.'}</p>
        </div>
    `;
}

async function loadConversationHistory(profileName) {
    try {
        const res = await fetch(`/api/agents/${encodeURIComponent(profileName)}/history?limit=50`);
        if (!res.ok) return;
        const data = await res.json();
        const messages = data.messages || [];
        chatState.messages[profileName] = messages;

        // Only render if this is still the active profile
        if (chatState.activeProfile?.profile === profileName) {
            renderMessages(messages);
        }
    } catch (err) {
        console.error('Failed to load history:', err);
    }
}

function renderMessages(messages) {
    const msgArea = document.getElementById('chat-messages');
    msgArea.innerHTML = '';
    if (!messages || messages.length === 0) {
        if (chatState.activeProfile) {
            showWelcome(chatState.activeProfile);
        }
        return;
    }
    messages.forEach(msg => appendMessageBubble(msg, false));
    scrollToBottom();
}

function appendMessageBubble(msg, animate = true) {
    const msgArea = document.getElementById('chat-messages');
    const isUser = msg.role === 'user';

    const div = document.createElement('div');
    div.className = `chat-message ${isUser ? 'user' : 'agent'}`;
    if (!animate) div.style.animation = 'none';

    const icon = chatState.activeProfile
        ? (PROFILE_ICONS[chatState.activeProfile.profile] || '🤖')
        : '🤖';

    const time = msg.created_at
        ? new Date(msg.created_at * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        : '';

    div.innerHTML = `
        <div class="bubble">${escapeHtml(msg.content)}</div>
        <div class="msg-meta">
            ${isUser ? '' : `<span class="msg-profile-icon">${icon}</span>`}
            <span>${isUser ? 'You' : (chatState.activeProfile?.label || 'Agent')}</span>
            ${time ? '<span>· ' + time + '</span>' : ''}
        </div>
    `;

    msgArea.appendChild(div);
    scrollToBottom();
}

function scrollToBottom() {
    const msgArea = document.getElementById('chat-messages');
    msgArea.scrollTop = msgArea.scrollHeight;
}

function showTypingIndicator(show) {
    document.getElementById('chat-typing').hidden = !show;
}

async function sendMessage() {
    if (chatState.sending) return;
    const input = document.getElementById('chat-input');
    const message = input.value.trim();
    if (!message || !chatState.activeProfile) return;

    chatState.sending = true;
    input.disabled = true;
    document.getElementById('chat-send-btn').disabled = true;
    document.getElementById('chat-send-btn').textContent = '...';

    // Optimistically show user message
    appendMessageBubble({ role: 'user', content: message, created_at: Date.now() / 1000 });
    input.value = '';
    input.style.height = 'auto';

    // Show typing indicator
    showTypingIndicator(true);

    try {
        const res = await fetch(`/api/agents/${encodeURIComponent(chatState.activeProfile.profile)}/send`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message }),
        });

        const data = await res.json();

        if (!res.ok) {
            appendMessageBubble({
                role: 'agent',
                content: '⚠️ Error: ' + (data.error || `HTTP ${res.status}`),
                created_at: Date.now() / 1000,
            });
        } else {
            appendMessageBubble({
                role: 'agent',
                content: data.response,
                created_at: Date.now() / 1000,
            });
        }
    } catch (err) {
        appendMessageBubble({
            role: 'agent',
            content: '⚠️ Network error: ' + err.message,
            created_at: Date.now() / 1000,
        });
    } finally {
        chatState.sending = false;
        showTypingIndicator(false);
        input.disabled = false;
        document.getElementById('chat-send-btn').disabled = false;
        document.getElementById('chat-send-btn').textContent = 'Send';
        input.focus();
    }
}

function updateSendButton() {
    const input = document.getElementById('chat-input');
    const btn = document.getElementById('chat-send-btn');
    btn.disabled = !input.value.trim() || !chatState.activeProfile || chatState.sending;
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// ── Chat event listeners ──────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    // Config editor listeners
    const configSaveBtn = document.getElementById('config-save-btn');
    const configBackBtn = document.getElementById('config-back-btn');
    if (configSaveBtn) configSaveBtn.addEventListener('click', saveFile);
    if (configBackBtn) configBackBtn.addEventListener('click', goBackToList);

    // Network dashboard
    initNetworkDashboard();

    // Chat input
    const chatInput = document.getElementById('chat-input');
    const sendBtn = document.getElementById('chat-send-btn');

    if (chatInput) {
        chatInput.addEventListener('input', () => {
            updateSendButton();
            // Auto-resize
            chatInput.style.height = 'auto';
            chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
        });

        chatInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    }

    if (sendBtn) {
        sendBtn.addEventListener('click', sendMessage);
    }

    // Load profiles when agents tab is navigated to
    const agentsLink = document.querySelector('.nav-links a[href="#agents"]');
    if (agentsLink) {
        agentsLink.addEventListener('click', () => {
            setTimeout(loadAgentProfiles, 100);
        });
    }

    // Also load if we start on agents tab
    if (!window.location.hash || window.location.hash === '#agents' || window.location.hash === '') {
        setTimeout(loadAgentProfiles, 200);
    }
});

// ── Network Dashboard ────────────────────────────────────────────────

let networkState = {
    autoRefresh: true,
    refreshInterval: 30000,  // 30 seconds
    countdownInterval: null,
    refreshTimer: null,
    countdownRemaining: 0,
    data: null,
    expandedHost: null,
};

function initNetworkDashboard() {
    // Tab switching
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
            const tab = document.getElementById('tab-' + btn.dataset.tab);
            if (tab) tab.classList.add('active');
        });
    });

    // Refresh button
    document.getElementById('network-refresh-btn').addEventListener('click', () => {
        forceRefresh();
    });

    // Auto-refresh toggle
    document.getElementById('auto-refresh-toggle').addEventListener('click', () => {
        networkState.autoRefresh = document.getElementById('auto-refresh-toggle').checked;
        if (networkState.autoRefresh) {
            startAutoRefresh();
        } else {
            stopAutoRefresh();
        }
    });

    // Listen for navigation to network panel
    const networkLink = document.querySelector('.nav-links a[href="#network"]');
    if (networkLink) {
        networkLink.addEventListener('click', () => {
            setTimeout(() => {
                if (!networkState.data) {
                    fetchNetworkData();
                }
            }, 100);
        });
    }

    // Initial load (in case we start on network tab)
    fetchNetworkData();
}

async function fetchNetworkData() {
    try {
        const res = await fetch('/api/network/refresh');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        networkState.data = data;
        renderNetwork(data);
        updateFooter(data);
        if (networkState.autoRefresh) {
            startAutoRefresh();
        }
    } catch (err) {
        showNetworkError('Failed to fetch network data: ' + err.message);
    }
}

function forceRefresh() {
    networkState.data = null;
    if (networkState.refreshTimer) {
        clearTimeout(networkState.refreshTimer);
        networkState.refreshTimer = null;
    }
    if (networkState.countdownInterval) {
        clearInterval(networkState.countdownInterval);
        networkState.countdownInterval = null;
    }
    document.getElementById('hosts-grid').innerHTML = '<div class="loading-text">Refreshing...</div>';
    document.getElementById('services-tbody').innerHTML = '<tr><td colspan="5" class="loading-text">Refreshing...</td></tr>';
    document.getElementById('local-services-tbody').innerHTML = '<tr><td colspan="3" class="loading-text">Refreshing...</td></tr>';
    fetchNetworkData();
}

function startAutoRefresh() {
    stopAutoRefresh();
    networkState.countdownRemaining = 30;
    updateCountdownBar();
    networkState.countdownInterval = setInterval(() => {
        networkState.countdownRemaining--;
        if (networkState.countdownRemaining <= 0) {
            networkState.countdownRemaining = 30;
            fetchNetworkData();
        }
        updateCountdownBar();
    }, 1000);
    networkState.refreshTimer = setTimeout(() => {
        // Safety timeout in case countdown misses
        fetchNetworkData();
    }, networkState.refreshInterval + 1000);
}

function stopAutoRefresh() {
    if (networkState.countdownInterval) {
        clearInterval(networkState.countdownInterval);
        networkState.countdownInterval = null;
    }
    if (networkState.refreshTimer) {
        clearTimeout(networkState.refreshTimer);
        networkState.refreshTimer = null;
    }
    document.getElementById('countdown-fill').style.width = '0%';
}

function updateCountdownBar() {
    const pct = (networkState.countdownRemaining / 30) * 100;
    document.getElementById('countdown-fill').style.width = pct + '%';
}

function renderNetwork(data) {
    renderHosts(data.hosts || []);
    renderServices(data.services || []);
    renderLocalServices(data.local_services || []);
    renderSummary(data.hosts || []);
}

function renderSummary(hosts) {
    let online = 0, offline = 0, degraded = 0;
    hosts.forEach(h => {
        if (h.status === 'online') online++;
        else if (h.status === 'offline') offline++;
        else if (h.status === 'degraded') degraded++;
        else offline++; // unknown hosts counted as offline
    });
    document.getElementById('hosts-online').textContent = online;
    document.getElementById('hosts-offline').textContent = offline;
    document.getElementById('hosts-degraded').textContent = degraded;
    document.getElementById('hosts-total').textContent = hosts.length;
}

function renderHosts(hosts) {
    const grid = document.getElementById('hosts-grid');
    if (!hosts || hosts.length === 0) {
        grid.innerHTML = '<div class="empty-text">No hosts configured.</div>';
        return;
    }

    grid.innerHTML = '';
    hosts.forEach(host => {
        const card = document.createElement('div');
        card.className = 'host-card status-' + (host.status || 'unknown');
        card.dataset.host = host.name;

        const statusLabel = host.status === 'online' ? 'Online' :
            host.status === 'offline' ? 'Offline' :
            host.status === 'degraded' ? 'Degraded' : 'Unknown';

        let latencyDisplay = host.latency_ms != null ? host.latency_ms.toFixed(1) + 'ms' : '—';
        let osDisplay = host.os || '';

        card.innerHTML = `
            <div class="host-card-header">
                <div class="host-name-row">
                    <span class="host-name">${escapeHtml(host.name)}</span>
                    <span class="status-badge status-${host.status || 'unknown'}">${statusLabel}</span>
                </div>
                <div class="host-meta">
                    <span class="host-ip">${escapeHtml(host.ip || '—')}</span>
                    ${osDisplay ? '<span class="host-os">' + escapeHtml(osDisplay) + '</span>' : ''}
                    <span class="host-latency">${latencyDisplay}</span>
                </div>
            </div>
            <div class="host-card-body">
                ${host.role ? '<div class="host-role">' + escapeHtml(host.role) + '</div>' : ''}
                ${host.ports && host.ports.length > 0 ? renderPorts(host.ports) : ''}
                <button class="btn btn-sm host-expand-btn" data-host="${escapeHtml(host.name)}">Details</button>
            </div>
            <div class="host-details hidden" id="host-details-${escapeHtml(host.name).replace(/\s/g, '_')}">
                <div class="host-details-content">
                    ${renderHostDetails(host)}
                </div>
            </div>
        `;

        // Click to expand
        const expandBtn = card.querySelector('.host-expand-btn');
        expandBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            const detailsId = 'host-details-' + escapeHtml(host.name).replace(/\s/g, '_');
            const details = document.getElementById(detailsId);
            if (details) {
                details.classList.toggle('hidden');
                expandBtn.textContent = details.classList.contains('hidden') ? 'Details' : 'Hide';
            }
        });

        grid.appendChild(card);
    });
}

function renderPorts(ports) {
    if (!ports || ports.length === 0) return '';
    let html = '<div class="host-ports"><span class="ports-label">Ports:</span>';
    ports.forEach(p => {
        const openClass = p.open ? 'port-open' : 'port-closed';
        html += `<span class="port-badge ${openClass}" title="${escapeHtml(p.name)}:${p.port}">${escapeHtml(p.name)}:${p.port}</span>`;
    });
    html += '</div>';
    return html;
}

function renderHostDetails(host) {
    let html = '<table class="details-table">';
    const fields = [
        ['Hostname', host.hostname],
        ['OS', host.os],
        ['Role', host.role],
        ['Local IP', host.local_ip],
        ['Tailscale IP', host.tailscale_ip],
        ['Public IP', host.public_ip],
        ['Status', host.status],
        ['Latency', host.latency_ms != null ? host.latency_ms.toFixed(1) + 'ms' : '—'],
    ];
    fields.forEach(([label, val]) => {
        if (val) {
            html += `<tr><td class="dt-label">${escapeHtml(label)}</td><td class="dt-value">${escapeHtml(String(val))}</td></tr>`;
        }
    });
    if (host.ports && host.ports.length > 0) {
        html += '<tr><td class="dt-label">Ports</td><td class="dt-value">';
        host.ports.forEach(p => {
            const icon = p.open ? '✓' : '✗';
            const cls = p.open ? 'port-open' : 'port-closed';
            html += `<span class="port-badge ${cls}">${icon} ${escapeHtml(p.name)}:${p.port}</span> `;
        });
        html += '</td></tr>';
    }
    html += '</table>';
    return html;
}

function renderServices(services) {
    const tbody = document.getElementById('services-tbody');
    if (!services || services.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="empty-text">No services configured.</td></tr>';
        return;
    }

    tbody.innerHTML = '';
    services.forEach(svc => {
        const tr = document.createElement('tr');
        const status = svc.status || 'unknown';
        const statusLabel = status === 'online' ? 'Online' :
            status === 'offline' ? 'Offline' : 'Unknown';
        const latency = svc.latency_ms != null ? svc.latency_ms.toFixed(1) + 'ms' : '—';
        const url = svc.url || (svc.port ? ':' + svc.port : '—');
        const category = svc.category || '—';

        tr.innerHTML = `
            <td class="svc-name">${escapeHtml(svc.name || '—')}</td>
            <td><span class="svc-category">${escapeHtml(category)}</span></td>
            <td class="svc-url">${escapeHtml(url)}</td>
            <td><span class="status-badge status-${status}">${statusLabel}</span></td>
            <td class="svc-latency">${latency}</td>
        `;
        if (svc.error) {
            tr.innerHTML += `<td class="svc-error" colspan="5"><small>${escapeHtml(svc.error)}</small></td>`;
        }
        tbody.appendChild(tr);
    });
}

function renderLocalServices(services) {
    const tbody = document.getElementById('local-services-tbody');
    if (!services || services.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" class="empty-text">No local services detected.</td></tr>';
        return;
    }

    tbody.innerHTML = '';
    services.forEach(svc => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${escapeHtml(svc.local_address || '—')}</td>
            <td>${escapeHtml(svc.port || '—')}</td>
            <td>${escapeHtml(svc.process || '—')}</td>
        `;
        tbody.appendChild(tr);
    });
}

function updateFooter(data) {
    const cached = data.cached_at ? new Date(data.cached_at * 1000) : null;
    document.getElementById('last-updated').textContent = cached
        ? 'Last updated: ' + cached.toLocaleTimeString()
        : 'Last updated: —';
    document.getElementById('cache-info').textContent = data.cache_ttl
        ? 'Cache: ' + data.cache_ttl + 's'
        : '';
}

function showNetworkError(msg) {
    document.getElementById('hosts-grid').innerHTML = '<div class="error-text">' + escapeHtml(msg) + '</div>';
    document.getElementById('services-tbody').innerHTML = '<tr><td colspan="5" class="error-text">' + escapeHtml(msg) + '</td></tr>';
    document.getElementById('local-services-tbody').innerHTML = '<tr><td colspan="3" class="error-text">' + escapeHtml(msg) + '</td></tr>';
}

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