// Stok Masuk — Penerimaan Barang (Goods Receipt) dari supplier
const { useState: useStateM, useMemo: useMemoM } = React;

function StokMasuk({ gudang, role, pushToast }) {
  const [tab, setTab] = useStateM('penerimaan'); // penerimaan | po
  const [filter, setFilter] = useStateM('all');  // status filter
  const [q, setQ] = useStateM('');
  const [drawer, setDrawer] = useStateM(null);

  const filtered = useMemoM(() => {
    let list = PENERIMAAN;
    if (gudang !== 'all') list = list.filter(p => p.gudang === gudang);
    if (filter !== 'all') list = list.filter(p => p.status === filter);
    if (q) {
      const s = q.toLowerCase();
      list = list.filter(p =>
        p.id.toLowerCase().includes(s) ||
        (SUPPLIERS.find(sp => sp.id === p.supplier)?.name || '').toLowerCase().includes(s) ||
        (p.poRef || '').toLowerCase().includes(s)
      );
    }
    return list;
  }, [gudang, filter, q]);

  const filteredPO = useMemoM(() => {
    if (gudang === 'all') return PO_OPEN;
    return PO_OPEN.filter(p => p.gudang === gudang);
  }, [gudang]);

  const totalNilai = filtered.reduce((s, gr) => s + gr.items.reduce((ss, i) => ss + i.qty * i.cost, 0), 0);
  const pending = filtered.filter(g => g.status === 'pending' || g.status === 'partial').length;

  return (
    <div className="stack-6">
      {/* Summary KPIs */}
      <div className="grid-4">
        <Kpi label="GR Hari Ini"     value={PENERIMAAN.filter(g => g.tgl === TODAY).length} hint="Goods receipt diterima hari ini" icon="inbox" />
        <Kpi label="Menunggu Verifikasi" value={pending} hint="Belum di-approve oleh kepala gudang" icon="clock" tone="warn" />
        <Kpi label="PO Berjalan"     value={PO_OPEN.length} hint={`${PO_OPEN.filter(p => p.status === 'terlambat').length} terlambat`} icon="clipboard" />
        <Kpi label="Nilai GR (filter)" value={'Rp ' + rupiah(totalNilai, { compact: true })} hint="HPP × qty diterima" icon="layers" tone="success" />
      </div>

      {/* Tab switcher */}
      <div className="row" style={{gap:0, borderBottom:'1px solid hsl(var(--border))'}}>
        <button
          className={'tab-btn' + (tab === 'penerimaan' ? ' active' : '')}
          onClick={() => setTab('penerimaan')}
          style={tabStyle(tab === 'penerimaan')}
        >
          Penerimaan (GR)
          <span style={{marginLeft:6, fontSize:11, padding:'1px 5px', background:'hsl(var(--muted))', borderRadius:8}}>{PENERIMAAN.length}</span>
        </button>
        <button
          className={'tab-btn' + (tab === 'po' ? ' active' : '')}
          onClick={() => setTab('po')}
          style={tabStyle(tab === 'po')}
        >
          PO Berjalan
          <span style={{marginLeft:6, fontSize:11, padding:'1px 5px', background:'hsl(var(--muted))', borderRadius:8}}>{PO_OPEN.length}</span>
        </button>
      </div>

      {tab === 'penerimaan' && (
        <>
          {/* Filter bar */}
          <div className="filter-bar">
            <Icon name="search" size={13} className="icon" />
            <input
              className="filter-search"
              placeholder="Cari GR, supplier, atau PO ref…"
              value={q}
              onChange={e => setQ(e.target.value)}
            />
            <select value={filter} onChange={e => setFilter(e.target.value)}>
              <option value="all">Semua status</option>
              <option value="pending">Menunggu</option>
              <option value="partial">Sebagian</option>
              <option value="verified">Diverifikasi</option>
              <option value="rejected">Ditolak</option>
            </select>
            <div style={{flex:1}} />
            <Btn icon="download" tone="ghost">Export CSV</Btn>
            {ROLES[role].can.receive && (
              <Btn icon="plus" tone="primary" onClick={() => pushToast({ msg: 'Form GR baru (belum diimplementasi di demo)', type: 'info' })}>
                GR Baru
              </Btn>
            )}
          </div>

          <Card style={{padding:0}}>
            <table className="table compact">
              <thead>
                <tr>
                  <th style={{width:'12%'}}>No. GR</th>
                  <th style={{width:'9%'}}>Tanggal</th>
                  <th>Supplier / PO Ref</th>
                  <th style={{width:'9%'}}>Gudang</th>
                  <th className="num" style={{width:'6%'}}>Item</th>
                  <th className="num" style={{width:'12%'}}>Nilai</th>
                  <th style={{width:'10%'}}>Status</th>
                  <th style={{width:'10%'}}>Diterima oleh</th>
                  <th style={{width:'5%'}}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(gr => {
                  const sup = SUPPLIERS.find(s => s.id === gr.supplier);
                  const nilai = gr.items.reduce((s, i) => s + i.qty * i.cost, 0);
                  return (
                    <tr key={gr.id} onClick={() => setDrawer(gr)} style={{cursor:'pointer'}}>
                      <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{gr.id}</td>
                      <td>{formatDateID(gr.tgl)}</td>
                      <td>
                        <div style={{fontWeight:500}}>{sup?.name}</div>
                        <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontFamily:"'IBM Plex Mono', monospace"}}>{gr.poRef}</div>
                      </td>
                      <td>{gudangShort(gr.gudang)}</td>
                      <td className="num num-mono">{gr.items.length}</td>
                      <td className="num num-mono">{rupiah(nilai, { compact: true })}</td>
                      <td><StatusPill status={gr.status} /></td>
                      <td style={{fontSize:11.5}}>{gr.receiver}</td>
                      <td><Icon name="chevronRight" size={13} className="icon" /></td>
                    </tr>
                  );
                })}
                {filtered.length === 0 && (
                  <tr><td colSpan={9} className="empty" style={{padding:32, textAlign:'center'}}>Tidak ada GR yang cocok dengan filter.</td></tr>
                )}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={4}><strong>Total {filtered.length} GR</strong></td>
                  <td className="num num-mono">{filtered.reduce((s, g) => s + g.items.length, 0)}</td>
                  <td className="num num-mono"><strong>{rupiah(totalNilai, { compact: true })}</strong></td>
                  <td colSpan={3}></td>
                </tr>
              </tfoot>
            </table>
          </Card>
        </>
      )}

      {tab === 'po' && (
        <Card style={{padding:0}}>
          <table className="table compact">
            <thead>
              <tr>
                <th style={{width:'13%'}}>No. PO</th>
                <th style={{width:'10%'}}>Tanggal</th>
                <th>Supplier</th>
                <th style={{width:'10%'}}>Gudang Tujuan</th>
                <th className="num" style={{width:'6%'}}>Item</th>
                <th className="num" style={{width:'14%'}}>Nilai</th>
                <th style={{width:'10%'}}>ETA</th>
                <th style={{width:'10%'}}>Status</th>
              </tr>
            </thead>
            <tbody>
              {filteredPO.map(po => {
                const sup = SUPPLIERS.find(s => s.id === po.supplier);
                const dueDays = Math.floor((new Date(po.eta) - new Date(TODAY)) / 86400000);
                return (
                  <tr key={po.id}>
                    <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{po.id}</td>
                    <td>{formatDateID(po.tgl)}</td>
                    <td>
                      <div style={{fontWeight:500}}>{sup?.name}</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{sup?.contact} · {sup?.term}</div>
                    </td>
                    <td>{gudangShort(po.gudang)}</td>
                    <td className="num num-mono">{po.items}</td>
                    <td className="num num-mono">{rupiah(po.value, { compact: true })}</td>
                    <td>
                      {formatDateID(po.eta)}
                      <div style={{fontSize:10.5, color: dueDays < 0 ? 'hsl(0 70% 48%)' : 'hsl(var(--muted-foreground))'}}>
                        {dueDays < 0 ? `Telat ${Math.abs(dueDays)}h` : dueDays === 0 ? 'Hari ini' : `${dueDays} hari lagi`}
                      </div>
                    </td>
                    <td><StatusPill status={po.status} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}

      {drawer && <GRDrawer gr={drawer} onClose={() => setDrawer(null)} role={role} pushToast={pushToast} />}
    </div>
  );
}

function tabStyle(active) {
  return {
    padding: '8px 14px',
    background: 'transparent',
    border: 'none',
    borderBottom: active ? '2px solid hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : '2px solid transparent',
    color: active ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
    fontWeight: active ? 600 : 500,
    fontSize: 13,
    marginBottom: -1,
    cursor: 'pointer',
  };
}

function GRDrawer({ gr, onClose, role, pushToast }) {
  const sup = SUPPLIERS.find(s => s.id === gr.supplier);
  const nilai = gr.items.reduce((s, i) => s + i.qty * i.cost, 0);
  const canApprove = ROLES[role].can.approve && gr.status === 'pending';

  return (
    <div className="drawer-backdrop" onMouseDown={onClose}>
      <div className="drawer" onMouseDown={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Goods Receipt</div>
            <div style={{fontSize:18, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace", marginTop:2, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{gr.id}</div>
            <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
              {formatDateID(gr.tgl)} · {gudangLabel(gr.gudang)}
            </div>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="drawer-body stack-6">
          <DocHeader id={gr.id} status={gr.status} meta={`Diterima oleh ${gr.receiver}`} />

          <div className="grid-2" style={{gap:10}}>
            <div className="info-cell">
              <div className="info-label">Supplier</div>
              <div className="info-value" style={{fontSize:13}}>{sup?.name}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{sup?.contact} · {sup?.phone}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">PO Reference</div>
              <div className="info-value" style={{fontSize:13, fontFamily:"'IBM Plex Mono', monospace"}}>{gr.poRef || '—'}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>Term: {sup?.term}</div>
            </div>
          </div>

          {gr.notes && (
            <div className="info-cell" style={{background:'hsl(0 60% 96%)', borderColor:'hsl(0 60% 88%)'}}>
              <div className="info-label" style={{color:'hsl(0 60% 38%)'}}>Catatan</div>
              <div style={{fontSize:12, marginTop:4}}>{gr.notes}</div>
            </div>
          )}

          <div>
            <SectionHead title="Item Diterima" hint={`${gr.items.length} baris item`} />
            <Card style={{padding:0}}>
              <table className="table compact">
                <thead>
                  <tr>
                    <th>SKU / Nama</th>
                    <th className="num">Qty</th>
                    <th>UoM</th>
                    <th className="num">HPP</th>
                    <th className="num">Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  {gr.items.map((it, i) => {
                    const p = PROD[it.sku];
                    return (
                      <tr key={i}>
                        <td>
                          <div className="row" style={{gap:6}}>
                            <SkuTag sku={it.sku} />
                          </div>
                          <div style={{fontSize:11.5, marginTop:3}}>{p?.name || it.sku}</div>
                          {it.ordered && it.ordered !== it.qty && (
                            <div style={{fontSize:10.5, color:'hsl(35 80% 38%)', marginTop:2}}>Order: {it.ordered} · Selisih: {it.ordered - it.qty}</div>
                          )}
                          {it.rejected && (
                            <div style={{fontSize:10.5, color:'hsl(0 70% 48%)', marginTop:2}}>Ditolak: {it.rejected} unit</div>
                          )}
                        </td>
                        <td className="num num-mono">{it.qty}</td>
                        <td>{it.uom}</td>
                        <td className="num num-mono">{rupiah(it.cost)}</td>
                        <td className="num num-mono">{rupiah(it.qty * it.cost)}</td>
                      </tr>
                    );
                  })}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan={4}><strong>Total Nilai GR</strong></td>
                    <td className="num num-mono"><strong>Rp {rupiah(nilai)}</strong></td>
                  </tr>
                </tfoot>
              </table>
            </Card>
          </div>

          {canApprove && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="x" tone="destructive" onClick={() => { pushToast({ msg: `${gr.id} ditolak`, type: 'warn' }); onClose(); }}>Tolak</Btn>
              <Btn icon="check" tone="primary" onClick={() => { pushToast({ msg: `${gr.id} diverifikasi & stok diupdate`, type: 'success' }); onClose(); }}>Verifikasi & Posting</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.StokMasuk = StokMasuk;