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

{% block title %}Smart Exports - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}reports-export-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/reports_exports.css">
{% endblock %}
{% block content %}
<main class="shell">
    <div class="topbar">
        <div>
            <h1>Smart Data Export & Business Intelligence Distribution</h1>
            <p class="muted">Generate executive-ready reports, operational exports, audit traces, branch intelligence, and portable business records.</p>
        </div>
        <div class="actions">
            <a class="btn secondary" href="/reports">Reports</a>
            <a class="btn secondary" href="/admin">Admin</a>
            {% if actor.server_owner %}<a class="btn secondary" href="/server/dashboard">Server Control</a>{% endif %}
        </div>
    </div>

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

    <section class="panel hil-inline-2b583d7389">
        <h2>Executive Reporting Command View</h2>
        <p class="muted">Interactive reporting dashboard with live filters, KPI highlights, trend summaries, audit-safe exports, and low-infrastructure continuity.</p>
        <div class="scope-list">
            {% for kpi in dashboard.kpis %}
                <span>{{ kpi.label }}<br><strong>{{ kpi.value }}</strong></span>
            {% endfor %}
        </div>
        {% if dashboard.narrative %}
            <div class="hil-inline-56f4356299">
                {% for item in dashboard.narrative %}
                    <p class="muted hil-inline-4e420aff3f">{{ item }}</p>
                {% endfor %}
            </div>
        {% endif %}
        <div class="actions hil-inline-56f4356299">
            <button class="secondary" type="button" onclick="loadPreview()">Preview Current Report</button>
            <form method="post" action="/reports/exports/retry-failed"><button class="secondary" type="submit">Retry Failed Exports</button></form>
            <form method="post" action="/reports/exports/apply-retention">
                <input type="hidden" name="retention_days" value="180">
                <button class="secondary" type="submit">Apply Retention Policy</button>
            </form>
            <button class="secondary" type="button" onclick="regenerateDocs()">Regenerate Reporting Docs</button>
        </div>
        <div id="preview-panel" class="panel hil-inline-782e3ac134"></div>
    </section>

    <section class="grid">
        <div class="panel">
            <h2>Create Export</h2>
            <form class="form-grid" method="post" action="/reports/exports">
                <label>Report Type
                    <select name="export_scope">
                        {% for key, label in scopes.items() %}
                            {% if can_export(actor, key) %}<option value="{{ key }}">{{ label }}</option>{% endif %}
                        {% endfor %}
                    </select>
                </label>
                <label>Format
                    <select name="export_format">
                        <option value="pdf">PDF Report</option>
                        <option value="html">Boardroom HTML</option>
                        <option value="xlsx">Excel Workbook</option>
                        <option value="csv">CSV Data</option>
                        <option value="json">JSON Data</option>
                    </select>
                </label>
                <div class="inline">
                    <label>Date From<input type="date" name="date_from"></label>
                    <label>Date To<input type="date" name="date_to"></label>
                </div>
                <div class="inline">
                    <label>Branch ID<input name="branch_id" inputmode="numeric" placeholder="Optional"></label>
                    <label>Transaction Type<input name="transaction_type" placeholder="cash, mpesa, card"></label>
                </div>
                <div class="inline">
                    <label>Category<input name="category" placeholder="Optional"></label>
                    <label>Customer<input name="customer" placeholder="Name or phone"></label>
                </div>
                <div class="inline">
                    <label>Role View
                        <select name="role_view">
                            <option value="">Automatic</option>
                            <option value="executive">Executive</option>
                            <option value="branch_manager">Branch Manager</option>
                            <option value="inventory_manager">Inventory Manager</option>
                            <option value="accountant">Accountant</option>
                            <option value="auditor">Auditor</option>
                            <option value="cashier">Cashier</option>
                        </select>
                    </label>
                    <label>Depth
                        <select name="report_depth">
                            <option value="summary">Executive summary</option>
                            <option value="standard">Standard</option>
                            <option value="audit">Audit detail</option>
                        </select>
                    </label>
                </div>
                <label>Run Mode
                    <select name="run_mode">
                        <option value="queue">Queue safely</option>
                        <option value="now">Generate now</option>
                    </select>
                </label>
                <button type="submit">Generate Export</button>
            </form>

            <h3 class="hil-inline-86de7ac63a">Available Report Families</h3>
            <div class="scope-list">
                {% for key, label in scopes.items() %}
                    {% if can_export(actor, key) %}<span>{{ label }}</span>{% endif %}
                {% endfor %}
            </div>
        </div>

        <div class="panel">
            <h2>Recent Exports</h2>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Status</th><th>Report</th><th>Format</th><th>Rows</th><th>Verification</th><th>Created</th><th>Action</th></tr></thead>
                    <tbody>
                    {% for job in jobs %}
                        <tr>
                            <td><span class="badge {{ job.status }}">{{ job.status|title }}</span></td>
                            <td>{{ scopes.get(job.export_scope, job.export_scope) }}</td>
                            <td>{{ job.export_format|upper }}</td>
                            <td>{{ job.row_count or 0 }}</td>
                            <td>
                                {% if job.verification_id %}
                                    <a href="/reports/exports/verify/{{ job.verification_id }}">{{ job.verification_id }}</a>
                                {% else %}
                                    <span class="muted">Pending</span>
                                {% endif %}
                            </td>
                            <td>{{ job.created_at }}</td>
                            <td class="actions">
                                {% if job.status == 'completed' %}
                                    <a class="btn secondary" href="/reports/exports/{{ job.id }}/download">Download</a>
                                    <form method="post" action="/reports/exports/{{ job.id }}/archive"><button class="secondary" type="submit">Archive</button></form>
                                {% elif job.status in ['queued', 'failed'] %}
                                    <form method="post" action="/reports/exports/{{ job.id }}/run"><button class="secondary" type="submit">Run</button></form>
                                {% elif job.status == 'archived' %}
                                    <span class="muted">Archived</span>
                                {% else %}
                                    <span class="muted">Processing</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6">No exports yet.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="grid hil-inline-d6f2af6e0a">
        <div class="panel">
            <h2>Scheduled Delivery</h2>
            <p class="muted">Save repeat daily, weekly, or monthly report definitions. Delivery records and secure file links remain tracked in export audit logs.</p>
            <form class="form-grid" method="post" action="/reports/exports/schedules">
                <label>Name<input name="name" placeholder="Weekly executive report"></label>
                <div class="inline">
                    <label>Report
                        <select name="export_scope">
                            {% for key, label in scopes.items() %}
                                {% if can_export(actor, key) %}<option value="{{ key }}">{{ label }}</option>{% endif %}
                            {% endfor %}
                        </select>
                    </label>
                    <label>Format
                        <select name="export_format">
                            <option value="pdf">PDF</option>
                            <option value="xlsx">Excel</option>
                            <option value="csv">CSV</option>
                            <option value="json">JSON</option>
                        </select>
                    </label>
                </div>
                <div class="inline">
                    <label>Cadence
                        <select name="cadence"><option>daily</option><option selected>weekly</option><option>monthly</option></select>
                    </label>
                    <label>Recipients<input name="recipients" placeholder="email list, optional"></label>
                </div>
                <button type="submit">Save Schedule</button>
            </form>
        </div>

        <div class="panel">
            <h2>Schedules</h2>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Name</th><th>Cadence</th><th>Report</th><th>Last Run</th><th>Action</th></tr></thead>
                    <tbody>
                    {% for schedule in schedules %}
                        <tr>
                            <td>{{ schedule.name }}</td>
                            <td>{{ schedule.cadence|title }}</td>
                            <td>{{ scopes.get(schedule.export_scope, schedule.export_scope) }}</td>
                            <td>{{ schedule.last_run_at or 'Never' }}</td>
                            <td><form method="post" action="/reports/exports/schedules/{{ schedule.id }}/run"><button class="secondary" type="submit">Queue Now</button></form></td>
                        </tr>
                    {% else %}
                        <tr><td colspan="5">No schedules yet.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</main>
<script>
async function loadPreview() {
    const form = document.querySelector('form[action="/reports/exports"]');
    const params = new URLSearchParams(new FormData(form));
    const panel = document.getElementById("preview-panel");
    panel.style.display = "block";
    panel.textContent = "Loading preview...";
    const res = await fetch("/api/reports/preview?" + params.toString());
    const data = await res.json();
    if (!data.ok) {
        panel.textContent = data.error || "Preview failed.";
        return;
    }
    const preview = data.preview;
    panel.innerHTML = `<h3>${preview.title}</h3>` +
        `<p class="muted">${(preview.narrative || []).join(" ")}</p>` +
        `<div class="scope-list">${(preview.kpis || []).map(k => `<span>${k.label}<br><strong>${k.value}</strong></span>`).join("")}</div>` +
        `<p class="muted">${(preview.sections || []).map(s => `${s.name}: ${s.row_count} rows`).join(" | ")}</p>`;
}

async function regenerateDocs() {
    const res = await fetch("/api/reports/enterprise-docs/regenerate", {method: "POST"});
    const data = await res.json();
    alert(data.ok ? "Generated " + data.reports.length + " reporting governance docs." : (data.error || "Could not regenerate docs."));
}
</script>
{% endblock %}