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

{% block title %}Support Center - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Support Center</h1>
            <div class="ops-subtitle">Tickets, diagnostics export, AI-assisted troubleshooting, and remote support preparation.</div>
        </div>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/trust">Trust</a>
            <a class="ops-button secondary" href="/support#support-diagnostics" data-instant="on">Diagnostics Summary</a>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Report An Issue</h2>
        <form method="post" action="/support/tickets">
            <div class="ops-form-grid">
                <label>Category
                    <select name="category">
                        <option value="checkout">Checkout</option>
                        <option value="inventory">Inventory</option>
                        <option value="payments">Payments</option>
                        <option value="offline">Offline/Sync</option>
                        <option value="receipts">Receipts</option>
                    </select>
                </label>
                <label>Priority
                    <select name="priority">
                        <option value="normal">Normal</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </label>
                <label>Subject <input name="subject" placeholder="Short issue title"></label>
            </div>
            <label>Description <textarea name="description" placeholder="What happened, who was using it, and what the cashier expected"></textarea></label>
            <button type="submit">Create Ticket</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Recent Tickets</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>ID</th><th>Category</th><th>Subject</th><th>Priority</th><th>Status</th><th>Created</th></tr></thead>
                <tbody>
                {% for ticket in snapshot.tickets %}
                <tr><td>#{{ ticket.id }}</td><td>{{ ticket.category }}</td><td>{{ ticket.subject }}</td><td>{{ ticket.priority }}</td><td>{{ ticket.status }}</td><td>{{ ticket.created_at }}</td></tr>
                {% else %}
                <tr><td colspan="6">No support tickets yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="ops-grid">
        <div class="ops-panel">
            <h2>SLA Queue</h2>
            <div class="ops-list">
                {% for item in snapshot.sla_queue %}
                <div class="ops-list-item">
                    <span class="ops-badge {{ 'danger' if item.priority == 'critical' else 'warn' if item.priority == 'high' else 'info' }}">{{ item.priority|title }}</span>
                    <strong>Ticket #{{ item.id }}</strong>
                    <p>{{ item.status }} - respond in {{ item.response_minutes or 'n/a' }} minutes, resolve in {{ item.resolution_minutes or 'n/a' }} minutes.</p>
                </div>
                {% else %}
                <div class="ops-list-item">No open SLA queue.</div>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Resolution Metrics</h2>
            <p>Average response: {{ "%.1f"|format(snapshot.resolution_metrics.avg_response or 0) }} minutes</p>
            <p>Average resolution: {{ "%.1f"|format(snapshot.resolution_metrics.avg_resolution or 0) }} minutes</p>
            <p>Satisfaction: {{ "%.1f"|format(snapshot.resolution_metrics.satisfaction or 0) }}</p>
        </div>
    </section>

    <section class="ops-panel" id="support-diagnostics">
        <h2>Diagnostics Summary</h2>
        <p class="ops-muted">Support diagnostics are shown here as an operational page summary instead of opening raw JSON.</p>
        <div class="ops-grid">
            <div class="ops-list-item">
                <strong>Database</strong>
                <p>{{ snapshot.diagnostics.database|title }}</p>
            </div>
            <div class="ops-list-item">
                <strong>Readiness</strong>
                <p>{{ snapshot.diagnostics.readiness.status|replace('_', ' ')|title }} - score {{ snapshot.diagnostics.readiness.score }}</p>
            </div>
            <div class="ops-list-item">
                <strong>Generated</strong>
                <p>{{ snapshot.diagnostics.generated_at }}</p>
            </div>
        </div>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>Area</th><th>Count</th></tr></thead>
                <tbody>
                {% for name, count in snapshot.diagnostics.table_counts.items() %}
                <tr><td>{{ name|replace('_', ' ')|title }}</td><td>{{ count }}</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}