/* Example oligonucleotide screen shown on the home page and the Molecular page.
   Made-up data: these are the engine's results for the example study in
   molecular/examples/ (scripts/make-molecular-example.mjs), rounded. Thresholds are the
   example's criteria; real ones are set for each program. Calls follow the check order:
   run QC, missing results, viability, activity, agreement, confirmation, advance. */

const EXAMPLE_THRESHOLDS = { knockdown: 70, viability: 80 };

const EXAMPLE_WORDING = "Under adapter molecular.oligo-in-vitro-lead-gate.v1, candidate O-11 at 10 nM met the registered in-vitro knockdown, viability, replication, and confirmation criteria for progression to animal-stage evaluation.";

const EXAMPLE_CANDIDATES = [
  { id: "O-11", qc: "pass", knockdown: "82%", viability: "93%", replicates: "3 of 3 meet 70%", confirmation: "71% lower", call: "advance", short: "All checks passed", reason: "Every check passed: knockdown 82%, viability 93%, and confirmation 71% reduction." },
  { id: "O-14", qc: "pass", knockdown: "76%", viability: "61%", replicates: "3 of 3 meet 70%", confirmation: "not measured", call: "stop", short: "Viability below 80%", reason: "Viability 61% is below the 80% minimum." },
  { id: "O-17", qc: "pass", knockdown: "38%", viability: "96%", replicates: "0 of 3 meet 70%", confirmation: "not measured", call: "stop", short: "Knockdown below 70%", reason: "Knockdown 38% is below the 70% minimum." },
  { id: "O-19", qc: "pass", knockdown: "84%", viability: "89%", replicates: "2 of 3 meet 70%", confirmation: "not measured", call: "repeat", short: "Replicates disagree", reason: "Replicate 3 knockdown 64% is below the 70% minimum; knockdown SD 17.3 points is above the 15-point maximum." },
  { id: "O-22", qc: "pass", knockdown: "79%", viability: "94%", replicates: "3 of 3 meet 70%", confirmation: "pending", call: "confirm", short: "Confirmation pending", reason: "The required confirmation assay (Western blot) is pending." },
  { id: "O-25", qc: "fail", knockdown: "not used", viability: "not used", replicates: "not used", confirmation: "not used", call: "invalid", short: "Positive control failed on plate 2", reason: "Run qpcr-plate-2 failed QC because the positive control knockdown was 32%, below the 50% minimum." },
  { id: "O-28", qc: "pass", knockdown: "81%", viability: "missing", replicates: "3 of 3 meet 70%", confirmation: "not measured", call: "insufficient", short: "Viability result missing", reason: "Viability has 0 of 3 required replicates." },
];

const CALLS = {
  advance:      { label: "Advance",             chip: "chip-ok" },
  repeat:       { label: "Repeat",              chip: "chip-warn" },
  stop:         { label: "Stop",                chip: "chip-block" },
  confirm:      { label: "Confirm first",       chip: "chip-info" },
  insufficient: { label: "Not enough evidence", chip: "" },
  invalid:      { label: "Invalid run",         chip: "chip-block" },
};

function CallChip({ call, small }) {
  const c = CALLS[call];
  return (
    <span className={`chip ${c.chip}`} style={small ? { padding: "1px 7px", fontSize: 10 } : undefined}>
      {c.label}
    </span>
  );
}

/* The compact decision-pack card: one row per candidate with its call and the check
   that decided it. Used in the home hero (absolutely placed) and the Molecular hero. */
function DecisionPackCard({ className, style }) {
  return (
    <div className={className} role="figure" aria-label="Example decision pack with made-up data" style={{
      background: "white",
      border: "1px solid var(--ink-200)",
      borderRadius: 14,
      boxShadow: "0 30px 60px -20px rgba(15,23,42,.18), 0 12px 24px -12px rgba(13,148,136,.18)",
      overflow: "hidden",
      ...style,
    }}>
      <div style={{
        padding: "10px 14px", background: "var(--ink-50)",
        borderBottom: "1px solid var(--ink-200)",
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <span aria-hidden="true" style={{ display: "flex", gap: 5 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "#e57373" }} />
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "#f6c454" }} />
          <span style={{ width: 8, height: 8, borderRadius: 99, background: "#85c887" }} />
        </span>
        <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-600)" }}>screen · OLG-2026-07</span>
        <span className="chip chip-warn" style={{ marginLeft: "auto", padding: "1px 7px", fontSize: 9.5 }}>made-up data</span>
      </div>

      <div style={{ padding: "14px 16px 10px" }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--brand-700)", letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600 }}>
          Example decision pack
        </div>
        <div style={{ marginTop: 6, fontSize: 14, fontWeight: 600, color: "var(--ink-900)", lineHeight: 1.3 }}>
          In-vitro knockdown screen
        </div>
        <div style={{ marginTop: 3, fontSize: 11.5, color: "var(--ink-500)" }}>
          {EXAMPLE_CANDIDATES.length} candidates · criteria locked before review
        </div>
      </div>

      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11.5 }}>
        <thead>
          <tr style={{ background: "var(--ink-50)", borderTop: "1px solid var(--ink-100)" }}>
            {["Candidate", "Call", "Deciding check"].map(h => (
              <th key={h} scope="col" style={{ textAlign: "left", padding: "6px 10px", fontWeight: 600, color: "var(--ink-500)", fontSize: 9.5, letterSpacing: ".06em", textTransform: "uppercase" }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {EXAMPLE_CANDIDATES.map(c => (
            <tr key={c.id} style={{ borderTop: "1px solid var(--ink-100)" }}>
              <td className="mono" style={{ padding: "6px 10px", color: "var(--ink-900)", fontWeight: 500, whiteSpace: "nowrap" }}>{c.id}</td>
              <td style={{ padding: "6px 4px" }}><CallChip call={c.call} small /></td>
              <td style={{ padding: "6px 10px", color: "var(--ink-600)", lineHeight: 1.35 }}>{c.short || c.reason}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{ padding: "11px 16px", borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)",
                    display: "flex", alignItems: "center", gap: 8, fontSize: 11.5, color: "var(--ink-600)" }}>
        <span className="dot" style={{ color: "var(--ok)", flexShrink: 0 }}></span>
        Replay check: the same files and criteria give the same calls
      </div>
    </div>
  );
}

Object.assign(window, { EXAMPLE_THRESHOLDS, EXAMPLE_WORDING, EXAMPLE_CANDIDATES, CALLS, CallChip, DecisionPackCard });