// Simpanan anggota
function Simpanan({ unit, pushToast }) {
  const anggota = unit === 'all' ? ANGGOTA : ANGGOTA.filter(a => a.unitId === unit);
  const total = anggota.reduce((s,a)=>s+totalSimpananAnggota(a),0);
  const pokok = anggota.reduce((s,a)=>s+a.simpananPokok,0);
  const wajib = anggota.reduce((s,a)=>s+a.simpananWajib,0);
  const sukarela = anggota.reduce((s,a)=>s+a.simpananSukarela,0);

  return (
    <>
      <PageHeader eyebrow="Simpanan Anggota" title="Simpanan Pokok, Wajib, Sukarela" subtitle={`Total simpanan filter aktif ${rupiah(total,{sym:true})}. Simpanan wajib dipakai sebagai basis SHU dan batas kelayakan pinjaman.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Setoran simpanan baru'})}>Input Setoran</Btn><Btn icon="download" tone="outline">Cetak Mutasi</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Total Simpanan" value={rupiah(total,{sym:true,compact:true})} icon="inbox"/><Kpi label="Pokok" value={rupiah(pokok,{sym:true,compact:true})} sub="sekali saat masuk"/><Kpi label="Wajib" value={rupiah(wajib,{sym:true,compact:true})} sub="Rp 50rb/bulan"/><Kpi label="Sukarela" value={rupiah(sukarela,{sym:true,compact:true})} sub="fleksibel"/></div>
      <div className="grid" style={{gridTemplateColumns:'0.9fr 1.35fr', gap:16}}>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Progress Target Unit"/></div><div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:10}}>{UNIT.map(u => { const t=ANGGOTA.filter(a=>a.unitId===u.id).reduce((s,a)=>s+totalSimpananAnggota(a),0); return <div key={u.id} className="simpanan-card"><div className="row between"><b>{u.name}</b><span>{Math.round(t/u.targetSimpanan*100)}%</span></div><div className="simpanan-progress"><div style={{width:Math.min(100,t/u.targetSimpanan*100)+'%'}}/></div><div className="text-sm muted" style={{marginTop:5}}>{rupiah(t,{sym:true})} dari {rupiah(u.targetSimpanan,{sym:true})}</div></div>; })}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Saldo Simpanan Anggota" hint={`${anggota.length} anggota`}/></div><div style={{maxHeight:'62vh', overflowY:'auto'}}><table className="table"><thead style={{position:'sticky', top:0, background:'hsl(var(--card))', zIndex:1}}><tr><th>Anggota</th><th>Unit</th><th style={{textAlign:'right'}}>Pokok</th><th style={{textAlign:'right'}}>Wajib</th><th style={{textAlign:'right'}}>Sukarela</th><th style={{textAlign:'right'}}>Total</th></tr></thead><tbody>{anggota.map(a => <tr key={a.id}><td><div style={{fontWeight:700}}>{a.nama}</div><div className="mono text-sm muted">{a.id}</div></td><td>{a.unit}</td><td style={{textAlign:'right'}}>{rupiah(a.simpananPokok,{sym:true})}</td><td style={{textAlign:'right'}}>{rupiah(a.simpananWajib,{sym:true})}</td><td style={{textAlign:'right'}}>{rupiah(a.simpananSukarela,{sym:true})}</td><td style={{textAlign:'right', fontWeight:700}}>{rupiah(totalSimpananAnggota(a),{sym:true})}</td></tr>)}</tbody></table></div></Card>
      </div>
    </>
  );
}

window.Simpanan = Simpanan;