// ---------- Inventory (categories, gram/kg/ml usage → auto stock deduction) ----------

const INV_CAT_LABEL = {
  all: 'All',
  sugar: 'Sugar',
  milk: 'Milk · dairy liquids',
  ingredient: 'Ingredients',
  bacteria: 'Produit premier · cultures',
  packaging: 'Packaging',
};

function Inventory({ role }) {
  const [rev, setRev] = React.useState(0);
  React.useEffect(() => {
    const h = () => setRev((x) => x + 1);
    window.addEventListener('gh-admin-data', h);
    return () => window.removeEventListener('gh-admin-data', h);
  }, []);

  const list = window.INVENTORY || [];
  const [category, setCategory] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [showAdd, setShowAdd] = React.useState(false);
  const [usageItem, setUsageItem] = React.useState(null);
  const [restockItem, setRestockItem] = React.useState(null);
  const canEdit = role === 'boss' || role === 'production_manager';

  const filtered = list.filter((i) => {
    if (category !== 'all' && i.category !== category) return false;
    if (search && !i.name.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const categories = ['all', 'sugar', 'milk', 'ingredient', 'bacteria', 'packaging'];
  const logs = (__getUsageLog && __getUsageLog()) || [];

  const catKeys = ['sugar', 'milk', 'ingredient', 'bacteria', 'packaging'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 12, color: 'var(--text-dim)', maxWidth: 720, lineHeight: 1.5 }}>
        Stock is kept in each item&apos;s unit (kg, g, L, ml, or pcs). When you record <strong>usage</strong>,
        enter the amount in g/kg or ml/L — the sheet converts and subtracts from balance automatically (partial bags/kgs supported).
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(140px,1fr))', gap: 10 }}>
        {catKeys.map((c) => {
          const items = list.filter((i) => i.category === c);
          const alerts = items.filter((i) => stockStatus(i) !== 'ok').length;
          return (
            <button
              key={c}
              onClick={() => setCategory(c)}
              className="card"
              style={{
                padding: 14,
                textAlign: 'start',
                cursor: 'pointer',
                border: category === c ? '1px solid var(--accent)' : '1px solid var(--border)',
              }}
            >
              <div
                style={{
                  fontSize: 10,
                  letterSpacing: '0.15em',
                  textTransform: 'uppercase',
                  color: 'var(--text-dim)',
                  fontFamily: 'JetBrains Mono',
                  marginBottom: 6,
                }}
              >
                {INV_CAT_LABEL[c] || c}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
                <div style={{ fontFamily: 'Cormorant Garamond', fontSize: 24 }}>{items.length}</div>
                {alerts > 0 && <div className="badge badge-red">{alerts} alert</div>}
              </div>
            </button>
          );
        })}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 10, flex: 1, maxWidth: 500 }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 999 }}>
            <Icon.Search size={15} style={{ color: 'var(--text-dim)' }} />
            <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search…" style={{ width: '100%' }} />
          </div>
          <select value={category} onChange={(e) => setCategory(e.target.value)} style={{ padding: '8px 14px', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 999, fontSize: 13 }}>
            {categories.map((c) => (
              <option key={c} value={c}>
                {INV_CAT_LABEL[c] || c}
              </option>
            ))}
          </select>
        </div>
        {canEdit && (
          <button className="btn btn-primary btn-sm" onClick={() => setShowAdd(true)}>
            <Icon.Plus size={13} /> Add item
          </button>
        )}
      </div>

      <TablePanel>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <Th>Item</Th>
              <Th>Category</Th>
              <Th align="end">On hand</Th>
              <Th align="end">Min</Th>
              <Th>Status</Th>
              <Th align="end">Cost/unit</Th>
              <Th>Supplier</Th>
              <Th>Restock</Th>
              {canEdit && <Th align="end">Actions</Th>}
            </tr>
          </thead>
          <tbody>
            {filtered.map((i) => {
              const s = stockStatus(i);
              const borderColor = s === 'critical' ? 'var(--red)' : s === 'low' ? 'var(--gold)' : 'transparent';
              const u = invDisplayUnit(i);
              return (
                <tr key={i.id + String(rev)} style={{ borderLeft: `3px solid ${borderColor}` }}>
                  <Td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--card2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)' }}>
                        <Icon.Package size={15} />
                      </div>
                      <div style={{ fontWeight: 500 }}>{i.name}</div>
                    </div>
                  </Td>
                  <Td>
                    <span className="badge badge-muted" style={{ textTransform: 'capitalize' }}>{INV_CAT_LABEL[i.category] || i.category}</span>
                  </Td>
                  <Td align="end">
                    <span className="mono">
                      {formatInvQty(i.quantity, u)} {u}
                    </span>
                  </Td>
                  <Td align="end">
                    <span className="mono" style={{ color: 'var(--text-dim)' }}>
                      {formatInvQty(i.min_threshold, u)} {u}
                    </span>
                  </Td>
                  <Td>
                    <StatusBadge status={s} />
                  </Td>
                  <Td align="end">
                    <span className="mono">{fmtNumber(i.cost_per_unit)}</span>
                  </Td>
                  <Td>
                    <span style={{ color: 'var(--text-dim)' }}>{i.supplier}</span>
                  </Td>
                  <Td>
                    <span className="mono" style={{ color: 'var(--text-dim)', fontSize: 11 }}>
                      {fmtDate(i.last_restocked)}
                    </span>
                  </Td>
                  {canEdit && (
                    <Td align="end">
                      <button type="button" className="btn btn-ghost btn-sm" style={{ marginRight: 6 }} onClick={() => setUsageItem(i)}>
                        Use −
                      </button>
                      <button type="button" className="btn btn-ghost btn-sm" onClick={() => setRestockItem(i)}>
                        + Stock
                      </button>
                    </Td>
                  )}
                </tr>
              );
            })}
          </tbody>
        </table>
      </TablePanel>

      {canEdit && (
        <div className="card" style={{ padding: 18 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 10 }}>
            Recent usage & restock (this browser)
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 220, overflow: 'auto' }}>
            {logs.length === 0 && <div style={{ color: 'var(--text-dim)', fontSize: 13 }}>No movements yet.</div>}
            {logs.slice(0, 40).map((e) => (
              <div key={e.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 12, borderBottom: '1px solid var(--border)', paddingBottom: 6 }}>
                <span style={{ color: 'var(--text-dim)', fontFamily: 'JetBrains Mono', fontSize: 10 }}>{fmtDateTime(e.at)}</span>
                <span style={{ flex: 1 }}>{e.label}</span>
                <span className="mono" style={{ color: e.delta < 0 ? 'var(--gold)' : 'var(--green)' }}>
                  {e.delta < 0 ? '−' : '+'}
                  {formatInvQty(Math.abs(e.delta), e.unit)} {e.unit}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {showAdd && <InventoryAddModal onClose={() => setShowAdd(false)} />}
      {usageItem && (
        <InventoryUsageModal
          item={usageItem}
          onClose={() => setUsageItem(null)}
        />
      )}
      {restockItem && (
        <InventoryRestockModal item={restockItem} onClose={() => setRestockItem(null)} />
      )}
    </div>
  );
}

function InventoryUsageModal({ item, onClose }) {
  const [amount, setAmount] = React.useState('');
  const [inputUnit, setInputUnit] = React.useState((item.inputUnitsAllowed && item.inputUnitsAllowed[0]) || invDisplayUnit(item));
  const allowed = item.inputUnitsAllowed || [invDisplayUnit(item)];

  const apply = () => {
    const a = parseFloat(String(amount).replace(',', '.'));
    if (!Number.isFinite(a) || a <= 0) return;
    const du = quantityInDisplayUnits(item, a, inputUnit);
    if (du == null || !Number.isFinite(du)) {
      alert('Unit mismatch for this item.');
      return;
    }
    const nextQty = Math.max(0, item.quantity - du);
    const inv = (window.INVENTORY || []).map((x) => (x.id === item.id ? { ...x, quantity: nextQty } : x));
    __saveInventorySnapshot(inv);
    __appendUsageLogEntry({
      id: 'u' + Date.now(),
      at: new Date().toISOString(),
      label: `Usage · ${item.name} (−${formatInvQty(du, invDisplayUnit(item))} ${invDisplayUnit(item)})`,
      delta: -du,
      unit: invDisplayUnit(item),
    });
    onClose();
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3 style={{ fontSize: 22, marginBottom: 6 }}>Record usage</h3>
        <div style={{ fontSize: 13, color: 'var(--text-dim)', marginBottom: 16 }}>
          Current: <span className="mono">{formatInvQty(item.quantity, invDisplayUnit(item))} {invDisplayUnit(item)}</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="field">
            <label>Amount used</label>
            <input type="number" step="any" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="e.g. 350" />
          </div>
          <div className="field">
            <label>Unit</label>
            <select value={inputUnit} onChange={(e) => setInputUnit(e.target.value)}>
              {allowed.map((u) => (
                <option key={u} value={u}>
                  {u}
                </option>
              ))}
            </select>
          </div>
          <div className="field" style={{ gridColumn: '1 / -1', fontSize: 12, color: 'var(--text-dim)' }}>
            Bacteria / produit premier: enter grams only. Sugar & milk: grams or kg (or ml/L).
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 22 }}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>
            Cancel
          </button>
          <button className="btn btn-primary btn-sm" onClick={apply}>
            Subtract from stock
          </button>
        </div>
      </div>
    </div>
  );
}

function InventoryRestockModal({ item, onClose }) {
  const [amount, setAmount] = React.useState('');
  const [inputUnit, setInputUnit] = React.useState((item.inputUnitsAllowed && item.inputUnitsAllowed[0]) || invDisplayUnit(item));
  const allowed = item.inputUnitsAllowed || [invDisplayUnit(item)];

  const apply = () => {
    const a = parseFloat(String(amount).replace(',', '.'));
    if (!Number.isFinite(a) || a <= 0) return;
    const add = quantityInDisplayUnits(item, a, inputUnit);
    if (add == null) return;
    const inv = (window.INVENTORY || []).map((x) =>
      x.id === item.id ? { ...x, quantity: x.quantity + add, last_restocked: new Date().toISOString().slice(0, 10) } : x
    );
    __saveInventorySnapshot(inv);
    __appendUsageLogEntry({
      id: 'r' + Date.now(),
      at: new Date().toISOString(),
      label: `Restock · ${item.name}`,
      delta: add,
      unit: invDisplayUnit(item),
    });
    onClose();
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3 style={{ fontSize: 22, marginBottom: 18 }}>Add stock</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="field">
            <label>Amount received</label>
            <input type="number" step="any" value={amount} onChange={(e) => setAmount(e.target.value)} />
          </div>
          <div className="field">
            <label>Unit</label>
            <select value={inputUnit} onChange={(e) => setInputUnit(e.target.value)}>
              {allowed.map((u) => (
                <option key={u} value={u}>
                  {u}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 22 }}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>
            Cancel
          </button>
          <button className="btn btn-primary btn-sm" onClick={apply}>
            Add to stock
          </button>
        </div>
      </div>
    </div>
  );
}

function InventoryAddModal({ onClose }) {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3 style={{ fontSize: 24, marginBottom: 6 }}>Add inventory item</h3>
        <div style={{ fontSize: 13, color: 'var(--text-dim)', marginBottom: 20 }}>Use categories: sugar, milk, ingredient, bacteria (produit premier), packaging.</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="field">
            <label>Name</label>
            <input placeholder="e.g. skim milk powder" />
          </div>
          <div className="field">
            <label>Category</label>
            <select>
              <option value="sugar">Sugar</option>
              <option value="milk">Milk · dairy</option>
              <option value="ingredient">Ingredients</option>
              <option value="bacteria">Produit premier / cultures</option>
              <option value="packaging">Packaging</option>
            </select>
          </div>
          <div className="field">
            <label>Opening quantity</label>
            <input type="number" defaultValue="0" />
          </div>
          <div className="field">
            <label>Stock unit</label>
            <select defaultValue="kg">
              <option value="kg">kg</option>
              <option value="g">g</option>
              <option value="L">L</option>
              <option value="ml">ml</option>
              <option value="pcs">pcs</option>
            </select>
          </div>
          <div className="field">
            <label>Min threshold</label>
            <input type="number" defaultValue="10" />
          </div>
          <div className="field">
            <label>Cost / unit (FCFA)</label>
            <input type="number" defaultValue="0" />
          </div>
          <div className="field" style={{ gridColumn: '1 / -1' }}>
            <label>Supplier</label>
            <input placeholder="Supplier name" />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 24 }}>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>
            Cancel
          </button>
          <button className="btn btn-primary btn-sm" onClick={onClose}>
            Save (wire to backend later)
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Inventory });