// Angsuran dan kolektibilitas
function Angsuran({ unit, pushToast }) {
  const ids = new Set((unit === 'all' ? ANGGOTA : ANGGOTA.filter(a=>a.unitId===unit)).map(a=>a.id));
  const rows = ANGSURAN.filter(a => ids.has(pinjamanById(a.pinjamanId).anggotaId));
  const paid = rows.filter(a=>a.status==='paid').reduce((s,a)=>s+totalAngsuran(a),0);
  const due = rows.filter(a=>a.status!=='paid').reduce((s,a)=>s+totalAngsuran(a),0);
  const denda = rows.reduce((s,a)=>s+a.denda,0);
  return (
    <>
      <PageHeader eyebrow="Koleksi Angsuran" title="Angsuran Bulan Berjalan" subtitle={`Terkoleksi ${rupiah(paid,{sym:true})}, tagihan belum dibayar ${rupiah(due,{sym:true})}, denda berjalan ${rupiah(denda,{sym:true})}.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Input pembayaran angsuran'})}>Input Bayar</Btn><Btn icon="bell" tone="outline">Reminder WA</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Terkoleksi" value={rupiah(paid,{sym:true,compact:true})} icon="check"/><Kpi label="Belum Bayar" value={rupiah(due,{sym:true,compact:true})} icon="alert"/><Kpi label="Terlambat" value={rows.filter(a=>a.status==='late').length} sub="kena denda"/><Kpi label="Denda" value={rupiah(denda,{sym:true,compact:true})}/></div>
      <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Daftar Tagihan Angsuran" hint={`${rows.length} tagihan periode ini`} /></div><table className="table"><thead><tr><th>No. Angsuran</th><th>Anggota</th><th>Pinjaman</th><th>Jatuh Tempo</th><th style={{textAlign:'right'}}>Pokok</th><th style={{textAlign:'right'}}>Jasa</th><th style={{textAlign:'right'}}>Denda</th><th style={{textAlign:'right'}}>Total</th><th>Status</th></tr></thead><tbody>{rows.map(a => { const p=pinjamanById(a.pinjamanId); const m=ANGGOTA_BY_ID[p.anggotaId]; return <tr key={a.id}><td className="mono">{a.id}</td><td><b>{m.nama}</b><div className="text-sm muted">{m.id} · {m.unit}</div></td><td className="mono">{p.id}</td><td>{formatDateID(a.jatuhTempo)}</td><td style={{textAlign:'right'}}>{rupiah(a.pokok,{sym:true})}</td><td style={{textAlign:'right'}}>{rupiah(a.jasa,{sym:true})}</td><td style={{textAlign:'right', color:a.denda?'hsl(var(--destructive))':undefined}}>{rupiah(a.denda,{sym:true})}</td><td style={{textAlign:'right', fontWeight:700}}>{rupiah(totalAngsuran(a),{sym:true})}</td><td><StatusPill status={a.status}/></td></tr>; })}</tbody></table></Card>
    </>
  );
}

window.Angsuran = Angsuran;