{% extends "base.html" %}

{% block title %}Dashboard — TechHand Remote Support{% endblock %}

{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-chart-pie" aria-hidden="true"></i> Client dashboard</h1>
  <div class="app-page-header-actions dashboard-actions">
    <a href="{{ url_for('scan_page') }}" class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Scan</a>
    <a href="{{ url_for('status_page') }}" class="btn btn-secondary btn-sm"><i class="fas fa-chart-line"></i> Status</a>
    <a href="{{ url_for('setup') }}" class="btn btn-secondary btn-sm"><i class="fas fa-cog"></i> Setup</a>
  </div>
</div>

<div class="stats-grid stats-row" role="region" aria-label="Connection summary" style="margin-bottom:20px;">
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-plug" aria-hidden="true"></i></div>
    <div class="stat-value" style="font-size:1.1rem;">{% if state.connected %}Online{% else %}Offline{% endif %}</div>
    <div class="stat-label">TNT server</div>
  </div>
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-desktop" aria-hidden="true"></i></div>
    <div class="stat-value" style="font-size:1rem;word-break:break-all;">{{ config.client_name or hostname }}</div>
    <div class="stat-label">This client</div>
  </div>
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-link" aria-hidden="true"></i></div>
    <div class="stat-value" style="font-size:0.85rem;word-break:break-all;">{{ config.server_url }}</div>
    <div class="stat-label">Server URL</div>
  </div>
</div>

{% if state.get('connection_error') and not state.connected %}
<div class="client-banner-muted client-banner-warn" role="status">
  <strong>Connection.</strong> {{ state.connection_error }}
  <a href="{{ url_for('setup') }}" class="btn btn-sm btn-secondary" style="margin-left:12px;">Open setup</a>
  <button type="button" class="btn btn-sm btn-primary" id="retryConnBtn" style="margin-left:8px;">Retry</button>
</div>
{% endif %}

<div class="stats-grid">
  <details class="widget" open>
    <summary><i class="fas fa-search" aria-hidden="true"></i> Network scanning</summary>
    <p class="muted" style="margin:10px 0;">Discover devices on the local network.</p>
    <a href="{{ url_for('scan_page') }}" class="btn btn-primary btn-sm">Open scan</a>
  </details>
  <details class="widget" open>
    <summary><i class="fas fa-chart-line" aria-hidden="true"></i> Sync status</summary>
    <p class="muted" style="margin:10px 0;">Upload queue and heartbeat.</p>
    <a href="{{ url_for('status_page') }}" class="btn btn-secondary btn-sm">View status</a>
  </details>
  <details class="widget" open>
    <summary><i class="fas fa-cog" aria-hidden="true"></i> Configuration</summary>
    <p class="muted" style="margin:10px 0;">Server URL, sign-in, org API key.</p>
    <a href="{{ url_for('setup') }}" class="btn btn-secondary btn-sm">Open setup</a>
  </details>
  <details class="widget" open id="org-portal-card">
    <summary><i class="fas fa-building" aria-hidden="true"></i> Organization portal</summary>
    <p class="muted" style="margin:10px 0;">Tickets, documents, vault, and org AI (requires login token + org API key in Setup).</p>
    <a href="{{ url_for('organization_hub') }}" class="btn btn-primary btn-sm">Open portal</a>
    <button type="button" class="btn btn-secondary btn-sm" id="portalSummaryBtn">Load summary</button>
    <pre id="portalSummaryOut" class="muted" style="margin-top:10px;max-height:220px;overflow:auto;display:none;font-size:0.85rem;background:var(--color-bg-alt,#1e1e1e);padding:10px;border-radius:6px;border:1px solid var(--border-light,rgba(255,255,255,0.12));"></pre>
  </details>
  <details class="widget" open id="llm-host-card">
    <summary><i class="fas fa-server" aria-hidden="true"></i> LLM host</summary>
    <p class="muted" style="margin:10px 0;">Run Caddy on port 8080 so a remote TNT server can use this PC for AI.</p>
    <div class="caddy-status" id="caddyStatus" style="margin: 8px 0; padding: 8px; background: var(--color-bg-alt, #1e1e1e); border-radius: 6px; font-size: 0.9rem; border: 1px solid var(--border-light, rgba(255,255,255,0.12));">
      <span class="status-label">Caddy:</span>
      <span id="caddyStatusText">{% if config.run_llm_host %}Checking…{% else %}⚪ Off{% endif %}</span>
      <button type="button" class="btn btn-sm btn-secondary" id="refreshCaddyBtn" title="Refresh status" style="margin-left: 8px;"><i class="fas fa-sync-alt"></i></button>
    </div>
    <div class="llm-host-controls">
      <label class="toggle-label">
        <input type="checkbox" id="runLlmHostToggle" {{ 'checked' if config.run_llm_host else '' }} />
        <span>Run as LLM host (Caddy on 8080)</span>
      </label>
      <button type="button" class="btn btn-secondary btn-sm" id="startCaddyBtn" title="Start Caddy now">Start Caddy</button>
      <button type="button" class="btn btn-secondary btn-sm" id="stopCaddyBtn" title="Stop Caddy started by this client" style="display:none;">Stop Caddy</button>
    </div>
    <p class="hint muted" style="margin-top: 8px; font-size: 0.85rem;"><strong>Risk:</strong> exposes port 8080 and starts a reverse proxy. Trusted networks only.</p>
  </details>
</div>

    <div class="device-info-section" style="margin-top:24px;">
        <div class="device-info-header">
            <h2 style="margin:0;font-size:1.25rem;color:var(--color-primary,#00ccff);"><i class="fas fa-microchip" aria-hidden="true"></i> Device information</h2>
            <button id="gatherDeviceInfoBtn" type="button" class="btn btn-primary btn-sm" onclick="gatherDeviceInfo()">
                <span class="btn-text">Gather device info</span>
                <span class="btn-spinner" style="display: none;"><i class="fas fa-spinner fa-spin"></i> Gathering…</span>
            </button>
        </div>
        
        <div id="deviceInfoContent" class="device-info-content" style="display: none;">
            <div id="deviceInfoLoading" class="device-info-loading" style="display: none;">
                <div class="spinner"></div>
                <p>Gathering device information...</p>
            </div>
            
            <div id="deviceInfoDisplay" class="device-info-display">
                <!-- Device info will be populated here by JavaScript -->
            </div>
        </div>
        
        <div id="deviceInfoError" class="device-info-error" style="display: none;"></div>
    </div>
    
    <details class="widget" open style="margin-top:20px;">
        <summary><i class="fas fa-info-circle" aria-hidden="true"></i> Client details</summary>
        <div style="padding-top:10px;overflow-x:auto;">
        <table class="client-table-simple">
            <tbody>
            <tr>
                <td><strong>Hostname</strong></td>
                <td>{{ hostname }}</td>
            </tr>
            <tr>
                <td><strong>Client ID</strong></td>
                <td>{{ config.client_id or 'Not registered' }}</td>
            </tr>
            <tr>
                <td><strong>Location</strong></td>
                <td>{{ config.location or 'Not set' }}</td>
            </tr>
            <tr>
                <td><strong>Last scan</strong></td>
                <td>{{ state.last_scan or 'Never' }}</td>
            </tr>
            </tbody>
        </table>
        </div>
    </details>
    
    <details class="widget" open style="margin-top:16px;">
        <summary><i class="fas fa-list" aria-hidden="true"></i> Recent activity</summary>
        <div id="activityLog" style="padding-top:10px;">
            <p class="muted empty-state">No recent activity</p>
        </div>
    </details>

<script>
// Connect to WebSocket for real-time updates
const socket = io();

socket.on('connect', () => {
    console.log('Connected to server');
    addActivity('Connected to client service');
});

socket.on('scan_started', (data) => {
    addActivity(`Scan started: ${data.type}`);
});

socket.on('scan_completed', (data) => {
    addActivity(`Scan completed: ${data.type} - ${data.devices_found || 0} devices found`);
});

socket.on('scan_error', (data) => {
    addActivity(`Scan error: ${data.error}`, 'error');
});

socket.on('profile_activity', (data) => {
    if (data.event === 'step') {
        addActivity(data.summary || `Profile step ${data.step_order}: ${data.step_type} – ${data.success ? 'OK' : 'Failed'}`, data.success ? 'success' : 'error');
    } else if (data.event === 'complete') {
        addActivity(data.summary || `Profile run: ${data.status}`, data.status === 'completed' ? 'success' : 'error');
    }
});

function addActivity(message, type = 'info') {
    const logDiv = document.getElementById('activityLog');
    const emptyState = logDiv.querySelector('.empty-state');
    
    if (emptyState) {
        emptyState.remove();
    }
    
    const entry = document.createElement('div');
    entry.className = `activity-entry ${type}`;
    entry.innerHTML = `
        <span class="timestamp">${new Date().toLocaleTimeString()}</span>
        <span class="message">${message}</span>
    `;
    
    logDiv.insertBefore(entry, logDiv.firstChild);
    
    // Keep only last 10 entries
    while (logDiv.children.length > 10) {
        logDiv.removeChild(logDiv.lastChild);
    }
}

// Test connection on page load
async function testConnection() {
    try {
        const response = await fetch('/api/test-connection', {
            method: 'POST'
        });
        const data = await response.json();
        
        if (data.connected) {
            addActivity('Server connection verified');
        } else {
            addActivity('Server connection failed', 'error');
        }
    } catch (error) {
        console.error('Connection test failed:', error);
    }
}

testConnection();

function llmHostEnabled() {
    const toggle = document.getElementById('runLlmHostToggle');
    return !!(toggle && toggle.checked);
}

// Caddy status display and refresh
async function loadCaddyStatus(opts) {
    const force = !!(opts && opts.force);
    const el = document.getElementById('caddyStatusText');
    const refreshBtn = document.getElementById('refreshCaddyBtn');
    if (!el) return;
    if (!llmHostEnabled() && !force) {
        el.textContent = '⚪ Off';
        el.style.color = 'var(--color-text-muted, #999)';
        const stopBtn = document.getElementById('stopCaddyBtn');
        if (stopBtn) stopBtn.style.display = 'none';
        return;
    }
    if (refreshBtn) refreshBtn.disabled = true;
    try {
        const url = (force && !llmHostEnabled())
            ? '/api/llm-host/status?probe=1'
            : '/api/llm-host/status';
        const res = await fetch(url);
        const data = await res.json().catch(function() { return {}; });
        if (!res.ok || !data.success) {
            el.textContent = data.error || 'Error checking status';
            el.style.color = 'var(--color-error, #e74c3c)';
            return;
        }
        const state = data.display_state || '';
        const stopBtn = document.getElementById('stopCaddyBtn');
        if (stopBtn) stopBtn.style.display = (state === 'running_unexpected') ? '' : 'none';
        if (state === 'running') {
            el.textContent = '🟢 Running – LLM API reachable at http://localhost:8080/v1';
            el.style.color = 'var(--color-success, #27ae60)';
        } else if (state === 'starting') {
            el.textContent = data.caddy_running
                ? 'Starting – Caddy up, waiting for LLM (/v1/models)'
                : 'Enabled – Caddy not running yet';
            el.style.color = 'var(--color-warning, #f39c12)';
        } else if (state === 'running_unexpected') {
            el.textContent = '🟡 Caddy process detected but LLM host is off';
            el.style.color = 'var(--color-warning, #f39c12)';
        } else {
            el.textContent = '⚪ Off';
            el.style.color = 'var(--color-text-muted, #999)';
        }
    } catch (e) {
        el.textContent = 'Unable to check: ' + (e.message || 'network error');
        el.style.color = 'var(--color-error, #e74c3c)';
    } finally {
        if (refreshBtn) refreshBtn.disabled = false;
    }
}

(function() {
    const refreshBtn = document.getElementById('refreshCaddyBtn');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() { loadCaddyStatus({force: true}); });
    }
    loadCaddyStatus();
    setInterval(function() {
        if (llmHostEnabled()) {
            loadCaddyStatus();
        }
    }, 15000);
})();

// LLM Host toggle, Start Caddy, Stop Caddy
(function() {
    const toggle = document.getElementById('runLlmHostToggle');
    const startBtn = document.getElementById('startCaddyBtn');
    const stopBtn = document.getElementById('stopCaddyBtn');
    if (!toggle || !startBtn) return;
    toggle.addEventListener('change', async function() {
        const run = toggle.checked;
        startBtn.disabled = true;
        try {
            const res = await fetch('/api/llm-host', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ run_llm_host: run, start_caddy_now: run })
            });
            const data = await res.json().catch(function() { return {}; });
            if (res.ok && data.success) {
                addActivity(run ? 'LLM host enabled; Caddy start requested' : 'LLM host disabled; Caddy stop requested');
                setTimeout(loadCaddyStatus, 1500);
            } else {
                addActivity(data.error || 'Failed to save LLM host setting', 'error');
                toggle.checked = !run;
            }
        } catch (e) {
            addActivity(e.message || 'Request failed', 'error');
            toggle.checked = !run;
        } finally {
            startBtn.disabled = false;
        }
    });
    startBtn.addEventListener('click', async function() {
        if (!toggle.checked && !confirm('LLM host is off. Start Caddy anyway?')) return;
        startBtn.disabled = true;
        try {
            const res = await fetch('/api/llm-host/start', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ force: !toggle.checked })
            });
            const data = await res.json().catch(function() { return {}; });
            if (res.ok && data.success) {
                addActivity(data.caddy_started ? 'Caddy started successfully (port 8080)' : 'Caddy start requested – check status in a few seconds');
                setTimeout(function() { loadCaddyStatus({force: true}); }, 2000);
            } else {
                addActivity(data.error || 'Failed to start Caddy', 'error');
            }
        } catch (e) {
            addActivity(e.message || 'Request failed', 'error');
        } finally {
            startBtn.disabled = false;
        }
    });
    if (stopBtn) {
        stopBtn.addEventListener('click', async function() {
            stopBtn.disabled = true;
            try {
                const res = await fetch('/api/llm-host/stop', { method: 'POST' });
                const data = await res.json().catch(function() { return {}; });
                if (res.ok && data.success) {
                    addActivity(data.stopped ? ('Caddy stopped (' + (data.detail || '') + ')') : (data.detail || 'Caddy stop attempted'));
                    setTimeout(function() { loadCaddyStatus({force: true}); }, 1500);
                } else {
                    addActivity(data.error || 'Failed to stop Caddy', 'error');
                }
            } catch (e) {
                addActivity(e.message || 'Request failed', 'error');
            } finally {
                stopBtn.disabled = false;
            }
        });
    }
})();

// Device Info Functions
async function gatherDeviceInfo() {
    const btn = document.getElementById('gatherDeviceInfoBtn');
    const btnText = btn.querySelector('.btn-text');
    const btnSpinner = btn.querySelector('.btn-spinner');
    const content = document.getElementById('deviceInfoContent');
    const loading = document.getElementById('deviceInfoLoading');
    const display = document.getElementById('deviceInfoDisplay');
    const error = document.getElementById('deviceInfoError');
    
    // Show loading state
    btn.disabled = true;
    btnText.style.display = 'none';
    btnSpinner.style.display = 'inline';
    content.style.display = 'block';
    loading.style.display = 'block';
    display.style.display = 'none';
    error.style.display = 'none';
    
    try {
        const response = await fetch('/api/device-info/gather', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ send_to_server: true })
        });
        
        const data = await response.json();
        
        if (data.success) {
            displayDeviceInfo(data.device_info);
            addActivity('Device information gathered successfully', 'success');
            if (window.TNTClient && window.TNTClient.showNotification) {
                window.TNTClient.showNotification('Device information gathered successfully', 'success');
            }
        } else {
            throw new Error(data.error || 'Failed to gather device information');
        }
    } catch (err) {
        console.error('Error gathering device info:', err);
        error.textContent = `Error: ${err.message}`;
        error.style.display = 'block';
        addActivity(`Device info gathering failed: ${err.message}`, 'error');
        if (window.TNTClient && window.TNTClient.showNotification) {
            window.TNTClient.showNotification(`Error: ${err.message}`, 'error');
        }
    } finally {
        btn.disabled = false;
        btnText.style.display = 'inline';
        btnSpinner.style.display = 'none';
        loading.style.display = 'none';
        display.style.display = 'block';
    }
}

function displayDeviceInfo(deviceInfo) {
    const display = document.getElementById('deviceInfoDisplay');
    
    if (!deviceInfo || Object.keys(deviceInfo).length === 0) {
        display.innerHTML = '<p class="empty-state">No device information available</p>';
        return;
    }
    
    // Format date helper
    function formatDate(dateValue) {
        if (!dateValue) return 'N/A';
        try {
            const date = new Date(dateValue);
            return date.toLocaleString();
        } catch {
            return dateValue;
        }
    }
    
    // Format value helper
    function formatValue(value) {
        if (value === null || value === undefined || value === '') return 'N/A';
        if (typeof value === 'boolean') return value ? 'Yes' : 'No';
        return String(value);
    }
    
    // Create collapsible section
    function createSection(title, icon, fields) {
        const sectionId = title.toLowerCase().replace(/\s+/g, '-');
        let html = `
            <div class="device-info-section-item">
                <div class="device-info-section-header" onclick="toggleSection('${sectionId}')">
                    <span class="section-icon">${icon}</span>
                    <span class="section-title">${title}</span>
                    <span class="section-toggle" id="toggle-${sectionId}">▼</span>
                </div>
                <div class="device-info-section-content" id="content-${sectionId}">
                    <table class="device-info-table">
        `;
        
        fields.forEach(([label, value]) => {
            if (value !== undefined && value !== null && value !== '') {
                html += `
                    <tr>
                        <td class="device-info-label">${label}:</td>
                        <td class="device-info-value">${formatValue(value)}</td>
                    </tr>
                `;
            }
        });
        
        html += `
                    </table>
                </div>
            </div>
        `;
        return html;
    }
    
    let html = '';
    
    // Basic Information
    html += createSection('Basic Information', '📋', [
        ['Name', deviceInfo.name],
        ['Computer Name', deviceInfo.computer_name],
        ['IP Address', deviceInfo.ip],
        ['MAC Address', deviceInfo.mac],
        ['Status', deviceInfo.status],
        ['Category', deviceInfo.category],
        ['Location', deviceInfo.location],
        ['Description', deviceInfo.description]
    ]);
    
    // Hardware Specifications
    html += createSection('Hardware Specifications', '🔧', [
        ['Manufacturer', deviceInfo.manufacturer],
        ['Model', deviceInfo.model],
        ['Serial Number', deviceInfo.serial_number],
        ['Asset Tag', deviceInfo.asset_tag],
        ['CPU', deviceInfo.cpu_info],
        ['RAM', deviceInfo.ram_size],
        ['Storage', deviceInfo.storage_info],
        ['BIOS Version', deviceInfo.bios_version]
    ]);
    
    // Operating System
    html += createSection('Operating System', '🖥️', [
        ['Operating System', deviceInfo.operating_system],
        ['OS Version', deviceInfo.os_version],
        ['OS Build', deviceInfo.os_build],
        ['Architecture', deviceInfo.os_architecture],
        ['Last Boot Time', formatDate(deviceInfo.last_boot_time)],
        ['Uptime (Hours)', deviceInfo.uptime_hours]
    ]);
    
    // Network Configuration
    html += createSection('Network Configuration', '🌐', [
        ['Domain Name', deviceInfo.domain_name],
        ['Workgroup', deviceInfo.workgroup],
        ['DNS Servers', deviceInfo.dns_servers],
        ['Default Gateway', deviceInfo.default_gateway],
        ['Subnet Mask', deviceInfo.subnet_mask],
        ['DHCP Enabled', deviceInfo.dhcp_enabled],
        ['Network Adapters', deviceInfo.network_adapter_info ? 'See details below' : null]
    ]);
    
    if (deviceInfo.network_adapter_info && typeof deviceInfo.network_adapter_info === 'string') {
        try {
            const adapters = JSON.parse(deviceInfo.network_adapter_info);
            if (Array.isArray(adapters)) {
                html += `
                    <div class="device-info-section-item">
                        <div class="device-info-section-header" onclick="toggleSection('network-adapters')">
                            <span class="section-icon">🔌</span>
                            <span class="section-title">Network Adapters</span>
                            <span class="section-toggle" id="toggle-network-adapters">▼</span>
                        </div>
                        <div class="device-info-section-content" id="content-network-adapters">
                            <pre class="device-info-json">${JSON.stringify(adapters, null, 2)}</pre>
                        </div>
                    </div>
                `;
            }
        } catch (e) {
            // If not JSON, display as text
            html += `
                <div class="device-info-section-item">
                    <div class="device-info-section-header" onclick="toggleSection('network-adapters')">
                        <span class="section-icon">🔌</span>
                        <span class="section-title">Network Adapters</span>
                        <span class="section-toggle" id="toggle-network-adapters">▼</span>
                    </div>
                    <div class="device-info-section-content" id="content-network-adapters">
                        <pre class="device-info-text">${deviceInfo.network_adapter_info}</pre>
                    </div>
                </div>
            `;
        }
    }
    
    // Software Inventory
    html += createSection('Software Inventory', '📦', [
        ['Installed Software', deviceInfo.installed_software ? (deviceInfo.installed_software.length > 200 ? deviceInfo.installed_software.substring(0, 200) + '...' : deviceInfo.installed_software) : null],
        ['Windows Updates Status', deviceInfo.windows_updates_status],
        ['Antivirus Info', deviceInfo.antivirus_info]
    ]);
    
    if (deviceInfo.driver_info) {
        html += `
            <div class="device-info-section-item">
                <div class="device-info-section-header" onclick="toggleSection('drivers')">
                    <span class="section-icon">💿</span>
                    <span class="section-title">Driver Information</span>
                    <span class="section-toggle" id="toggle-drivers">▼</span>
                </div>
                <div class="device-info-section-content" id="content-drivers">
                    <pre class="device-info-text">${deviceInfo.driver_info}</pre>
                </div>
            </div>
        `;
    }
    
    // User Accounts
    html += createSection('User Accounts', '👥', [
        ['Primary User', deviceInfo.primary_user],
        ['Logged In Users', deviceInfo.logged_in_users],
        ['Local Admin Accounts', deviceInfo.local_admin_accounts]
    ]);
    
    // Asset Management (if available)
    if (deviceInfo.purchase_date || deviceInfo.warranty_expiry || deviceInfo.cost_center || deviceInfo.vendor) {
        html += createSection('Asset Management', '📊', [
            ['Purchase Date', formatDate(deviceInfo.purchase_date)],
            ['Warranty Expiry', formatDate(deviceInfo.warranty_expiry)],
            ['Installation Date', formatDate(deviceInfo.installation_date)],
            ['Last Maintenance', formatDate(deviceInfo.last_maintenance)],
            ['Cost Center', deviceInfo.cost_center],
            ['Vendor', deviceInfo.vendor]
        ]);
    }
    
    // Notes
    if (deviceInfo.notes) {
        html += `
            <div class="device-info-section-item">
                <div class="device-info-section-header" onclick="toggleSection('notes')">
                    <span class="section-icon">📝</span>
                    <span class="section-title">Notes</span>
                    <span class="section-toggle" id="toggle-notes">▼</span>
                </div>
                <div class="device-info-section-content" id="content-notes">
                    <pre class="device-info-text">${deviceInfo.notes}</pre>
                </div>
            </div>
        `;
    }
    
    display.innerHTML = html;
}

function toggleSection(sectionId) {
    const content = document.getElementById(`content-${sectionId}`);
    const toggle = document.getElementById(`toggle-${sectionId}`);
    
    if (content && toggle) {
        if (content.style.display === 'none') {
            content.style.display = 'block';
            toggle.textContent = '▼';
        } else {
            content.style.display = 'none';
            toggle.textContent = '▶';
        }
    }
}

(function() {
  const psBtn = document.getElementById('portalSummaryBtn');
  const psOut = document.getElementById('portalSummaryOut');
  if (psBtn && psOut) psBtn.addEventListener('click', async function() {
    psBtn.disabled = true;
    psOut.style.display = 'block';
    psOut.textContent = 'Loading…';
    try {
      const r = await fetch('/api/portal/summary');
      const j = await r.json();
      psOut.textContent = JSON.stringify(j, null, 2);
    } catch (e) {
      psOut.textContent = 'Error: ' + e;
    } finally {
      psBtn.disabled = false;
    }
  });
})();

(function() {
  const btn = document.getElementById('retryConnBtn');
  if (btn) btn.addEventListener('click', async function() {
    btn.disabled = true;
    try {
      const r = await fetch('/api/setup/retry-connection', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
      const j = await r.json();
      if (j.success) window.location.reload();
      else alert(j.error || 'Retry failed');
    } catch (e) {
      alert('Retry failed: ' + e);
    } finally {
      btn.disabled = false;
    }
  });
})();

// Load device info on page load if available
async function loadDeviceInfo() {
    try {
        const response = await fetch('/api/device-info');
        const data = await response.json();
        
        if (data.success && data.device_info) {
            displayDeviceInfo(data.device_info);
            document.getElementById('deviceInfoContent').style.display = 'block';
        }
    } catch (err) {
        // No device info available yet, that's okay
        console.debug('No device info available:', err);
    }
}

// Load device info when page loads
loadDeviceInfo();
</script>
{% endblock %}