{% extends "base.html" %}

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

{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-chart-line" aria-hidden="true"></i> Sync status</h1>
  <div class="app-page-header-actions">
    <button type="button" onclick="refreshStatus()" class="btn btn-primary btn-sm"><i class="fas fa-sync-alt"></i> Refresh</button>
    <button type="button" onclick="testConnection()" class="btn btn-secondary btn-sm"><i class="fas fa-plug"></i> Test connection</button>
    <a href="{{ url_for('index') }}" class="btn btn-secondary btn-sm"><i class="fas fa-home"></i> Dashboard</a>
  </div>
</div>

<div class="stats-grid">
  <details class="widget" open>
    <summary><i class="fas fa-link" aria-hidden="true"></i> Connection</summary>
    <p style="margin:10px 0;">
      <span class="connection-status {% if state.connected %}connection-status-connected{% else %}connection-status-disconnected{% endif %}" id="connBadge">
        <i class="fas fa-circle" aria-hidden="true"></i>
        <span class="connection-status-text" id="connText">{% if state.connected %}Connected{% else %}Disconnected{% endif %}</span>
      </span>
    </p>
    <p class="muted" style="margin:0;font-size:0.9rem;word-break:break-all;">{{ config.server_url }}</p>
    <p class="muted" style="margin:6px 0 0;font-size:0.85rem;" id="connError"></p>
    <p class="muted" style="margin:6px 0 0;font-size:0.85rem;" id="orgLine">
      Organization: <strong>{{ config.organization_name or (('#' ~ config.organization_id) if config.organization_id else 'not bound') }}</strong>
    </p>
  </details>

  <details class="widget" open>
    <summary><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i> Sync statistics</summary>
    <div style="padding-top:10px;overflow-x:auto;">
    <table class="client-table-simple">
      <tbody>
        <tr><td>Scans uploaded</td><td><strong id="statScans">{{ stats.scans_uploaded if stats else 0 }}</strong></td></tr>
        <tr><td>Devices synced</td><td><strong id="statDevices">{{ stats.devices_synced if stats else 0 }}</strong></td></tr>
        <tr><td>Failed uploads</td><td><strong id="statFailed">{{ stats.failed_uploads if stats else 0 }}</strong></td></tr>
        <tr><td>Queue size</td><td><strong id="statQueue">{{ stats.queue_size if stats else 0 }}</strong></td></tr>
      </tbody>
    </table>
    </div>
  </details>

  <details class="widget" open>
    <summary><i class="fas fa-clock" aria-hidden="true"></i> Last activity</summary>
    <div style="padding-top:10px;overflow-x:auto;">
    <table class="client-table-simple">
      <tbody>
        <tr><td>Last sync</td><td id="statLastSync">{{ stats.last_sync if stats and stats.last_sync else 'Never' }}</td></tr>
        <tr><td>Last heartbeat</td><td id="statLastHeartbeat">{{ stats.last_heartbeat if stats and stats.last_heartbeat else 'Never' }}</td></tr>
        <tr><td>Last scan</td><td id="statLastScan">{{ state.last_scan if state and state.last_scan else 'Never' }}</td></tr>
      </tbody>
    </table>
    </div>
  </details>

  <details class="widget" open>
    <summary><i class="fas fa-cogs" aria-hidden="true"></i> Sync manager</summary>
    <p style="margin:10px 0;">
      <span class="connection-status {% if stats and stats.is_running %}connection-status-connected{% else %}connection-status-disconnected{% endif %}" id="syncBadge">
        <i class="fas fa-circle" aria-hidden="true"></i>
        <span class="connection-status-text" id="syncText">{% if stats and stats.is_running %}Running{% elif not state.connected %}Not started (server offline){% else %}Stopped{% endif %}</span>
      </span>
    </p>
    <p class="muted" style="margin:0;font-size:0.9rem;">Background synchronization service.</p>
  </details>
</div>

<div id="statusMessage" class="client-banner-muted" style="display: none; margin-top: 16px;"></div>

<script>
function setBadge(badgeId, textId, ok, label) {
    const badge = document.getElementById(badgeId);
    const text = document.getElementById(textId);
    if (!badge || !text) return;
    badge.classList.toggle('connection-status-connected', !!ok);
    badge.classList.toggle('connection-status-disconnected', !ok);
    text.textContent = label;
}

async function refreshStatus() {
    try {
        const response = await fetch('/api/status');
        const data = await response.json();
        if (!data.success) return;
        const state = data.state || {};
        const stats = data.stats || {};

        setBadge('connBadge', 'connText', state.connected, state.connected ? 'Connected' : 'Disconnected');
        const errEl = document.getElementById('connError');
        if (errEl) errEl.textContent = state.connection_error || '';

        const running = !!data.sync_running;
        let syncLabel = 'Stopped';
        if (running) syncLabel = 'Running';
        else if (!state.connected) syncLabel = 'Not started (server offline)';
        setBadge('syncBadge', 'syncText', running, syncLabel);

        const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
        set('statScans', stats.scans_uploaded != null ? stats.scans_uploaded : 0);
        set('statDevices', stats.devices_synced != null ? stats.devices_synced : 0);
        set('statFailed', stats.failed_uploads != null ? stats.failed_uploads : 0);
        set('statQueue', stats.queue_size != null ? stats.queue_size : 0);
        set('statLastSync', stats.last_sync || 'Never');
        set('statLastHeartbeat', stats.last_heartbeat || 'Never');
        set('statLastScan', state.last_scan || 'Never');

        const ci = data.client_info || {};
        const orgEl = document.getElementById('orgLine');
        if (orgEl) {
            const orgLabel = ci.organization_name || (ci.organization_id ? ('#' + ci.organization_id) : 'not bound');
            orgEl.innerHTML = 'Organization: <strong></strong>';
            orgEl.querySelector('strong').textContent = orgLabel;
        }
    } catch (error) {
        console.error('Failed to refresh status:', error);
    }
}

async function testConnection() {
    const messageDiv = document.getElementById('statusMessage');
    messageDiv.style.display = 'block';
    messageDiv.className = 'client-banner-muted client-banner-info';
    messageDiv.textContent = 'Testing connection…';
    try {
        const response = await fetch('/api/test-connection', { method: 'POST' });
        const data = await response.json();
        if (data.connected) {
            messageDiv.className = 'client-banner-muted client-banner-info';
            messageDiv.textContent = 'Connection successful.';
        } else {
            messageDiv.className = 'client-banner-muted client-banner-warn';
            messageDiv.textContent = 'Connection failed.';
        }
        refreshStatus();
        setTimeout(() => { messageDiv.style.display = 'none'; }, 3000);
    } catch (error) {
        messageDiv.className = 'client-banner-muted client-banner-warn';
        messageDiv.textContent = 'Connection test failed: ' + error.message;
    }
}

setInterval(refreshStatus, 10000);
</script>
{% endblock %}