// Pembayaran dan rekonsiliasi
function Payments({ collector, pushToast }) {
  const payments = PAYMENTS.filter(p => collector === 'all' || CUSTOMER_BY_ID[p.customerId]?.collectorId === collector);
  const matched = payments.filter(p=>p.status==='matched').reduce((s,p)=>s+p.amount,0);
  const pending = payments.filter(p=>p.status!=='matched').reduce((s,p)=>s+p.amount,0);
  return (
    <>
      <PageHeader eyebrow="Payment Matching" title="Pembayaran & Bukti Transfer" subtitle={`Matched ${rupiah(matched,{sym:true})}, masih perlu rekonsiliasi ${rupiah(pending,{sym:true})}. Unmatched payment harus dihubungkan ke invoice sebelum close harian.`} actions={<><Btn icon="upload" tone="primary" onClick={()=>pushToast({msg:'Upload bukti bayar'})}>Upload Bukti</Btn><Btn icon="refresh" tone="outline">Auto Match</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Matched" value={rupiah(matched,{sym:true,compact:true})} icon="check"/><Kpi label="Pending/Unmatched" value={rupiah(pending,{sym:true,compact:true})} icon="alert"/><Kpi label="Bukti Masuk" value={payments.length}/><Kpi label="Partial Payment" value={INVOICES.filter(i=>i.status==='partial').length}/></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="Daftar Pembayaran" hint="Transfer, giro, dan bukti bayar" /></div><table className="table"><thead><tr><th>Payment</th><th>Customer</th><th>Invoice</th><th>Tanggal</th><th>Metode</th><th style={{textAlign:'right'}}>Nilai</th><th>Status</th></tr></thead><tbody>{payments.map(p => { const c=CUSTOMER_BY_ID[p.customerId]; return <tr key={p.id}><td className="mono">{p.id}</td><td><b>{c.name}</b><div className="text-sm muted">{c.area}</div></td><td className="mono">{p.invoiceId || '-'}</td><td>{formatDateID(p.date)}</td><td>{p.method}</td><td style={{textAlign:'right', fontWeight:800}}>{rupiah(p.amount,{sym:true})}</td><td><StatusPill status={p.status}/></td></tr>; })}</tbody></table></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Rekonsiliasi Cepat" hint="Kandidat matching" /></div><div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:10}}>{payments.filter(p=>p.status!=='matched').map(p => { const c=CUSTOMER_BY_ID[p.customerId]; const candidates=INVOICES.filter(i=>i.customerId===p.customerId && invoiceBalance(i)>0).slice(0,2); return <div className="simpanan-card" key={p.id}><div className="row between"><b>{p.id}</b><span className="mono">{rupiah(p.amount,{compact:true})}</span></div><div className="text-sm muted" style={{marginTop:4}}>{c.name} · {p.proof}</div>{candidates.map(inv => <div key={inv.id} className="invoice-card" style={{border:'1px solid hsl(var(--border))', borderRadius:8, marginTop:8}}><div className="row between"><span className="mono">{inv.id}</span><b>{rupiah(invoiceBalance(inv),{compact:true})}</b></div><div className="text-sm muted">Due {formatDateID(inv.dueDate)}</div></div>)}<Btn icon="check" tone="primary" onClick={()=>pushToast({msg:`${p.id} dimatch`})} style={{marginTop:8}}>Match</Btn></div>; })}<div className="callout accent"><Icon name="info" size={14}/><span>Auto-match memakai kombinasi customer, nominal, tanggal transfer, dan nomor invoice pada keterangan bank.</span></div></div></Card>
      </div>
    </>
  );
}

window.Payments = Payments;