/* DigiHealthCloud — device catalog page.
 *
 * Reads data/devices.json (built weekly from openFDA by scrapers/devices.mjs)
 * and renders it as a sortable, filterable table. No backend: the whole
 * catalog is one JSON file, filtered and sorted in the browser.
 */

const { useState, useEffect, useMemo } = React;

const Header = () => (
  <header className="site-header">
    <div className="wrap">
      <a className="brand" href="index.html">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2ea3a5"
             strokeWidth="2" strokeLinecap="round">
          <path d="M3 12h3l2.5-7 3.5 14 3-9 2 5h4" />
        </svg>
        DigiHealthCloud
      </a>
      <nav className="nav">
        <a href="index.html#what">What we build</a>
        <a href="index.html#how">How it works</a>
        <a href="index.html#pulse">Market pulse</a>
        <a className="nav-current" href="catalog.html">Device catalog</a>
        <a className="btn-sm" href="index.html#contact">Book a call</a>
      </nav>
    </div>
  </header>
);

const Empty = ({ building }) => (
  <div className="catalog-empty">
    <h3>{building ? 'The catalog is still being built' : 'Nothing matches those filters'}</h3>
    <p>
      {building
        ? 'The first scrape runs on the weekly schedule, or can be started by hand from the repository. Once it has run, every cleared device appears here.'
        : 'Try clearing the search box or widening the modality and year filters.'}
    </p>
  </div>
);

/* Sortable column header. Clicking toggles direction; the arrow shows state. */
const Th = ({ label, column, sort, setSort, className }) => {
  const active = sort.key === column;
  const toggle = () =>
    setSort({ key: column, dir: active && sort.dir === 'asc' ? 'desc' : 'asc' });
  return (
    <th className={className} aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'}>
      <button type="button" className={`th-sort${active ? ' is-active' : ''}`} onClick={toggle}>
        {label}
        <span className="th-arrow" aria-hidden="true">
          {active ? (sort.dir === 'asc' ? '▲' : '▼') : '⇅'}
        </span>
      </button>
    </th>
  );
};

const App = () => {
  const [data, setData] = useState(null);
  const [failed, setFailed] = useState(false);
  const [q, setQ] = useState('');
  const [modality, setModality] = useState('');
  const [company, setCompany] = useState('');
  const [year, setYear] = useState('');
  const [sort, setSort] = useState({ key: 'decisionDate', dir: 'desc' });

  useEffect(() => {
    fetch('data/devices.json', { cache: 'no-cache' })
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('missing'))))
      .then(setData)
      .catch(() => setFailed(true));
  }, []);

  const devices = data?.devices || [];

  const rows = useMemo(() => {
    const needle = q.trim().toLowerCase();
    const out = devices.filter((d) => {
      if (modality && !d.modalities.includes(modality)) return false;
      if (company && d.company !== company) return false;
      if (year && d.year !== year) return false;
      if (needle) {
        const hay = `${d.name} ${d.company} ${d.kNumber} ${d.classification || ''}`.toLowerCase();
        if (!hay.includes(needle)) return false;
      }
      return true;
    });

    const dir = sort.dir === 'asc' ? 1 : -1;
    return out.sort((a, b) => {
      const av = (a[sort.key] ?? '').toString().toLowerCase();
      const bv = (b[sort.key] ?? '').toString().toLowerCase();
      if (av === bv) return a.name.localeCompare(b.name);
      return av.localeCompare(bv) * dir;
    });
  }, [devices, q, modality, company, year, sort]);

  const activeFilters = Boolean(q || modality || company || year);
  const clear = () => { setQ(''); setModality(''); setCompany(''); setYear(''); };
  const shown = rows.slice(0, 400);

  return (
    <>
      <Header />

      <section className="catalog-head">
        <div className="wrap">
          <span className="eyebrow">Reference</span>
          <h1>Digital health device catalog</h1>
          <p className="lede">
            US device clearances for digital measurement — wearables, sensors, algorithms and
            software — tagged by modality so you can see what has already reached the market in
            the area you're measuring.
          </p>
        </div>
      </section>

      <section className="catalog-body">
        <div className="wrap">
          {failed || (data && !devices.length) ? (
            <Empty building />
          ) : !data ? (
            <p className="muted">Loading the catalog…</p>
          ) : (
            <>
              <div className="filters">
                <div className="filter filter-grow">
                  <label htmlFor="q">Search</label>
                  <input id="q" type="search" placeholder="Device, company or K number"
                         value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="filter">
                  <label htmlFor="modality">Modality</label>
                  <select id="modality" value={modality} onChange={(e) => setModality(e.target.value)}>
                    <option value="">All modalities</option>
                    {data.facets.modalities.map((m) => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
                <div className="filter">
                  <label htmlFor="company">Company</label>
                  <select id="company" value={company} onChange={(e) => setCompany(e.target.value)}>
                    <option value="">All companies</option>
                    {data.facets.companies.map((c) => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
                <div className="filter">
                  <label htmlFor="year">Year cleared</label>
                  <select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
                    <option value="">All years</option>
                    {data.facets.years.map((y) => <option key={y} value={y}>{y}</option>)}
                  </select>
                </div>
              </div>

              <div className="result-bar">
                <span>
                  <strong>{rows.length.toLocaleString()}</strong>
                  {rows.length === devices.length
                    ? ' devices'
                    : ` of ${devices.length.toLocaleString()} devices`}
                </span>
                {activeFilters && (
                  <button className="link-btn" type="button" onClick={clear}>Clear filters</button>
                )}
              </div>

              {rows.length === 0 ? <Empty /> : (
                <div className="table-scroll">
                  <table className="device-table">
                    <thead>
                      <tr>
                        <Th label="Device" column="name" sort={sort} setSort={setSort} />
                        <Th label="Company" column="company" sort={sort} setSort={setSort} />
                        <th>Modality</th>
                        <Th label="Cleared" column="decisionDate" sort={sort} setSort={setSort} className="col-narrow" />
                        <Th label="Class" column="deviceClass" sort={sort} setSort={setSort} className="col-narrow" />
                        <th className="col-narrow">FDA record</th>
                      </tr>
                    </thead>
                    <tbody>
                      {shown.map((d) => (
                        <tr key={d.kNumber}>
                          <td>
                            <span className="td-device">{d.name}</span>
                            {d.classification && <span className="td-classification">{d.classification}</span>}
                          </td>
                          <td className="td-company">{d.company}</td>
                          <td>
                            <span className="td-chips">
                              {d.modalities.map((m) => <span className="chip" key={m}>{m}</span>)}
                            </span>
                          </td>
                          <td className="col-narrow td-date">{d.decisionDate || '—'}</td>
                          <td className="col-narrow">{d.deviceClass || '—'}</td>
                          <td className="col-narrow">
                            <a href={d.url} target="_blank" rel="noopener noreferrer">{d.kNumber}</a>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {rows.length > shown.length && (
                <p className="muted" style={{ marginTop: 14 }}>
                  Showing {shown.length} of {rows.length.toLocaleString()} matches — narrow the
                  filters to see the rest.
                </p>
              )}

              <p className="stamp">
                {data.count.toLocaleString()} clearances · {data.coverage} Source:{' '}
                <a href="https://open.fda.gov/apis/device/510k/" target="_blank" rel="noopener noreferrer">
                  openFDA 510(k)
                </a>
                , US government data in the public domain. Modality tags are keyword-derived from the
                FDA device and classification names — follow any device through to its FDA record for
                the authoritative detail. Last updated{' '}
                {data.updatedAt
                  ? new Date(data.updatedAt).toLocaleDateString('en-US',
                      { year: 'numeric', month: 'long', day: 'numeric' })
                  : '—'}.
              </p>
            </>
          )}
        </div>
      </section>

      <footer className="site-footer">
        <div className="wrap">
          <div>© {new Date().getFullYear()} DigiHealthCloud LLC</div>
          <div><a href="privacy.html">Privacy policy</a></div>
        </div>
      </footer>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);