// Dashboard AR Collection
function Dashboard({ collector, role, setPage, pushToast }) {
  const invoices = collector === 'all' ? INVOICES : INVOICES.filter(inv => CUSTOMER_BY_ID[inv.customerId].collectorId === collector);
  const overdue = invoices.filter(inv => daysLate(inv) > 0).reduce((s,inv)=>s+invoiceBalance(inv),0);
  const total = invoices.reduce((s,inv)=>s+invoiceBalance(inv),0);
  const tasks = TASKS.filter(t => collector === 'all' || t.collectorId === collector);
  const maxTrend = Math.max(...AR_TREND.map(t => t.due));
  const buckets = ['current','d1','d8','d31','d60'];
  const nextPromises = FOLLOWUPS.filter(f => f.promiseDate).slice(0,3);

  return (
    <>
      <PageHeader
        eyebrow={`${PERIODE_LABEL} · ${formatDateID(TODAY)}`}
        title={`Selamat bekerja, ${ROLES[role].name}`}
        subtitle={`Total piutang aktif ${rupiah(total, {sym:true})}; overdue ${rupiah(overdue, {sym:true})}. Fokus hari ini: ${tasks.filter(t=>t.dueToday).length} tugas collector dan ${KPI.promiseToday} janji bayar.`}
        actions={<><Btn icon="bell" tone="primary" onClick={()=>setPage('followup')}>Kirim Reminder</Btn><Btn icon="creditCard" tone="outline" onClick={()=>setPage('payments')}>Match Pembayaran</Btn></>}
      />
      <div className="grid g-4" style={{marginBottom:16}}>
        <Kpi label="Total AR" value={rupiah(total,{sym:true,compact:true})} sub={`${invoices.length} invoice open`} icon="receipt" tone="accent" />
        <Kpi label="Overdue" value={rupiah(overdue,{sym:true,compact:true})} sub={`${Math.round(overdue/Math.max(1,total)*100)}% dari AR`} icon="alert" tone="amber" />
        <Kpi label="Collected MTD" value={rupiah(KPI.collectedMTD,{sym:true,compact:true})} sub="transfer + giro" icon="dollar" tone="green" />
        <Kpi label="DSO" value={`${KPI.dso} hari`} sub="target internal 28 hari" icon="trending" tone="rose" />
      </div>

      <div className="aging-board" style={{marginBottom:16}}>
        {buckets.map(b => {
          const list = invoices.filter(inv => agingBucket(inv) === b);
          const val = list.reduce((s,inv)=>s+invoiceBalance(inv),0);
          return <div className={'aging-col ' + b} key={b}><div className="aging-col-head"><div className="aging-col-title">{bucketLabel(b)}</div><div className="aging-col-total">{rupiah(val,{compact:true})}</div><div className="text-sm">{list.length} invoice</div></div>{list.slice(0,3).map(inv => { const c=CUSTOMER_BY_ID[inv.customerId]; return <div className="invoice-card" key={inv.id} onClick={()=>setPage('aging')}><div className="row between"><span className="invoice-code">{inv.id}</span><StatusPill status={inv.status}/></div><div style={{fontWeight:700, marginTop:4}}>{c.name}</div><div className="row between text-sm muted" style={{marginTop:4}}><span>H{daysLate(inv) > 0 ? '+' + daysLate(inv) : daysLate(inv)}</span><span className="invoice-amount">{rupiah(invoiceBalance(inv),{compact:true})}</span></div></div>; })}</div>;
        })}
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.2fr 0.8fr', gap:16}}>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Target Collector" hint="Collected vs target bulan berjalan" action={<Btn icon="list" tone="ghost" onClick={()=>setPage('tasks')}>Tugas</Btn>} /></div><div style={{padding:'14px 16px'}}>{COLLECTION_TARGET.map(c => <div key={c.id} className="simpanan-card" style={{marginBottom:10}}><div className="row between"><div className="row gap-2"><CollectorAvatar name={c.name} size="sm"/><div><b>{c.name}</b><div className="text-sm muted">{c.area}</div></div></div><span className="mono" style={{fontWeight:800}}>{Math.round(c.collected/c.target*100)}%</span></div><div className="simpanan-progress"><div style={{width:Math.min(100,c.collected/c.target*100)+'%'}}/></div><div className="row between text-sm muted" style={{marginTop:5}}><span>{rupiah(c.collected,{sym:true,compact:true})} collected</span><span>{rupiah(c.overdue,{sym:true,compact:true})} overdue</span></div></div>)}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Janji Bayar Terdekat" hint="Promise-to-pay dan dispute" /></div><div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:10}}>{nextPromises.map(f => { const inv=invoiceById(f.invoiceId); const c=CUSTOMER_BY_ID[inv.customerId]; return <div key={f.id} className="promise-box"><div className="row between"><b>{c.name}</b><span className="mono">{f.promiseDate}</span></div><div className="text-sm muted" style={{marginTop:4}}>{inv.id} · {rupiah(f.promiseAmount,{sym:true})}</div><div style={{fontSize:12.5, marginTop:6}}>{f.note}</div></div>; })}</div></Card>
      </div>
      <Card style={{marginTop:16}}><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Trend Overdue vs Collection" hint="8 hari terakhir" /></div><div style={{padding:'16px'}}><div className="row" style={{height:130, gap:8, alignItems:'flex-end'}}>{AR_TREND.map(t => <div key={t.date} style={{flex:1, display:'flex', flexDirection:'column', gap:4, alignItems:'center'}}><div style={{height:t.due/maxTrend*100+'%', width:'100%', borderRadius:'5px 5px 0 0', background:'hsl(38 92% 70%)'}}/><div style={{height:t.collected/maxTrend*100+'%', width:'70%', borderRadius:'4px 4px 0 0', background:'hsl(var(--accent-h) var(--accent-s) var(--accent-l))'}}/><div className="mono" style={{fontSize:10}}>{t.date.slice(8)}</div></div>)}</div></div></Card>
    </>
  );
}

window.Dashboard = Dashboard;