// Follow-up WhatsApp dan promise-to-pay
const { useState: useStateFU } = React;

function FollowUp({ collector, pushToast }) {
  const list = FOLLOWUPS.filter(f => collector === 'all' || f.collectorId === collector);
  const [selectedId, setSelectedId] = useStateFU(list[0]?.id || FOLLOWUPS[0].id);
  const selected = FOLLOWUPS.find(f => f.id === selectedId) || list[0] || FOLLOWUPS[0];
  const inv = invoiceById(selected.invoiceId);
  const c = CUSTOMER_BY_ID[inv.customerId];
  const col = collectorById(selected.collectorId);
  const template = `Halo ${c.owner}, kami dari ${TENANT.name}. Mohon konfirmasi pembayaran invoice ${inv.id} sebesar ${rupiah(invoiceBalance(inv),{sym:true})} yang jatuh tempo ${formatDateID(inv.dueDate)}. Jika sudah transfer, mohon kirim bukti bayar. Terima kasih.`;

  return (
    <>
      <PageHeader eyebrow="WhatsApp Collection" title="Follow-up & Promise-to-Pay" subtitle="Semua komunikasi penagihan dicatat agar collector, AR admin, dan finance punya audit trail yang sama." actions={<><Btn icon="bell" tone="primary" onClick={()=>pushToast({msg:'Template WhatsApp dikirim'})}>Kirim WA</Btn><Btn icon="plus" tone="outline">Catatan Baru</Btn></>} />
      <div className="grid" style={{gridTemplateColumns:'0.95fr 1.1fr 0.8fr', gap:16}}>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Histori Follow-up" hint={`${list.length} catatan`} /></div><div style={{maxHeight:'64vh', overflowY:'auto'}}>{list.map(f => { const i=invoiceById(f.invoiceId); const cc=CUSTOMER_BY_ID[i.customerId]; return <div className="invoice-card" key={f.id} onClick={()=>setSelectedId(f.id)} style={{background:selected.id===f.id?'hsl(var(--accent-h) var(--accent-s) 96%)':undefined}}><div className="row between"><span className="mono text-sm">{f.id}</span><SoftPill color={f.type==='dispute'?'rose':f.type==='promise'?'amber':'navy'}>{f.type}</SoftPill></div><div style={{fontWeight:750, marginTop:5}}>{cc.name}</div><div className="text-sm muted">{i.id} · {f.channel} · {f.at}</div></div>; })}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Percakapan" hint={`${c.name} · ${col.name}`} /></div><div style={{padding:'16px', display:'flex', flexDirection:'column', gap:10}}><div className="wa-bubble out">{template}</div><div className="wa-bubble in">Baik, akan kami cek dulu dengan bagian toko. Kalau tidak ada selisih kami bayar sesuai janji.</div><div className="wa-bubble out">Terima kasih. Mohon kabari sebelum pukul 16:00 agar kami bisa update status tagihan.</div>{selected.note && <div className="promise-box"><b>Catatan Collector</b><div style={{marginTop:5}}>{selected.note}</div></div>}</div></Card>
        <Card><div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}><SectionHead title="Detail Tagihan" /></div><div style={{padding:'16px'}}><div className="form-grid"><Field label="Invoice" value={inv.id}/><Field label="Saldo" value={rupiah(invoiceBalance(inv),{sym:true})}/><Field label="Jatuh Tempo" value={formatDateID(inv.dueDate)}/><Field label="Umur" value={daysLate(inv)>0?`H+${daysLate(inv)}`:'Current'}/><Field label="Collector" value={col.name}/><Field label="Channel" value={selected.channel}/></div>{selected.promiseDate && <div className="promise-box" style={{marginTop:14}}><b>Janji Bayar</b><div className="row between" style={{marginTop:6}}><span>{formatDateID(selected.promiseDate)}</span><b>{rupiah(selected.promiseAmount,{sym:true})}</b></div></div>}{inv.dispute && <div className="callout danger" style={{marginTop:14}}><Icon name="alert" size={14}/><span>Dispute: {inv.dispute}</span></div>}<div className="row gap-2" style={{marginTop:14}}><Btn icon="check" tone="primary" onClick={()=>pushToast({msg:'Janji bayar dicatat'})}>Catat Promise</Btn><Btn icon="creditCard" tone="outline">Input Bayar</Btn></div></div></Card>
      </div>
    </>
  );
}

window.FollowUp = FollowUp;