// Approval inbox and audit trail for sensitive cross-branch actions
const APPROVAL_QUEUE = [
  { id:'APR-2607-031', type:'Refund', title:'Refund transaksi TRX-260723-0081', detail:'Pampers Premium M-22 · salah ukuran', amount:'Rp78.000', actor:'Rina Wahyuni', branch:'Cabang Pusat', device:'Kasir HP · Rina', age:'12 menit lalu', risk:'Di atas kebiasaan kasir', requiresOwner:true },
  { id:'APR-2607-032', type:'Koreksi stok', title:'Beras Pandan Wangi 5kg · -2 unit', detail:'Selisih fisik saat stock opname', amount:'Rp137.000', actor:'Bambang Kurniawan', branch:'Cabang Pusat', device:'Meja Kasir 1', age:'34 menit lalu', risk:'Nilai selisih di atas Rp100 ribu', requiresOwner:true },
  { id:'APR-2607-033', type:'Ubah harga', title:'Minyak Goreng Tropical 2L · +Rp500', detail:'Menjaga margin minimum 14%', amount:'+1,4% margin', actor:'Dewi Pratiwi', branch:'Cabang Kalimalang', device:'Web Back Office', age:'1 jam lalu', risk:'Berlaku untuk satu cabang', requiresOwner:false },
];
const AUDIT_ROWS = [
  ['09.18','Bambang Kurniawan','Meja Kasir 1','Cabang Pusat','Transfer stok TRF-2607-006 dikirim','Berhasil'],
  ['09.12','Hj. Siti Aminah','Web Back Office','Semua cabang','Mengubah batas persetujuan refund','Berhasil'],
  ['08.56','Rina Wahyuni','Kasir HP · Rina','Cabang Pusat','Mengajukan refund TRX-260723-0081','Menunggu'],
  ['08.43','Dewi Pratiwi','Kasir HP · Dewi','Kalimalang','Sinkronisasi 18 transaksi offline','Berhasil'],
  ['08.05','Aldi Firmansyah','Kasir HP · Aldi','Cabang Pusat','Percobaan membuka pengaturan pajak','Ditolak'],
];

function Persetujuan({ role, pushToast }) {
  const [decisions, setDecisions] = React.useState({});
  const [selected, setSelected] = React.useState(APPROVAL_QUEUE[0]);
  const isOwner = role === 'owner' || role === 'pemilik';
  const decide = (id, value) => { setDecisions(previous => ({...previous,[id]:value})); pushToast({msg:value === 'approved' ? 'Permintaan disetujui dan dicatat' : 'Permintaan ditolak dan dikembalikan'}); };
  const pending = APPROVAL_QUEUE.filter(item => !decisions[item.id] && (isOwner || !item.requiresOwner)).length;
  return <div className="stack-6">
    <div className="grid-4"><Kpi label="Menunggu Saya" value={pending.toString()} hint={isOwner ? 'Termasuk eskalasi berisiko' : 'Dalam batas Kepala Cabang'} icon="clock" tone="warn" /><Kpi label="Disetujui Hari Ini" value="7" hint="Total Rp1,2 juta" icon="checkCircle" tone="success" /><Kpi label="Diekskalasi" value={isOwner ? '2' : '2 ke Pemilik'} hint="Risiko atau melewati batas" icon="shieldOff" /><Kpi label="Aktivitas Tercatat" value="186" hint="Hari ini · semua cabang" icon="receipt" /></div>
    <div className="approval-layout">
      <Card><div className="card-pad"><SectionHead title="Kotak masuk persetujuan" hint="Urut berdasarkan tingkat risiko dan waktu" /><div className="approval-list">{APPROVAL_QUEUE.map(item => { const decision = decisions[item.id]; return <button key={item.id} className={'approval-item '+(selected?.id === item.id ? 'selected' : '')} onClick={() => setSelected(item)}><div className="row between"><Pill tone={decision === 'approved' ? 'success' : decision === 'rejected' ? 'danger' : 'warning'}>{decision === 'approved' ? 'Disetujui' : decision === 'rejected' ? 'Ditolak' : item.type}</Pill><time>{item.age}</time></div><b>{item.title}</b><span>{item.actor} · {item.branch}</span><strong>{item.amount}</strong></button>; })}</div></div></Card>
      <Card>{selected && <div className="card-pad approval-detail"><div className="row between"><Pill tone="warning">{selected.type}</Pill><span className="mono">{selected.id}</span></div><h2>{selected.title}</h2><p>{selected.detail}</p><div className="grid-2"><div className="info-cell"><div className="info-label">Nilai dampak</div><div className="info-value">{selected.amount}</div></div><div className="info-cell"><div className="info-label">Cabang</div><div className="info-value">{selected.branch.replace('Cabang ','')}</div></div></div><div className="approval-evidence"><h3>Bukti & konteks</h3><div><span>Diajukan oleh</span><b>{selected.actor}</b></div><div><span>Perangkat</span><b>{selected.device}</b></div><div><span>Aturan terpicu</span><b>{selected.risk}</b></div><div><span>Penanggung jawab</span><b>{selected.requiresOwner ? 'Pemilik' : 'Kepala Cabang'}</b></div><div><span>Lampiran</span><Btn size="sm" icon="receipt">Lihat Struk</Btn></div></div>{decisions[selected.id] ? <div className="decision-banner"><Icon name="checkCircle" size={18} /><div><b>Keputusan tersimpan</b><span>{decisions[selected.id] === 'approved' ? 'Permintaan telah disetujui.' : 'Permintaan ditolak dan pembuat menerima catatan.'}</span></div></div> : selected.requiresOwner && !isOwner ? <div className="decision-banner warning-decision"><Icon name="shieldOff" size={18} /><div><b>Diteruskan ke Pemilik</b><span>Permintaan ini berisiko atau melewati batas Rp100.000, sehingga Kepala Cabang tidak dapat memutuskan.</span></div></div> : <div className="row gap-2"><Btn tone="destructive" icon="x" onClick={() => decide(selected.id,'rejected')}>Tolak</Btn><Btn tone="primary" icon="check" onClick={() => decide(selected.id,'approved')}>Setujui</Btn></div>}</div>}</Card>
    </div>
    <Card><div className="card-pad"><SectionHead title="Audit log" hint="Jejak tidak dapat dihapus oleh kasir; ekspor tersedia untuk pemilik" action={<Btn size="sm" icon="download">Ekspor CSV</Btn>} /><div className="table-wrap"><table className="table"><thead><tr><th>Waktu</th><th>Pelaku</th><th>Perangkat</th><th>Cabang</th><th>Aktivitas</th><th>Hasil</th></tr></thead><tbody>{AUDIT_ROWS.map((row,index) => <tr key={index}><td className="code">{row[0]}</td><td><b>{row[1]}</b></td><td>{row[2]}</td><td>{row[3]}</td><td>{row[4]}</td><td><Pill tone={row[5] === 'Berhasil' ? 'success' : row[5] === 'Ditolak' ? 'danger' : 'warning'}>{row[5]}</Pill></td></tr>)}</tbody></table></div></div></Card>
  </div>;
}
Object.assign(window, { Persetujuan });