// Stocks.jsx — Master Data › Stocks. Workshop parts & consumables inventory.
// Admin/Mechanic: edit. Other roles: view-only.

function StocksPage({ role }) {
  const canEdit = role === 'Admin' || role === 'Mechanic';
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState('All');

  const cats = ['All', ...Array.from(new Set(STOCKS.map(s => s.category)))];
  const rows = STOCKS.filter(s =>
    (cat === 'All' || s.category === cat) &&
    (q === '' || (s.item + ' ' + s.sku + ' ' + s.supplier).toLowerCase().includes(q.toLowerCase()))
  );
  const low = STOCKS.filter(s => s.qty <= s.reorder);

  return (
    <div className="page">
      <div className="note-banner">
        <Package size={16} style={{color: 'var(--color-navy)'}}/>
        <div>
          <strong>Stocks</strong> — workshop store: parts, lubricants, filters and rigging consumables. Items at or below their re-order level are flagged. {canEdit ? 'You can adjust quantities and add items.' : 'View-only.'}
        </div>
      </div>

      <div style={{display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 14}}>
        {[
          { label: 'Line items', value: STOCKS.length, danger: false },
          { label: 'Categories', value: cats.length - 1, danger: false },
          { label: 'Below re-order', value: low.length, danger: low.length > 0 },
        ].map(t => (
          <div key={t.label} style={{flex: '1 1 160px', background: 'white', border: '1px solid var(--color-grey-200)', borderRadius: 12, padding: '14px 16px'}}>
            <div style={{fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: t.danger ? 'var(--color-danger)' : 'var(--color-grey-500)'}}>{t.label}</div>
            <div style={{fontSize: 26, fontWeight: 700, marginTop: 4, color: t.danger ? 'var(--color-danger)' : 'var(--color-navy)'}}>{t.value}</div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card__header">
          <div>
            <h3 className="card__title">Inventory</h3>
            <div className="card__sub">{rows.length} of {STOCKS.length} items</div>
          </div>
          {canEdit ? <button className="btn btn--primary"><Plus size={14}/> Add Item</button> : <span className="restricted-tag"><Lock size={11}/> View only</span>}
        </div>

        <div style={{display: 'flex', gap: 10, flexWrap: 'wrap', padding: '12px 16px', borderBottom: '1px solid var(--color-grey-200)'}}>
          <div className="topbar__search" style={{flex: '1 1 240px', margin: 0}}>
            <Search size={16} className="topbar__search-icon"/>
            <input placeholder="Search item, SKU or supplier..." value={q} onChange={e => setQ(e.target.value)}/>
          </div>
          <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
            {cats.map(c => (
              <button key={c} onClick={() => setCat(c)}
                className={"tab-btn " + (cat === c ? 'tab-btn--active' : '')}
                style={{borderRadius: 999}}>{c}</button>
            ))}
          </div>
        </div>

        <div className="card__body" style={{padding: 0, overflowX: 'auto'}}>
          <table className="table">
            <thead><tr><th>ID</th><th>Item</th><th>SKU</th><th>Category</th><th>On hand</th><th>Re-order</th><th>Location</th><th>Supplier</th><th></th></tr></thead>
            <tbody>
              {rows.map(s => {
                const isLow = s.qty <= s.reorder;
                return (
                  <tr key={s.id}>
                    <td style={{fontFamily: 'monospace', fontSize: 12}}>{s.id}</td>
                    <td style={{fontWeight: 600}}>{s.item}</td>
                    <td style={{fontFamily: 'monospace', fontSize: 12, color: 'var(--color-grey-600)'}}>{s.sku}</td>
                    <td>{s.category}</td>
                    <td>
                      <span style={{fontWeight: 700, color: isLow ? 'var(--color-danger)' : 'var(--color-grey-800)'}}>{s.qty}</span>
                      <span style={{fontSize: 12, color: 'var(--color-grey-500)'}}> {s.unit}</span>
                      {isLow ? <span className="status status--red" style={{marginLeft: 8}}>Low</span> : null}
                    </td>
                    <td style={{color: 'var(--color-grey-500)'}}>{s.reorder} {s.unit}</td>
                    <td style={{fontSize: 12, color: 'var(--color-grey-600)'}}>{s.location}</td>
                    <td style={{fontSize: 12, color: 'var(--color-grey-600)'}}>{s.supplier}</td>
                    <td>{canEdit ? <button className="btn btn--ghost" style={{padding: '4px 10px', fontSize: 12}} onClick={() => window.askAdminPassword('Adjust stock level', () => {})}><Edit size={12}/></button> : null}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StocksPage });