// Master SKU — katalog produk dengan stok per gudang & barcode
const { useState: useStateMS, useMemo: useMemoMS } = React;

function MasterSKU({ gudang, role, pushToast }) {
  const [cat, setCat] = useStateMS('all');
  const [statusF, setStatusF] = useStateMS('all');
  const [q, setQ] = useStateMS('');
  const [drawer, setDrawer] = useStateMS(null);
  const [view, setView] = useStateMS('table'); // table | card

  const filtered = useMemoMS(() => {
    let list = PRODUCTS;
    if (cat !== 'all') list = list.filter(p => p.cat === cat);
    if (statusF !== 'all') list = list.filter(p => stockStatus(p) === statusF);
    if (q) {
      const s = q.toLowerCase();
      list = list.filter(p =>
        p.sku.toLowerCase().includes(s) ||
        p.name.toLowerCase().includes(s) ||
        p.barcode.includes(s)
      );
    }
    return list;
  }, [cat, statusF, q]);

  const totalNilai = filtered.reduce((s, p) => s + totalStockSKU(p) * p.cost, 0);
  const kritisCount = PRODUCTS.filter(p => stockStatus(p) === 'kritis' || stockStatus(p) === 'kosong').length;

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Total SKU"        value={KPI.totalSKU} hint={`Aktif di ${KPI.totalGudang} gudang`} icon="layers" />
        <Kpi label="SKU Kritis/Kosong" value={kritisCount} hint="Stok di bawah min atau habis" icon="package" tone={kritisCount > 0 ? 'danger' : 'success'} />
        <Kpi label="Nilai Stok (filter)" value={'Rp ' + rupiah(totalNilai, { compact: true })} hint="HPP × total qty di semua gudang" icon="layers" tone="success" />
        <Kpi label="Kategori"          value={KATEGORI.length - 1} hint="Klasifikasi produk" icon="clipboard" />
      </div>

      {/* Category chips */}
      <div className="row" style={{flexWrap:'wrap', gap:6}}>
        {KATEGORI.map(k => (
          <button
            key={k.id}
            onClick={() => setCat(k.id)}
            className="btn sm"
            style={{
              background: cat === k.id ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : 'hsl(var(--muted))',
              color: cat === k.id ? 'white' : 'hsl(var(--foreground))',
              border: '1px solid ' + (cat === k.id ? 'hsl(var(--accent-h) var(--accent-s) 35%)' : 'hsl(var(--border))'),
              fontSize: 11.5,
              fontWeight: cat === k.id ? 600 : 500,
            }}
          >
            {k.label}
            <span style={{
              marginLeft: 6,
              fontSize: 10.5,
              padding: '0 5px',
              background: cat === k.id ? 'rgba(255,255,255,0.25)' : 'hsl(var(--background))',
              borderRadius: 8,
            }}>
              {k.id === 'all' ? PRODUCTS.length : PRODUCTS.filter(p => p.cat === k.id).length}
            </span>
          </button>
        ))}
      </div>

      <div className="filter-bar">
        <Icon name="search" size={13} className="icon" />
        <input
          className="filter-search"
          placeholder="Cari SKU, nama, atau barcode…"
          value={q}
          onChange={e => setQ(e.target.value)}
        />
        <select value={statusF} onChange={e => setStatusF(e.target.value)}>
          <option value="all">Semua status</option>
          <option value="normal">Normal</option>
          <option value="rendah">Rendah</option>
          <option value="kritis">Kritis</option>
          <option value="kosong">Kosong</option>
          <option value="over">Over-stock</option>
        </select>
        <div style={{flex:1}} />
        <div className="row" style={{gap:0, border:'1px solid hsl(var(--border))', borderRadius:6, overflow:'hidden'}}>
          <button onClick={() => setView('table')} className="btn sm" style={{borderRadius:0, background: view === 'table' ? 'hsl(var(--muted))' : 'transparent', border:'none'}}>
            <Icon name="layers" size={12} /> Tabel
          </button>
          <button onClick={() => setView('card')} className="btn sm" style={{borderRadius:0, background: view === 'card' ? 'hsl(var(--muted))' : 'transparent', border:'none', borderLeft:'1px solid hsl(var(--border))'}}>
            <Icon name="package" size={12} /> Kartu
          </button>
        </div>
        {ROLES[role].can.edit_master && (
          <Btn icon="plus" tone="primary" onClick={() => pushToast({ msg: 'Form SKU baru (belum diimplementasi di demo)', type: 'info' })}>
            SKU Baru
          </Btn>
        )}
      </div>

      {view === 'table' ? (
        <Card style={{padding:0}}>
          <table className="table compact">
            <thead>
              <tr>
                <th style={{width:'14%'}}>SKU</th>
                <th>Nama Produk</th>
                <th style={{width:'8%'}}>Kategori</th>
                <th style={{width:'10%'}}>Barcode</th>
                <th className="num" style={{width:'7%'}}>Pusat</th>
                <th className="num" style={{width:'7%'}}>Bandung</th>
                <th className="num" style={{width:'7%'}}>Surabaya</th>
                <th className="num" style={{width:'6%'}}>Total</th>
                <th className="num" style={{width:'10%'}}>HPP</th>
                <th style={{width:'8%'}}>Status</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => {
                const total = totalStockSKU(p);
                const status = stockStatus(p);
                return (
                  <tr key={p.sku} onClick={() => setDrawer(p)} style={{cursor:'pointer'}}>
                    <td><SkuTag sku={p.sku} /></td>
                    <td>
                      <div style={{fontWeight:500}}>{p.name}</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>UoM: {p.uom} · Min/Max: {p.min}/{p.max}</div>
                    </td>
                    <td style={{fontSize:11}}>{KATEGORI.find(k => k.id === p.cat)?.label}</td>
                    <td style={{fontSize:10.5, fontFamily:"'IBM Plex Mono', monospace"}}>{p.barcode}</td>
                    <td className="num num-mono" style={{color: p.stock.pusat === 0 ? 'hsl(0 70% 48%)' : undefined}}>{p.stock.pusat}</td>
                    <td className="num num-mono" style={{color: p.stock.bandung === 0 ? 'hsl(0 70% 48%)' : undefined}}>{p.stock.bandung}</td>
                    <td className="num num-mono" style={{color: p.stock.surabaya === 0 ? 'hsl(0 70% 48%)' : undefined}}>{p.stock.surabaya}</td>
                    <td className="num num-mono" style={{fontWeight:600}}>{total}</td>
                    <td className="num num-mono">{rupiah(p.cost, { compact: true })}</td>
                    <td><StatusPill status={status} /></td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan={10} className="empty" style={{padding:32, textAlign:'center'}}>Tidak ada SKU yang cocok dengan filter.</td></tr>
              )}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={4}><strong>Total {filtered.length} SKU</strong></td>
                <td className="num num-mono">{filtered.reduce((s, p) => s + p.stock.pusat, 0)}</td>
                <td className="num num-mono">{filtered.reduce((s, p) => s + p.stock.bandung, 0)}</td>
                <td className="num num-mono">{filtered.reduce((s, p) => s + p.stock.surabaya, 0)}</td>
                <td className="num num-mono"><strong>{filtered.reduce((s, p) => s + totalStockSKU(p), 0)}</strong></td>
                <td className="num num-mono"><strong>{rupiah(totalNilai, { compact: true })}</strong></td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </Card>
      ) : (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:12}}>
          {filtered.map(p => (
            <SKUCard key={p.sku} p={p} onClick={() => setDrawer(p)} />
          ))}
          {filtered.length === 0 && (
            <div className="empty" style={{gridColumn:'1/-1', padding:32, textAlign:'center'}}>Tidak ada SKU yang cocok dengan filter.</div>
          )}
        </div>
      )}

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

function SKUCard({ p, onClick }) {
  const total = totalStockSKU(p);
  const status = stockStatus(p);
  return (
    <div className="sku-card" onClick={onClick} style={{cursor:'pointer'}}>
      <div className="row between" style={{alignItems:'flex-start'}}>
        <SkuTag sku={p.sku} />
        <StatusPill status={status} />
      </div>
      <div style={{fontSize:13, fontWeight:500, marginTop:6, lineHeight:1.3}}>{p.name}</div>
      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:4}}>{KATEGORI.find(k => k.id === p.cat)?.label} · {p.uom}</div>
      <BarcodeStrip seed={p.barcode} />
      <div style={{fontSize:10.5, fontFamily:"'IBM Plex Mono', monospace", color:'hsl(var(--muted-foreground))', textAlign:'center', marginTop:-4}}>{p.barcode}</div>
      <div className="row between" style={{marginTop:10, paddingTop:8, borderTop:'1px dashed hsl(var(--border))'}}>
        <div>
          <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em'}}>Total Stok</div>
          <div style={{fontSize:18, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace"}}>{total}</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em'}}>HPP</div>
          <div style={{fontSize:13, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace"}}>Rp {rupiah(p.cost, { compact: true })}</div>
        </div>
      </div>
    </div>
  );
}

function SKUDrawer({ p, onClose, role, pushToast }) {
  const total = totalStockSKU(p);
  const supplier = SUPPLIERS.find(s => s.id === p.supplier);
  const margin = ((p.price - p.cost) / p.price * 100).toFixed(1);

  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}}>Master SKU</div>
            <div style={{fontSize:18, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace", marginTop:2, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{p.sku}</div>
            <div style={{fontSize:13, marginTop:4}}>{p.name}</div>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="drawer-body stack-6">
          <div className="info-cell" style={{textAlign:'center', paddingTop:14, paddingBottom:14}}>
            <BarcodeStrip seed={p.barcode} />
            <div style={{fontSize:11, fontFamily:"'IBM Plex Mono', monospace", color:'hsl(var(--muted-foreground))', marginTop:-2}}>{p.barcode}</div>
          </div>

          <div className="grid-2" style={{gap:10}}>
            <div className="info-cell">
              <div className="info-label">Kategori</div>
              <div className="info-value" style={{fontSize:13, marginTop:4}}>{KATEGORI.find(k => k.id === p.cat)?.label}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">UoM</div>
              <div className="info-value" style={{fontSize:13, marginTop:4}}>{p.uom}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Harga Pokok (HPP)</div>
              <div className="info-value" style={{fontSize:13, fontFamily:"'IBM Plex Mono', monospace", marginTop:4}}>Rp {rupiah(p.cost)}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Harga Jual</div>
              <div className="info-value" style={{fontSize:13, fontFamily:"'IBM Plex Mono', monospace", marginTop:4}}>Rp {rupiah(p.price)}</div>
              <div style={{fontSize:11, color:'hsl(142 55% 32%)', marginTop:2}}>Margin: {margin}%</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Min / Max Stok</div>
              <div className="info-value" style={{fontSize:13, fontFamily:"'IBM Plex Mono', monospace", marginTop:4}}>{p.min} / {p.max}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Supplier Utama</div>
              <div className="info-value" style={{fontSize:12, marginTop:4}}>{supplier?.name}</div>
              <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:1}}>{supplier?.term}</div>
            </div>
          </div>

          <div>
            <SectionHead title="Stok per Gudang" hint={`Total ${total} ${p.uom}`} />
            <Card style={{padding:0}}>
              <table className="table compact">
                <thead>
                  <tr>
                    <th>Gudang</th>
                    <th>Bin</th>
                    <th className="num">Stok</th>
                    <th>Bar</th>
                    <th className="num">Nilai (HPP)</th>
                  </tr>
                </thead>
                <tbody>
                  {GUDANG_LIST.map(g => (
                    <tr key={g.id}>
                      <td style={{fontSize:12, fontWeight:500}}>{g.name}</td>
                      <td><BinLoc loc={p.bin[g.id]} /></td>
                      <td className="num num-mono">{p.stock[g.id]}</td>
                      <td style={{width:120}}><StockBar value={p.stock[g.id]} max={p.max} min={p.min} /></td>
                      <td className="num num-mono">{rupiah(p.stock[g.id] * p.cost, { compact: true })}</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan={2}><strong>Total Semua Gudang</strong></td>
                    <td className="num num-mono"><strong>{total}</strong></td>
                    <td></td>
                    <td className="num num-mono"><strong>Rp {rupiah(total * p.cost, { compact: true })}</strong></td>
                  </tr>
                </tfoot>
              </table>
            </Card>
          </div>

          {ROLES[role].can.edit_master && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="rotate" tone="ghost" onClick={() => pushToast({ msg: `Cetak label barcode untuk ${p.sku}`, type: 'info' })}>Cetak Label</Btn>
              <Btn icon="package" tone="primary" onClick={() => pushToast({ msg: `Edit SKU ${p.sku}`, type: 'info' })}>Edit SKU</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.MasterSKU = MasterSKU;