// Shift & Kas — buka/tutup shift, modal awal, rekonsiliasi laci
function ShiftKas({ cabang, role }) {
  const list = SHIFTS.filter(s => cabang === 'all' || s.cabang === cabang);
  const open = list.filter(s => s.status === 'open');
  const closed = list.filter(s => s.status === 'closed');
  const totalSelisih = closed.reduce((s, x) => s + (x.selisih || 0), 0);

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Shift Aktif"     value={open.length.toString()}     hint="Sedang berjalan" icon="clock" tone="success" />
        <Kpi label="Shift Selesai"   value={closed.length.toString()}   hint="24 jam terakhir" icon="checkCircle" />
        <Kpi label="Selisih Kas"     value={rupiah(totalSelisih, { sym: true })} hint="Akumulasi (negatif = kurang)" icon="cashbox" tone={totalSelisih < 0 ? 'danger' : 'success'} />
        <Kpi label="Modal Awal"      value={rupiah(500_000, { sym: true })} hint="Default per shift" icon="bank" />
      </div>

      <div className="grid-2">
        {open.map(s => (
          <Card key={s.id}>
            <div className="card-pad">
              <div className="row between mb-4">
                <div>
                  <Pill tone="success" dot>Shift Aktif</Pill>
                  <div style={{fontSize:18, fontWeight:600, marginTop:6}}>{s.kasir}</div>
                  <div style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>
                    {CABANG_LIST.find(c => c.id === s.cabang)?.name} · Buka {s.open}
                  </div>
                </div>
                {ROLES[role].can.refund && <Btn tone="destructive" icon="x" size="sm">Tutup Shift</Btn>}
              </div>
              <div className="grid-2 mb-4">
                <div className="info-cell">
                  <div className="info-label">Modal awal</div>
                  <div className="info-value">{rupiah(s.modal, { sym: true })}</div>
                </div>
                <div className="info-cell">
                  <div className="info-label">Omzet berjalan</div>
                  <div className="info-value">{rupiah(s.omzet, { sym: true })}</div>
                </div>
              </div>
              <div className="info-cell">
                <div className="info-label">Estimasi kas di laci</div>
                <div className="info-value" style={{color:'hsl(152 65% 35%)'}}>{rupiah(s.modal + s.omzet, { sym: true })}</div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:4}}>Belum termasuk QRIS/Transfer (otomatis ke rek bank)</div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Card>
        <div className="card-pad">
          <SectionHead title="Riwayat Shift" hint="6 shift terakhir" action={<Btn icon="download" size="sm">Export</Btn>} />
          <table className="table">
            <thead>
              <tr>
                <th>ID Shift</th>
                <th>Kasir</th>
                <th>Cabang</th>
                <th>Buka</th>
                <th>Tutup</th>
                <th style={{textAlign:'right'}}>Modal</th>
                <th style={{textAlign:'right'}}>Omzet</th>
                <th style={{textAlign:'right'}}>Selisih</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {list.map(s => (
                <tr key={s.id}>
                  <td><span className="mono">{s.id}</span></td>
                  <td>{s.kasir}</td>
                  <td>{CABANG_LIST.find(c => c.id === s.cabang)?.name}</td>
                  <td>{s.open}</td>
                  <td>{s.close || '—'}</td>
                  <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{rupiah(s.modal)}</td>
                  <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:500}}>{rupiah(s.omzet)}</td>
                  <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', color: s.selisih < 0 ? 'hsl(var(--destructive))' : s.selisih > 0 ? 'hsl(152 65% 35%)' : 'inherit'}}>
                    {s.selisih == null ? '—' : (s.selisih > 0 ? '+' : '') + rupiah(s.selisih)}
                  </td>
                  <td><Pill tone={s.status === 'open' ? 'success' : 'neutral'} dot={s.status === 'open'}>{s.status}</Pill></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { ShiftKas });