{% extends "base.html" %}
{% block content %}

<h1>System</h1>
<p class="page-subtitle">
    Hostname, uptime, WAN status, and the state of the five Vendora
    services. Reboot, per-service restart, and WAN-mode editor available below.
</p>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}{% if flash_extra %} <code>{{ flash_extra }}</code>{% endif %}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<div class="page-actions">
    <form method="POST" action="/system/reboot" style="display: inline;"
          onsubmit="return confirm('Reboot the SBC now? Customers connected to WiFi will lose access for 30–60 seconds.');">
        <button type="submit" class="btn-danger">↻ Reboot SBC</button>
    </form>
</div>

{# Top quick stats: hostname, uptime, WAN mode, internet reachability #}
<div class="stat-grid">
    <div class="stat-card">
        <div class="label">Hostname</div>
        <div class="value" style="font-size: 18px;">{{ data.hostname }}</div>
        <div class="hint">{{ data.kernel }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Uptime</div>
        <div class="value">{{ data.uptime }}</div>
        <div class="hint">since last boot</div>
    </div>
    <div class="stat-card {{ 'good' if data.wan.link_up else '' }}">
        <div class="label">WAN Mode</div>
        <div class="value" style="text-transform: uppercase; font-size: 18px;">
            {{ data.wan.mode }}
        </div>
        <div class="hint">
            {% if data.wan.link_up %}eth0 connected{% else %}eth0 {{ data.wan.link_state }}{% endif %}
        </div>
    </div>
    <div class="stat-card {{ 'good' if data.internet_ok else '' }}">
        <div class="label">Internet</div>
        <div class="value" style="font-size: 18px;">
            {% if data.internet_ok %}Reachable{% else %}Unreachable{% endif %}
        </div>
        <div class="hint">ping 1.1.1.1 (2s timeout)</div>
    </div>
</div>

<section>
    <h2>WAN (eth0)</h2>
    <div class="card">
        <table style="width: 100%; border: none;">
            <tr>
                <th style="text-align: left; width: 30%;">Active profile</th>
                <td>
                    {% if data.wan.profile %}
                        <code>{{ data.wan.profile }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">— (no eth0 profile active)</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">Address</th>
                <td>
                    {% if data.wan.address %}
                        <code>{{ data.wan.address }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">Gateway</th>
                <td>
                    {% if data.wan.gateway %}
                        <code>{{ data.wan.gateway }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">DNS</th>
                <td>
                    {% if data.wan.dns %}
                        {% for ip in data.wan.dns %}
                            <code>{{ ip }}</code>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
</section>

<section>
    <h2>WAN Mode Editor</h2>
    <div class="card">
        <p class="card-desc">
            Switch between DHCP, Static IPv4, or PPPoE. The new profile activates
            immediately — if you typo something, internet will fail but this admin
            page stays reachable on the LAN (<code>10.0.10.1:8080</code>) so you
            can correct it. Every change is recorded in the audit log.
        </p>

        <form id="wan-form" method="POST" action="/system/wan" class="edit-form">
            <div class="wan-modes">
                {% set current_mode = data.wan.mode %}
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="dhcp"
                           {% if current_mode == 'dhcp' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>DHCP</strong>
                    <span class="wan-mode-hint">Get address from the upstream router (most common).</span>
                </label>
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="static"
                           {% if current_mode == 'static' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>Static</strong>
                    <span class="wan-mode-hint">Manual IP / gateway / DNS. Use when the ISP gave you a fixed address.</span>
                </label>
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="pppoe"
                           {% if current_mode == 'pppoe' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>PPPoE</strong>
                    <span class="wan-mode-hint">Dial-up over Ethernet (PLDT / Converge / Globe fiber, etc.).</span>
                </label>
            </div>

            <fieldset id="wan-fields-static" class="wan-fields" style="display: none;">
                <legend>Static IPv4 settings</legend>
                <div class="form-grid">
                    <div>
                        <label>Address (CIDR)</label>
                        <input type="text" name="address"
                               placeholder="e.g. 192.168.1.100/24"
                               value="{{ data.wan_static.address or '' }}">
                    </div>
                    <div>
                        <label>Gateway</label>
                        <input type="text" name="gateway"
                               placeholder="e.g. 192.168.1.1"
                               value="{{ data.wan_static.gateway or '' }}">
                    </div>
                    <div style="grid-column: 1 / -1;">
                        <label>DNS (comma-separated)</label>
                        <input type="text" name="dns"
                               placeholder="e.g. 1.1.1.1, 8.8.8.8"
                               value="{{ data.wan_static.dns or '' }}">
                    </div>
                </div>
            </fieldset>

            <fieldset id="wan-fields-pppoe" class="wan-fields" style="display: none;">
                <legend>PPPoE credentials</legend>
                <div class="form-grid">
                    <div>
                        <label>Username</label>
                        <input type="text" name="username" autocomplete="username"
                               placeholder="e.g. user@isp.com"
                               value="{{ data.wan_pppoe.username or '' }}">
                    </div>
                    <div>
                        <label>Password</label>
                        <input type="password" name="password" autocomplete="current-password"
                               placeholder="{% if data.wan_pppoe.username %}(re-enter to update){% else %}from your ISP{% endif %}">
                    </div>
                </div>
                <p class="form-hint">
                    Password is stored encrypted in the system network configuration
                    (root-owned, mode 600). Audit log records the username on every change
                    but <strong>never</strong> the password.
                </p>
            </fieldset>

            <div class="form-actions">
                <button type="submit" class="btn-primary"
                        onclick="return confirmWanApply()">Apply WAN Configuration</button>
            </div>
        </form>
    </div>
</section>

{# ============================================================ #}
{# Updates (OTA) — v1.x SBC-side UX                              #}
{# Check + install vendora-sbc package updates from the apt repo #}
{# at apt.vendorawifi.com. Trust chain baked at image build.     #}
{# ============================================================ #}
<section>
    <h2>Updates</h2>
    <div class="card">
        <p class="card-desc">
            Check for and install Vendora SBC updates. Updates ship via the
            apt repo at <code>apt.vendorawifi.com</code>; the signing key for
            that repo is baked into every Vendora SBC image. Apt rejects any
            package not signed by the correct key.
        </p>

        <div class="form-grid" style="margin-top: 8px;">
            <div>
                <label>Installed version</label>
                <div style="font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; font-weight: 600; padding: 8px 0;">
                    v{{ data.current_version }}
                </div>
            </div>
            <div>
                <label>Last checked</label>
                <div style="padding: 8px 0; font-size: 13px;">
                    {% if data.ota.last_check_at %}
                        {{ data.ota.last_check_at | localtime }}
                    {% else %}
                        <span style="color: var(--muted);">— never checked</span>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Result summary based on last check #}
        {% if data.ota.result == "update_available" and data.ota.available_version %}
            <div class="flash flash-info" style="margin: 12px 0;">
                <div>
                    <strong>Update available:</strong>
                    v{{ data.current_version }} → <strong>v{{ data.ota.available_version }}</strong>.
                    Click Install Update Now to apply it. Services restart
                    briefly during the install; customer sessions may see a
                    1–2 second blip.
                </div>
            </div>
        {% elif data.ota.result == "up_to_date" %}
            <div class="flash flash-good" style="margin: 12px 0;">
                <div>
                    <strong>Up to date.</strong>
                    Installed version v{{ data.current_version }} is the
                    current release.
                </div>
            </div>
        {% elif data.ota.result == "installing" %}
            <div class="flash flash-info" style="margin: 12px 0;">
                <div>
                    <strong>Install in progress.</strong>
                    The most recent update install hasn't finished yet (or
                    its admin restart hasn't completed). Refresh in a few
                    seconds.
                </div>
            </div>
        {% elif data.ota.result == "error" %}
            <div class="flash flash-error" style="margin: 12px 0;">
                <div>
                    <strong>Last check failed:</strong>
                    {{ data.ota.error or "unknown error" }}
                </div>
            </div>
        {% endif %}

        <div class="form-actions">
            <form method="POST" action="/system/check-updates" style="display: inline;">
                <button type="submit" class="btn-secondary">
                    {% if data.ota.result == "never" %}Check for Updates{% else %}Check Again{% endif %}
                </button>
            </form>
            {% if data.ota.result == "update_available" and data.ota.available_version %}
                <form method="POST" action="/system/install-update" style="display: inline;"
                      onsubmit="return confirm('Install Vendora SBC v{{ data.ota.available_version }} now? Services will restart briefly during the install (about 30 seconds). Customer sessions may see a 1–2 second blip.');">
                    <button type="submit" class="btn-primary">
                        Install Update Now (v{{ data.ota.available_version }})
                    </button>
                </form>
            {% endif %}
        </div>
        <p class="card-desc" style="font-size: 12px; color: var(--muted); margin-top: 12px;">
            <strong>Heads up:</strong> Check Updates runs <code>apt update</code>
            against the Vendora repo (5–30 seconds depending on network).
            Install Update Now spawns a background <code>apt upgrade</code>;
            the page will redirect to a "Updating" wait screen and auto-refresh
            here when the install finishes.
        </p>
    </div>
</section>

<section>
    <h2>GPIO Pin Map</h2>
    <div class="card">
        <p class="card-desc">
            Which Allwinner H3 GPIO lines this SBC uses for the coin slot.
            Defaults match the production custom-board wiring. If your custom
            board lands the coin signal or relay trigger on different GPIOs,
            change them here.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Heads up:</strong> saving any change here restarts
            <code>vendora-coin</code>. The slot relay drops to OFF for ~1 second
            during the restart. Don't change pins while a customer is mid-payment.
        </p>

        <form method="POST" action="/system/gpio-pin-map" class="edit-form"
              onsubmit="return confirm('Save GPIO pin map and restart vendora-coin? Slot will momentarily drop to OFF.');">
            <div class="form-grid">
                <div>
                    <label>Coin pulse input</label>
                    <select name="pulse_line" required>
                        {% for line, label in data.gpio.pulse_options %}
                        <option value="{{ line }}"
                            {% if line == data.gpio.pulse_line %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-hint" style="margin-top:4px;">
                        Default: PA{{ data.gpio.pulse_default }} (physical pin
                        {% if data.gpio.pulse_default == 12 %}3
                        {%- elif data.gpio.pulse_default == 7 %}12
                        {%- else %}custom pin{% endif %}).
                    </p>
                </div>
                <div>
                    <label>Coin slot power</label>
                    <select name="slot_power_line" required>
                        {% for line, label in data.gpio.slot_options %}
                        <option value="{{ line }}"
                            {% if line == data.gpio.slot_power_line %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-hint" style="margin-top:4px;">
                        Default: PA{{ data.gpio.slot_default }} (physical pin
                        {% if data.gpio.slot_default == 11 %}5
                        {%- elif data.gpio.slot_default == 10 %}35
                        {%- else %}custom pin{% endif %}).
                    </p>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Save &amp; Restart Coin Daemon</button>
            </div>
        </form>

        <p class="card-desc" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px;">
            Bringing up a new custom board and don't know which pins to set above?
            Use the <a href="/system/gpio-tools"><strong>GPIO Hardware Tools</strong></a> —
            a tester, a sweep looper, and a pulse-pin finder that listens on all PA pins
            at once.
        </p>
    </div>
</section>

<style>
    .wan-modes {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }
    .wan-mode-option {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 12px;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.12s, background 0.12s;
    }
    .wan-mode-option:hover {
        border-color: var(--primary);
        background: var(--surface-2);
    }
    .wan-mode-option input[type=radio] { flex-shrink: 0; }
    .wan-mode-option strong { color: var(--text); font-size: 14px; }
    .wan-mode-hint {
        color: var(--muted);
        font-size: 12px;
        flex: 1;
    }
    .wan-fields {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 16px;
        margin: 0 0 14px;
    }
    .wan-fields legend {
        padding: 0 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .wan-fields input[type=text],
    .wan-fields input[type=password] {
        width: 100%;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text);
        font-size: 14px;
        font-family: inherit;
    }
    .wan-fields input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }
</style>

<script>
function updateWanFields() {
    const selected = document.querySelector('input[name="mode"]:checked');
    const mode = selected ? selected.value : 'dhcp';
    document.getElementById('wan-fields-static').style.display = (mode === 'static') ? '' : 'none';
    document.getElementById('wan-fields-pppoe').style.display = (mode === 'pppoe') ? '' : 'none';
}
function confirmWanApply() {
    const selected = document.querySelector('input[name="mode"]:checked');
    const mode = selected ? selected.value : 'dhcp';
    return confirm('Apply ' + mode.toUpperCase() + ' WAN configuration now? ' +
                   'If something is wrong, internet will be unreachable until you fix it from this admin page.');
}
document.addEventListener('DOMContentLoaded', updateWanFields);
</script>

<section>
    <h2>Services</h2>
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>Unit</th>
                    <th>Status</th>
                    <th class="actions-cell">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for s in data.services %}
                <tr>
                    <td><code>{{ s.unit }}</code></td>
                    <td>
                        {% if s.active == 'active' %}
                            <span class="badge badge-active">active</span>
                        {% elif s.active == 'failed' %}
                            <span class="badge badge-revoked">failed</span>
                        {% elif s.active == 'inactive' %}
                            <span class="badge badge-expired">inactive</span>
                        {% else %}
                            <span class="badge badge-pending">{{ s.active }}</span>
                        {% endif %}
                    </td>
                    <td class="actions-cell">
                        <form method="POST" action="/system/restart-service/{{ s.unit }}"
                              onsubmit="return confirm('Restart {{ s.unit }}?{% if s.unit == 'vendora-admin' %} This admin page will briefly drop and auto-reload.{% endif %}');">
                            <button type="submit" class="btn-sm">Restart</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</section>

<section>
    <h2>Resources</h2>
    <div class="stat-grid stat-grid--stack">
        <div class="stat-card">
            <div class="label">Memory</div>
            <div class="value">{{ data.mem.used_pct }}%</div>
            <div class="hint">{{ data.mem.available_h }} free of {{ data.mem.total_h }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.mem.used_pct }}%"></div></div>
        </div>
        <div class="stat-card">
            <div class="label">Disk</div>
            <div class="value">{{ data.disk.used_pct }}%</div>
            <div class="hint">{{ data.disk.free_h }} free of {{ data.disk.total_h }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.disk.used_pct }}%"></div></div>
        </div>
    </div>
</section>

{% endblock %}