// Screen: Inventory — stock table with flags
function Inventory({ scope, density }) {
  const { useState, useMemo } = React;
  const [filter, setFilter] = useState('all');
  const [query, setQuery] = useState('');

  const rows = useMemo(() => {
    let r = INVENTORY;
    if (scope !== 'all') r = r.filter(x => x.store.toLowerCase() === scope);
    if (filter === 'flagged') r = r.filter(x => x.status === 'low' || x.status === 'reorder');
    if (filter === 'compounding') r = r.filter(x => x.vendor !== 'McKesson');
    if (query) r = r.filter(x => (x.drug + x.ndc).toLowerCase().includes(query.toLowerCase()));
    return [...r].sort((a, b) => a.daysSupply - b.daysSupply);
  }, [scope, filter, query]);

  const flagged = INVENTORY.filter(x => x.status === 'low' || x.status === 'reorder').length;

  return (
    <div className={'content' + (density === 'compact' ? ' compact' : '')} data-screen-label="Inventory">
      <div className="inv-tools">
        <div className="inv-search">
          <span style={{ color: 'var(--ink-3)' }}>⌕</span>
          <input placeholder="Search drug or NDC…" value={query} onChange={e => setQuery(e.target.value)}></input>
        </div>
        <div className="filt">
          <button className={filter === 'all' ? 'on' : ''} onClick={() => setFilter('all')}>All items</button>
          <button className={filter === 'flagged' ? 'on' : ''} onClick={() => setFilter('flagged')}>Flagged ({flagged})</button>
          <button className={filter === 'compounding' ? 'on' : ''} onClick={() => setFilter('compounding')}>Lab supplies</button>
        </div>
        <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--ink-3)' }}>
          Sorted by days of supply, ascending · synced 6:58a
        </span>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <table className="data">
          <thead>
            <tr>
              <th>Item</th>
              <th>NDC / item no.</th>
              <th>Store</th>
              <th className="num">On hand</th>
              <th className="num">Par</th>
              <th className="num">Days supply</th>
              <th>Vendor</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(x => (
              <tr key={x.ndc + x.store}>
                <td>
                  <div style={{ fontWeight: 600 }}>{x.drug}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{x.pkg}</div>
                </td>
                <td className="mono">{x.ndc}</td>
                <td><span className="storetag">{x.store}</span></td>
                <td className="num">{x.onHand.toLocaleString()}</td>
                <td className="num" style={{ color: 'var(--ink-3)' }}>{x.par.toLocaleString()}</td>
                <td className="num" style={{ fontWeight: x.daysSupply <= 7 ? 700 : 400, color: x.daysSupply <= 7 ? 'var(--bad)' : 'inherit' }}>
                  {x.daysSupply}d
                </td>
                <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{x.vendor}</td>
                <td><StatusBadge status={x.status}></StatusBadge></td>
              </tr>
            ))}
            {rows.length === 0 ? (
              <tr><td colSpan="8" style={{ textAlign: 'center', color: 'var(--ink-3)', padding: 32 }}>No items match.</td></tr>
            ) : null}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { Inventory });