{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Offline Continuity - Gvelo{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/offline_continuity.css">
{% endblock %}
{% block content %}
<div class="shell">
    <div class="topbar">
        <div>
            <h1>Offline Continuity Center</h1>
            <p class="muted">Operational survival controls for sales continuity, protected queues, storage health, recovery reporting, and reconnect trust.</p>
        </div>
        <a class="back-link" href="/admin">Admin Dashboard</a>
    </div>

    <section class="metrics" id="offline-summary">
        <div class="metric">
            <div class="label">Pending Replay</div>
            <div class="value {{ 'warn' if summary.pending else 'ok' }}">{{ summary.pending }}</div>
        </div>
        <div class="metric">
            <div class="label">Failed Sync</div>
            <div class="value {{ 'bad' if summary.failed else 'ok' }}">{{ summary.failed }}</div>
        </div>
        <div class="metric">
            <div class="label">Open Conflicts</div>
            <div class="value {{ 'bad' if summary.conflicts else 'ok' }}">{{ summary.conflicts }}</div>
        </div>
        <div class="metric">
            <div class="label">Recovered Operations</div>
            <div class="value ok">{{ summary.recovered }}</div>
        </div>
        <div class="metric">
            <div class="label">Client Snapshots</div>
            <div class="value">{{ summary.snapshots }}</div>
        </div>
        <div class="metric">
            <div class="label">Resilience Samples</div>
            <div class="value">{{ summary.metrics }}</div>
        </div>
    </section>

    <section class="grid">
        <article class="section">
            <h2>Operate During Outages</h2>
            <p class="muted">Open the critical workflows that keep the business moving when the network is unstable.</p>
            <div class="button-grid">
                <a class="action primary" href="/sales">POS & Checkout</a>
                <a class="action primary" href="/inventory">Inventory Lookup</a>
                <a class="action primary" href="/receipts">Receipts</a>
                <a class="action" href="/transactions">Transactions</a>
                <a class="action" href="/scanner-center?return_to=/offline-continuity&target=/sales">Scanner Center</a>
                <a class="action" href="/connect-phone-scanner?return_to=/offline-continuity&target=/sales">Phone Scanner</a>
            </div>
        </article>

        <article class="section">
            <h2>Recovery & Sync</h2>
            <p class="muted">Review offline recovery status and move to the real operational pages that use the protected local data.</p>
            <div class="button-grid">
                <a class="action" href="/offline-continuity#offline-summary">Recovery Status</a>
                <a class="action" href="/inventory">Inventory Cache</a>
                <a class="action" href="/analytics">Analytics Snapshot</a>
                <button class="action warning" type="button" id="push-health">Push Browser Health</button>
            </div>
        </article>

        <article class="section">
            <h2>Reports</h2>
            <p class="muted">Regenerate the server-side continuity, conflict, recovery, storage, and resilience score reports.</p>
            <div class="button-grid">
                <form method="post" action="/offline-continuity/reports/generate">
                    <button class="action primary" type="submit">Generate Reports</button>
                </form>
                <a class="action" href="/documentation">Documentation</a>
            </div>
            <div class="report-list">
                {% for report in reports %}
                <div class="report-row">
                    <span>{{ report.name }}</span>
                    <span>{{ 'Ready' if report.exists else 'Missing' }}{% if report.exists %} | {{ (report.size / 1024)|round(1) }} KB{% endif %}</span>
                </div>
                {% endfor %}
            </div>
        </article>

        <article class="section">
            <h2>Server & Admin Paths</h2>
            <p class="muted">Move between the server-owner controls and the normal admin dashboard without hunting through menus.</p>
            <div class="button-grid">
                {% if is_server_owner %}
                <a class="action primary" href="/server/dashboard">Server Control</a>
                <a class="action" href="/server/shops">Registered Shops</a>
                {% endif %}
                <a class="action primary" href="/admin">Admin Dashboard</a>
                <a class="action" href="/operations-center">Operations Center</a>
                <a class="action" href="/trust">Trust Checks</a>
                <a class="action" href="/support">Support Center</a>
            </div>
        </article>
    </section>
</div>

<script>
(function () {
    const button = document.getElementById("push-health");
    if (!button) return;
    button.addEventListener("click", async () => {
        button.disabled = true;
        const original = button.textContent;
        button.textContent = "Capturing...";
        try {
            if (window.GveloOffline && window.GveloOffline.storageHealth) {
                await window.GveloOffline.storageHealth();
            }
            if (window.GveloOffline && window.GveloOffline.snapshotOperationalState) {
                await window.GveloOffline.snapshotOperationalState("manual_admin_health_push");
            }
            if (window.GveloOffline && window.GveloOffline.publishHealthSnapshot) {
                await window.GveloOffline.publishHealthSnapshot("manual_admin_health_push");
            }
            if (window.GveloOffline && window.GveloOffline.syncQueuedOperations) {
                await window.GveloOffline.syncQueuedOperations({ force: true });
            }
            button.textContent = "Health Sent";
        } catch (error) {
            button.textContent = "Health Protected Locally";
        }
        window.setTimeout(() => {
            button.disabled = false;
            button.textContent = original;
        }, 1800);
    });
})();
</script>
{% endblock %}