// Dashboard Koperasi
function Dashboard({ role, unit, setPage, pushToast }) {
  const anggota = unit === 'all' ? ANGGOTA : ANGGOTA.filter(a => a.unitId === unit);
  const activeLoans = PINJAMAN.filter(p => p.status === 'aktif');
  const due = ANGSURAN.filter(a => a.status === 'due' || a.status === 'late');
  const maxFlow = Math.max(...CASHFLOW_DAILY.map(d => Math.max(d.masuk, d.keluar)));

  return (
    <>
      <PageHeader
        eyebrow={`${PERIODE_LABEL} · ${formatDateID(TODAY)}`}
        title={`Dashboard ${TENANT.name}`}
        subtitle={`${KPI.anggotaAktif} anggota aktif, simpanan ${rupiah(KPI.totalSimpanan, {sym:true, compact:true})}, outstanding pinjaman ${rupiah(KPI.outstanding, {sym:true, compact:true})}.`}
        actions={<><Btn icon="plus" tone="primary" onClick={()=>setPage('anggota')}>Anggota Baru</Btn><Btn icon="creditCard" tone="outline" onClick={()=>setPage('pinjaman')}>Pengajuan Pinjaman</Btn></>}
      />

      <div className="grid g-4" style={{marginBottom:16}}>
        <Kpi label="Anggota Aktif" value={KPI.anggotaAktif} sub={`${KPI.anggotaTotal} total anggota`} icon="users" tone="accent" />
        <Kpi label="Total Simpanan" value={rupiah(KPI.totalSimpanan, {sym:true, compact:true})} sub="pokok + wajib + sukarela" icon="inbox" tone="green" />
        <Kpi label="Outstanding" value={rupiah(KPI.outstanding, {sym:true, compact:true})} sub={`${activeLoans.length} pinjaman aktif`} icon="creditCard" tone="amber" />
        <Kpi label="Kas Tersedia" value={rupiah(KPI.kas, {sym:true, compact:true})} sub={`SHU YTD ${rupiah(KPI.shuYtd, {compact:true})}`} icon="dollar" tone="green" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.25fr 0.8fr', gap:16, marginBottom:16}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Target Simpanan per Unit" hint="Progress terhadap target tahun berjalan" action={<Btn icon="inbox" tone="ghost" onClick={()=>setPage('simpanan')}>Simpanan</Btn>} />
          </div>
          <div style={{padding:'14px 16px'}} className="grid g-2">
            {UNIT.map(u => {
              const total = ANGGOTA.filter(a => a.unitId === u.id).reduce((s,a)=>s+totalSimpananAnggota(a),0);
              return <div className="simpanan-card" key={u.id}><div className="row between"><div style={{fontWeight:700}}>{u.name}</div><SoftPill>{ANGGOTA.filter(a=>a.unitId===u.id).length} anggota</SoftPill></div><div style={{fontSize:20, fontWeight:700, marginTop:8}}>{rupiah(total,{sym:true,compact:true})}</div><div className="simpanan-progress"><div style={{width:Math.min(100,total/u.targetSimpanan*100)+'%'}}/></div><div className="text-sm muted" style={{marginTop:5}}>{Math.round(total/u.targetSimpanan*100)}% dari target {rupiah(u.targetSimpanan,{compact:true})}</div></div>;
            })}
          </div>
        </Card>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Aktivitas Hari Ini" hint="Teller, kredit, sistem" /></div>
          <div style={{padding:'12px 16px', display:'flex', flexDirection:'column', gap:10}}>
            {ACTIVITY.map(a => <div key={a.id} className={a.urgent ? 'callout warn' : 'callout'}><div className="mono text-sm" style={{width:48}}>{a.time}</div><div><div style={{fontWeight:a.urgent?700:600}}>{a.text}</div><div className="text-sm muted">{a.who}</div></div></div>)}
          </div>
        </Card>
      </div>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:16}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Cashflow 8 Hari" hint="Kas masuk vs pencairan" /></div>
          <div style={{padding:'16px'}}>
            <div className="cashflow-bar">
              {CASHFLOW_DAILY.map(d => <div className="cashflow-day" key={d.date}><div className="cashflow-stack" style={{height:'100%'}}><div className="in" style={{height:(d.masuk/maxFlow*100)+'%'}}/><div className="out" style={{height:(d.keluar/maxFlow*100)+'%'}}/></div><div className="mono" style={{fontSize:10}}>{d.date.slice(8)}</div></div>)}
            </div>
          </div>
        </Card>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Angsuran Perlu Tindak Lanjut" hint={`${due.length} tagihan jatuh tempo / telat`} action={<Btn icon="receipt" tone="ghost" onClick={()=>setPage('angsuran')}>Tagih</Btn>} /></div>
          <table className="table">
            <tbody>{due.map(a => { const p=pinjamanById(a.pinjamanId); const m=ANGGOTA_BY_ID[p.anggotaId]; return <tr key={a.id}><td><div style={{fontWeight:700}}>{m.nama}</div><div className="text-sm muted">{p.id} · {p.jenis}</div></td><td className="mono">{formatDateID(a.jatuhTempo).slice(0,11)}</td><td style={{textAlign:'right', fontWeight:700}}>{rupiah(totalAngsuran(a),{sym:true})}</td><td><StatusPill status={a.status}/></td></tr>; })}</tbody>
          </table>
        </Card>
      </div>
    </>
  );
}

window.Dashboard = Dashboard;