// HLA Typing Lab — hub dashboards.
//
// One component per built lab hub, rendered by HubHome in place of the Cascade
// dashboards (see the LAB_HUB_DASH lookup at the bottom). Plain JSX and the
// .lab-* classes in newhub.css — no framework injection, because these pages
// are representative rather than a port of a design document.
//
// Data comes from lab_data.jsx. Nothing here computes: the numbers are written
// down, the same way Cascade's dashboards read from generated content.

function LabStatRow({ stats }) {
  return (
    <div className="lab-stats">
      {stats.map((s) => (
        <div className="lab-stat" key={s.label}>
          <span className="lab-stat__label">{s.label}</span>
          <span className="lab-stat__value">{s.value}</span>
          <span className="lab-stat__sub">{s.sub}</span>
        </div>
      ))}
    </div>
  );
}

function LabPanel({ title, sub, children, action }) {
  return (
    <section className="lab-panel">
      <div className="lab-panel__head">
        <div>
          <h3 className="lab-panel__title">{title}</h3>
          {sub && <p className="lab-panel__sub">{sub}</p>}
        </div>
        {action}
      </div>
      {children}
    </section>
  );
}

function LabTable({ cols, rows, render }) {
  return (
    <div className="lab-tablewrap">
      <table className="lab-table">
        <thead>
          <tr>{cols.map((c) => <th key={c}>{c}</th>)}</tr>
        </thead>
        <tbody>{rows.map(render)}</tbody>
      </table>
    </div>
  );
}

// ── Typing hub ────────────────────────────────────────────────────────────
function LabTypingDashboard() {
  const rr = window.LAB_RERESOLVE;
  const [reresolved, setReresolved] = React.useState(false);

  return (
    <div className="lab-dash">
      <LabStatRow stats={window.LAB_STATS} />

      {/* The claim the whole lab model rests on, made visible: a new release
          lands and the archive re-derives instead of going stale. */}
      <LabPanel
        title={`Re-resolution · ${rr.from} → ${rr.to}`}
        sub={`${rr.scanned.toLocaleString()} assignments re-derived against the current release. Most of it is nomenclature; the last row is the one that matters.`}
        action={
          <button type="button" className="lab-btn" onClick={() => setReresolved(true)} disabled={reresolved}>
            {reresolved ? 'Re-resolved ✓' : 'Re-resolve archive'}
          </button>
        }>
        <div className="lab-buckets">
          {rr.buckets.map((b) => (
            <div className={`lab-bucket is-${b.tone}`} key={b.kind}>
              <span className="lab-bucket__n">{b.n}</span>
              <span className="lab-bucket__kind">{b.kind}</span>
              <span className="lab-bucket__note">{b.note}</span>
            </div>
          ))}
        </div>
      </LabPanel>

      <LabPanel
        title="Assignment Ledger"
        sub="The root data product. Every call carries the method version and the reference release that produced it — so it can be re-derived, not just re-read.">
        <LabTable
          cols={['Specimen', 'Study', 'HLA-A', 'HLA-B', 'HLA-C', 'DRB1', 'DQB1', 'Resolution', 'Method', 'Release', '']}
          rows={window.LAB_ASSIGNMENTS}
          render={(r) => (
            <tr key={r.id}>
              <td className="lab-mono">{r.id}</td>
              <td><span className="lab-tag">{r.study}</span></td>
              <td className="lab-mono">{r.a}</td>
              <td className="lab-mono">{r.b}</td>
              <td className="lab-mono">{r.c}</td>
              <td className="lab-mono">{r.drb1}</td>
              <td className="lab-mono">{r.dqb1}</td>
              <td>{r.res}</td>
              <td className="lab-mono">{r.method}</td>
              <td className="lab-mono">{r.release}</td>
              <td>
                <span className={`lab-pill ${r.status === 'Final' ? 'is-ok' : 'is-warn'}`}>{r.status}</span>
              </td>
            </tr>
          )}
        />
      </LabPanel>

      <div className="lab-two">
        <LabPanel
          title="Ambiguity Queue"
          sub="Separated by what resolves it — bench work, a reporting convention, or your judgment.">
          <LabTable
            cols={['Specimen', 'Locus', 'Ambiguity', 'Cause', 'Resolves by']}
            rows={window.LAB_AMBIGUITY}
            render={(r) => (
              <tr key={r.id + r.locus}>
                <td className="lab-mono">{r.id}</td>
                <td>{r.locus}</td>
                <td className="lab-mono">{r.str}</td>
                <td className="lab-dim">{r.cause}</td>
                <td>
                  <span className={`lab-pill is-${r.owner.toLowerCase()}`}>{r.owner}</span>
                  <span className="lab-route">{r.route}</span>
                </td>
              </tr>
            )}
          />
        </LabPanel>

        <LabPanel
          title="Method Performance"
          sub="Seventeen years of the assay as a table rather than institutional memory. Split on version — never compare across it.">
          <LabTable
            cols={['Method', 'Years', 'Runs', 'First-pass', 'Ambiguity', 'Concordance']}
            rows={window.LAB_METHOD_PERF}
            render={(r) => (
              <tr key={r.method}>
                <td>{r.method}</td>
                <td className="lab-dim">{r.years}</td>
                <td className="lab-mono">{r.runs}</td>
                <td className="lab-mono">{r.first}</td>
                <td className="lab-mono">{r.amb}</td>
                <td className="lab-mono">{r.conc}</td>
              </tr>
            )}
          />
        </LabPanel>
      </div>
    </div>
  );
}

// ── Studies & Cohorts hub ─────────────────────────────────────────────────
function LabStudiesDashboard() {
  const studies = window.LAB_STUDIES;
  const active = studies.filter((s) => s.status === 'Active').length;
  const reusable = studies.filter((s) => s.reuse === 'Yes').reduce((n, s) => n + s.n, 0);
  return (
    <div className="lab-dash">
      <LabStatRow stats={[
        { label: 'Studies', value: String(studies.length), sub: `${active} active · 2 published` },
        { label: 'Subjects', value: studies.reduce((n, s) => n + s.n, 0).toLocaleString(), sub: 'typed for someone else’s question' },
        { label: 'Reusable', value: reusable.toLocaleString(), sub: 'consent covers secondary use' },
        { label: 'Locked', value: '186', sub: 'closed cohort — deliver, don’t reuse' },
      ]} />

      <LabPanel
        title="Studies & Cohorts"
        sub="The lab is a service core: the unit of work is somebody else's study. Modelling that makes the archive queryable instead of write-only.">
        <LabTable
          cols={['Study', 'What it is', 'Requested by', 'n', 'Resolution needed', 'Deliverable', 'Reuse', 'Status']}
          rows={studies}
          render={(s) => (
            <tr key={s.id}>
              <td><span className="lab-tag">{s.id}</span></td>
              <td>{s.name}</td>
              <td className="lab-dim">{s.pi}</td>
              <td className="lab-mono">{s.n}</td>
              <td className="lab-dim">{s.need}</td>
              <td>{s.out}</td>
              <td><span className={`lab-pill ${s.reuse === 'Yes' ? 'is-ok' : 'is-bad'}`}>{s.reuse}</span></td>
              <td><span className="lab-pill is-flat">{s.status}</span></td>
            </tr>
          )}
        />
      </LabPanel>

      <LabPanel
        title="The query this makes possible"
        sub="Ask across seventeen years instead of across a folder of delivered spreadsheets.">
        <div className="lab-query">
          <code>subjects where A*02:01 and DRB1*04:01 and consent.reuse = true</code>
          <span className="lab-query__res">→ 61 subjects across HSCT-2026, VAX-COV, HIV-PROG</span>
          <span className="lab-query__note">
            ARBO-OUT is excluded: 186 subjects, typed, matching — and not reusable. That
            exclusion is the model doing its job.
          </span>
        </div>
      </LabPanel>
    </div>
  );
}

const LAB_HUB_DASH = {
  Typing: LabTypingDashboard,
  'Studies & Cohorts': LabStudiesDashboard,
};

window.LabTypingDashboard = LabTypingDashboard;
window.LabStudiesDashboard = LabStudiesDashboard;
window.LAB_HUB_DASH = LAB_HUB_DASH;