// Customer ledger
const { useState: useStateCU } = React;

function Customers({ collector, setPage, pushToast }) {
  const [q, setQ] = useStateCU('');
  const [selectedId, setSelectedId] = useStateCU('CUS-2402');
  const customers = CUSTOMERS.filter(c => (collector === 'all' || c.collectorId === collector) && (!q || `${c.name} ${c.owner} ${c.area}`.toLowerCase().includes(q.toLowerCase())));
  const selected = CUSTOMER_BY_ID[selectedId] || customers[0] || CUSTOMERS[0];
  const invs = INVOICES.filter(i => i.customerId === selected.id);
  const outstanding = invs.reduce((s,i)=>s+invoiceBalance(i),0);
  const overdue = invs.filter(i=>daysLate(i)>0).reduce((s,i)=>s+invoiceBalance(i),0);
  const usage = Math.round(outstanding / selected.creditLimit * 100);

  return (
    <>
      <PageHeader eyebrow="Customer Ledger" title="Customer & Limit Kredit" subtitle={`${customers.length} customer dalam filter. Profil customer memperlihatkan limit, perilaku bayar, outstanding, dan dispute.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Form customer baru dibuka'})}>Customer Baru</Btn><Btn icon="download" tone="outline">Ekspor</Btn></>} />
      <div className="grid" style={{gridTemplateColumns:'1.25fr 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 nama toko, owner, area..." /></div><div style={{maxHeight:'64vh', overflowY:'auto'}}><table className="table"><thead style={{position:'sticky',top:0,background:'hsl(var(--card))',zIndex:1}}><tr><th>Customer</th><th>Area</th><th>Collector</th><th>Term</th><th style={{textAlign:'right'}}>Limit</th><th style={{textAlign:'right'}}>Outstanding</th><th>Risk</th></tr></thead><tbody>{customers.map(c => { const inv=INVOICES.filter(i=>i.customerId===c.id); const out=inv.reduce((s,i)=>s+invoiceBalance(i),0); return <tr key={c.id} onClick={()=>setSelectedId(c.id)} style={{cursor:'pointer', background:selected.id===c.id?'hsl(var(--accent-h) var(--accent-s) 96%)':undefined}}><td><b>{c.name}</b><div className="mono text-sm muted">{c.id} · {c.owner}</div></td><td>{c.area}</td><td>{collectorById(c.collectorId).name}</td><td>{c.term} hari</td><td style={{textAlign:'right'}}>{rupiah(c.creditLimit,{sym:true,compact:true})}</td><td style={{textAlign:'right', fontWeight:800}}>{rupiah(out,{sym:true,compact:true})}</td><td><SoftPill color={c.risk==='high'?'rose':c.risk==='medium'?'amber':'green'}>{c.risk}</SoftPill></td></tr>; })}</tbody></table></div></Card>
        <Card><div style={{padding:'16px', borderBottom:'1px solid hsl(var(--border))'}}><div className="row between"><div><div className="mono text-sm muted">{selected.id}</div><div style={{fontSize:18, fontWeight:800}}>{selected.name}</div><div className="text-sm muted">{selected.owner} · {selected.area}</div></div><SoftPill color={selected.risk==='high'?'rose':selected.risk==='medium'?'amber':'green'}>{selected.risk}</SoftPill></div></div><div style={{padding:'16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Kredit & Pembayaran"/><div className="form-grid"><Field label="Limit Kredit" value={rupiah(selected.creditLimit,{sym:true})}/><Field label="Outstanding" value={rupiah(outstanding,{sym:true})}/><Field label="Overdue" value={rupiah(overdue,{sym:true})}/><Field label="Avg Bayar" value={`${selected.avgPayDays} hari`}/><Field label="Term" value={`${selected.term} hari`}/><Field label="Telepon" value={selected.phone}/></div><div className="simpanan-progress"><div style={{width:Math.min(100,usage)+'%', background:usage>90?'hsl(0 72% 48%)':usage>70?'hsl(38 90% 52%)':'hsl(var(--accent-h) var(--accent-s) var(--accent-l))'}}/></div><div className="row between text-sm muted" style={{marginTop:5}}><span>Penggunaan limit</span><b>{usage}%</b></div></div><div style={{padding:'16px'}}><SectionHead title="Invoice Customer" hint={`${invs.length} invoice`}/>{invs.map(inv => <div className="invoice-card" key={inv.id}><div className="row between"><span className="invoice-code">{inv.id}</span><StatusPill status={inv.status}/></div><div className="row between" style={{marginTop:5}}><span>{formatDateID(inv.dueDate)}</span><b>{rupiah(invoiceBalance(inv),{sym:true})}</b></div></div>)}<div className="row gap-2" style={{marginTop:12}}><Btn icon="bell" tone="primary" onClick={()=>setPage('followup')}>Follow-up</Btn><Btn icon="receipt" tone="outline" onClick={()=>setPage('aging')}>Aging</Btn></div></div></Card>
      </div>
    </>
  );
}

window.Customers = Customers;