// Anggota koperasi
const { useState: useStateAG } = React;

function Anggota({ unit, setPage, pushToast }) {
  const [q, setQ] = useStateAG('');
  const [selectedId, setSelectedId] = useStateAG('AG-2302');
  const list = ANGGOTA.filter(a => (unit === 'all' || a.unitId === unit) && (!q || `${a.id} ${a.nama} ${a.unit} ${a.alamat}`.toLowerCase().includes(q.toLowerCase())));
  const selected = ANGGOTA_BY_ID[selectedId] || list[0] || ANGGOTA[0];
  const loans = PINJAMAN.filter(p => p.anggotaId === selected.id);
  const totalS = totalSimpananAnggota(selected);

  return (
    <>
      <PageHeader eyebrow="Master Anggota" title="Database Anggota" subtitle={`${list.length} anggota sesuai filter. Total simpanan anggota aktif ${rupiah(KPI.totalSimpanan, {sym:true, compact:true})}.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Form anggota baru dibuka'})}>Tambah Anggota</Btn><Btn icon="download" tone="outline">Ekspor</Btn></>} />
      <div className="grid" style={{gridTemplateColumns:'1.35fr 0.9fr', gap:16}}>
        <Card>
          <div style={{padding:'12px 16px', borderBottom:'1px solid hsl(var(--border))'}}><input className="input" value={q} onChange={e=>setQ(e.target.value)} placeholder="Cari nomor anggota, nama, unit, alamat..." /></div>
          <div style={{maxHeight:'65vh', 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>Status</th><th style={{textAlign:'right'}}>Simpanan</th><th style={{textAlign:'right'}}>Pinjaman</th></tr></thead>
              <tbody>{list.map(a => { const loan = PINJAMAN.filter(p=>p.anggotaId===a.id && p.status==='aktif').reduce((s,p)=>s+p.outstanding,0); return <tr key={a.id} onClick={()=>setSelectedId(a.id)} style={{cursor:'pointer', background:selected.id===a.id?'hsl(var(--accent-h) var(--accent-s) 96%)':undefined}}><td><div className="row gap-2"><MemberAvatar name={a.nama} size="sm"/><div><div style={{fontWeight:700}}>{a.nama}</div><div className="mono text-sm muted">{a.id}</div></div></div></td><td>{a.unit}</td><td><StatusPill status={a.status}/></td><td style={{textAlign:'right', fontWeight:700}}>{rupiah(totalSimpananAnggota(a),{sym:true,compact:true})}</td><td style={{textAlign:'right'}}>{loan ? rupiah(loan,{sym:true,compact:true}) : '-'}</td></tr>; })}</tbody>
            </table>
          </div>
        </Card>
        <Card>
          <div style={{padding:'16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <div className="row gap-3"><MemberAvatar name={selected.nama} size="lg"/><div style={{flex:1}}><div className="mono text-sm muted">{selected.id}</div><div style={{fontSize:18, fontWeight:700}}>{selected.nama}</div><div className="text-sm muted">{selected.pekerjaan} · {selected.unit}</div></div><StatusPill status={selected.status}/></div>
          </div>
          <div style={{padding:'16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Profil"/><div className="form-grid"><Field label="Tanggal Masuk" value={formatDateID(selected.masuk)}/><Field label="Alamat" value={selected.alamat}/><Field label="Telepon" value={selected.phone}/><Field label="Pekerjaan" value={selected.pekerjaan}/></div></div>
          <div style={{padding:'16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Simpanan" hint={rupiah(totalS,{sym:true})}/><div className="form-grid"><Field label="Pokok" value={rupiah(selected.simpananPokok,{sym:true})}/><Field label="Wajib" value={rupiah(selected.simpananWajib,{sym:true})}/><Field label="Sukarela" value={rupiah(selected.simpananSukarela,{sym:true})}/><Field label="Total" value={rupiah(totalS,{sym:true})}/></div></div>
          <div style={{padding:'16px'}}><SectionHead title="Pinjaman" hint={`${loans.length} pengajuan / pinjaman`}/>{loans.map(p => <div key={p.id} className={'loan-card ' + p.status} style={{marginBottom:8}}><div className="row between"><div><div style={{fontWeight:700}}>{p.id}</div><div className="text-sm muted">{p.jenis} · {p.tenor} bulan</div></div><StatusPill status={p.status}/></div><div className="row between" style={{marginTop:8}}><span>Outstanding</span><b>{rupiah(p.outstanding || p.plafon,{sym:true})}</b></div></div>)}<div className="row gap-2" style={{marginTop:12}}><Btn icon="inbox" tone="outline" onClick={()=>setPage('simpanan')}>Simpanan</Btn><Btn icon="creditCard" tone="primary" onClick={()=>setPage('pinjaman')}>Pinjaman</Btn></div></div>
        </Card>
      </div>
    </>
  );
}

window.Anggota = Anggota;