// Tugas collector
function CollectorTasks({ collector, setPage, pushToast }) {
  const tasks = TASKS.filter(t => collector === 'all' || t.collectorId === collector);
  const stages = [
    { id:'reminder', label:'Reminder WA' },
    { id:'promise', label:'Promise-to-Pay' },
    { id:'visit', label:'Visit Lapangan' },
    { id:'dispute', label:'Dispute' },
  ];
  const totalValue = tasks.reduce((s,t)=>s+invoiceBalance(invoiceById(t.invoiceId)),0);
  return (
    <>
      <PageHeader eyebrow="Collection Kanban" title="Tugas Collector" subtitle={`${tasks.length} tugas aktif dengan total saldo ${rupiah(totalValue,{sym:true})}. Prioritas tinggi otomatis dari invoice 60+ hari atau saldo besar.`} actions={<><Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Tugas manual dibuat'})}>Tugas Baru</Btn><Btn icon="refresh" tone="outline">Auto-Assign</Btn></>} />
      <div className="grid g-4" style={{marginBottom:16}}><Kpi label="Tugas Aktif" value={tasks.length}/><Kpi label="Due Hari Ini" value={tasks.filter(t=>t.dueToday).length}/><Kpi label="High Priority" value={tasks.filter(t=>t.priority==='high').length}/><Kpi label="Nilai Ditagih" value={rupiah(totalValue,{sym:true,compact:true})}/></div>
      <div className="collector-kanban">{stages.map(s => { const list=tasks.filter(t=>t.stage===s.id); return <div className="aging-col" key={s.id}><div className="aging-col-head"><div className="aging-col-title">{s.label}</div><div className="text-sm">{list.length} tugas</div></div><div style={{padding:10}}>{list.map(t => <TaskCard key={t.id} task={t} setPage={setPage} pushToast={pushToast}/>)}</div></div>; })}</div>
    </>
  );
}

function TaskCard({ task, setPage, pushToast }) {
  const inv = invoiceById(task.invoiceId);
  const c = CUSTOMER_BY_ID[task.customerId];
  const col = collectorById(task.collectorId);
  return <div className={'task-card ' + task.priority}><div className="row between"><span className="mono text-sm">{task.id}</span><SoftPill color={task.priority==='high'?'rose':task.priority==='medium'?'amber':'navy'}>{task.priority}</SoftPill></div><div style={{fontWeight:800, marginTop:6}}>{c.name}</div><div className="text-sm muted">{inv.id} · H+{Math.max(0,daysLate(inv))} · {col.name}</div><div className="row between" style={{marginTop:8}}><span>Saldo</span><b className="mono">{rupiah(invoiceBalance(inv),{compact:true})}</b></div><div className="row gap-2" style={{marginTop:10}}><Btn icon="bell" tone="primary" onClick={()=>setPage('followup')}>Follow-up</Btn><Btn icon="check" tone="outline" onClick={()=>pushToast({msg:`${task.id} ditandai selesai`})}>Done</Btn></div></div>;
}

window.CollectorTasks = CollectorTasks;