// Pinjaman anggota
function Pinjaman({ unit, pushToast }) {
  const ids = new Set((unit === 'all' ? ANGGOTA : ANGGOTA.filter(a=>a.unitId===unit)).map(a=>a.id));
  const list = PINJAMAN.filter(p => ids.has(p.anggotaId));
  const aktif = list.filter(p=>p.status==='aktif');
  const pending = list.filter(p=>p.status==='pending');
  const totalOutstanding = aktif.reduce((s,p)=>s+p.outstanding,0);
  const pendingPlafon = pending.reduce((s,p)=>s+p.plafon,0);

  return (
    <>
      <PageHeader eyebrow="Pembiayaan Anggota" title="Pinjaman & Komite Kredit" subtitle={`${aktif.length} pinjaman aktif dengan outstanding ${rupiah(totalOutstanding,{sym:true})}. ${pending.length} pengajuan menunggu review komite.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Pengajuan pinjaman baru'})}>Pengajuan Baru</Btn><Btn icon="check" tone="outline">Rapat Komite</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Outstanding" value={rupiah(totalOutstanding,{sym:true,compact:true})} icon="creditCard"/><Kpi label="Aktif" value={aktif.length} sub="pinjaman berjalan"/><Kpi label="Pending" value={pending.length} sub={rupiah(pendingPlafon,{sym:true,compact:true})}/><Kpi label="Late Angsuran" value={KPI.angsuranLate} sub="butuh follow-up"/></div>
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:16}}>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Pengajuan Pending" hint="Score awal dan kelayakan"/></div><div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:10}}>{pending.map(p => { const a=ANGGOTA_BY_ID[p.anggotaId]; const sim=totalSimpananAnggota(a); const score=Math.min(95, Math.round((sim/p.plafon)*100)); return <div className="loan-card pending" key={p.id}><div className="row between"><div><div style={{fontWeight:700}}>{p.id} · {a.nama}</div><div className="text-sm muted">{p.jenis} · {p.tujuan}</div></div><StatusPill status={p.status}/></div><div className="form-grid" style={{marginTop:10}}><Field label="Plafon" value={rupiah(p.plafon,{sym:true})}/><Field label="Tenor" value={`${p.tenor} bulan`}/><Field label="Jasa" value={`${p.bunga}% / bulan`}/><Field label="Simpanan" value={rupiah(sim,{sym:true})}/></div><div className="simpanan-progress"><div style={{width:score+'%'}}/></div><div className="row between text-sm muted" style={{marginTop:5}}><span>Score kelayakan</span><b>{score}/100</b></div><div className="row gap-2" style={{marginTop:10}}><Btn icon="check" tone="primary" onClick={()=>pushToast({msg:`${p.id} disetujui prinsip`})}>Setujui</Btn><Btn icon="x" tone="outline">Tolak</Btn></div></div>; })}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Pinjaman Aktif" hint="Outstanding berjalan"/></div><div style={{maxHeight:'62vh', overflowY:'auto'}}><table className="table"><thead style={{position:'sticky', top:0, background:'hsl(var(--card))', zIndex:1}}><tr><th>ID</th><th>Anggota</th><th>Jenis</th><th style={{textAlign:'right'}}>Plafon</th><th style={{textAlign:'right'}}>Outstanding</th><th>Status</th></tr></thead><tbody>{aktif.map(p => { const a=ANGGOTA_BY_ID[p.anggotaId]; return <tr key={p.id}><td className="mono">{p.id}</td><td><b>{a.nama}</b><div className="text-sm muted">{a.id}</div></td><td>{p.jenis}</td><td style={{textAlign:'right'}}>{rupiah(p.plafon,{sym:true})}</td><td style={{textAlign:'right', fontWeight:700}}>{rupiah(p.outstanding,{sym:true})}</td><td><StatusPill status={p.status}/></td></tr>; })}</tbody></table></div></Card>
      </div>
    </>
  );
}

window.Pinjaman = Pinjaman;