{% extends 'clean_base.axml' %}

{% set modal_name = 'Dashboard' %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<style>
  .dash-chart { height: 230px; }
  .dash-chart.chart-empty { display: flex; align-items: center; justify-content: center; color: var(--amebo-text-muted); font-size: 13px; }
  .dash-chart .ct-label { fill: var(--amebo-text-muted); color: var(--amebo-text-muted); font-size: 11px; }
  .dash-chart .ct-grid { stroke: var(--amebo-border-subtle); stroke-dasharray: 2px; }
  /* status donut colours */
  .ct-delivered .ct-slice-donut { stroke: var(--amebo-success); }
  .ct-retrying  .ct-slice-donut { stroke: var(--amebo-warning); }
  .ct-pending   .ct-slice-donut { stroke: #adb5bd; }
  .ct-failed    .ct-slice-donut { stroke: var(--amebo-danger); }
  /* failure bars */
  .dash-bars .ct-bar { stroke: var(--amebo-danger); stroke-width: 16px; }
  .dash-bars-warn .ct-bar { stroke: var(--amebo-warning); stroke-width: 16px; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
  .chart-legend span.dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; }
  .dash-seg .btn.active { background: var(--amebo-text); color: var(--amebo-card-bg); }
</style>
{% endblock %}

{% macro dashctrl() %}
{
    window: 'all',
    view: 'charts',        // 'charts' | 'tables'
    tablesTab: 'failures', // 'failures' | 'subs' (only matters in tables view)
    metrics: { published: 0, delivered: 0, retrying: 0, pending: 0, failed: 0, total: 0, success_rate: null },
    failures: [],
    subs: [],
    versions: { total_families: 0, total_actions: 0, by_status: { active: 0, deprecated: 0, retired: 0 }, subscriptions_on_deprecated: 0, at_risk: [] },
    loading: false,
    busy: null,

    gistDetail: null,
    gistDetailIDE: null,
    subDetail: null,
    subGists: [],
    subLoading: false,

    showBackfill: false,
    backfillSub: null,
    backfillSubName: '',
    backfillSince: '',
    backfillCount: null,
    backfillRunning: false,

    init(){ this.refresh(); },

    refresh(){ this.loadMetrics(); this.loadFailures(); this.loadSubs(); this.loadVersions(); },

    loadMetrics(){
        fetch(`/v1/metrics/deliveries?window=${this.window}`, { credentials: 'include' })
            .then(r => r.json())
            .then(data => { this.metrics = data; this.renderCharts(); })
            .catch(() => ShowFeedback('error', 'Failed to load metrics'));
    },

    loadFailures(){
        this.loading = true;
        fetch('/v1/gists?status=failed&pagination=200', { credentials: 'include' })
            .then(r => r.json())
            .then(data => { this.failures = data.data || []; this.loading = false; this.renderCharts(); })
            .catch(() => { this.loading = false; });
    },

    loadSubs(){
        fetch('/v1/metrics/subscriptions', { credentials: 'include' })
            .then(r => r.json())
            .then(data => { this.subs = data.data || []; this.renderCharts(); })
            .catch(() => {});
    },

    loadVersions(){
        fetch('/v1/metrics/versions', { credentials: 'include' })
            .then(r => r.json())
            .then(data => { this.versions = data; })
            .catch(() => {});
    },

    setWindow(w){ this.window = w; this.loadMetrics(); },

    setView(v){ this.view = v; if(v === 'charts') this.renderCharts(); },

    _groupCount(items, keyfn){
        const counts = {};
        items.forEach(it => { const k = keyfn(it) || 'unknown'; counts[k] = (counts[k] || 0) + 1; });
        return Object.entries(counts).sort((a, b) => b[1] - a[1]);
    },

    _bar(sel, pairs, klass){
        const el = document.querySelector(sel);
        if(!el) return;
        el.innerHTML = '';
        if(!pairs.length){ el.textContent = 'No data'; el.classList.add('chart-empty'); return; }
        el.classList.remove('chart-empty');
        new Chartist.Bar(sel, {
            labels: pairs.map(p => p[0].length > 22 ? p[0].slice(0, 21) + '…' : p[0]),
            series: [pairs.map(p => p[1])],
        }, { horizontalBars: true, reverseData: true, axisX: { onlyInteger: true }, axisY: { offset: 150 }, chartPadding: { right: 24 } });
        el.classList.add(klass);
    },

    renderCharts(){
        if(this.view !== 'charts') return;
        this.$nextTick(() => {
            // Delivery status donut
            const m = this.metrics;
            const donut = document.querySelector('#chart-status');
            if(donut){
                donut.innerHTML = '';
                const total = (m.delivered||0)+(m.retrying||0)+(m.pending||0)+(m.failed||0);
                if(total === 0){ donut.textContent = 'No deliveries'; donut.classList.add('chart-empty'); }
                else { donut.classList.remove('chart-empty'); new Chartist.Pie('#chart-status', { series: [
                    { value: m.delivered||0, className: 'ct-delivered' },
                    { value: m.retrying||0, className: 'ct-retrying' },
                    { value: m.pending||0, className: 'ct-pending' },
                    { value: m.failed||0, className: 'ct-failed' },
                ]}, { donut: true, donutWidth: 46, showLabel: false, chartPadding: 6 }); }
            }
            // Top failing subscriptions
            const topSubs = [...this.subs].filter(s => s.failed > 0).sort((a, b) => b.failed - a.failed).slice(0, 8)
                .map(s => [`${s.subscriber} · ${s.action}`, s.failed]);
            this._bar('#chart-subs', topSubs, 'dash-bars');
            // Failed deliveries by action / by workspace (from the failed sample)
            this._bar('#chart-actions', this._groupCount(this.failures, g => g.action).slice(0, 8), 'dash-bars');
            this._bar('#chart-workspaces', this._groupCount(this.failures, g => g.workspace).slice(0, 8), 'dash-bars-warn');
        });
    },

    fmtRate(){ return this.metrics.success_rate === null ? '—' : `${this.metrics.success_rate}%`; },

    replayOne(id){
        this.busy = id;
        fetch(`/v1/regists/${id}`, { method: 'POST', credentials: 'include' })
            .then(async r => { if(!r.ok) throw await r.json().catch(() => ({})); return r.json(); })
            .then(data => {
                if(data.delivered) ShowFeedback('success', `Gist ${id} replayed — delivered (${data.status_code})`);
                else ShowFeedback('warning', `Gist ${id} replayed but still failing${data.status_code ? ' ('+data.status_code+')' : ''}`);
                this.refresh();
            })
            .catch(err => ShowFeedback('error', err?.error || 'Replay failed'))
            .finally(() => { this.busy = null; });
    },

    requeueOne(id){
        this.busy = id;
        fetch(`/v1/requeues?gist=${id}`, { method: 'POST', credentials: 'include' })
            .then(async r => { if(!r.ok) throw await r.json().catch(() => ({})); return r.json(); })
            .then(data => { ShowFeedback('success', `Gist ${id} requeued — daemon will retry it`); this.refresh(); })
            .catch(err => ShowFeedback('error', err?.error || 'Requeue failed'))
            .finally(() => { this.busy = null; });
    },

    statusClass(s){ return { delivered: 'success', failed: 'danger', retrying: 'warning', pending: '' }[s] || ''; },

    fmtDate(v){ return v ? new Date(String(v).replace(' ', 'T')).toLocaleString() : '—'; },

    openGist(g){
        this.gistDetail = g;
        this.$nextTick(() => {
            const el = document.getElementById('dash-gist-ide');
            if(!el) return;
            this.gistDetailIDE = ace.edit(el);
            this.gistDetailIDE.session.setMode('ace/mode/json');
            const dark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
            this.gistDetailIDE.setTheme(dark ? 'ace/theme/one_dark' : 'ace/theme/chrome');
            this.gistDetailIDE.setOptions({ readOnly: true, fontSize: 13, showPrintMargin: false, wrap: true, tabSize: 2 });
            this.gistDetailIDE.setValue(prettyJson(g.payload || {}));
            this.gistDetailIDE.clearSelection();
        });
    },

    closeGist(){ this.gistDetail = null; if(this.gistDetailIDE){ this.gistDetailIDE.destroy(); this.gistDetailIDE = null; } },

    openSub(s){
        this.subDetail = s;
        this.subGists = [];
        this.subLoading = true;
        fetch(`/v1/gists?subscription=${encodeURIComponent(s.subscription)}&pagination=100`, { credentials: 'include' })
            .then(r => r.json())
            .then(data => { this.subGists = data.data || []; this.subLoading = false; })
            .catch(() => { this.subLoading = false; ShowFeedback('error', 'Failed to load subscription deliveries'); });
    },

    openBackfill(sub){
        this.backfillSub = sub.subscription;
        this.backfillSubName = `${sub.subscriber} · ${sub.action}`;
        this.backfillSince = '';
        this.backfillCount = null;
        this.showBackfill = true;
        this.dryBackfill();
    },

    dryBackfill(){
        fetch('/v1/backfills', {
            method: 'POST', credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ subscription: this.backfillSub, since: this.backfillSince, dry_run: true })
        }).then(r => r.json()).then(data => { this.backfillCount = data.count; })
          .catch(() => ShowFeedback('error', 'Could not compute backfill count'));
    },

    runBackfill(){
        this.backfillRunning = true;
        fetch('/v1/backfills', {
            method: 'POST', credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ subscription: this.backfillSub, since: this.backfillSince })
        }).then(r => r.json()).then(data => {
            this.backfillRunning = false; this.showBackfill = false;
            ShowFeedback('success', `Backfilling ${data.backfilled} historical events to this subscription`);
            this.refresh();
        }).catch(() => { this.backfillRunning = false; ShowFeedback('error', 'Backfill failed'); });
    }
}
{% endmacro %}


{% block easel %}
<section x-data="{{ dashctrl() }}">
    <div class="page-content-scroll">
        <div class="page-header d-flex align-items-start justify-content-between">
            <div>
                <h1 class="page-title">Deliveries health</h1>
                <p class="page-subtitle">Delivery success, failures &amp; recovery at a glance</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="btn-group btn-group-sm" role="group">
                    <template x-for="w in [['today','Today'],['7d','7d'],['30d','30d'],['all','All']]" :key="w[0]">
                        <button type="button" class="btn"
                            :class="window === w[0] ? 'btn-dark' : 'btn-outline-secondary'"
                            @click="setWindow(w[0])" x-text="w[1]"></button>
                    </template>
                </div>
                <!-- Charts <-> Tables toggle -->
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn d-inline-flex align-items-center gap-1"
                        :class="view === 'charts' ? 'btn-dark' : 'btn-outline-secondary'" @click="setView('charts')">
                        <span class="material-icons" style="font-size: 16px;">insights</span> Charts
                    </button>
                    <button type="button" class="btn d-inline-flex align-items-center gap-1"
                        :class="view === 'tables' ? 'btn-dark' : 'btn-outline-secondary'" @click="setView('tables')">
                        <span class="material-icons" style="font-size: 16px;">table_rows</span> Tables
                    </button>
                </div>
                <button class="btn btn-sm btn-outline-secondary btn-icon" @click="refresh" title="Refresh">
                    <span class="material-icons" style="font-size: 18px;">refresh</span>
                </button>
            </div>
        </div>

        <!-- Stat cards -->
        <div class="row g-3 mb-4">
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Published</span>
                    <div class="fw-bold" style="font-size: 1.6rem;" x-text="metrics.published"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Delivered</span>
                    <div class="fw-bold" style="font-size: 1.6rem; color: var(--amebo-success);" x-text="metrics.delivered"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Retrying</span>
                    <div class="fw-bold" style="font-size: 1.6rem; color: var(--amebo-warning);" x-text="metrics.retrying"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Failed</span>
                    <div class="fw-bold" style="font-size: 1.6rem; color: var(--amebo-danger);" x-text="metrics.failed"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Success rate</span>
                    <div class="fw-bold" style="font-size: 1.6rem;" x-text="fmtRate()"></div>
                </div>
            </div>
        </div>

        <!-- Versioning / migration debt -->
        <div class="row g-3 mb-4">
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Action families</span>
                    <div class="fw-bold" style="font-size: 1.6rem;" x-text="versions.total_families"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Active</span>
                    <div class="fw-bold" style="font-size: 1.6rem; color: var(--amebo-success);" x-text="versions.by_status.active"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Deprecated</span>
                    <div class="fw-bold" style="font-size: 1.6rem; color: var(--amebo-warning);" x-text="versions.by_status.deprecated"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Retired</span>
                    <div class="fw-bold" style="font-size: 1.6rem;" x-text="versions.by_status.retired"></div>
                </div>
            </div>
            <div class="col">
                <div class="detail-panel p-3 h-100">
                    <span class="field-label">Subs on deprecated/retired</span>
                    <div class="fw-bold" style="font-size: 1.6rem;"
                        :style="versions.subscriptions_on_deprecated > 0 ? 'color: var(--amebo-danger);' : ''"
                        x-text="versions.subscriptions_on_deprecated"></div>
                </div>
            </div>
        </div>

        <!-- Migration debt: deprecated/retired actions that still have active subscribers -->
        <div class="row g-3 mb-4" x-show="versions.at_risk && versions.at_risk.length > 0" x-transition.opacity>
            <div class="col-12">
                <div class="detail-panel p-3">
                    <h6 class="fw-bold mb-2">Migration debt
                        <span class="text-muted-custom text-sm">— deprecated/retired actions with active subscribers</span>
                    </h6>
                    <div class="data-table-scroll">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Family</th>
                                    <th style="width: 10%">Status</th>
                                    <th>Successor</th>
                                    <th style="width: 12%">Subscribers</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="a in versions.at_risk" :key="a.action">
                                    <tr>
                                        <td><span class="fw-medium" x-text="a.action"></span></td>
                                        <td><span class="text-muted-custom text-sm font-mono" x-text="a.family || '—'"></span></td>
                                        <td>
                                            <span class="badge text-capitalize"
                                                :class="{
                                                    'bg-warning bg-opacity-10 text-warning': a.status === 'deprecated',
                                                    'bg-danger bg-opacity-10 text-danger': a.status === 'retired'
                                                }"
                                                x-text="a.status"></span>
                                        </td>
                                        <td><span class="font-mono text-sm" x-text="a.successor || '—'"></span></td>
                                        <td><span class="fw-bold" x-text="a.subscribers"></span></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- ============================ CHARTS VIEW ============================ -->
        <div x-show="view === 'charts'" x-transition.opacity>
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <div class="detail-panel p-3 h-100">
                        <h6 class="fw-bold mb-2">Delivery status</h6>
                        <div id="chart-status" class="dash-chart"></div>
                        <div class="chart-legend mt-2">
                            <span><span class="dot" style="background: var(--amebo-success);"></span>Delivered <strong x-text="metrics.delivered"></strong></span>
                            <span><span class="dot" style="background: var(--amebo-warning);"></span>Retrying <strong x-text="metrics.retrying"></strong></span>
                            <span><span class="dot" style="background: #adb5bd;"></span>Pending <strong x-text="metrics.pending"></strong></span>
                            <span><span class="dot" style="background: var(--amebo-danger);"></span>Failed <strong x-text="metrics.failed"></strong></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="detail-panel p-3 h-100">
                        <h6 class="fw-bold mb-2">Top failing subscriptions</h6>
                        <div id="chart-subs" class="dash-chart"></div>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <div class="detail-panel p-3 h-100">
                        <h6 class="fw-bold mb-2">Failures by action <span class="text-muted-custom text-sm">(current failed set)</span></h6>
                        <div id="chart-actions" class="dash-chart"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="detail-panel p-3 h-100">
                        <h6 class="fw-bold mb-2">Failures by workspace <span class="text-muted-custom text-sm">(current failed set)</span></h6>
                        <div id="chart-workspaces" class="dash-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ============================ TABLES VIEW ============================ -->
        <div x-show="view === 'tables'" x-transition.opacity>
        <!-- Needs Attention / Subscription Health sub-tabs -->
        <div class="btn-group btn-group-sm mb-3" role="group">
            <button type="button" class="btn d-inline-flex align-items-center gap-1"
                :class="tablesTab === 'failures' ? 'btn-dark' : 'btn-outline-secondary'" @click="tablesTab = 'failures'">
                <span class="material-icons" style="font-size: 16px;">priority_high</span>
                Needs attention <span x-text="`(${failures.length})`"></span>
            </button>
            <button type="button" class="btn d-inline-flex align-items-center gap-1"
                :class="tablesTab === 'subs' ? 'btn-dark' : 'btn-outline-secondary'" @click="tablesTab = 'subs'">
                <span class="material-icons" style="font-size: 16px;">rss_feed</span>
                Subscription health <span x-text="`(${subs.length})`"></span>
            </button>
        </div>

        <!-- Needs attention -->
        <div x-show="tablesTab === 'failures'" class="data-table-wrapper mb-4" style="max-height: 460px; overflow: auto;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Action</th>
                        <th>Workspace</th>
                        <th>Publisher &rarr; Subscriber</th>
                        <th>Endpoint</th>
                        <th style="width: 7%">Attempts</th>
                        <th style="width: 6%">Code</th>
                        <th>Last error</th>
                        <th style="width: 12%">Last attempt</th>
                        <th style="width: 10%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="g in failures" :key="g.id">
                        <tr class="cursor-pointer" @click="openGist(g)">
                            <td><span class="fw-medium" x-text="g.action"></span></td>
                            <td><span class="tag-id" x-show="g.workspace" x-text="g.workspace" :title="g.workspace"></span><span class="text-muted-custom text-sm" x-show="!g.workspace">—</span></td>
                            <td class="text-sm"><span x-text="g.publisher"></span> &rarr; <span x-text="g.subscriber"></span></td>
                            <td><code class="font-mono text-sm" x-text="g.endpoint" :title="g.endpoint"></code></td>
                            <td class="text-sm" x-text="`${g.retries} / ${g.max_retries}`"></td>
                            <td class="text-sm" x-text="g.last_status_code || '—'"></td>
                            <td><span class="text-muted-custom text-sm" :title="g.last_error || ''" x-text="(g.last_error || '—').slice(0, 60)"></span></td>
                            <td><span class="text-muted-custom text-sm" x-text="g.last_attempted_at ? new Date(String(g.last_attempted_at).replace(' ', 'T')).toLocaleString() : '—'"></span></td>
                            <td>
                                <button class="btn-action" @click.stop="replayOne(g.id)" :disabled="busy === g.id" title="Replay now">
                                    <span class="material-icons" x-show="busy !== g.id">replay</span>
                                    <span class="spinner-border spinner-border-sm" x-show="busy === g.id" x-cloak></span>
                                </button>
                                <button class="btn-action" @click.stop="requeueOne(g.id)" :disabled="busy === g.id" title="Requeue">
                                    <span class="material-icons" x-show="busy !== g.id">schedule_send</span>
                                    <span class="spinner-border spinner-border-sm" x-show="busy === g.id" x-cloak></span>
                                </button>
                            </td>
                        </tr>
                    </template>
                    <template x-if="failures.length === 0 && !loading">
                        <tr><td colspan="9"><div class="empty-state"><span class="material-icons">check_circle</span><p>No failed deliveries — all healthy</p></div></td></tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- Per-subscription health -->
        <div x-show="tablesTab === 'subs'" class="data-table-wrapper" style="max-height: 460px; overflow: auto;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Subscriber</th>
                        <th>Action</th>
                        <th>Endpoint</th>
                        <th style="width: 8%">Delivered</th>
                        <th style="width: 8%">Failed</th>
                        <th>Most recent error</th>
                        <th style="width: 12%">Backfill</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="s in subs" :key="s.subscription">
                        <tr class="cursor-pointer" @click="openSub(s)">
                            <td><span class="tag-id" x-text="s.subscriber"></span></td>
                            <td><span class="fw-medium" x-text="s.action"></span></td>
                            <td><code class="font-mono text-sm text-truncate d-inline-block" style="max-width: 280px; vertical-align: bottom;"
                                x-text="s.handler" :title="s.handler"></code></td>
                            <td><span class="badge-status success" x-text="s.delivered"></span></td>
                            <td><span class="badge-status" :class="s.failed > 0 ? 'danger' : ''" x-text="s.failed"></span></td>
                            <td><span class="text-muted-custom text-sm" :title="s.last_error || ''" x-text="s.last_error ? s.last_error.slice(0, 70) : '—'"></span></td>
                            <td>
                                <button class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1" @click.stop="openBackfill(s)" title="Replay historical events to this subscription">
                                    <span class="material-icons" style="font-size: 15px;">history</span> Backfill
                                </button>
                            </td>
                        </tr>
                    </template>
                    <template x-if="subs.length === 0">
                        <tr><td colspan="7"><div class="empty-state"><span class="material-icons">rss_feed</span><p>No subscriptions yet</p></div></td></tr>
                    </template>
                </tbody>
            </table>
        </div>
        </div>
        <!-- ====================== end TABLES VIEW ====================== -->
    </div>

    <!-- Gist detail modal (opened from Needs attention or a subscription drill-down) -->
    <div class="modal fade" :class="gistDetail ? 'show d-block' : ''" tabindex="-1"
        style="background: rgba(0,0,0,0.4); z-index: 1060;" x-show="gistDetail" x-transition.opacity x-cloak>
        <div class="modal-dialog modal-dialog-centered" style="max-width: 720px;">
            <div class="modal-content border-0 shadow-lg" x-show="gistDetail">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">Delivery <span x-text="gistDetail?.id"></span></h5>
                    <button type="button" class="btn-close" @click="closeGist()"></button>
                </div>
                <div class="modal-body" x-show="gistDetail">
                    <div class="d-flex flex-wrap gap-3 mb-3">
                        <div class="detail-field"><span class="field-label">Status</span>
                            <span class="badge-status" :class="statusClass(gistDetail?.status)" x-text="gistDetail?.status"></span></div>
                        <div class="detail-field"><span class="field-label">Attempts</span>
                            <span class="field-value" x-text="`${gistDetail?.retries} / ${gistDetail?.max_retries}`"></span></div>
                        <div class="detail-field"><span class="field-label">Last code</span>
                            <span class="field-value" x-text="gistDetail?.last_status_code || '—'"></span></div>
                        <div class="detail-field"><span class="field-label">Action</span>
                            <span class="field-value" x-text="gistDetail?.action"></span></div>
                        <div class="detail-field"><span class="field-label">Endpoint</span>
                            <span class="field-value font-mono text-sm" x-text="gistDetail?.endpoint"></span></div>
                        <template x-if="gistDetail?.workspace">
                            <div class="detail-field"><span class="field-label">Workspace</span>
                                <span class="field-value"><span class="tag-id" x-text="gistDetail?.workspace"></span></span></div>
                        </template>
                    </div>
                    <template x-if="gistDetail?.last_error">
                        <div>
                            <label class="form-label-sm" x-text="`Response${gistDetail?.last_status_code ? ' · HTTP '+gistDetail.last_status_code : ''}`"></label>
                            <div class="alert alert-danger py-2 px-3 text-sm" style="white-space: pre-wrap; max-height: 200px; overflow: auto;" x-text="gistDetail?.last_error"></div>
                        </div>
                    </template>
                    <template x-if="gistDetail?.metadata && Object.keys(gistDetail.metadata).length">
                        <div>
                            <label class="form-label-sm">Metadata</label>
                            <pre class="font-mono text-sm" style="background: var(--amebo-bg-subtle); border: 1px solid var(--amebo-border-subtle); border-radius: 8px; padding: 10px; max-height: 160px; overflow: auto; margin-bottom: 0.75rem;" x-text="prettyJson(gistDetail.metadata)"></pre>
                        </div>
                    </template>
                    <label class="form-label-sm">Payload</label>
                    <div id="dash-gist-ide" style="height: 260px; border: 1px solid var(--amebo-border-subtle); border-radius: 8px;"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-outline-secondary" @click="requeueOne(gistDetail.id); closeGist()">Requeue</button>
                    <button class="btn btn-sm btn-dark d-inline-flex align-items-center gap-1" @click="replayOne(gistDetail.id); closeGist()">
                        <span class="material-icons" style="font-size: 16px;">replay</span> Replay now
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscription drill-down: its deliveries, each clickable into the gist detail -->
    <div class="modal fade" :class="subDetail ? 'show d-block' : ''" tabindex="-1"
        style="background: rgba(0,0,0,0.4);" x-show="subDetail" x-transition.opacity x-cloak>
        <div class="modal-dialog modal-dialog-centered" style="max-width: 860px;">
            <div class="modal-content border-0 shadow-lg" x-show="subDetail">
                <div class="modal-header border-bottom-0 pb-0">
                    <div>
                        <h5 class="modal-title fw-bold"><span x-text="subDetail?.subscriber"></span> · <span x-text="subDetail?.action"></span></h5>
                        <p class="text-muted-custom text-sm mb-0"><code class="font-mono" x-text="subDetail?.handler"></code></p>
                    </div>
                    <button type="button" class="btn-close" @click="subDetail = null"></button>
                </div>
                <div class="modal-body">
                    <div class="loading-spinner mb-2" x-show="subLoading"><div class="spinner-border spinner-border-sm"></div><span>Loading...</span></div>
                    <div class="data-table-wrapper" style="max-height: 420px; overflow: auto;">
                        <table class="data-table">
                            <thead><tr><th style="width:6%">ID</th><th style="width:12%">Status</th><th>Workspace</th><th style="width:7%">Code</th><th>Last error</th><th style="width:16%">Last attempt</th></tr></thead>
                            <tbody>
                                <template x-for="g in subGists" :key="g.id">
                                    <tr class="cursor-pointer" @click="openGist(g)">
                                        <td><span class="tag-id" x-text="g.id"></span></td>
                                        <td><span class="badge-status" :class="statusClass(g.status)" x-text="g.status"></span></td>
                                        <td><span class="tag-id" x-show="g.workspace" x-text="g.workspace"></span><span class="text-muted-custom" x-show="!g.workspace">—</span></td>
                                        <td class="text-sm" x-text="g.last_status_code || '—'"></td>
                                        <td><span class="text-muted-custom text-sm" :title="g.last_error || ''" x-text="(g.last_error || '—').slice(0,60)"></span></td>
                                        <td><span class="text-muted-custom text-sm" x-text="fmtDate(g.last_attempted_at)"></span></td>
                                    </tr>
                                </template>
                                <template x-if="subGists.length === 0 && !subLoading">
                                    <tr><td colspan="6"><div class="empty-state"><span class="material-icons">inbox</span><p>No deliveries for this subscription</p></div></td></tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Backfill modal -->
    <div class="modal fade" :class="showBackfill ? 'show d-block' : ''" tabindex="-1"
        style="background: rgba(0,0,0,0.4);" x-show="showBackfill" x-transition.opacity x-cloak>
        <div class="modal-dialog modal-dialog-centered" style="max-width: 480px;">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">Backfill subscription</h5>
                    <button type="button" class="btn-close" @click="showBackfill = false"></button>
                </div>
                <div class="modal-body">
                    <p class="text-sm mb-3"><span class="fw-medium" x-text="backfillSubName"></span></p>
                    <label class="form-label-sm">Replay events since</label>
                    <select class="form-select mb-3" x-model="backfillSince" @change="dryBackfill()">
                        <option value="">All history</option>
                        <option value="month">Last 31 days</option>
                        <option value="week">Last 7 days</option>
                        <option value="today">Last 24 hours</option>
                    </select>
                    <p class="text-muted-custom text-sm mb-0">
                        This will (re)create deliveries for <strong x-text="backfillCount === null ? '…' : backfillCount"></strong>
                        historical events and hand them to the retry daemon. Safe to re-run.
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-outline-secondary" @click="showBackfill = false">Cancel</button>
                    <button class="btn btn-sm btn-dark d-inline-flex align-items-center gap-1" @click="runBackfill" :disabled="backfillRunning || backfillCount === 0">
                        <span class="material-icons" style="font-size: 16px;">history</span>
                        <span x-text="backfillRunning ? 'Backfilling...' : 'Backfill now'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}