---
import Admin from '../../../layouts/Admin.astro';
import { listCustomers } from '../../../lib/store.js';
import { formatPrice } from '../../../lib/seed.js';
const customers = await listCustomers();
const initials = (n) => (n||'?').split(' ').map(x=>x[0]).slice(0,2).join('').toUpperCase();
---
<Admin title="Kunden" active="kunden" crumbs={[{label:'Kunden'}]}>
  <span slot="actions" class="s-muted" style="font-size:13px">{customers.length} Kunden</span>
  <div class="s-card">
    <div class="s-table-wrap"><table class="s-table">
      <thead><tr><th>Name</th><th>E-Mail</th><th>Ort</th><th>Bestellungen</th><th class="num">Umsatz</th></tr></thead>
      <tbody>
        {customers.map((c) => (
          <tr style="cursor:default">
            <td><span class="s-prodcell"><span style="width:32px;height:32px;border-radius:50%;background:var(--s-green-l);color:var(--s-green-d);display:grid;place-items:center;font-weight:700;font-size:12px">{initials(c.name)}</span><span class="nm">{c.name||'—'}</span></span></td>
            <td class="s-muted">{c.email}</td>
            <td>{c.city||'—'}</td>
            <td>{c.orders_count}</td>
            <td class="num">{formatPrice(c.total_spent_cents)}</td>
          </tr>
        ))}
        {customers.length===0 && <tr><td colspan="5"><div class="s-empty">Noch keine Kunden.</div></td></tr>}
      </tbody>
    </table></div>
  </div>
</Admin>
