// admin/pages/inventory.jsx — stock management

function InventoryPage() {
  const admin = useAdmin();
  const [q, setQ] = React.useState('');
  const [filter, setFilter] = React.useState('all'); // all | in | low | out
  const [adjusting, setAdjusting] = React.useState(null);
  const products = HAP.PRODUCTS;

  let list = products.filter(p => {
    const s = admin.stockStatus(p);
    if (filter !== 'all' && s !== filter) return false;
    if (q && !p.name.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  const counts = {
    all: products.length,
    in: products.filter(p => admin.stockStatus(p) === 'in').length,
    low: products.filter(p => admin.stockStatus(p) === 'low').length,
    out: products.filter(p => admin.stockStatus(p) === 'out').length
  };
  const totalUnits = products.reduce((s, p) => s + (p.stock || 0), 0);
  const stockValue = products.reduce((s, p) => s + (p.stock || 0) * (p.price || 0), 0);

  return (
    <div>
      <div className="kpi-grid" style={{ marginBottom: 22 }}>
        <div className="kpi"><div className="kpi__label"><AIcon name="layers" />Total units</div><div className="kpi__value">{totalUnits.toLocaleString('en-IN')}</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="rupee" />Stock value</div><div className="kpi__value">{money(stockValue)}</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="alert" />Low stock</div><div className="kpi__value">{counts.low}</div></div>
        <div className="kpi"><div className="kpi__label"><AIcon name="alert" />Out of stock</div><div className="kpi__value" style={{ color: counts.out ? 'var(--a-red)' : undefined }}>{counts.out}</div></div>
      </div>

      <div className="toolbar">
        <div className="search-box"><AIcon name="search" /><input className="inp" placeholder="Search products…" value={q} onChange={e => setQ(e.target.value)} /></div>
        {[['all', 'All'], ['in', 'In stock'], ['low', 'Low'], ['out', 'Out of stock']].map(([k, l]) => (
          <button key={k} className={'chip' + (filter === k ? ' active' : '')} onClick={() => setFilter(k)}>{l} · {counts[k]}</button>
        ))}
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-soft" onClick={() => AdminPDF.tableReport('Inventory Report', counts.out + ' out of stock · ' + counts.low + ' low',
          [{ key: 'name', label: 'Product' }, { key: 'sku', label: 'SKU' }, { key: 'stock', label: 'Stock', num: true }, { key: 'status', label: 'Status' }, { key: 'value', label: 'Value', num: true }],
          list.map(p => ({ name: p.name, sku: p.sku, stock: p.stock, status: admin.stockStatus(p) === 'in' ? 'In stock' : admin.stockStatus(p) === 'low' ? 'Low' : 'Out', value: money((p.stock||0)*(p.price||0)) })),
          { name: 'TOTAL', stock: list.reduce((s,p)=>s+(p.stock||0),0), value: money(list.reduce((s,p)=>s+(p.stock||0)*(p.price||0),0)) }
        )}><AIcon name="pdf" size={15} />Export PDF</button>
      </div>

      <div className="card">
        <table className="tbl">
          <thead><tr><th></th><th>Product</th><th className="num">In stock</th><th className="num">Low at</th><th>Status</th><th className="num">Value</th><th></th></tr></thead>
          <tbody>
            {list.map(p => {
              const commerce = window.AmbadyCommerce && AmbadyCommerce.get && AmbadyCommerce.get();
              const variants = commerce ? commerce.variantsFor(p) : [];
              const managed = commerce && commerce.isVariantManagedInventory && commerce.isVariantManagedInventory(variants);
              return (
              <React.Fragment key={p.id}>
              <tr>
                <td><img className="tbl-thumb" src={p.image} alt="" /></td>
                <td><b>{p.name}</b><br /><span className="muted" style={{ fontSize: '.74rem' }}>{p.sku}{managed ? ' · variant-managed' : ''}</span></td>
                <td className="num"><b style={{ fontSize: '1.05rem' }}>{p.stock}</b></td>
                <td className="num muted">{p.lowStockAt != null ? p.lowStockAt : 5}</td>
                <td><StockBadge p={p} /></td>
                <td className="num">{money((p.stock || 0) * (p.price || 0))}</td>
                <td>
                  <div className="row" style={{ justifyContent: 'flex-end' }}>
                    <button className="btn btn-sm btn-soft" onClick={async () => {
                      try { await OwnerOps.adjustStock(p.id, 10, 'manual_adjustment', 'quick +10'); } catch (e) { alert(e.message); }
                    }}>+10</button>
                    <button className="btn btn-sm btn-ghost" onClick={() => setAdjusting(p)}>Adjust</button>
                  </div>
                </td>
              </tr>
              {managed && variants.map((v) => (
                <tr key={p.id + ':' + v.id} style={{ background: 'var(--a-panel-2)' }}>
                  <td></td>
                  <td style={{ fontSize: '.82rem', paddingLeft: 28 }}>↳ {v.label} <span className="muted">{v.sku || v.id}</span></td>
                  <td className="num">{v.stock == null ? '—' : v.stock}</td>
                  <td></td>
                  <td className="muted" style={{ fontSize: '.78rem' }}>variant</td>
                  <td></td>
                  <td>
                    <button className="btn btn-sm btn-ghost" onClick={() => setAdjusting({ ...p, _variantId: v.id, _variantLabel: v.label, stock: v.stock })}>Adjust variant</button>
                  </td>
                </tr>
              ))}
              </React.Fragment>
              );
            })}
          </tbody>
        </table>
        {list.length === 0 && <Empty icon="layers" title="Nothing here" note="No products match this filter." />}
      </div>

      {adjusting && <AdjustModal product={adjusting} onClose={() => setAdjusting(null)} />}
    </div>
  );
}

function AdjustModal({ product, onClose }) {
  const admin = useAdmin();
  const variantId = product._variantId;
  const [mode, setMode] = React.useState('adjust');
  const [val, setVal] = React.useState(10);
  const [reason, setReason] = React.useState('manual_adjustment');
  const [note, setNote] = React.useState('');
  const [low, setLow] = React.useState(product.lowStockAt != null ? product.lowStockAt : 5);
  const [err, setErr] = React.useState('');

  async function apply() {
    setErr('');
    try {
      const n = +val;
      if (variantId) {
        const current = product.stock == null ? 0 : Number(product.stock);
        const delta = mode === 'set' ? (n - current) : n;
        await OwnerOps.adjustVariantStock(product.id, variantId, delta, reason, note || 'variant adjust');
      } else if (mode === 'set') {
        const delta = n - (product.stock || 0);
        await OwnerOps.adjustStock(product.id, delta, reason, note || 'set level');
        admin.upsertProduct({ ...HAP.PRODUCTS.find(p => p.id === product.id), lowStockAt: +low });
      } else {
        await OwnerOps.adjustStock(product.id, n, reason, note);
        admin.upsertProduct({ ...HAP.PRODUCTS.find(p => p.id === product.id), lowStockAt: +low });
      }
      onClose();
    } catch (e) {
      setErr(e.message || 'Adjust failed');
    }
  }
  return (
    <Modal title={'Adjust stock · ' + product.name + (product._variantLabel ? ' · ' + product._variantLabel : '')} onClose={onClose}
      foot={<><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={apply}>Apply</button></>}>
      <div className="row" style={{ marginBottom: 16 }}>
        <button className={'chip' + (mode === 'set' ? ' active' : '')} onClick={() => setMode('set')}>Set to</button>
        <button className={'chip' + (mode === 'adjust' ? ' active' : '')} onClick={() => setMode('adjust')}>Adjust by (+/-)</button>
      </div>
      <div className="form-grid">
        <div className="field"><label>{mode === 'set' ? 'New stock level' : 'Change (e.g. 20 or -5)'}</label><input className="inp" type="number" value={val} onChange={e => setVal(e.target.value)} /></div>
        {!variantId && <div className="field"><label>Low-stock alert at</label><input className="inp" type="number" value={low} onChange={e => setLow(e.target.value)} /></div>}
        <div className="field"><label>Reason</label>
          <select className="sel" value={reason} onChange={e => setReason(e.target.value)}>
            {['correction','damage','loss','found','manual_adjustment','other'].map(r => <option key={r} value={r}>{r}</option>)}
          </select>
        </div>
        <div className="field"><label>Note</label><input className="inp" value={note} onChange={e => setNote(e.target.value)} placeholder="optional" /></div>
      </div>
      {err && <p style={{ color: 'var(--a-red)', fontSize: '.8rem', marginTop: 8 }}>{err}</p>}
      <p className="muted" style={{ fontSize: '.8rem', marginTop: 12 }}>Current: <b>{product.stock == null ? '—' : product.stock}</b> units. Silent stock edits are not allowed — reason is required.</p>
    </Modal>
  );
}
window.InventoryPage = InventoryPage;