// Laporan AR Collection
function Reports({ collector, pushToast }) {
  const invoices = collector === 'all' ? INVOICES : INVOICES.filter(inv => CUSTOMER_BY_ID[inv.customerId].collectorId === collector);
  const total = invoices.reduce((s,inv)=>s+invoiceBalance(inv),0);
  const overdue = invoices.filter(inv=>daysLate(inv)>0).reduce((s,inv)=>s+invoiceBalance(inv),0);
  const disputed = invoices.filter(inv=>inv.dispute).reduce((s,inv)=>s+invoiceBalance(inv),0);
  const risky = CUSTOMERS.filter(c => c.risk !== 'low').slice(0,6);
  const buckets = ['current','d1','d8','d31','d60'];
  const max = Math.max(...AR_TREND.map(t=>t.due));
  return (
    <>
      <PageHeader eyebrow="Analitik Piutang" title="Laporan AR & Collection" subtitle={`DSO ${KPI.dso} hari, overdue ratio ${Math.round(overdue/Math.max(1,total)*100)}%, dispute ${rupiah(disputed,{sym:true})}.`} actions={<><Btn icon="download" tone="primary" onClick={()=>pushToast({msg:'Laporan AR PDF diunduh'})}>Unduh PDF</Btn><Btn icon="upload" tone="outline">Kirim Email</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Total AR" value={rupiah(total,{sym:true,compact:true})}/><Kpi label="Overdue" value={rupiah(overdue,{sym:true,compact:true})}/><Kpi label="DSO" value={`${KPI.dso} hari`}/><Kpi label="Dispute" value={rupiah(disputed,{sym:true,compact:true})}/></div>
      <div className="grid" style={{gridTemplateColumns:'1.2fr 0.8fr', gap:16, marginBottom:16}}>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Aging Heatmap per Collector" /></div><div style={{padding:'14px 16px'}}><div className="heat-row text-sm muted" style={{fontWeight:700}}><span>Collector</span>{buckets.map(b=><span key={b}>{bucketLabel(b)}</span>)}</div>{COLLECTORS.map(col => <div className="heat-row" key={col.id}><div className="row gap-2"><CollectorAvatar name={col.name} size="sm"/><b>{col.name}</b></div>{buckets.map((b,idx) => { const val=INVOICES.filter(inv=>CUSTOMER_BY_ID[inv.customerId].collectorId===col.id && agingBucket(inv)===b).reduce((s,inv)=>s+invoiceBalance(inv),0); return <div key={b} className={'heat-cell heat-' + idx}>{rupiah(val,{compact:true})}</div>; })}</div>)}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Top Risky Customer" /></div><div style={{padding:'8px 0'}}>{risky.map(c => { const out=INVOICES.filter(i=>i.customerId===c.id).reduce((s,i)=>s+invoiceBalance(i),0); return <div key={c.id} className="row" style={{padding:'10px 16px', borderTop:'1px solid hsl(var(--border))', gap:10}}><div style={{flex:1}}><b>{c.name}</b><div className="text-sm muted">{c.area} · avg bayar {c.avgPayDays} hari</div></div><div style={{textAlign:'right'}}><div className="mono" style={{fontWeight:800}}>{rupiah(out,{compact:true})}</div><SoftPill color={c.risk==='high'?'rose':'amber'}>{c.risk}</SoftPill></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="Trend Overdue vs Collection" /></div><div style={{padding:'16px'}}><div className="row" style={{height:190, gap:10, alignItems:'flex-end'}}>{AR_TREND.map(t => <div key={t.date} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:5}}><div className="mono text-sm muted">{rupiah(t.due,{compact:true})}</div><div style={{width:'100%', height:t.due/max*100+'%', background:'hsl(38 92% 72%)', borderRadius:'6px 6px 0 0'}}/><div style={{width:'70%', height:t.collected/max*100+'%', background:'hsl(var(--accent-h) var(--accent-s) var(--accent-l))', borderRadius:'4px 4px 0 0'}}/><div className="mono" style={{fontSize:10}}>{t.date.slice(8)}</div></div>)}</div></div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Indikator Collection" /></div><div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:12}}><Indicator label="Overdue Ratio" value={Math.round(overdue/Math.max(1,total)*100)} target={35} inverse/><Indicator label="Collection Rate MTD" value={Math.round(KPI.collectedMTD/(KPI.collectedMTD+overdue)*100)} target={28}/><Indicator label="Promise Kept" value={72} target={70}/><Indicator label="Dispute Ratio" value={Math.round(disputed/Math.max(1,total)*100)} target={8} inverse/><div className="callout warn"><Icon name="info" size={14}/><span>DSO dan promise-kept dipakai untuk prioritas follow-up harian. Customer risk high otomatis ditahan limit order berikutnya.</span></div></div></Card>
      </div>
    </>
  );
}

function Indicator({ label, value, target, inverse }) {
  const ok = inverse ? value <= target : value >= target;
  const pct = Math.min(100, inverse ? target / Math.max(1,value) * 100 : value / target * 100);
  return <div><div className="row between text-sm"><b>{label}</b><span><b>{value}%</b> target {target}%</span></div><div className="simpanan-progress"><div style={{width:pct+'%', background:ok?'hsl(152 58% 38%)':'hsl(38 92% 52%)'}}/></div></div>;
}

window.Reports = Reports;