{% extends "admin_base.html" %}
{% import "macros/empty_state.html" as empty %}
{% block page_title %}SSL Management{% endblock %}
{% block admin_content %}
<div class="space-y-6" {{ plugin_scope_attr }}>
    
    <!-- Header -->
    <header class="flex flex-col gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between">
        <div class="flex min-w-0 flex-col">
            <h2 class="text-xl font-bold text-foreground"><i class="fas fa-shield-alt mr-2" aria-hidden="true"></i>SSL Certificate Management</h2>
            <p class="mt-1 text-sm text-muted">Monitor and renew Let’s Encrypt certificates for your custom domains.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <button id="btn-check-all" type="button" class="blocks-icon-button" title="Refresh status" aria-label="Refresh certificate status"><i class="fas fa-sync-alt" aria-hidden="true"></i></button>
            <button id="btn-renew-selected" type="button" class="blocks-button blocks-button-secondary" hidden><i class="fas fa-redo" aria-hidden="true"></i>Renew Selected (<span id="selected-count">0</span>)</button>
            <button id="btn-renew-all" type="button" class="blocks-button blocks-button-primary"><i class="fas fa-redo" aria-hidden="true"></i>Renew All</button>
        </div>
    </header>

    <!-- Configuration Alerts -->
    {% if not has_cloudflare or not has_email %}
    <div class="rounded-xl border border-warning bg-warning/10 p-4 text-sm text-foreground" role="status">
        <i class="fas fa-exclamation-triangle"></i>
            <div class="flex flex-col">
            <strong>Missing Configuration:</strong> 
            Please ensure both 
            {% if not has_cloudflare %}<span class="rounded-md border border-divider bg-canvas px-2 py-1 font-mono text-xs">Cloudflare API Token</span>{% endif %} 
            {% if not has_cloudflare and not has_email %} and {% endif %}
            {% if not has_email %}<span class="rounded-md border border-divider bg-canvas px-2 py-1 font-mono text-xs">ACME Email</span>{% endif %} 
            are set in the plugin settings.
        </div>
    </div>
    {% endif %}

    <!-- Stats Summary -->
    <section class="grid grid-cols-1 gap-4 sm:grid-cols-3" aria-label="Certificate overview">
        <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
                    <div class="text-2xl font-bold text-foreground">{{ domains_info | length }}</div>
                    <div class="mt-1 text-sm text-muted">Domains Enumerated</div>
                </div>
        <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
                    <div class="text-2xl font-bold text-foreground">{{ certificates_count }}</div>
                    <div class="mt-1 text-sm text-muted">Active Certificates</div>
                </div>
        <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
                    <div class="text-2xl font-bold text-foreground">{% if is_staging %}<span class="text-warning">Staging</span>{% else %}<span class="text-success">Production</span>{% endif %}</div>
                    <div class="mt-1 text-sm text-muted">ACME Environment</div>
                </div>
    </section>

    <!-- Renewal Progress Log (Hidden by default) -->
    <section id="renewal-progress" class="rounded-xl border border-divider bg-surface p-4 shadow-sm" hidden aria-labelledby="ssl-log-heading">
        <div class="flex items-center justify-between gap-3">
            <h3 id="ssl-log-heading" class="font-semibold text-foreground"><i class="fas fa-terminal mr-2" aria-hidden="true"></i>Activity Log</h3>
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm btn-clear-logs">Clear</button>
        </div>
        <div id="status-log-content" class="mt-3 max-h-80 space-y-1 overflow-auto rounded-lg bg-canvas p-3 font-mono text-xs" role="log" aria-live="polite" aria-relevant="additions">
                <!-- Log entries will be prepended here by JS -->
        </div>
    </section>

    <!-- Domains Table -->
    <div class="blocks-responsive-table">
    <table class="min-w-[64rem]">
        <thead>
            <tr>
                <th class="w-12">
                    <input type="checkbox" id="selectAll" title="Select all domains" aria-label="Select all domains">
                </th>
                <th>Domain</th>
                <th>Status</th>
                <th>Issuer</th>
                <th>Expiry Date</th>
                <th>Days to Expiry</th>
                <th>Key Type</th>
                <th class="w-32">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for info in domains_info %}
            {% set domain = info.domain %}
            {% set cert = info.cert %}
            <tr>
                <td class="" data-label="Select">
                    <input type="checkbox" class="domain-checkbox size-4 accent-brand" data-domain="{{ domain }}" aria-label="Select {{ domain }}">
                </td>
                <td data-label="Domain">
                    <div class="font-semibold text-foreground">{{ domain }}</div>
                </td>
                <td data-label="Status">
                    {% if cert %}
                        <span class="blocks-status-pill is-success" data-ssl-status>Active</span>
                    {% else %}
                        <span class="blocks-status-pill is-danger" data-ssl-status>Missing</span>
                    {% endif %}
                </td>
                <td data-label="Issuer">
                    {% if cert and cert.issuer %}
                        {{ cert.issuer }}
                    {% elif cert %}
                        Let's Encrypt
                    {% else %}
                        -
                    {% endif %}
                </td>
                <td data-label="Expiry Date">
                    {% if cert and cert.expiry_date %}
                        <div class="text-sm">{{ cert.expiry_date | date_in_tz(timezone=settings.timezone) }}</div>
                    {% else %}
                        <span class="text-danger">No Certificate</span>
                    {% endif %}
                </td>
                <td data-label="Days to Expiry">
                    {% if cert and cert.days_to_expiry is defined %}
                        <span class="ssl-days-value ssl-days-{{ cert.days_to_expiry_level | default(value='ok') }}">{{ cert.days_to_expiry }}</span>
                    {% elif cert %}
                        <span class="text-muted">—</span>
                    {% else %}
                        <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td data-label="Key Type">
                    <span class="rounded-md border border-divider bg-canvas px-2 py-1 font-mono text-xs">{{ cert.key_type | default(value="ecdsa") }}</span>
                </td>
                <td class="" data-label="Actions">
                    <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm btn-renew" data-domain="{{ domain }}" title="Renew certificate for {{ domain }}">
                        <i class="fas fa-redo" aria-hidden="true"></i> Renew
                    </button>
                </td>
            </tr>
            {% else %}
            {{ empty::empty_state(table=true, colspan=8, icon="fas fa-shield-alt", title="No domains found", description="No domains found in Cloudflare. Please check your API token.") }}
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- HTTP-01 Subdomain Onboarding Section -->
    <section class="space-y-4 pt-4">
        <header class="flex flex-col">
            <h2 class="text-xl font-bold text-foreground"><i class="fas fa-link mr-2" aria-hidden="true"></i>HTTP-01 Subdomain Onboarding</h2>
            <p class="mt-1 text-sm text-muted">Onboard and route custom domains/subdomains using Traefik’s built-in ACME HTTP-01 resolver.</p>
        </header>

    <!-- Instructions and Add Domain Form Grid -->
    <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <!-- Add Subdomain Form -->
        <div class="space-y-4 rounded-xl border border-divider bg-surface p-5 shadow-sm">
            <h3>Map New Custom Domain</h3>
            <p class="text-sm leading-6 text-muted">Enter the domain or subdomain you want to onboard. Traefik will automatically issue and manage the Let's Encrypt certificate for it.</p>
            
            <form id="form-map-http01" class="mt-5 space-y-4">
                <div class="blocks-form-field">
                    <label for="input-http01-domain">Custom Domain / Subdomain</label>
                    <input type="text" id="input-http01-domain" class="blocks-input" placeholder="e.g. shop.myclient.com" autocomplete="url" required>
                </div>
                <button type="submit" id="btn-map-http01" class="blocks-button blocks-button-primary w-full">
                    <i class="fas fa-plus"></i> Map Domain
                </button>
            </form>
        </div>

        <!-- Guide Box -->
        <div class="space-y-4 rounded-xl border border-divider bg-surface p-5 shadow-sm">
            <h3>DNS Setup Instructions</h3>
            <p class="text-sm leading-6 text-muted">Before mapping a custom domain, ensure your client configures their DNS properly:</p>
            <div class="mt-4 space-y-4">
                <div class="rounded-lg bg-canvas p-4">
                    <strong>1. Create CNAME Record:</strong>
                    <p>Instruct the client to point a CNAME DNS record for their subdomain (e.g., <code>shop</code>) to your platform's base URL domain: <code id="cname-platform-target"></code>.</p>
                </div>
                <div class="rounded-lg bg-canvas p-4">
                    <strong>2. Wait for Propagation:</strong>
                    <p>DNS records may take a few minutes to propagate. Once propagated, map the domain here.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Mapped HTTP-01 Domains Table -->
    <div class="blocks-responsive-table mt-5">
        <table class="min-w-[40rem]">
            <thead>
                <tr>
                    <th>Custom Domain</th>
                    <th>Traefik Router</th>
                    <th>ACME Resolver</th>
                    <th>Routing Status</th>
                    <th class="w-32">Actions</th>
                </tr>
            </thead>
            <tbody id="http01-domains-body">
                {% for item in http01_domains %}
                <tr>
                    <td data-label="Custom Domain">
                        <div class="font-semibold text-foreground">{{ item.domain }}</div>
                    </td>
                    <td data-label="Traefik Router">
                        <code>{{ item.router_key }}</code>
                    </td>
                    <td data-label="ACME Resolver">
                        <span class="rounded-md border border-divider bg-canvas px-2 py-1 font-mono text-xs">{{ item.resolver }}</span>
                    </td>
                    <td data-label="Routing Status">
                        {% if item.has_router %}
                            <span class="blocks-status-pill is-success">Routing Active</span>
                        {% else %}
                            <span class="blocks-status-pill is-warning">Config Missing</span>
                        {% endif %}
                    </td>
                    <td class="" data-label="Actions">
                        <button type="button" class="blocks-button blocks-button-danger blocks-button-sm btn-unmap-http01" data-domain="{{ item.domain }}" title="Unmap {{ item.domain }}">
                            <i class="fas fa-trash-alt" aria-hidden="true"></i> Unmap
                        </button>
                    </td>
                </tr>
                {% else %}
                {{ empty::empty_state(table=true, colspan=5, icon="fas fa-link", title="No custom domains mapped", description="No HTTP-01 custom domains mapped yet.") }}
                {% endfor %}
            </tbody>
        </table>
    </div>
    </section>
</div>
{% endblock %}