// Explainable AI assistant for owners — recommendations stay reviewable, never auto-execute
const AI_RESTOCK = [
  { sku:'SMB-001', name:'Beras Pandan Wangi 5kg', branch:'Cabang Pusat', current:5, suggest:18, cost:1_233_000, confidence:92, reason:'Rata-rata 4,1 unit/hari; stok diperkirakan habis besok sore.' },
  { sku:'SMB-004', name:'Telur Ayam Negeri 1kg', branch:'Cabang Kalimalang', current:4, suggest:16, cost:416_000, confidence:87, reason:'Penjualan naik 28% dalam 7 hari dan akhir pekan biasanya lebih ramai.' },
  { sku:'RMH-006', name:'Baterai ABC AA isi 4', branch:'Cabang Pusat', current:5, suggest:8, cost:78_400, confidence:74, reason:'Stok minimum 7 unit; permintaan tidak rutin sehingga jumlah dibuat konservatif.' },
];

function AiInsight({ pushToast }) {
  const [drafted, setDrafted] = React.useState([]);
  const [question, setQuestion] = React.useState('Mengapa omzet Kalimalang turun kemarin?');
  const [answer, setAnswer] = React.useState(false);
  const draft = item => { setDrafted(previous => [...previous, item.sku]); pushToast({msg:`${item.name} ditambahkan ke draf PO`}); };
  return <div className="stack-6">
    <section className="ai-hero"><div className="ai-hero-mark"><Icon name="star" size={22} /></div><div><p>BRIEFING PEMILIK · 23 JULI 2026, 09.30</p><h2>Bisnis sehat, tetapi 3 barang berisiko kosong</h2><span>AI merangkum data penjualan, stok, shift, dan pembelian. Semua tindakan tetap perlu konfirmasi manusia.</span></div><Pill tone="success" dot>Data terbaru</Pill></section>
    <div className="grid-4">
      <Kpi label="Omzet Hari Ini" value="Rp 5,4 jt" hint="+8,2% dari Kamis lalu" icon="trending" tone="success" />
      <Kpi label="Risiko Stok Kosong" value="3 SKU" hint="Potensi kehilangan Rp 620 rb" icon="alert" tone="warn" />
      <Kpi label="Anomali Transaksi" value="1" hint="Refund di atas kebiasaan" icon="receipt" tone="warn" />
      <Kpi label="Peluang Margin" value="Rp 310 rb" hint="Dari 2 penyesuaian harga" icon="tag" />
    </div>
    <div className="grid-2 ai-main-grid">
      <Card><div className="card-pad"><SectionHead title="Rekomendasi isi ulang" hint="Prioritas dihitung dari kecepatan jual, stok, lead time, dan pola hari" action={<Pill tone="accent">Dapat dijelaskan</Pill>} /><div className="recommendation-list">{AI_RESTOCK.map(item => <article className="recommendation" key={item.sku}><div className="row between"><div><span className="mono">{item.sku}</span><h3>{item.name}</h3><small>{item.branch}</small></div><Pill tone={item.confidence > 85 ? 'success' : 'warning'}>{item.confidence}% yakin</Pill></div><div className="recommendation-numbers"><div><span>Stok sekarang</span><b>{item.current}</b></div><div><span>Saran pesan</span><b>{item.suggest}</b></div><div><span>Estimasi modal</span><b>{rupiah(item.cost, {sym:true})}</b></div></div><div className="ai-reason"><Icon name="star" size={14} /><span><b>Alasan:</b> {item.reason}</span></div><Btn size="sm" tone={drafted.includes(item.sku) ? 'secondary' : 'primary'} icon={drafted.includes(item.sku) ? 'check' : 'plus'} onClick={() => draft(item)} disabled={drafted.includes(item.sku)}>{drafted.includes(item.sku) ? 'Sudah di Draf PO' : 'Tambahkan ke Draf PO'}</Btn></article>)}</div></div></Card>
      <div className="stack-6">
        <Card><div className="card-pad"><SectionHead title="Tanya data toko" hint="Pertanyaan bahasa sehari-hari, jawaban tetap menyertakan dasar data" /><label className="ai-question"><input value={question} onChange={event => setQuestion(event.target.value)} placeholder="Contoh: cabang mana paling untung minggu ini?" /><button onClick={() => setAnswer(true)} aria-label="Kirim pertanyaan"><Icon name="arrowRight" size={16} /></button></label>{answer && <div className="ai-answer"><div className="row gap-2"><Icon name="star" size={15} /><b>Ringkasan jawaban</b></div><p>Omzet Kalimalang turun 9% terutama karena stok Telur Ayam dan Aqua kosong selama 4 jam. Jumlah pelanggan hanya turun 1%, jadi penyebab utamanya ketersediaan barang, bukan kunjungan.</p><div className="ai-sources"><span>Penjualan per SKU · 22 Jul</span><span>Log stok · Kalimalang</span><span>112 transaksi dibandingkan</span></div></div>}</div></Card>
        <Card><div className="card-pad"><SectionHead title="Perlu diperiksa manusia" hint="AI menandai pola, bukan menuduh atau memutuskan" /><div className="notice-box"><Icon name="alert" size={16} /><div><b>Refund Rp78.000 lebih tinggi dari pola Rina</b><span>Nilai 3,2× di atas median refund kasir. Alasan tercatat: salah ukuran Pampers.</span><Btn size="sm" icon="chevronRight" onClick={() => pushToast({msg:'Membuka bukti transaksi dan audit trail'})}>Lihat Bukti</Btn></div></div><div className="notice-box"><Icon name="trending" size={16} /><div><b>Harga Minyak Goreng dapat dinaikkan Rp500</b><span>Margin turun 1,4 poin; harga masih di bawah median toko sekitar.</span></div></div></div></Card>
      </div>
    </div>
    <Card><div className="card-pad"><SectionHead title="Batas penggunaan AI" hint="Didesain aman untuk operasional toko kecil dan multi-cabang" /><div className="grid-4"><div className="info-cell"><div className="info-label">Tidak otomatis membeli</div><div className="info-value">Perlu konfirmasi</div></div><div className="info-cell"><div className="info-label">Data sensitif</div><div className="info-value">Sesuai hak akses</div></div><div className="info-cell"><div className="info-label">Rekomendasi</div><div className="info-value">Ada alasan & sumber</div></div><div className="info-cell"><div className="info-label">Umpan balik</div><div className="info-value">Dapat dikoreksi</div></div></div></div></Card>
  </div>;
}
Object.assign(window, { AiInsight });