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

{% block title %}Verification Controls - Gvelo Server{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/server_verification_controls.css">
{% endblock %}
{% block content %}
<div class="shell">
    <div class="topbar">
        <div>
            <h1>Verification Control Center</h1>
            <p class="muted">Server-owner switches for registration verification, payment confirmation, and email/SMS code delivery. All verification controls are deactivated by default.</p>
        </div>
        <div class="actions hil-inline-d462248a40">
            <a class="back-link" href="/server/dashboard">Server Control Center</a>
            <a class="back-link" href="/admin/receipt-delivery">Shop Receipt APIs</a>
        </div>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <section class="status-grid">
        <div class="card">
            <div class="label">Verification Controls</div>
            <div class="value {{ 'ok' if summary.all_deactivated else 'warn' }}">{{ 'Deactivated' if summary.all_deactivated else summary.active_count ~ ' Active' }}</div>
        </div>
        <div class="card">
            <div class="label">Email API</div>
            <div class="value {{ 'ok' if delivery_status.email else 'bad' }}">{{ 'Ready' if delivery_status.email else 'Missing' }}</div>
        </div>
        <div class="card">
            <div class="label">SMS API</div>
            <div class="value {{ 'ok' if delivery_status.sms else 'bad' }}">{{ 'Ready' if delivery_status.sms else 'Missing' }}</div>
        </div>
        <div class="card">
            <div class="label">App Version</div>
            <div class="value">{{ current_version or '1.0' }}</div>
        </div>
    </section>

    <section class="grid">
        <article class="panel">
            <h2>Route Activation</h2>
            <p class="muted">Use these switches only when the business is ready for code delivery and manual payment confirmation governance.</p>
            <div class="control-list">
                {% for control in summary.controls %}
                <div class="control-item">
                    <div class="control-head">
                        <div>
                            <h3 class="hil-inline-c81ce4b250">{{ control.label }}</h3>
                            <div class="route">{{ control.route }}</div>
                        </div>
                        <span class="pill {{ 'on' if control.enabled else 'off' }}">{{ 'Active' if control.enabled else 'Deactivated' }}</span>
                    </div>
                    <p class="muted hil-inline-ef0b7a1148">{{ control.description }}</p>
                    <p class="muted hil-inline-ef0b7a1148"><strong>Risk:</strong> {{ control.risk }}</p>
                    <form method="post" action="/server/verification-controls/toggle">
                        <input type="hidden" name="control_key" value="{{ control.control_key }}">
                        {% if control.enabled %}
                            <input type="hidden" name="enabled" value="0">
                            <button class="danger" type="submit">Deactivate</button>
                        {% else %}
                            <input type="hidden" name="enabled" value="1">
                            <button class="primary" type="submit">Activate</button>
                        {% endif %}
                    </form>
                </div>
                {% endfor %}
            </div>
        </article>

        <article class="panel">
            <h2>Email & SMS APIs</h2>
            <p class="muted">These global credentials are used by verification and password reset delivery. Shop receipt delivery can still override receipt-specific APIs per shop.</p>
            <form method="post" action="/server/verification-controls/delivery-settings">
                <div class="form-grid">
                    <div>
                        <h3>Email SMTP</h3>
                        <label>SMTP server</label>
                        <input name="smtp_server" value="{{ raw_settings.smtp_server or '' }}" placeholder="smtp.gmail.com">
                        <label>SMTP port</label>
                        <input name="smtp_port" type="number" value="{{ raw_settings.smtp_port or '587' }}">
                        <label>SMTP username</label>
                        <input name="smtp_user" value="{{ raw_settings.smtp_user or '' }}" placeholder="email@example.com">
                        <label>SMTP password / app password</label>
                        <input name="smtp_password" type="password" placeholder="{{ 'Saved - leave blank to keep' if settings.smtp_password else 'SMTP password' }}">
                        <label>From email</label>
                        <input name="smtp_from" value="{{ raw_settings.smtp_from or raw_settings.smtp_user or '' }}" placeholder="receipts@example.com">
                        <label class="hil-inline-42e4acca13">
                            <input type="checkbox" name="smtp_use_tls" value="1" {% if raw_settings.smtp_use_tls != '0' %}checked{% endif %} class="hil-inline-a3d6c55d04">
                            Use TLS
                        </label>
                    </div>
                    <div>
                        <h3>SMS API</h3>
                        <label>Africa's Talking username</label>
                        <input name="at_username" value="{{ raw_settings.at_username or '' }}" placeholder="sandbox or live username">
                        <label>API key</label>
                        <input name="at_api_key" type="password" placeholder="{{ 'Saved - leave blank to keep' if settings.at_api_key else 'Africa Talking API key' }}">
                        <label>Sender ID</label>
                        <input name="at_sender" value="{{ raw_settings.at_sender or 'GVELO' }}" placeholder="GVELO">
                    </div>
                </div>
                <div class="actions">
                    <button class="primary" type="submit">Save API Settings</button>
                </div>
            </form>

            <h2 class="hil-inline-2517a51bbd">Test Delivery</h2>
            <p class="muted">Test buttons use the same verification delivery API path as registration and password reset codes.</p>
            <div class="form-grid">
                <form method="post" action="/server/verification-controls/test-delivery">
                    <input type="hidden" name="method" value="email">
                    <label>Test email recipient</label>
                    <input name="recipient" type="email" placeholder="owner@example.com">
                    <button class="primary hil-inline-d2c171b18b" type="submit">Send Test Email</button>
                </form>
                <form method="post" action="/server/verification-controls/test-delivery">
                    <input type="hidden" name="method" value="sms">
                    <label>Test SMS recipient</label>
                    <input name="recipient" placeholder="+254700000000">
                    <button class="primary hil-inline-d2c171b18b" type="submit">Send Test SMS</button>
                </form>
            </div>

            {% if recent_events %}
            <h2 class="hil-inline-2517a51bbd">Recent Delivery Events</h2>
            <ul class="event-list">
                {% for event in recent_events %}
                    <li>{{ event.created_at }} - {{ event.purpose }} {{ event.method }} {{ event.status }}: {{ event.message }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </article>
    </section>
</div>
{% endblock %}