// Produk & Stok — master SKU + stok per cabang + reorder
const { useState: useStateP } = React;

function Produk({ cabang, role }) {
  const [query, setQuery] = useStateP('');
  const [cat, setCat] = useStateP('all');
  const [showLow, setShowLow] = useStateP(false);
  const [selected, setSelected] = useStateP(null);

  const filtered = PRODUCTS.filter(p => {
    if (cat !== 'all' && p.cat !== cat) return false;
    if (showLow && !isLowStock(p, 15)) return false;
    if (query.trim()) {
      const q = query.toLowerCase();
      if (!p.name.toLowerCase().includes(q) && !p.sku.toLowerCase().includes(q) && !p.barcode.includes(q)) return false;
    }
    return true;
  });

  const totalSku   = PRODUCTS.length;
  const lowCount   = PRODUCTS.filter(p => isLowStock(p, 15)).length;
  const outCount   = PRODUCTS.filter(p => totalStock(p) === 0).length;
  const stockValue = PRODUCTS.reduce((s, p) => s + totalStock(p) * p.hpp, 0);

  const canEdit = ROLES[role].can.edit_product;

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Total SKU"        value={totalSku.toString()}                          hint="Aktif di master" icon="package" />
        <Kpi label="Stok Menipis"     value={lowCount.toString()}                          hint="< 15 pcs gabungan" icon="alert" tone="warn" />
        <Kpi label="Habis"            value={outCount.toString()}                          hint="Stok = 0 di semua cabang" icon="shieldOff" tone={outCount ? 'danger' : 'neutral'} />
        <Kpi label="Nilai Persediaan" value={rupiah(stockValue, { sym: true, compact: true })} hint="Berdasarkan HPP" icon="cashbox" />
      </div>

      <Card>
        <div className="card-pad">
          <div className="row between mb-4">
            <div className="row gap-2" style={{flex:1}}>
              <div style={{position:'relative', flex:1, maxWidth:380}}>
                <Icon name="search" size={14} style={{position:'absolute', left:10, top:9, color:'hsl(var(--muted-foreground))'}} />
                <input
                  className="input"
                  style={{paddingLeft:30, width:'100%'}}
                  placeholder="Cari nama, SKU, atau barcode…"
                  value={query}
                  onChange={e => setQuery(e.target.value)}
                />
              </div>
              <select className="input" value={cat} onChange={e => setCat(e.target.value)} style={{maxWidth:180}}>
                <option value="all">Semua kategori</option>
                {CATEGORIES.filter(c => c.id !== 'all').map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
              </select>
              <label className="row gap-1" style={{fontSize:12, cursor:'pointer'}}>
                <input type="checkbox" checked={showLow} onChange={e => setShowLow(e.target.checked)} />
                Hanya stok menipis
              </label>
            </div>
            <div className="row gap-2">
              <Btn icon="download" size="sm">Export CSV</Btn>
              {canEdit && <Btn tone="primary" icon="plus" size="sm">Tambah SKU</Btn>}
            </div>
          </div>

          <table className="table compact">
            <thead>
              <tr>
                <th>SKU</th>
                <th>Produk</th>
                <th>Kategori</th>
                <th style={{textAlign:'right'}}>Harga</th>
                <th style={{textAlign:'right'}}>HPP</th>
                <th style={{textAlign:'right'}}>Pusat</th>
                <th style={{textAlign:'right'}}>Kalimalang</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => {
                const tot = totalStock(p);
                const status = tot === 0 ? 'habis' : tot < 15 ? 'menipis' : 'aman';
                return (
                  <tr key={p.sku} onClick={() => setSelected(p)} style={{cursor:'pointer'}}>
                    <td><span className="mono">{p.sku}</span></td>
                    <td>
                      <div style={{fontWeight:500}}>{p.name}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontFamily:'JetBrains Mono, monospace'}}>{p.barcode}</div>
                    </td>
                    <td>{CATEGORIES.find(c => c.id === p.cat)?.label}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{rupiah(p.price)}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', color:'hsl(var(--muted-foreground))'}}>{rupiah(p.hpp)}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{p.stock.pusat}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{p.stock.kalimalang}</td>
                    <td>
                      <Pill tone={status === 'aman' ? 'success' : status === 'menipis' ? 'warn' : 'danger'}>{status}</Pill>
                    </td>
                    <td style={{textAlign:'right'}}>
                      <button className="btn ghost sm"><Icon name="more" size={14} /></button>
                    </td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan="9"><div className="empty">Tidak ada produk yang cocok.</div></td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {selected && <ProductDrawer p={selected} onClose={() => setSelected(null)} canEdit={canEdit} />}
    </div>
  );
}

function ProductDrawer({ p, onClose, canEdit }) {
  const margin = p.price - p.hpp;
  const marginPct = (margin / p.price) * 100;
  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))', fontFamily:'JetBrains Mono, monospace'}}>{p.sku} · {p.barcode}</div>
            <h3 style={{margin:'4px 0 0', fontSize:18, fontWeight:600}}>{p.name}</h3>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>

        <div className="drawer-body">
          <div className="grid-2 mb-6">
            <div className="info-cell">
              <div className="info-label">Harga jual</div>
              <div className="info-value">{rupiah(p.price, { sym: true })}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">HPP</div>
              <div className="info-value">{rupiah(p.hpp, { sym: true })}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Margin</div>
              <div className="info-value">{rupiah(margin, { sym: true })} <span style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>({marginPct.toFixed(1)}%)</span></div>
            </div>
            <div className="info-cell">
              <div className="info-label">Kategori</div>
              <div className="info-value">{CATEGORIES.find(c => c.id === p.cat)?.label}</div>
            </div>
          </div>

          <SectionHead title="Stok per Cabang" hint="Klik untuk transfer stok antar cabang" />
          <table className="table compact mb-6">
            <thead><tr><th>Cabang</th><th style={{textAlign:'right'}}>Stok</th><th style={{textAlign:'right'}}>Nilai (HPP)</th><th>Status</th></tr></thead>
            <tbody>
              {CABANG_LIST.map(c => {
                const s = p.stock[c.id] ?? 0;
                return (
                  <tr key={c.id}>
                    <td>{c.name}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{s} pcs</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{rupiah(s * p.hpp)}</td>
                    <td><Pill tone={s === 0 ? 'danger' : s < 10 ? 'warn' : 'success'}>{s === 0 ? 'habis' : s < 10 ? 'menipis' : 'aman'}</Pill></td>
                  </tr>
                );
              })}
            </tbody>
          </table>

          {canEdit && (
            <div className="row gap-2">
              <Btn tone="primary" icon="plus">Tambah Stok Masuk</Btn>
              <Btn icon="rotate">Transfer Antar Cabang</Btn>
              <Btn icon="edit">Edit Produk</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Produk });