{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/analytics.css?v=1" />
<style>
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.report-card {
  padding: 1rem; border-radius: 12px; background: rgba(15,23,42,0.8);
  border: 1px solid rgba(148,163,184,0.12); transition: border-color 0.2s, transform 0.2s;
}
.report-card:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-2px); }
.report-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.report-card .count { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; }
.report-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
</style>
{% endblock %}
{% block content %}
<div x-data="reportsHub()" x-init="init()">
<header class="page-header">
  <div>
    <h1>Reports & Export Hub</h1>
    <p class="subtitle">Exporteer alle data uit het systeem · CSV · JSON · dagrapporten</p>
  </div>
  <div class="retail-actions">
    <button class="btn btn-pulse-green" @click="exportAll()" :disabled="busy">⬇ Volledige export (JSON)</button>
    <button class="btn btn-pulse" @click="generate()" :disabled="busy">✨ Genereer dagrapport</button>
  </div>
</header>

<div class="kpi-row">
  <div class="kpi-card kpi-pulse"><span>Datasets</span><strong x-text="datasets.length"></strong></div>
  <div class="kpi-card"><span>Totaal records</span><strong x-text="totalRecords"></strong></div>
  <div class="kpi-card kpi-green"><span>Briefings</span><strong>{{ briefings|length }}</strong></div>
</div>

<section class="panel">
  <h2>Data export <span class="live-badge">Alle tabellen</span></h2>
  <p class="hint">Klik CSV of JSON per dataset. Volledige bundle bevat alles in één JSON bestand.</p>
  <div class="reports-grid">
    <template x-for="d in datasets" :key="d.id">
      <div class="report-card">
        <h3 x-text="d.label"></h3>
        <div class="count" x-text="d.count.toLocaleString('nl-NL')"></div>
        <small class="muted" x-text="d.id"></small>
        <div class="report-actions">
          <a class="btn btn-sm btn-pulse" :href="'/reports/api/export/'+d.id+'?format=csv'" target="_blank">CSV ↓</a>
          <a class="btn btn-sm" :href="'/reports/api/export/'+d.id+'?format=json'" target="_blank">JSON ↓</a>
        </div>
      </div>
    </template>
  </div>
</section>

<section class="panel" style="margin-top:1rem">
  <h2>Dagrapport preview</h2>
  <pre class="briefing-body" x-text="latest" style="white-space:pre-wrap;max-height:400px;overflow:auto;background:rgba(0,0,0,0.3);padding:1rem;border-radius:8px"></pre>
</section>

<section class="panel" style="margin-top:1rem">
  <h2>Briefing archief</h2>
  <ul>{% for b in briefings %}
  <li class="clickable-row" @click="showBrief({{ b.content|tojson }})">{{ b.created_at }} — {{ b.content[:80] }}…</li>
  {% else %}<li class="muted">Nog geen rapporten</li>{% endfor %}</ul>
</section>
</div>
{% endblock %}
{% block scripts %}
<script>
function reportsHub() {
  return {
    datasets: {{ datasets | tojson }},
    latest: '', busy: false,
    get totalRecords() { return this.datasets.reduce((a,d) => a + (d.count||0), 0); },
    init() {},
    showBrief(t) { this.latest = t; },
    exportAll() {
      window.open('/reports/api/export-all?format=json&limit=5000', '_blank');
      Cockpit.toast('Volledige export gestart', 'success');
    },
    async generate() {
      this.busy = true;
      Cockpit.toast('Dagrapport wordt gegenereerd…', 'info');
      try {
        const r = await Cockpit.api('/api/herman/briefing', { method: 'POST' });
        this.latest = r.content || '';
        Cockpit.toast('Dagrapport klaar', 'success');
      } catch (e) { Cockpit.toast(e.message, 'error'); }
      this.busy = false;
    }
  };
}
</script>
{% endblock %}