// Promo & Member — daftar promo, voucher, daftar member dengan tier
function Promo({ role }) {
  const aktif = PROMOS.filter(p => p.status === 'aktif');
  const totalSpend = MEMBERS.reduce((s, m) => s + m.spend, 0);

  const tierColor = { gold: 'warn', silver: 'neutral', bronze: 'accent' };

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Promo Aktif"     value={aktif.length.toString()}    hint={`${PROMOS.length - aktif.length} selesai`} icon="flame" tone="warn" />
        <Kpi label="Total Member"    value={MEMBERS.length.toString()}  hint="3 tier (gold/silver/bronze)" icon="users" />
        <Kpi label="Spend Member"    value={rupiah(totalSpend, { sym: true, compact: true })} hint="Akumulasi sejak bergabung" icon="trending" />
        <Kpi label="Voucher Aktif"   value="2" hint="2 voucher digital · stock 180" icon="ticket" />
      </div>

      <Card>
        <div className="card-pad">
          <SectionHead
            title="Promo & Diskon"
            hint="Diskon, bundling, voucher — diterapkan otomatis di kasir"
            action={ROLES[role].can.edit_product ? <Btn tone="primary" icon="plus" size="sm">Buat Promo</Btn> : null}
          />
          <table className="table">
            <thead><tr><th>ID</th><th>Nama Promo</th><th>Tipe</th><th>Target</th><th>Nilai</th><th>Periode</th><th>Status</th></tr></thead>
            <tbody>
              {PROMOS.map(p => (
                <tr key={p.id}>
                  <td><span className="mono">{p.id}</span></td>
                  <td style={{fontWeight:500}}>{p.name}</td>
                  <td><Pill tone="accent">{p.type}</Pill></td>
                  <td style={{fontSize:12}}>{p.target}</td>
                  <td style={{fontVariantNumeric:'tabular-nums'}}>{p.value}</td>
                  <td style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>{formatDateID(p.start)} – {formatDateID(p.end)}</td>
                  <td><Pill tone={p.status === 'aktif' ? 'success' : 'neutral'} dot={p.status === 'aktif'}>{p.status}</Pill></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <Card>
        <div className="card-pad">
          <SectionHead title="Top Member" hint="5 member dengan spend tertinggi" action={<Btn icon="users" size="sm">Lihat Semua</Btn>} />
          <div className="member-grid">
            {MEMBERS.map(m => (
              <div key={m.id} className="member-card">
                <div className="row between" style={{alignItems:'flex-start'}}>
                  <Avatar initials={m.name.split(' ').map(x => x[0]).slice(0,2).join('').toUpperCase()} />
                  <Pill tone={tierColor[m.tier]}>{m.tier}</Pill>
                </div>
                <div style={{marginTop:10, fontWeight:600}}>{m.name}</div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontFamily:'JetBrains Mono, monospace'}}>{m.id}</div>
                <div className="row between" style={{marginTop:10, fontSize:12}}>
                  <span style={{color:'hsl(var(--muted-foreground))'}}>{m.trx} transaksi</span>
                  <span style={{fontWeight:500, fontVariantNumeric:'tabular-nums'}}>{rupiah(m.spend, { sym: true, compact: true })}</span>
                </div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:4}}>Bergabung {formatDateID(m.joined)}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Promo });