{% extends "admin_base.html" %}

{% block page_title %}Reports{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/core-reports/assets/css/reports.css">
{% endblock %}

{% block admin_content %}
<main class="core-reports-page mx-auto max-w-6xl px-4 pb-8 pt-5 sm:px-6" data-plugin="core-reports" data-run-url="/admin/api/reports/run">
    <header class="core-reports-header mb-6 flex flex-col gap-2 border-b border-divider pb-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
        <h1 class="m-0 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Reports</h1>
        <p class="core-reports-subtitle mt-1 max-w-3xl text-sm text-muted">View reports in the browser, or download PDF, CSV, or spreadsheet files.</p>
        </div>
    </header>

    {% if reports_groups | length == 0 %}
    <div class="core-reports-empty rounded-2xl border border-divider bg-surface p-6 text-center text-muted sm:p-10">
        <span class="mb-3 inline-flex size-12 items-center justify-center rounded-full bg-canvas text-brand" aria-hidden="true"><i class="fas fa-file-alt"></i></span>
        <h2 class="m-0 text-lg font-semibold text-foreground">No reports are available</h2>
        <p class="mb-0 mt-2 text-sm">Reports appear here when an active plugin declares them.</p>
    </div>
    {% else %}
    <div class="core-reports-list space-y-7" id="reportsList" aria-live="polite">
        {% for group in reports_groups %}
        <section class="core-reports-group min-w-0" aria-labelledby="reports-group-{{ loop.index }}">
            <h2 class="core-reports-group-title mb-3 border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted" id="reports-group-{{ loop.index }}">{{ group.label }}</h2>
            {% for report in group.reports %}
            <article class="core-reports-item grid min-w-0 grid-cols-1 gap-4 border-b border-divider py-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"
                data-plugin="{{ report.plugin }}"
                data-report-id="{{ report.id }}"
                data-formats="{{ report.formats | join(sep=',') }}"
                {% if report.frequency %}data-freq-remaining="{{ report.frequency.runs_remaining }}"{% endif %}>
                <div class="core-reports-item-main min-w-0">
                    <h3 class="core-reports-item-title m-0 text-base font-semibold text-foreground">{{ report.label }}</h3>
                    <div class="core-reports-item-meta mt-0.5 text-xs text-muted">{{ report.plugin_label }}</div>
                    {% if report.description %}
                    <p class="core-reports-item-desc mb-0 mt-2 max-w-3xl text-sm text-muted">{{ report.description }}</p>
                    {% endif %}
                    {% if report.frequency %}
                    <p class="core-reports-freq blocks-status-pill is-info mt-2 w-fit text-xs{% if report.frequency.runs_remaining == 0 %} is-exhausted is-danger{% endif %}"
                       data-freq-max="{{ report.frequency.max }}"
                       data-freq-period="{{ report.frequency.period }}"
                       data-freq-remaining="{{ report.frequency.runs_remaining }}"
                       {% if report.frequency.next_allowed_at %}data-freq-next="{{ report.frequency.next_allowed_at }}"{% endif %}>
                        {% if report.frequency.runs_remaining == 0 %}
                        Limit: {{ report.frequency.max }} / {{ report.frequency.period }} (shared) · exhausted
                        {% if report.frequency.available_in %}
                        · {{ report.frequency.available_in }}
                        {% endif %}
                        {% else %}
                        Limit: {{ report.frequency.max }} / {{ report.frequency.period }} (shared)
                        · {{ report.frequency.runs_remaining }} left
                        {% endif %}
                    </p>
                    {% endif %}
                    {% if report.params and report.params | length > 0 and (not report.frequency or report.frequency.runs_remaining > 0) %}
                    <div class="core-reports-params mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                        {% for param in report.params %}
                        <label class="core-reports-param blocks-form-field">
                            <span>{{ param.label }}{% if param.required %} <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">required</span>{% endif %}</span>
                            {% if param.type == "select" %}
                            <select class="blocks-input" name="{{ param.name }}" data-param="{{ param.name }}" {% if param.required %}required aria-required="true"{% endif %}>
                                {% for opt in param.options %}
                                <option value="{{ opt.value }}" {% if param.default == opt.value %}selected{% endif %}>{{ opt.label }}</option>
                                {% endfor %}
                            </select>
                            {% elif param.type == "date" %}
                            <input class="blocks-input" type="date" name="{{ param.name }}" data-param="{{ param.name }}" value="{{ param.default | default(value='') }}" {% if param.required %}required aria-required="true"{% endif %}>
                            {% elif param.type == "number" %}
                            <input class="blocks-input" type="number" name="{{ param.name }}" data-param="{{ param.name }}" value="{{ param.default | default(value='') }}" {% if param.required %}required aria-required="true"{% endif %}>
                            {% else %}
                            <input class="blocks-input" type="text" name="{{ param.name }}" data-param="{{ param.name }}" value="{{ param.default | default(value='') }}" {% if param.required %}required aria-required="true"{% endif %}>
                            {% endif %}
                        </label>
                        {% endfor %}
                    </div>
                    {% endif %}
                    <p class="core-reports-item-status mt-3 text-sm text-muted" role="status" aria-live="polite" hidden></p>
                </div>
                {% if not report.frequency or report.frequency.runs_remaining > 0 %}
                <div class="core-reports-actions flex flex-wrap gap-2 sm:justify-end">
                    {% for fmt in report.formats %}
                    <button type="button" class="blocks-button blocks-button-secondary core-reports-run" data-format="{{ fmt }}">
                        {% if fmt == "html" %}<i class="fas fa-eye"></i> View
                        {% elif fmt == "pdf" %}<i class="fas fa-file-pdf"></i> PDF
                        {% elif fmt == "csv" %}<i class="fas fa-file-csv"></i> CSV
                        {% else %}<i class="fas fa-file-excel"></i> XLSX{% endif %}
                    </button>
                    {% endfor %}
                </div>
                {% else %}
                <div class="core-reports-actions core-reports-actions--locked" hidden></div>
                {% endif %}
            </article>
            {% endfor %}
        </section>
        {% endfor %}
    </div>
    {% endif %}
</div>

<dialog id="coreReportsPreviewModal" class="core-reports-preview-dialog" aria-labelledby="coreReportsPreviewTitle">
    <div class="core-reports-preview-content flex max-h-[90dvh] w-full flex-col overflow-hidden rounded-2xl border border-divider bg-surface text-foreground shadow-2xl">
        <div class="flex shrink-0 items-center justify-between gap-3 border-b border-divider p-4">
            <h2 id="coreReportsPreviewTitle" class="m-0 text-lg font-semibold">Report preview</h2>
            <button type="button" class="blocks-icon-button" data-preview-close aria-label="Close preview">&times;</button>
        </div>
        <div class="core-reports-preview-body min-h-[50dvh] flex-1 overflow-hidden">
            <iframe id="coreReportsPreviewFrame" title="Report preview" sandbox="allow-same-origin"></iframe>
        </div>
        <div class="flex shrink-0 flex-wrap justify-end gap-2 border-t border-divider p-4">
            <button type="button" id="coreReportsPreviewOpen" class="blocks-button blocks-button-secondary" hidden>Open in new window</button>
            <button type="button" class="blocks-button blocks-button-primary" data-preview-close>Close</button>
        </div>
    </div>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/plugins/core-reports/assets/js/reports.js"></script>
{% endblock %}