---
import Admin from '../../layouts/Admin.astro';
import { dashboard } from '../../lib/store.js';
import { formatPrice } from '../../lib/seed.js';
const d = await dashboard();
const badge = (s) => ({ fulfilled:['green','Erfüllt'], pending:['amber','Offen'], cancelled:['gray','Storniert'], refunded:['blue','Erstattet'] }[s] || ['gray', s]);
const fmtDate = (s) => new Date(s).toLocaleDateString('de-DE', { day:'2-digit', month:'short' });
---
<Admin title="Dashboard" active="dashboard">
  <a slot="actions" href="/admin/produkte/neu" class="s-btn s-btn-primary">+ Produkt hinzufügen</a>

  <div class="s-kpis" style="margin-bottom:16px">
    <div class="s-kpi"><div class="s-kpi-label">Umsatz (gesamt)</div><div class="s-kpi-val">{formatPrice(d.revenueCents)}</div><div class="s-kpi-sub">bezahlte Bestellungen</div></div>
    <div class="s-kpi"><div class="s-kpi-label">Bestellungen</div><div class="s-kpi-val">{d.orderCount}</div><div class="s-kpi-sub">{d.pending} offen</div></div>
    <div class="s-kpi"><div class="s-kpi-label">Produkte</div><div class="s-kpi-val">{d.productCount}</div><div class="s-kpi-sub">{d.lowStock.length} mit niedrigem Bestand</div></div>
    <div class="s-kpi"><div class="s-kpi-label">Kunden</div><div class="s-kpi-val">{d.customerCount}</div><div class="s-kpi-sub">gesamt</div></div>
  </div>

  <div class="s-two-col">
    <div class="s-card">
      <div class="s-card-head">Neueste Bestellungen <a href="/admin/bestellungen" class="s-link" style="font-weight:600;font-size:13px">Alle ansehen →</a></div>
      <div class="s-table-wrap"><table class="s-table">
        <thead><tr><th>Bestellung</th><th>Kunde</th><th>Datum</th><th>Status</th><th class="num">Betrag</th></tr></thead>
        <tbody>
          {d.recentOrders.map((o) => { const [c,l] = badge(o.status); return (
            <tr onclick={`location.href='/admin/bestellungen/${o.id}'`}>
              <td><span class="s-link">#{o.number}</span></td>
              <td>{o.customer_name || o.email || '—'}</td>
              <td class="s-muted">{fmtDate(o.created_at)}</td>
              <td><span class={`s-badge ${c}`}>{l}</span></td>
              <td class="num">{formatPrice(o.total_cents)}</td>
            </tr>); })}
        </tbody>
      </table></div>
    </div>

    <div class="s-stack">
      <div class="s-card">
        <div class="s-card-head">Niedriger Bestand</div>
        <div class="s-card-pad" style="padding:8px 0">
          {d.lowStock.length === 0 && <div class="s-empty">Alles gut gefüllt.</div>}
          {d.lowStock.map((p) => (
            <a href={`/admin/produkte/${p.id}`} style="display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--s-border)">
              <span class="s-prodcell"><img src={p.cardImage} alt=""/><span class="nm">{p.shortName}</span></span>
              <span class={`s-badge ${p.stock<=20?'red':'amber'}`}>{p.stock} Stk</span>
            </a>
          ))}
        </div>
      </div>
      <div class="s-card s-card-pad">
        <p class="s-section-title">Schnellzugriff</p>
        <div style="display:flex;flex-direction:column;gap:8px;margin-top:8px">
          <a href="/admin/bestellungen" class="s-btn">Bestellungen verwalten</a>
          <a href="/admin/produkte" class="s-btn">Produkte verwalten</a>
          <a href="/admin/analytics" class="s-btn">Analytics ansehen</a>
        </div>
      </div>
    </div>
  </div>
</Admin>
