// Upload, Processing, Scan Review screens
function UploadScreen({ clientHint, go, startProcessing }) {
  const [htmaFile, setHtmaFile] = useState(null);
  const [bloodFile, setBloodFile] = useState(null);
  const [hifFile, setHifFile] = useState(null);
  const [error, setError] = useState(null);
  const [hover, setHover] = useState(false);
  const fileInput = useRef();

  function fakeUpload(name, kind) {
    if (name.endsWith(".exe") || name.endsWith(".zip")) {
      setError(`${name} isn't a supported file. Please upload PDF, JPG, or PNG up to 25 MB.`);
      return;
    }
    setError(null);
    if (kind === "htma") setHtmaFile({ name, size: "1.4 MB", pages: 2 });
    else if (kind === "blood") setBloodFile({ name, size: "812 KB", pages: 3 });
    else setHifFile({ name, size: "640 KB", pages: 4 });
  }

  function pickSample(kind) {
    const map = { htma: "HTMA_Sundar_Nov_2025.pdf", blood: "CBC_Sundar_Oct_2025.pdf", hif: "HIF_Sundar_intake.pdf" };
    fakeUpload(map[kind], kind);
  }
  function triggerError() {
    setError("Couldn't read HTMA_scan_corrupt.pdf — file appears corrupted. Try re-exporting from the lab portal.");
    setHtmaFile(null);
  }

  return (
    <div className="page page-narrow" data-screen-label="04 Upload">
      <div className="page-head">
        <div>
          <div className="page-title">Upload a new report</div>
          <div className="page-sub">{clientHint ? `For ${clientHint}` : "You can assign a client after extraction"}</div>
        </div>
        <button className="btn ghost" onClick={() => go("dashboard")}><I.x size={14}/> Cancel</button>
      </div>

      {error && (
        <div className="alert danger" style={{marginBottom: 16}}>
          <I.warn size={16} className="alert-icon"/>
          <div style={{flex: 1}}>
            <div style={{fontWeight: 600, marginBottom: 2}}>Upload failed</div>
            <div>{error}</div>
          </div>
          <button className="btn sm" onClick={() => setError(null)}>Dismiss</button>
        </div>
      )}

      {/* HTMA — required */}
      <div className="card" style={{marginBottom: 16}}>
        <div className="card-head">
          <div>
            <div className="card-title row" style={{gap: 8}}>HTMA report <span className="badge red"><span className="dot"></span> Required</span></div>
            <div className="card-sub">Hair tissue mineral analysis from any supported lab</div>
          </div>
          <div className="muted" style={{fontSize: 12}}>PDF · JPG · PNG · up to 25 MB</div>
        </div>

        <div style={{padding: 18}}>
          {!htmaFile ? (
            <div className={"dropzone" + (hover ? " hover" : "")}
                 onDragOver={(e) => { e.preventDefault(); setHover(true); }}
                 onDragLeave={() => setHover(false)}
                 onDrop={(e) => { e.preventDefault(); setHover(false); pickSample("htma"); }}>
              <div className="dropzone-icon"><I.upload size={26}/></div>
              <div>
                <h3>Drop HTMA file here</h3>
                <p style={{textAlign: "center"}}>or browse to select. Trace Elements, ARL, Doctor's Data, and most labs supported.</p>
              </div>
              <div className="row">
                <button className="btn primary" onClick={() => pickSample("htma")}><I.upload size={14}/> Choose file</button>
                <button className="btn ghost" onClick={triggerError}>Try corrupt sample</button>
              </div>
            </div>
          ) : (
            <div style={{display: "flex", gap: 14, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface)", alignItems: "center"}}>
              <div style={{width: 38, height: 46, background: "var(--bg)", borderRadius: 6, border: "1px solid var(--border)", display: "grid", placeItems: "center"}}><I.pdf size={20}/></div>
              <div style={{flex: 1}}>
                <div style={{fontWeight: 500}}>{htmaFile.name}</div>
                <div className="muted" style={{fontSize: 12}}>{htmaFile.size} · {htmaFile.pages} pages · validated</div>
              </div>
              <span className="badge green"><span className="dot"></span> Ready</span>
              <button className="icon-btn" onClick={() => setHtmaFile(null)}><I.trash size={14}/></button>
            </div>
          )}
        </div>
      </div>

      {/* HIF — optional PDF */}
      <div className="card" style={{marginBottom: 16}}>
        <div className="card-head">
          <div>
            <div className="card-title row" style={{gap: 8}}>Human intake form <span className="badge"><span className="dot"></span> Optional PDF</span></div>
            <div className="card-sub">If you have a signed HIF PDF, drop it here — fields will pre-fill in intake review. Otherwise leave it empty and capture intake during scan review.</div>
          </div>
          <div className="muted" style={{fontSize: 12}}>PDF · up to 25 MB</div>
        </div>
        <div style={{padding: 18}}>
          {!hifFile ? (
            <div className="dropzone" onClick={() => pickSample("hif")} style={{padding: "30px 24px"}}>
              <div className="dropzone-icon"><I.doc size={22}/></div>
              <p style={{margin: 0}}>Click or drop the completed HIF PDF · skip if not available</p>
            </div>
          ) : (
            <div style={{display: "flex", gap: 14, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface)", alignItems: "center"}}>
              <div style={{width: 38, height: 46, background: "var(--bg)", borderRadius: 6, border: "1px solid var(--border)", display: "grid", placeItems: "center"}}><I.pdf size={20}/></div>
              <div style={{flex: 1}}>
                <div style={{fontWeight: 500}}>{hifFile.name}</div>
                <div className="muted" style={{fontSize: 12}}>{hifFile.size} · {hifFile.pages} pages · will extract on processing</div>
              </div>
              <span className="badge green"><span className="dot"></span> Ready</span>
              <button className="icon-btn" onClick={() => setHifFile(null)}><I.trash size={14}/></button>
            </div>
          )}
        </div>
      </div>

      {/* Blood — optional */}
      <div className="card" style={{marginBottom: 24}}>
        <div className="card-head">
          <div>
            <div className="card-title row" style={{gap: 8}}>Blood panel <span className="badge"><span className="dot"></span> Optional</span></div>
            <div className="card-sub">CBC, comprehensive metabolic panel, thyroid panels…</div>
          </div>
          <div className="muted" style={{fontSize: 12}}>PDF · JPG · PNG · up to 25 MB</div>
        </div>
        <div style={{padding: 18}}>
          {!bloodFile ? (
            <div className="dropzone" onClick={() => pickSample("blood")} style={{padding: "30px 24px"}}>
              <div className="dropzone-icon"><I.plus size={22}/></div>
              <p style={{margin: 0}}>Click or drop blood panel · skip if not available</p>
            </div>
          ) : (
            <div style={{display: "flex", gap: 14, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface)", alignItems: "center"}}>
              <div style={{width: 38, height: 46, background: "var(--bg)", borderRadius: 6, border: "1px solid var(--border)", display: "grid", placeItems: "center"}}><I.pdf size={20}/></div>
              <div style={{flex: 1}}>
                <div style={{fontWeight: 500}}>{bloodFile.name}</div>
                <div className="muted" style={{fontSize: 12}}>{bloodFile.size} · {bloodFile.pages} pages</div>
              </div>
              <span className="badge green"><span className="dot"></span> Ready</span>
              <button className="icon-btn" onClick={() => setBloodFile(null)}><I.trash size={14}/></button>
            </div>
          )}
        </div>
      </div>

      <div className="row-between">
        <div className="muted" style={{fontSize: 12.5}}>
          {!htmaFile
            ? "Add an HTMA file to continue."
            : hifFile
              ? "Ready to extract — HIF PDF will pre-fill intake review."
              : "Ready to extract — you'll capture intake manually in scan review (canonical client data will pre-fill where possible)."}
        </div>
        <div className="row">
          <button className="btn">Save draft</button>
          <button className="btn primary lg" disabled={!htmaFile} onClick={() => startProcessing({ htmaFile, bloodFile, hifFile })}>
            Start extraction <I.arrowR size={14}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function ProcessingScreen({ go, jumpToReview }) {
  const [state, setState] = useState("running"); // running | failed | done
  const [pct, setPct] = useState(8);

  useEffect(() => {
    if (state !== "running") return;
    const id = setInterval(() => {
      setPct(p => {
        const next = Math.min(100, p + 3 + Math.random() * 4);
        if (next >= 100) { clearInterval(id); setTimeout(() => setState("done"), 400); }
        return next;
      });
    }, 280);
    return () => clearInterval(id);
  }, [state]);

  const steps = [
    { k: "upload", label: "File uploaded", done: true },
    { k: "ocr", label: "OCR & layout detection", done: pct > 25 },
    { k: "match", label: "Mineral & ratio matching", done: pct > 60 },
    { k: "validate", label: "Validation & range checks", done: pct >= 100 },
  ];

  return (
    <div className="page page-narrow" data-screen-label="05 Processing">
      <div className="page-head">
        <div>
          <div className="page-title">Extracting your report</div>
          <div className="page-sub">Vykon is reading HTMA_Sundar_Nov_2025.pdf — typically 30–60 seconds</div>
        </div>
      </div>

      <div className="card card-pad" style={{display: "flex", flexDirection: "column", gap: 22}}>
        <div className="row" style={{gap: 16, alignItems: "center"}}>
          <div style={{width: 56, height: 56, borderRadius: "50%", border: "3px solid var(--border)", borderTopColor: "var(--accent)", animation: "spin 1.1s linear infinite"}}></div>
          <div style={{flex: 1}}>
            <div style={{fontSize: 18, fontWeight: 600}}>
              {state === "running" && "AI analyzing document…"}
              {state === "done" && "Extraction complete"}
              {state === "failed" && "Extraction stalled"}
            </div>
            <div className="muted" style={{marginTop: 2}}>{Math.round(pct)}% complete · {state === "running" ? "step 3 of 4" : state === "done" ? "all checks passed" : "we'll retry from where we left off"}</div>
          </div>
          {state === "running" && <button className="btn ghost danger" onClick={() => setState("failed")}>Simulate failure</button>}
        </div>

        <div className="progress-bar"><div style={{width: pct + "%"}}></div></div>

        <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12}}>
          {steps.map(s => (
            <div key={s.k} style={{padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 10, background: s.done ? "var(--accent-container)" : "var(--bg-2)"}}>
              <div className="row" style={{gap: 8}}>
                {s.done ? <I.checkCircle size={14} style={{color: "var(--accent)"}}/> : <div style={{width: 14, height: 14, borderRadius: "50%", border: "1.5px solid var(--border-strong)"}}/>}
                <div style={{fontSize: 12.5, fontWeight: 500}}>{s.label}</div>
              </div>
            </div>
          ))}
        </div>

        {state === "failed" && (
          <div className="alert danger">
            <I.warn size={16} className="alert-icon"/>
            <div style={{flex: 1}}>
              <div style={{fontWeight: 600, marginBottom: 2}}>Extraction failed at step 3</div>
              <div>Network hiccup while matching minerals. Your upload is saved — pick up where you left off.</div>
            </div>
            <button className="btn sm" onClick={() => go("upload")}>Re-upload</button>
            <button className="btn sm primary" onClick={() => { setState("running"); setPct(p => Math.max(p, 60)); }}>Retry</button>
          </div>
        )}
      </div>

      <div className="alert warn" style={{marginTop: 16}}>
        <I.warn size={16} className="alert-icon"/>
        <div>If we don't recognize every biomarker, save it anyway — we'll expand our library and back-fill within 24 hours.</div>
      </div>

      {state === "done" && (
        <div className="row" style={{justifyContent: "flex-end", marginTop: 20}}>
          <button className="btn primary lg" onClick={jumpToReview}>Continue to scan review <I.arrowR size={14}/></button>
        </div>
      )}

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

function SourceBadge({ src }) {
  const map = {
    hif: { label: "from HIF PDF", cls: "green" },
    canonical: { label: "from canonical", cls: "blue" },
    manual: { label: "manual", cls: "amber" },
    case: { label: "case only", cls: "" },
    inferred: { label: "inferred", cls: "" },
    extracted: { label: "extracted", cls: "green" },
  };
  const m = map[src] || { label: src, cls: "" };
  return <span className={"chip " + m.cls} style={{fontSize: 10.5, padding: "1px 6px", marginLeft: 6}}>{m.label}</span>;
}

function ScanReview({ go, confirmedMeta, setConfirmedMeta, openRetestSuggestion, hasPriorHistory, setHasPriorHistory, bloodIncluded, hifIncluded, htmaFileName }) {
  // When a HIF PDF is present, rich clinical fields come from extraction.
  // When no HIF PDF, canonical-overlap fields come from the client profile, the rest are typed by the practitioner.
  const richSrc = hifIncluded ? "hif" : "manual";
  const canonicalSrc = hifIncluded ? "hif" : "canonical";
  const docs = [
    { kind: "htma", label: htmaFileName || "HTMA report", required: true },
    bloodIncluded && { kind: "blood", label: "Blood panel" },
    hifIncluded && { kind: "hif", label: "HIF PDF" },
    !hifIncluded && { kind: "hif-none", label: "No HIF PDF — capture in step 2" },
  ].filter(Boolean);
  const [step, setStep] = useState(1); // 1 = report+client, 2 = intake, 3 = results
  const [name, setName] = useState("Hair Tissue Mineral Analysis");
  const [type, setType] = useState("HTMA");
  const [date, setDate] = useState("Nov 12, 2025");
  const [lab, setLab] = useState("Trace Elements");
  const [client, setClient] = useState(hasPriorHistory ? "Amelia Hart" : "");
  const [newClient, setNewClient] = useState(false);
  const confirmed = step >= 2;
  const intakeConfirmed = step >= 3;
  // intake state — defaults vary by source.
  // With HIF PDF: every field pre-fills from extraction.
  // Without HIF PDF: canonical-overlap fields pre-fill from client profile (conditions, meds, supplements);
  //   non-overlap clinical fields stay empty for manual entry; required floor (category, complaint) stays gated.
  const [intakeCategory, setIntakeCategory] = useState("adult"); // always inferred from canonical age
  const [intakeComplaint, setIntakeComplaint] = useState(hifIncluded ? "Fatigue, mid-afternoon energy crash" : "");
  const [retestStatus, setRetestStatus] = useState(hifIncluded ? "Retest of 8/14 HTMA" : "");
  const [symptoms, setSymptoms] = useState(hifIncluded ? "Poor sleep onset; brittle nails; cold hands" : "");
  const [conditions, setConditions] = useState("Hashimoto's (sub-clinical)"); // canonical
  const [history, setHistory] = useState(hifIncluded ? "2 prior HTMA tests · 1 prior protocol" : "");
  const [protocolsUsed, setProtocolsUsed] = useState(hifIncluded ? "Adrenal cocktail since Aug 2025" : "");
  const [copperExposure, setCopperExposure] = useState(hifIncluded ? "None reported" : "");
  const [meds, setMeds] = useState("Sertraline 25mg AM"); // canonical
  const [supplements, setSupplements] = useState("Mg glycinate 200mg PM · Vit D3 5000 IU"); // canonical
  const [binder, setBinder] = useState(hifIncluded ? "None" : "");
  const [prevVykonSupp, setPrevVykonSupp] = useState(hifIncluded ? "Vykon Adrenal Cocktail · 60 days" : "");
  const [conception, setConception] = useState(hifIncluded ? "N/A" : "");
  const [mentorQ, setMentorQ] = useState("");
  const [biomarkers, setBiomarkers] = useState([
    ...window.MOCK.HTMA_NUTRITIONAL,
    ...window.MOCK.HTMA_TOXIC.map(t => ({ ...t, group: "toxic" })),
  ].map(b => ({ ...b, id: Math.random().toString(36).slice(2), checked: false })));
  const [selectedIds, setSelectedIds] = useState(new Set());

  function update(id, field, v) {
    setBiomarkers(bs => bs.map(b => b.id === id ? { ...b, [field]: v } : b));
  }
  function toggle(id) {
    setSelectedIds(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  }
  function addRow() {
    setBiomarkers(bs => [...bs, { id: Math.random().toString(36).slice(2), sym: "?", name: "New biomarker", value: "", unit: "mg%" }]);
  }
  function deleteSelected() {
    setBiomarkers(bs => bs.filter(b => !selectedIds.has(b.id)));
    setSelectedIds(new Set());
  }

  function handleConfirm() {
    setStep(2);
    setConfirmedMeta({ name, type, date, lab, client });
    if (hasPriorHistory) openRetestSuggestion();
  }

  // Canonical baseline = what canonical contains BEFORE this case.
  // First-case bootstrap has empty canonical for the overlap fields.
  const isBootstrap = !hasPriorHistory;
  const canonicalBaseline = useRef({
    conditions: isBootstrap ? "" : "Hashimoto's (sub-clinical)",
    meds: isBootstrap ? "" : "Sertraline 25mg AM",
    supplements: isBootstrap ? "" : "Mg glycinate 200mg PM · Vit D3 5000 IU",
  });
  const [promoteModal, setPromoteModal] = useState(null);

  function attemptConfirmIntake() {
    const fields = [
      { key: "conditions", label: "Standing conditions", current: conditions },
      { key: "meds", label: "Medications", current: meds },
      { key: "supplements", label: "Supplements", current: supplements },
    ];
    const changes = {};
    for (const f of fields) {
      const base = canonicalBaseline.current[f.key];
      const cur = (f.current || "").trim();
      const prev = (base || "").trim();
      // Only count as change if non-empty and different from canonical
      if (cur && cur !== prev) {
        changes[f.key] = { label: f.label, prev, next: cur };
      }
    }
    if (Object.keys(changes).length === 0) {
      setStep(3);
    } else {
      setPromoteModal({ changes, isBootstrap });
    }
  }
  function finishPromote() {
    setPromoteModal(null);
    setStep(3);
  }

  return (
    <div className="page" data-screen-label="06 Scan review">
      <div className="page-head">
        <div>
          <div className="page-title">Review extracted scan</div>
          <div className="page-sub">Confirm report and intake before lab values are shown</div>
          <div className="row" style={{gap: 14, marginTop: 14}}>
            {[[1, "Report & client"], [2, "Intake review"], [3, "Lab results"]].map(([n, l]) => (
              <div key={n} className="row" style={{gap: 8, opacity: step >= n ? 1 : 0.55}}>
                <div style={{width: 24, height: 24, borderRadius: "50%", display: "grid", placeItems: "center", background: step > n ? "var(--accent)" : step === n ? "var(--accent-container)" : "var(--bg-2)", color: step > n ? "var(--accent-on)" : "var(--text-2)", fontSize: 12, fontWeight: 600, border: "1px solid var(--border)"}}>
                  {step > n ? "✓" : n}
                </div>
                <div style={{fontSize: 13, fontWeight: step === n ? 600 : 500, color: step === n ? "var(--text)" : "var(--text-2)"}}>{l}</div>
                {n < 3 && <div style={{width: 28, height: 1, background: "var(--border)"}}></div>}
              </div>
            ))}
          </div>
        </div>
        <div className="row">
          <button className="btn ghost" onClick={() => go("dashboard")}>Save & exit</button>
        </div>
      </div>

      {/* Uploaded documents summary */}
      <div className="card card-pad" style={{marginBottom: 16, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap"}}>
        <div className="row" style={{gap: 8}}>
          <I.doc size={14}/>
          <div style={{fontWeight: 500, fontSize: 13.5}}>Uploaded for this case:</div>
        </div>
        <div className="row" style={{gap: 6, flexWrap: "wrap"}}>
          {docs.map((d, i) => (
            <span key={i} className={"chip " + (d.kind === "htma" ? "green" : d.kind === "hif" ? "blue" : "")} style={{fontSize: 11.5, opacity: d.kind === "hif-none" ? 0.7 : 1, fontStyle: d.kind === "hif-none" ? "italic" : "normal"}}>
              {d.kind === "htma" && <I.flask size={11}/>}
              {d.kind === "blood" && <I.pill size={11}/>}
              {d.kind === "hif" && <I.user size={11}/>}
              {d.kind === "hif-none" && <I.user size={11}/>}
              <span style={{marginLeft: 4}}>{d.label}</span>
              {d.required && <span className="muted" style={{marginLeft: 6, fontSize: 10}}>required</span>}
            </span>
          ))}
        </div>
        <div className="spacer"></div>
        <div className="muted" style={{fontSize: 12}}>{docs.filter(d => d.kind !== "hif-none").length} file{docs.filter(d => d.kind !== "hif-none").length !== 1 ? "s" : ""} attached</div>
      </div>

      {/* Prototype scenario toggle */}
      <div className="card card-pad" style={{marginBottom: 16, display: "flex", gap: 14, alignItems: "center"}}>
        <div className="muted" style={{fontSize: 12.5}}>Prototype scenario:</div>
        <div className="row" style={{gap: 6}}>
          <button className={"btn sm" + (hasPriorHistory ? " primary" : "")} onClick={() => setHasPriorHistory(true)}>Client has prior HTMA history</button>
          <button className={"btn sm" + (!hasPriorHistory ? " primary" : "")} onClick={() => setHasPriorHistory(false)}>First HTMA for this client</button>
        </div>
        <div className="spacer"></div>
        <div className="muted" style={{fontSize: 12}}>Drives whether the retest-link suggestion appears after metadata confirmation.</div>
      </div>

      <div className="split">
        {/* LEFT — metadata + extracted data */}
        <div style={{display: "flex", flexDirection: "column", gap: 16}}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Report Information</div>
                <div className="card-sub">Editable fields · auto-filled from extraction</div>
              </div>
              {confirmed && <span className="badge green"><span className="dot"></span> Confirmed</span>}
            </div>
            <div style={{padding: "18px 20px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14}}>
              <div className="field">
                <div className="field-label">Report name</div>
                <div className="input-wrap"><I.doc className="lead" size={14}/><input className="input with-icon" value={name} onChange={e=>setName(e.target.value)}/></div>
              </div>
              <div className="field">
                <div className="field-label">Report type</div>
                <div className="input-wrap"><I.flask className="lead" size={14}/>
                  <select className="select with-icon" value={type} onChange={e=>setType(e.target.value)}>
                    <option>HTMA</option><option>Blood panel</option><option>Combined</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <div className="field-label">Report date</div>
                <div className="input-wrap"><I.cal className="lead" size={14}/><input className="input with-icon" value={date} onChange={e=>setDate(e.target.value)}/></div>
              </div>
              <div className="field">
                <div className="field-label">Lab</div>
                <div className="input-wrap"><I.bldg className="lead" size={14}/><input className="input with-icon" value={lab} onChange={e=>setLab(e.target.value)}/></div>
              </div>
              <div className="field" style={{gridColumn: "1 / -1"}}>
                <div className="row-between">
                  <div className="field-label">Client</div>
                  <button className="btn sm ghost" onClick={() => setNewClient(!newClient)}>
                    {newClient ? "← Pick existing" : "+ Create new client inline"}
                  </button>
                </div>
                {!newClient ? (
                  <div className="input-wrap">
                    <I.user className="lead" size={14}/>
                    <select className="select with-icon" value={client} onChange={e=>setClient(e.target.value)}>
                      <option value="">Select existing client…</option>
                      {window.MOCK.CLIENTS.map(c => <option key={c.id} value={c.name}>{c.name} · case-{c.id.toUpperCase()}</option>)}
                    </select>
                  </div>
                ) : (
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 100px", gap: 8}}>
                    <input className="input" placeholder="Full name" onChange={e=>setClient(e.target.value)}/>
                    <input className="input" placeholder="Email (optional)"/>
                    <input className="input" placeholder="Age"/>
                  </div>
                )}
              </div>
            </div>
            <div style={{padding: "0 20px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10}}>
              <div>
                {confirmed && !hasPriorHistory && (
                  <span className="chip blue" style={{fontSize: 11.5}}>
                    <I.flask size={11}/> <span style={{marginLeft: 4}}>First HTMA case for this client — saved as baseline</span>
                  </span>
                )}
                {confirmed && hasPriorHistory && (
                  <span className="chip green" style={{fontSize: 11.5}}>
                    <I.refresh size={11}/> <span style={{marginLeft: 4}}>Prior HTMA history found — retest link suggested</span>
                  </span>
                )}
              </div>
              <div className="row">
                {confirmed && <button className="btn" onClick={() => setStep(1)}>Edit again</button>}
                <button className="btn primary" disabled={!client || confirmed} onClick={handleConfirm}>
                  {confirmed ? "Confirmed" : "Confirm report & continue"} {!confirmed && <I.arrowR size={14}/>}
                </button>
              </div>
            </div>
          </div>

          {/* Step 2 — Intake review (locked until step 1 done) */}
          {step === 1 ? (
            <div className="section-locked">
              <div style={{width: 44, height: 44, borderRadius: "50%", border: "1px dashed var(--border-strong)", display: "grid", placeItems: "center"}}><I.user size={20}/></div>
              <div style={{fontWeight: 500, color: "var(--text-2)"}}>Confirm the report first to review intake</div>
              <div className="muted" style={{fontSize: 12.5}}>Intake review and lab values stay hidden until report metadata is confirmed.</div>
            </div>
          ) : !intakeConfirmed ? (
            <div className="card">
              <div className="card-head">
                <div>
                  <div className="card-title row" style={{gap: 8}}>Intake review <span className="chip">Case-only edits</span></div>
                  <div className="card-sub">{hifIncluded ? "Pre-filled from the HIF PDF — confirm or edit per field." : "No HIF PDF uploaded — overlapping fields pre-filled from canonical client data; fill the rest manually."} Edits here update this case only, not the canonical profile.</div>
                </div>
                <span className="badge amber"><span className="dot"></span> Step 2 of 3</span>
              </div>
              <div style={{padding: "12px 18px 0", display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap"}}>
                <div className="muted" style={{fontSize: 11.5}}>Field source legend:</div>
                <SourceBadge src="inferred"/>
                {hifIncluded ? <SourceBadge src="hif"/> : <><SourceBadge src="canonical"/><SourceBadge src="manual"/></>}
                <SourceBadge src="case"/>
              </div>
              <div style={{padding: "0 18px 8px"}}>
                <div className="alert" style={{padding: "10px 12px", border: "1px dashed var(--border-strong)", background: "var(--bg-2)", borderRadius: 8, display: "flex", alignItems: "center", gap: 10, fontSize: 12.5}}>
                  <I.shield size={14}/>
                  <div><strong>Required floor:</strong> client category and at least one presenting complaint must be set before lab values are revealed.</div>
                </div>
              </div>
              <div style={{padding: 18, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14}}>
                <div className="field"><div className="field-label">Client category / life-stage <SourceBadge src="inferred"/> <span className="badge red" style={{marginLeft: 6}}><span className="dot"></span> Required</span></div>
                  <select className="select" value={intakeCategory} onChange={e=>setIntakeCategory(e.target.value)}>
                    <option value="">Select…</option>
                    <option value="adult">Adult</option><option value="child">Child / adolescent</option><option value="preconception">Preconception</option><option value="pregnancy">Pregnancy</option><option value="postpartum">Postpartum</option><option value="senior">Senior</option>
                  </select></div>
                <div className="field"><div className="field-label">Retest status <SourceBadge src={richSrc}/></div><input className="input" value={retestStatus} onChange={e=>setRetestStatus(e.target.value)} placeholder={hifIncluded ? "" : "e.g. Retest of 8/14 HTMA"}/></div>
                <div className="field" style={{gridColumn: "1 / -1"}}><div className="field-label">Presenting complaints <SourceBadge src={richSrc}/> <span className="badge red" style={{marginLeft: 6}}><span className="dot"></span> Required</span></div><input className="input" value={intakeComplaint} onChange={e=>setIntakeComplaint(e.target.value)} placeholder={hifIncluded ? "" : "e.g. fatigue, hair loss, anxiety"}/></div>
                <div className="field"><div className="field-label">Current symptoms <SourceBadge src={richSrc}/></div><input className="input" value={symptoms} onChange={e=>setSymptoms(e.target.value)} placeholder={hifIncluded ? "" : "Optional — current symptoms"}/></div>
                <div className="field"><div className="field-label">Client conditions <SourceBadge src={canonicalSrc}/></div><input className="input" value={conditions} onChange={e=>setConditions(e.target.value)}/></div>
                <div className="field"><div className="field-label">Health history <SourceBadge src={richSrc}/></div><input className="input" value={history} onChange={e=>setHistory(e.target.value)} placeholder={hifIncluded ? "" : "Optional — prior tests, protocols"}/></div>
                <div className="field"><div className="field-label">Protocols used <SourceBadge src={richSrc}/></div><input className="input" value={protocolsUsed} onChange={e=>setProtocolsUsed(e.target.value)} placeholder={hifIncluded ? "" : "Optional — protocols in progress"}/></div>
                <div className="field"><div className="field-label">Copper exposure <SourceBadge src={richSrc}/></div><input className="input" value={copperExposure} onChange={e=>setCopperExposure(e.target.value)} placeholder={hifIncluded ? "" : "Optional — pipes, IUD, supplements"}/></div>
                <div className="field"><div className="field-label">Medications <SourceBadge src={canonicalSrc}/></div><input className="input" value={meds} onChange={e=>setMeds(e.target.value)}/></div>
                <div className="field"><div className="field-label">Supplements <SourceBadge src={canonicalSrc}/></div><input className="input" value={supplements} onChange={e=>setSupplements(e.target.value)}/></div>
                <div className="field"><div className="field-label">Binder used <SourceBadge src={richSrc}/></div><input className="input" value={binder} onChange={e=>setBinder(e.target.value)} placeholder={hifIncluded ? "" : "Optional — chelator / binder"}/></div>
                <div className="field"><div className="field-label">Previous Vykon supplement use <SourceBadge src={richSrc}/></div><input className="input" value={prevVykonSupp} onChange={e=>setPrevVykonSupp(e.target.value)} placeholder={hifIncluded ? "" : "Optional — Vykon products taken"}/></div>
                <div className="field"><div className="field-label">Conception timeline <SourceBadge src={richSrc}/></div><input className="input" value={conception} onChange={e=>setConception(e.target.value)} placeholder={hifIncluded ? "" : "If relevant"}/></div>
                <div className="field" style={{gridColumn: "1 / -1"}}><div className="field-label">Question for mentor <SourceBadge src="case"/></div><input className="input" placeholder="Optional — surfaces in case compilation" value={mentorQ} onChange={e=>setMentorQ(e.target.value)}/></div>
              </div>
              <div style={{padding: "0 20px 20px", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                <div className="muted" style={{fontSize: 12}}>
                  <I.shield size={11}/> {!intakeCategory ? "Pick a client category to continue." : !intakeComplaint.trim() ? "Add at least one presenting complaint to continue." : "Floor satisfied — labs will reveal on confirm."}
                </div>
                <div className="row">
                  <button className="btn" onClick={() => setStep(1)}>Back</button>
                  <button className="btn primary" onClick={attemptConfirmIntake} disabled={!intakeCategory || !intakeComplaint.trim()}>Confirm intake <I.arrowR size={14}/></button>
                </div>
              </div>
            </div>
          ) : (
            <ExtractedResults
              biomarkers={biomarkers}
              update={update}
              toggle={toggle}
              selectedIds={selectedIds}
              addRow={addRow}
              deleteSelected={deleteSelected}
              bloodIncluded={bloodIncluded}
              go={go}
            />
          )}
        </div>

        {/* RIGHT — preview */}
        <div className="preview-pane">
          <div className="row-between">
            <div className="card-title">Document preview</div>
            <div className="row" style={{gap: 6}}>
              <button className="icon-btn"><I.chevL size={14}/></button>
              <div className="mono" style={{fontSize: 12}}>1 / 2</div>
              <button className="icon-btn"><I.chevR size={14}/></button>
              <div style={{width: 1, height: 16, background: "var(--border)"}}></div>
              <div className="mono muted" style={{fontSize: 12}}>100%</div>
              <button className="icon-btn"><I.expand size={14}/></button>
            </div>
          </div>
          <HtmaPreviewDoc/>
        </div>
      </div>

      {promoteModal && (
        <PromoteCanonicalModal
          changes={promoteModal.changes}
          isBootstrap={promoteModal.isBootstrap}
          clientName={confirmedMeta?.client || client}
          onSkip={finishPromote}
          onApply={finishPromote}
        />
      )}
    </div>
  );
}

function PromoteCanonicalModal({ changes, isBootstrap, clientName, onApply, onSkip }) {
  const [picks, setPicks] = useState(
    Object.keys(changes).reduce((acc, k) => ({ ...acc, [k]: isBootstrap }), {})
  );
  const allSelected = Object.values(picks).every(Boolean);
  const noneSelected = Object.values(picks).every(v => !v);
  function toggleAll() {
    const newVal = !allSelected;
    setPicks(p => Object.keys(p).reduce((a, k) => ({ ...a, [k]: newVal }), {}));
  }
  return (
    <div className="modal-backdrop" onClick={onSkip}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth: 580}}>
        <div className="row" style={{gap: 10, marginBottom: 4}}>
          <I.user size={18}/>
          <h3 style={{margin: 0}}>{isBootstrap ? "Seed client profile from this intake?" : "Update client profile?"}</h3>
        </div>
        <p className="muted" style={{margin: "4px 0 16px", fontSize: 13, lineHeight: 1.55}}>
          {isBootstrap
            ? <>This is <strong style={{color: "var(--text)"}}>{clientName || "the client"}</strong>'s first HTMA case — the canonical profile is empty. Pick what should seed the profile from this intake. You can skip and add manually later.</>
            : <>You edited some intake fields that overlap with <strong style={{color: "var(--text)"}}>{clientName || "the client"}</strong>'s canonical profile. Pick which edits should also update the profile. Anything you skip stays case-only.</>}
        </p>
        <div style={{padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--bg-2)", marginBottom: 14}}>
          <div className="row-between" style={{marginBottom: 10}}>
            <div style={{fontSize: 12.5, fontWeight: 500}}>{Object.keys(changes).length} field{Object.keys(changes).length !== 1 ? "s" : ""} {isBootstrap ? "to seed" : "edited vs canonical"}</div>
            <button className="btn sm ghost" onClick={toggleAll}>{allSelected ? "Uncheck all" : "Check all"}</button>
          </div>
          <div style={{display: "flex", flexDirection: "column", gap: 8}}>
            {Object.entries(changes).map(([k, v]) => (
              <label key={k} style={{display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 12px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, cursor: "pointer"}}>
                <input type="checkbox" style={{marginTop: 3}} checked={picks[k]} onChange={e => setPicks(p => ({ ...p, [k]: e.target.checked }))}/>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontWeight: 500, fontSize: 13.5}}>{v.label}</div>
                  {isBootstrap ? (
                    <div className="muted" style={{fontSize: 12.5, marginTop: 4}}>Seed value: <span style={{color: "var(--text)"}}>{v.next}</span></div>
                  ) : (
                    <div style={{marginTop: 4, fontSize: 12.5}}>
                      <div className="muted">Was (canonical): <span style={{textDecoration: "line-through"}}>{v.prev || "(empty)"}</span></div>
                      <div className="muted">Now (this case): <span style={{color: "var(--text)"}}>{v.next}</span></div>
                    </div>
                  )}
                </div>
              </label>
            ))}
          </div>
        </div>
        <div className="muted" style={{fontSize: 12, marginBottom: 14, display: "flex", gap: 6, alignItems: "flex-start"}}>
          <I.shield size={11} style={{marginTop: 2}}/>
          <div>Selected fields write to canonical with a <code>Promoted from this case</code> provenance label. Unselected stay case-only — canonical is unchanged.</div>
        </div>
        <div className="row" style={{justifyContent: "flex-end", gap: 8}}>
          <button className="btn ghost" onClick={onSkip}>Skip — keep case-only</button>
          <button className="btn primary" onClick={() => onApply(Object.keys(picks).filter(k => picks[k]))} disabled={noneSelected}>
            <I.check size={14}/> Apply selected & reveal labs
          </button>
        </div>
      </div>
    </div>
  );
}

function ExtractedResults({ biomarkers, update, toggle, selectedIds, addRow, deleteSelected, bloodIncluded, go }) {
  const { HTMA_RATIOS } = window.MOCK;
  return (
    <>
      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">HTMA · biomarker results</div>
            <div className="card-sub">{biomarkers.length} elements · click any field to edit</div>
          </div>
          <div className="row">
            {selectedIds.size > 0 && <button className="btn sm danger" onClick={deleteSelected}><I.trash size={12}/> Delete {selectedIds.size}</button>}
            <button className="btn sm" onClick={addRow}><I.plus size={12}/> Add biomarker</button>
          </div>
        </div>
        <div style={{maxHeight: 420, overflow: "auto"}}>
          <table className="tbl">
            <thead style={{position: "sticky", top: 0, background: "var(--bg-2)", zIndex: 1}}>
              <tr>
                <th style={{width: 30}}></th>
                <th>Biomarker</th>
                <th style={{width: 130}}>Value</th>
                <th style={{width: 110}}>Unit</th>
                <th style={{width: 80}}>Status</th>
                <th style={{width: 40}}></th>
              </tr>
            </thead>
            <tbody>
              {biomarkers.map(b => (
                <tr key={b.id}>
                  <td><input type="checkbox" checked={selectedIds.has(b.id)} onChange={() => toggle(b.id)}/></td>
                  <td>
                    <div className="input-wrap">
                      <input className="input" style={{padding: "7px 10px"}}
                        value={`${b.sym} ${b.name} (Hair)`}
                        onChange={e => update(b.id, "name", e.target.value)}/>
                    </div>
                  </td>
                  <td><input className="input mono" style={{padding: "7px 10px", textAlign: "right"}} value={b.value} onChange={e => update(b.id, "value", e.target.value)}/></td>
                  <td><input className="input" style={{padding: "7px 10px"}} value={b.unit} onChange={e => update(b.id, "unit", e.target.value)}/></td>
                  <td>
                    {b.flag === "elevated" ? <span className="badge amber"><span className="dot"></span> High</span> :
                     b.value === "N/A" ? <span className="badge"><span className="dot"></span> N/A</span> :
                     <span className="badge green"><span className="dot"></span> OK</span>}
                  </td>
                  <td><button className="icon-btn"><I.more size={14}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">HTMA · significant ratios</div>
          <button className="btn sm"><I.plus size={12}/> Add ratio</button>
        </div>
        <table className="tbl">
          <thead><tr><th>Ratio</th><th>Value</th><th>Ideal</th><th>Status</th></tr></thead>
          <tbody>
            {HTMA_RATIOS.map((r, i) => (
              <tr key={i}>
                <td className="mono">{r.name}</td>
                <td className="mono">{r.value}</td>
                <td className="muted mono">{r.ideal}</td>
                <td>{r.flag === "high" ? <span className="badge amber"><span className="dot"></span> Out of range</span> : <span className="badge green"><span className="dot"></span> In range</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {bloodIncluded && (
        <div className="card">
          <div className="card-head">
            <div className="card-title">Blood panel · CBC + metabolic</div>
            <button className="btn sm"><I.plus size={12}/> Add row</button>
          </div>
          <table className="tbl">
            <thead><tr><th>Marker</th><th>Value</th><th>Ref range</th><th>Status</th></tr></thead>
            <tbody>
              {[
                ["Hemoglobin", "13.2 g/dL", "12.0–15.5", "ok"],
                ["Ferritin", "28 ng/mL", "30–150", "low"],
                ["Vitamin D, 25-OH", "32 ng/mL", "30–80", "ok"],
                ["TSH", "2.4 mIU/L", "0.4–4.0", "ok"],
              ].map(([m, v, r, s], i) => (
                <tr key={i}>
                  <td>{m}</td><td className="mono">{v}</td><td className="muted mono">{r}</td>
                  <td>{s === "low" ? <span className="badge amber"><span className="dot"></span> Low</span> : <span className="badge green"><span className="dot"></span> OK</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="row-between" style={{padding: "0 4px"}}>
        <div className="muted" style={{fontSize: 12.5}}>Saving runs validation and triggers AI protocol generation.</div>
        <div className="row">
          <button className="btn">Cancel</button>
          <button className="btn primary lg" onClick={() => go("generating")}>Save reviewed extraction <I.arrowR size={14}/></button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { UploadScreen, ProcessingScreen, ScanReview, SourceBadge, PromoteCanonicalModal });