// Pembelian & Pemasok — purchase orders, receiving, and supplier health
const PURCHASE_ORDERS = [
  { id:'PO-2607-018', supplier:'PT Sumber Pangan Sejahtera', branch:'Cabang Pusat', date:'23 Jul 2026', eta:'25 Jul', value:4_860_000, status:'Terkirim', tone:'accent', items:12 },
  { id:'PO-2607-017', supplier:'CV Berkah Grosir Bekasi', branch:'Cabang Kalimalang', date:'22 Jul 2026', eta:'Hari ini', value:2_745_000, status:'Sebagian diterima', tone:'warning', items:8 },
  { id:'PO-2607-016', supplier:'PT Tirta Niaga', branch:'Cabang Pusat', date:'21 Jul 2026', eta:'—', value:1_920_000, status:'Draf', tone:'neutral', items:6 },
  { id:'PO-2607-015', supplier:'UD Makmur Jaya', branch:'Cabang Pusat', date:'18 Jul 2026', eta:'21 Jul', value:3_180_000, status:'Diterima', tone:'success', items:14 },
];
const POS_SUPPLIERS = [
  { name:'PT Sumber Pangan Sejahtera', code:'SUP-001', terms:'Net 14', lead:'2 hari', skus:38, due:2_460_000, health:'Tepat waktu' },
  { name:'CV Berkah Grosir Bekasi', code:'SUP-002', terms:'COD', lead:'1 hari', skus:24, due:0, health:'Tepat waktu' },
  { name:'PT Tirta Niaga', code:'SUP-003', terms:'Net 7', lead:'3 hari', skus:16, due:1_920_000, health:'1 hari terlambat' },
];

function Pembelian({ pushToast }) {
  const [selected, setSelected] = React.useState(null);
  return <div className="stack-6">
    <div className="grid-4">
      <Kpi label="PO Terbuka" value="3" hint="1 draf perlu dikirim" icon="receipt" />
      <Kpi label="Nilai PO Terbuka" value="Rp 9,5 jt" hint="Lintas 2 cabang" icon="bank" />
      <Kpi label="Datang Hari Ini" value="1" hint="8 SKU · Kalimalang" icon="package" tone="success" />
      <Kpi label="Tagihan Jatuh Tempo" value="Rp 4,4 jt" hint="2 pemasok minggu ini" icon="alert" tone="warn" />
    </div>

    <Card><div className="card-pad">
      <SectionHead title="Purchase order" hint="Buat PO, kirim ke pemasok, lalu cocokkan barang saat diterima" action={<Btn tone="primary" size="sm" icon="plus" onClick={() => setSelected('new')}>Buat PO</Btn>} />
      <div className="table-wrap"><table className="table">
        <thead><tr><th>No. PO</th><th>Pemasok</th><th>Cabang</th><th>Dibuat</th><th>Estimasi tiba</th><th>Status</th><th className="num">Nilai</th><th /></tr></thead>
        <tbody>{PURCHASE_ORDERS.map(po => <tr key={po.id}>
          <td className="code">{po.id}</td><td><b>{po.supplier}</b><div className="table-sub">{po.items} SKU</div></td><td>{po.branch}</td><td>{po.date}</td><td>{po.eta}</td><td><Pill tone={po.tone}>{po.status}</Pill></td><td className="num"><b>{rupiah(po.value, {sym:true})}</b></td><td className="actions"><Btn size="sm" icon="chevronRight" onClick={() => setSelected(po)}>Detail</Btn></td>
        </tr>)}</tbody>
      </table></div>
    </div></Card>

    <div className="grid-2">
      <Card><div className="card-pad">
        <SectionHead title="Pemasok" hint="Syarat bayar, lead time, dan kinerja pengiriman" action={<Btn size="sm" icon="plus" onClick={() => pushToast({msg:'Form pemasok baru dibuka'})}>Tambah Pemasok</Btn>} />
        <div className="workflow-list">{POS_SUPPLIERS.map(supplier => <div className="workflow-row" key={supplier.code}>
          <div className="workflow-icon"><Icon name="storefront" size={16} /></div><div className="workflow-main"><b>{supplier.name}</b><span>{supplier.code} · {supplier.skus} SKU · {supplier.terms}</span></div><div className="workflow-meta"><b>{supplier.lead}</b><span>{supplier.health}</span></div>
        </div>)}</div>
      </div></Card>
      <Card><div className="card-pad">
        <SectionHead title="Tagihan pemasok" hint="Pengingat kas keluar berdasarkan termin PO" />
        <div className="info-cell"><div className="row between"><div><div className="info-label">Jatuh tempo 25 Jul</div><div className="info-value">Rp 2.460.000</div></div><Pill tone="warning">2 hari lagi</Pill></div><div className="table-sub" style={{marginTop:8}}>PT Sumber Pangan Sejahtera · INV-77214</div></div>
        <div className="info-cell" style={{marginTop:10}}><div className="row between"><div><div className="info-label">Jatuh tempo 29 Jul</div><div className="info-value">Rp 1.920.000</div></div><Pill tone="neutral">6 hari lagi</Pill></div><div className="table-sub" style={{marginTop:8}}>PT Tirta Niaga · INV-88532</div></div>
      </div></Card>
    </div>
    {selected && <PurchaseDrawer po={selected} onClose={() => setSelected(null)} onSave={() => { setSelected(null); pushToast({msg:selected === 'new' ? 'Draf PO berhasil dibuat' : 'Penerimaan barang disimpan'}); }} />}
  </div>;
}

function PurchaseDrawer({ po, onClose, onSave }) {
  const isNew = po === 'new';
  return <div className="drawer-backdrop" onMouseDown={onClose}><div className="drawer" onMouseDown={event => event.stopPropagation()}>
    <div className="drawer-header"><div><Pill tone={isNew ? 'accent' : po.tone}>{isNew ? 'PO baru' : po.status}</Pill><h3>{isNew ? 'Buat purchase order' : po.id}</h3><div className="table-sub">{isNew ? 'Pilih pemasok, cabang tujuan, dan kebutuhan barang.' : `${po.supplier} · ${po.branch}`}</div></div><button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button></div>
    <div className="drawer-body stack-6">
      {isNew ? <>
        <div className="form-grid"><label className="field"><span>Pemasok</span><select defaultValue="SUP-001"><option value="SUP-001">PT Sumber Pangan Sejahtera</option><option value="SUP-002">CV Berkah Grosir Bekasi</option></select></label><label className="field"><span>Cabang tujuan</span><select><option>Cabang Pusat — Bekasi</option><option>Cabang Kalimalang</option></select></label></div>
        <label className="field"><span>Catatan untuk pemasok</span><textarea rows="3" defaultValue="Mohon kirim sebelum pukul 12.00 dan sertakan faktur." /></label>
        <Card><div className="card-pad"><SectionHead title="Barang yang dipesan" hint="Contoh kebutuhan dari rekomendasi stok" /><PurchaseLine name="Beras Pandan Wangi 5kg" qty="20 dus" value="Rp 1.370.000" /><PurchaseLine name="Minyak Goreng Tropical 2L" qty="24 karton" value="Rp 748.800" /><Btn size="sm" icon="plus" style={{marginTop:10}}>Tambah Barang</Btn></div></Card>
      </> : <>
        <div className="grid-2"><div className="info-cell"><div className="info-label">Estimasi tiba</div><div className="info-value">{po.eta}</div></div><div className="info-cell"><div className="info-label">Total PO</div><div className="info-value">{rupiah(po.value, {sym:true})}</div></div></div>
        <Card><div className="card-pad"><SectionHead title="Ringkasan barang" hint={`${po.items} SKU dalam pesanan`} /><PurchaseLine name="Beras Pandan Wangi 5kg" qty="20 / 20 dus" value="Lengkap" /><PurchaseLine name="Minyak Goreng Tropical 2L" qty="18 / 24 karton" value="Kurang 6" /><PurchaseLine name="Gula Pasir Gulaku 1kg" qty="12 / 12 karton" value="Lengkap" /></div></Card>
        <div className="notice-box"><Icon name="alert" size={16} /><div><b>Cocokkan jumlah fisik</b><span>Selisih penerimaan akan membuat catatan stok dan tidak mengubah PO asli.</span></div></div>
      </>}
    </div>
    <div className="drawer-footer"><Btn onClick={onClose}>Batal</Btn><Btn tone="primary" icon="check" onClick={onSave}>{isNew ? 'Simpan Draf PO' : 'Simpan Penerimaan'}</Btn></div>
  </div></div>;
}
function PurchaseLine({ name, qty, value }) { return <div className="purchase-line"><div><b>{name}</b><span>{qty}</span></div><b>{value}</b></div>; }
Object.assign(window, { Pembelian });