/* MedBridge patient view — app shell: patient lookup + sidebar + header + routing + tweaks */

const { useState: useAS, useEffect: useAE } = React;

const PT_NAV = [
  { id: "summary", label: "AI summary", icon: "activity" },
  { id: "timeline", label: "Full timeline", icon: "clock" },
  { id: "meds", label: "Medications", icon: "pill" },
  { id: "imaging", label: "Imaging & reports", icon: "file" },
  { id: "labs", label: "Labs", icon: "flask" },
  { id: "allergies", label: "Allergies", icon: "alert", alert: true },
];

const PT_TWEAKS = /*EDITMODE-BEGIN*/{
  "format": "bullets",
  "accent": ["#0E7C86", "#0A5C64", "#E4F2F3", "#BFE0E2"],
  "density": "regular"
}/*EDITMODE-END*/;

const PT_ACCENTS = [
  ["#0E7C86", "#0A5C64", "#E4F2F3", "#BFE0E2"],
  ["#1F8A5B", "#156F49", "#E6F4EC", "#BFE4D1"],
  ["#2563EB", "#1D4ED8", "#E8EFFD", "#C7D7FB"],
  ["#3F7E8C", "#2C5C68", "#E6F0F2", "#BFD9DF"],
];

const ACUITY_LABEL = { critical: "Critical", watch: "Watch", stable: "Stable" };

function initials(p) { return (p.first[0] + p.last[0]).toUpperCase(); }

/* ---------- Epic-style patient lookup ---------- */
function PatientLookup({ clinic, activeId, onPick, onClose }) {
  const { patients } = window.PT;
  const [q, setQ] = useAS("");
  const inputRef = React.useRef(null);
  useAE(() => { if (inputRef.current) inputRef.current.focus(); }, []);
  useAE(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
  }, []);

  const s = q.trim().toLowerCase();
  const rows = patients.filter((p) =>
    !s || `${p.first} ${p.last}`.toLowerCase().includes(s) || p.hcn.toLowerCase().includes(s) ||
    p.dob.includes(s) || (p.origin || "").toLowerCase().includes(s) || (p.chief || "").toLowerCase().includes(s));

  return (
    <div className="lk-overlay" onClick={onClose}>
      <div className="lk-modal" onClick={(e) => e.stopPropagation()}>
        <div className="lk-search">
          <span className="ls-ic"><Icon name="search" size={19} /></span>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search by name, health card, date of birth, or sending site…" />
          <span className="esc">ESC</span>
        </div>
        <div className="lk-scope">Inbound to {clinic.facility} · {rows.length} patient{rows.length !== 1 ? "s" : ""}</div>
        <div className="lk-list">
          {rows.length === 0 ? (
            <div className="lk-empty">No patients match “{q}”.</div>
          ) : rows.map((p) => {
            const n = p.connected ? p.connected.length : 0;
            return (
              <button key={p.id} className={`lk-row ${p.id === activeId ? "sel" : ""}`} onClick={() => onPick(p.id)}>
                <span className="lr-av" style={{ background: `hsl(${p.avatarHue} 42% 46%)` }}>{initials(p)}</span>
                <span className="lr-main">
                  <span className="lr-name"><AcuityDot level={p.acuity} />{p.first} {p.last}, {p.age}{p.sex}</span>
                  <span className="lr-id">{p.hcn} · DOB {p.dob} · {p.origin}, {p.originProv}</span>
                  <span className="lr-chief">{p.chief}</span>
                </span>
                <span className="lr-right">
                  <Badge kind={p.status === "Admitted" ? "neutral" : "info"}>{p.status}</Badge>
                  <span className="lr-srcs">
                    {(p.connected || []).map((sid) => {
                      const sx = window.PT.sources[sid];
                      return sx ? <span key={sid} className="src-pill" style={{ background: sx.bg, color: sx.color }}><i style={{ background: sx.color }} />{sx.name}</span> : null;
                    })}
                  </span>
                  <span className={`lk-src-ct ${n <= 1 ? "low" : ""}`}>{n}/4 sources</span>
                </span>
              </button>
            );
          })}
        </div>
        <div className="lk-foot"><Icon name="shield" size={12} />Federated lookup · identifiers shown to authorized clinical users only · all access audit-logged</div>
      </div>
    </div>
  );
}

/* ---------- facility / working-location switcher ---------- */
function FacilityPicker({ activeId, onPick, onClose }) {
  const { facilities } = window.PT;
  const [q, setQ] = useAS("");
  const inputRef = React.useRef(null);
  useAE(() => { if (inputRef.current) inputRef.current.focus(); }, []);
  useAE(() => { const h = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []);
  const s = q.trim().toLowerCase();
  const rows = facilities.filter((f) => !s || f.facility.toLowerCase().includes(s) || f.province.toLowerCase().includes(s) || f.prov.toLowerCase().includes(s));
  const provinces = [];
  rows.forEach((f) => { if (!provinces.includes(f.province)) provinces.push(f.province); });
  return (
    <div className="lk-overlay" onClick={onClose}>
      <div className="lk-modal" onClick={(e) => e.stopPropagation()}>
        <div className="lk-search">
          <span className="ls-ic"><Icon name="search" size={19} /></span>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Switch facility — search hospitals by name or province…" />
          <span className="esc">ESC</span>
        </div>
        <div className="lk-list">
          {rows.length === 0 ? <div className="lk-empty">No facilities match “{q}”.</div> : provinces.map((prov) => (
            <div key={prov}>
              <div className="lk-scope" style={{ paddingTop: 12 }}>{prov}</div>
              {rows.filter((f) => f.province === prov).map((f) => (
                <button key={f.id} className={`lk-row ${f.id === activeId ? "sel" : ""}`} onClick={() => onPick(f)}>
                  <span className="lr-av" style={{ background: "var(--primary-light)", color: "var(--primary-dark)" }}><Icon name="bed" size={18} /></span>
                  <span className="lr-main">
                    <span className="lr-name">{f.facility}{f.id === activeId && <Badge kind="good" icon="check">Current</Badge>}</span>
                    <span className="lr-id">{f.province} · {f.unit}</span>
                  </span>
                  <span className="lr-right"><span className="lk-src-ct">{f.emr}</span></span>
                </button>
              ))}
            </div>
          ))}
        </div>
        <div className="lk-foot"><Icon name="shield" size={12} />Switching facility changes your working context · access stays role-controlled and audit-logged</div>
      </div>
    </div>
  );
}

function AskAI({ go, onAsk }) {
  const [q, setQ] = useAS("");
  function submit() {
    const v = q.trim();
    if (!v) return;
    go("summary");
    onAsk(v);
    setQ("");
  }
  return (
    <div className="pt-ask">
      <textarea value={q} placeholder="e.g. Any prior cardiac history?"
        onChange={(e) => setQ(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }} />
      <div className="pt-ask-foot">
        <span className="pt-ask-hint">Grounded in connected records</span>
        <button className="sum-act primary" style={{ height: 28, padding: "0 11px", fontSize: 12 }} onClick={submit}><Icon name="send" size={12} />Ask</button>
      </div>
    </div>
  );
}

function PatientApp({ onSignOut, persona = { name: "Dr. Priya Sharma", title: "Emergency Medicine · Edmonton General", initials: "PS", org: "Edmonton General", hue: 282 } } = {}) {
  const [t, setTweak] = useTweaks(PT_TWEAKS);
  const { patients, sources } = window.PT;
  const [activeId, setActiveId] = useAS(patients[0].id);
  const [section, setSection] = useAS("summary");
  const [pendingAsk, setPendingAsk] = useAS(null);
  const [lookupOpen, setLookupOpen] = useAS(false);
  const [clinic, setClinic] = useAS(window.PT.clinic);
  const [facilityOpen, setFacilityOpen] = useAS(false);

  const p = patients.find((x) => x.id === activeId) || patients[0];

  useAE(() => {
    const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setLookupOpen(true); } };
    window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
  }, []);

  const accentStyle = { "--primary": t.accent[0], "--primary-dark": t.accent[1], "--primary-light": t.accent[2], "--primary-mid": t.accent[3], "--primary-darker": t.accent[1] };
  const go = (s) => setSection(s);
  const pickPatient = (id) => { setActiveId(id); setSection("summary"); setPendingAsk(null); setLookupOpen(false); };
  const pickFacility = (f) => { const next = Object.assign({}, f, { network: clinic.network }); setClinic(next); window.PT.clinic = next; setFacilityOpen(false); };

  return (
    <div className={`pt-app ${t.density === "compact" ? "density-compact" : ""}`} style={accentStyle}>
      {/* ---------- sidebar ---------- */}
      <aside className="pt-side">
        <div className="pt-brand">
          <span className="mark"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><circle cx="5" cy="12" r="2.2" fill="#fff" stroke="none"/><circle cx="19" cy="12" r="2.2" fill="#fff" stroke="none"/><path d="M5 12c0-4 3-6 7-6s7 2 7 6"/></svg></span>
          <div className="grow"><b>MedBridge</b><span>One Health · clinician view</span></div>
          <button className={`icon-btn ${section === "settings" ? "active" : ""}`} title="Settings" onClick={() => go("settings")} style={{ width: 30, height: 30 }}><Icon name="settings" size={16} /></button>
          {onSignOut && <button className="icon-btn" title="Switch role / sign out" onClick={onSignOut} style={{ width: 30, height: 30 }}><Icon name="logout" size={16} /></button>}
        </div>

        {/* clinician location context */}
        <button className="pt-clinic" onClick={() => setFacilityOpen(true)} title="Switch facility">
          <span className="pc-ic"><Icon name="bed" size={17} /></span>
          <div className="grow">
            <div className="pc-fac">{clinic.facility} · {clinic.province}</div>
            <div className="pc-sub">{clinic.unit} · {persona.name}</div>
          </div>
          <span className="pc-go"><Icon name="chevD" size={16} /></span>
        </button>

        {/* patient lookup */}
        <button className="pt-lookup-btn" onClick={() => setLookupOpen(true)}>
          <Icon name="search" size={16} /><span className="grow">Find a patient…</span><kbd>⌘K</kbd>
        </button>
        <div className="pt-curpat">
          <span className="cp-av" style={{ background: `hsl(${p.avatarHue} 42% 46%)` }}>{initials(p)}</span>
          <div className="grow">
            <div className="cp-name"><AcuityDot level={p.acuity} />{p.first} {p.last}</div>
            <div className="cp-meta">{p.age}{p.sex} · {p.origin}, {p.originProv}</div>
          </div>
        </div>

        <div className="pt-sec">
          <div className="pt-sec-label">Patient record</div>
          <nav className="pt-nav">
            {PT_NAV.map((n) => (
              <button key={n.id} className={`pt-nav-item ${section === n.id ? "active" : ""}`} onClick={() => go(n.id)}>
                <span className="nv-ic"><Icon name={n.icon} size={17} /></span>
                {n.label}
                {n.id === "summary" && <span className="nv-dot" style={{ background: "var(--primary)" }} />}
                {n.alert && (p.allergies || []).every((a) => a.status !== "confirmed") && <span className="nv-dot" />}
              </button>
            ))}
          </nav>
        </div>

        <div className="pt-sec">
          <div className="pt-sec-label">Data sources · this patient</div>
          {Object.values(sources).map((sx) => {
            const on = p.connected && p.connected.includes(sx.id);
            return (
              <div className={`pt-source ${on ? "" : "norec"}`} key={sx.id}>
                <span className="src-dot" style={{ background: on ? sx.color : "var(--border-strong)" }} />
                <div className="grow">
                  <div className="src-name">{sx.name} — {sx.org}</div>
                  <div className="src-meta">{sx.span}</div>
                </div>
                {on ? <span className="src-live"><i />live</span> : <span className="src-state no">no record</span>}
              </div>
            );
          })}
        </div>

        <div className="pt-sec" style={{ marginTop: "auto" }}>
          <div className="pt-sec-label">Ask AI</div>
          <AskAI go={go} onAsk={(q) => setPendingAsk({ q, n: Date.now() })} />
        </div>
      </aside>

      {/* ---------- main ---------- */}
      <div className="pt-main">
        <header className="pt-head">
          <div>
            <div className="row gap10" style={{ alignItems: "center", flexWrap: "wrap" }}>
              <h1>{p.first} {p.last}, {p.age}{p.sex}</h1>
              <span className={`pt-acuity ${p.acuity}`}>{ACUITY_LABEL[p.acuity]}</span>
            </div>
            <div className="sub">DOB {p.dob} · Health card <b>{p.hcn}</b> · {p.home}{p.community ? ` · ${p.community}` : ""}</div>
            <div className="pt-route-line">
              <Badge kind="purple" icon="send">{p.route}</Badge>
              <span className="seg-fac">{p.origin}, {p.originProv}</span>
              <span className="arrow"><Icon name="chevR" size={13} /></span>
              <span className="seg-fac">{p.dest}, {p.destProv}</span>
              <span className="muted">· {p.status} · {p.arriving}</span>
            </div>
          </div>
          <div className="pt-srcs">
            {Object.values(sources).filter((sx) => p.connected && p.connected.includes(sx.id)).map((sx) => (
              <span className="src-tag" key={sx.id} style={{ background: sx.bg, color: sx.color }}><i style={{ background: sx.color }} />{sx.name}</span>
            ))}
          </div>
        </header>

        {section === "settings" ? (
          <SettingsScreen persona={persona} t={t} setTweak={setTweak} appearanceControls={["format", "accent", "density"]} accentOptions={PT_ACCENTS} scope="clinician" onClose={() => go("summary")} />
        ) : (
          <div className="pt-body">
            <div className="pt-wrap">
              {section === "summary" && <AISummaryView p={p} format={t.format} go={go} key={(pendingAsk ? pendingAsk.n : "sum") + p.id} initialAsk={pendingAsk} />}
              {section === "timeline" && <><SectionHead>Full longitudinal timeline</SectionHead><TimelineView p={p} /></>}
              {section === "meds" && <><SectionHead>Active medications</SectionHead><MedsView p={p} /></>}
              {section === "imaging" && <><SectionHead>Imaging & reports</SectionHead><ImagingView p={p} /></>}
              {section === "labs" && <><SectionHead>Recent labs</SectionHead><LabsView p={p} /></>}
              {section === "allergies" && <><SectionHead>Allergies</SectionHead><AllergiesView p={p} /></>}
            </div>
          </div>
        )}
      </div>

      {lookupOpen && <PatientLookup clinic={clinic} activeId={activeId} onPick={pickPatient} onClose={() => setLookupOpen(false)} />}
      {facilityOpen && <FacilityPicker activeId={clinic.id} onPick={pickFacility} onClose={() => setFacilityOpen(false)} />}

      <TweaksPanel>
        <TweakSection label="AI summary" />
        <TweakRadio label="Format" value={t.format} options={["bullets", "prose"]} onChange={(v) => setTweak("format", v)} />
        <TweakSection label="Appearance" />
        <TweakColor label="Accent" value={t.accent} options={PT_ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Density" value={t.density} options={["regular", "compact"]} onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

Object.assign(window, { PatientApp });
if (!window.__MB_EMBED) {
  ReactDOM.createRoot(document.getElementById("root")).render(<PatientApp />);
}