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

{% block title %}System Operations - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/system_operations.css">
{% endblock %}
{% block content %}
<main class="ops-page">
    <div class="ops-header">
        <div>
            <h1 class="brand">System Operations</h1>
            <div class="muted">Deployment safety, migration health, backups, storage, queues, and release status.</div>
        </div>
        {{ ui.button('Admin Dashboard', '/admin') }}
    </div>

    {% set readiness = snapshot.readiness %}
    <section class="ops-card">
        <h2>Operational Status</h2>
        <div class="grid">
            <div class="ops-card metric">
                <span class="muted">Health Score</span>
                <strong>{{ readiness.score }}</strong>
                <span class="status {{ readiness.status }}">{{ readiness.status|title }}</span>
            </div>
            <div class="ops-card metric">
                <span class="muted">Environment</span>
                <strong>{{ snapshot.environment }}</strong>
                <span>{{ snapshot.platform.release_channel }}</span>
            </div>
            <div class="ops-card metric">
                <span class="muted">Backup</span>
                <strong>{{ 'OK' if snapshot.backup.ok else 'Check' }}</strong>
                <span>{{ snapshot.backup.latest.created_at if snapshot.backup.latest else 'No completed backup found' }}</span>
            </div>
            <div class="ops-card metric">
                <span class="muted">Queue</span>
                <strong>{{ snapshot.queue.queued if snapshot.queue.queued is defined else 0 }}</strong>
                <span>{{ snapshot.queue.failed_recent if snapshot.queue.failed_recent is defined else 0 }} failed recently</span>
            </div>
        </div>
    </section>

    <section class="ops-card">
        <h2>User Admin Controls</h2>
        <div class="grid">
            {{ ui.button('Onboarding', '/onboarding') }}
            {{ ui.button('Operations Center', '/operations-center') }}
            {{ ui.button('Business Activity', '/business-activity') }}
            {{ ui.button('Trust Checks', '/trust') }}
            {{ ui.button('Platform Trust', '/platform-trust') }}
            {{ ui.button('Data Governance', '/data-governance') }}
            {{ ui.button('Security Maturity', '/security-maturity') }}
            {{ ui.button('Support Center', '/support') }}
            {{ ui.button('Customer Success', '/customer-success') }}
            {{ ui.button('Retention Engine', '/retention-engine') }}
            {{ ui.button('Feedback Loop', '/product-feedback') }}
            {{ ui.button('Playbooks', '/playbooks') }}
            {{ ui.button('Backup Center', '/backup') }}
            {{ ui.button('Cost Control', '/cost-management') }}
            {{ ui.button('Feature Focus', '/focus-engine') }}
            {{ ui.button('Deployment Helper', '/devops-assistant') }}
        </div>
    </section>

    {% if is_server_owner %}
    <section class="ops-card">
        <h2>Server System Control</h2>
        <div class="grid">
            {{ ui.button('Registered Shops', '/server/shops') }}
            {{ ui.button('Maintainability', '/maintainability') }}
            {{ ui.button('Scaling Discipline', '/scaling') }}
            {{ ui.button('Incident Center', '/observability') }}
            {{ ui.button('Incident Diagnostics', '/observability') }}
            {{ ui.button('Company Ops', '/company-operations') }}
            {{ ui.button('Company Metrics', '/company-metrics') }}
            {{ ui.button('Product Intelligence', '/product-intelligence') }}
            {{ ui.button('Market Validation', '/market-validation') }}
            {{ ui.button('Pilot Monitor', '/pilot-program') }}
            {{ ui.button('Demo System', '/demo-system') }}
            {{ ui.button('Distribution', '/distribution') }}
            {{ ui.button('Deployment Discipline', '/deployment-discipline') }}
            {{ ui.button('Deployment Trust', '/deployment-trust') }}
            <a href="/readiness?format=html" class="btn" target="_blank">Readiness Check</a>
            <a href="/healthz?format=html" class="btn" target="_blank">Health Check</a>
            {{ ui.button('Trust Engine', '/trust-engine') }}
            {{ ui.button('Internal Ops', '/internal-operations') }}
            {{ ui.button('Operations Runbooks', '/operations-runbooks') }}
            {{ ui.button('Billing Control', '/admin/app-billing') }}
            {{ ui.button('Plugin Manager', '/admin/plugins') }}
        </div>
    </section>
    {% endif %}

    <section class="ops-card">
        <h2>Health Checks</h2>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Component</th><th>Status</th><th>Details</th></tr></thead>
                <tbody>
                {% for name, check in readiness.checks.items() %}
                    <tr>
                        <td><strong>{{ name.replace('_', ' ')|title }}</strong></td>
                        <td><span class="status {{ 'healthy' if check.ok else 'failed' }}">{{ 'OK' if check.ok else 'Failed' }}</span></td>
                        <td><pre>{{ check }}</pre></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="ops-card">
        <h2>Deployment Events</h2>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Time</th><th>Event</th><th>Status</th><th>Release</th><th>Details</th></tr></thead>
                <tbody>
                {% for event in snapshot.deployment_events %}
                    <tr>
                        <td>{{ event.created_at }}</td>
                        <td>{{ event.event_type }}</td>
                        <td>{{ event.status }}</td>
                        <td>{{ event.release_version }}</td>
                        <td><pre>{{ event.detail_json }}</pre></td>
                    </tr>
                {% else %}
                    <tr><td colspan="5">No deployment events recorded yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="ops-card">
        <h2>Migrations And Alerts</h2>
        <div class="grid">
            <div class="ops-card">
                <h3>Migration History</h3>
                {% for item in snapshot.migration_logs %}
                    <p><strong>{{ item.status }}</strong> {{ item.revision or 'no revision' }} <span class="muted">{{ item.started_at }}</span></p>
                {% else %}
                    <p>No migration logs recorded yet.</p>
                {% endfor %}
            </div>
            <div class="ops-card">
                <h3>Open Alerts</h3>
                {% for alert in snapshot.operational_alerts %}
                    <p><strong>{{ alert.severity|upper }}</strong> {{ alert.component }}: {{ alert.message }}</p>
                {% else %}
                    <p>No open operational alerts.</p>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="ops-card">
        <h2>Storage Usage</h2>
        <div class="grid">
            {% for name, item in snapshot.storage.items() %}
                <div class="ops-card metric">
                    <span class="muted">{{ name|title }}</span>
                    <strong>{{ item.mb }} MB</strong>
                    <span>{{ item.files }} files</span>
                </div>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}