/* MedBridge — app shell: nav rail, top bar, role + jurisdiction switch, routing */

const { useState: useS, useMemo: useM } = React;

const SECTIONS = [
  { id: "overview", label: "Overview", icon: "grid" },
  { id: "transfers", label: "Care Transitions", icon: "send" },
  { id: "alerts", label: "Critical-Gap Alerts", icon: "alert", badge: true },
  { id: "attribution", label: "Attribution", icon: "activity" },
  { id: "benchmark", label: "Benchmarking", icon: "chart" },
  { id: "roi", label: "Ministry ROI", icon: "dollar" },
  { id: "integration", label: "Integration", icon: "layers" },
];

const ROLES = [
  { id: "quality", label: "Quality & Safety", icon: "shield", user: "Sarah Chen", title: "Patient Safety Officer · QEII", initials: "SC" },
  { id: "cmio", label: "CMIO", icon: "stethoscope", user: "Dr. Daniel Reyes", title: "Associate CMIO · NSHA", initials: "DR" },
  { id: "ministry", label: "Ministry", icon: "chart", user: "Marie Boudreau", title: "Digital Health Lead · DHW", initials: "MB" },
];

const JURIS = [
  { id: "ALL", name: "Atlantic + North" },
  { id: "NS", name: "Nova Scotia" },
  { id: "NB", name: "New Brunswick" },
  { id: "PE", name: "Prince Edward Island" },
  { id: "NT", name: "Northwest Territories" },
  { id: "NU", name: "Nunavut" },
];

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

const ACCENTS = [
  ["#0E7C86", "#0A5C64", "#E4F2F3", "#BFE0E2"],
  ["#2563EB", "#1D4ED8", "#E8EFFD", "#C7D7FB"],
  ["#4F46E5", "#3F38C0", "#ECEBFD", "#C9C5F6"],
  ["#1F8A5B", "#156F49", "#E6F4EC", "#BFE4D1"],
];

function MBApp({ entryRole = "ministry", entrySection = "overview", onSignOut } = {}) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [section, setSection] = useS(entrySection);
  const [role, setRole] = useS(entryRole);
  const [jurisId, setJurisId] = useS("ALL");
  const [activeTransfer, setActiveTransfer] = useS(null);
  const [menuOpen, setMenuOpen] = useS(false);

  const juris = jurisId === "ALL" ? { name: "Atlantic Canada" } : window.MB.jurisdictions.find((j) => j.id === jurisId) || { name: "Atlantic Canada" };
  const roleMeta = ROLES.find((r) => r.id === role);
  const openAlertCount = window.MB.transfers.filter((t) => t.status !== "Completed").reduce((s, t) => s + t.missCrit.length, 0);

  const openTransfer = (id) => { setActiveTransfer(id); };
  const go = (s) => { setActiveTransfer(null); setSection(s); };

  const activeT = activeTransfer ? window.MB.transfers.find((t) => t.id === activeTransfer) : null;

  const accentStyle = { "--primary": t.accent[0], "--primary-dark": t.accent[1], "--primary-light": t.accent[2], "--primary-mid": t.accent[3] };

  return (
    <div className={`app ${t.theme === "navy" ? "theme-navy" : ""} ${t.density === "compact" ? "density-compact" : ""}`} style={accentStyle}>
      {/* nav rail */}
      <div className="rail">
        <div className="rail-logo" title="MedBridge">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><circle cx="5" cy="12" r="2.4" fill="#fff" stroke="none"/><circle cx="19" cy="12" r="2.4" fill="#fff" stroke="none"/><path d="M5 12c0-4 3-6 7-6s7 2 7 6"/></svg>
        </div>
        {SECTIONS.map((s) => (
          <button key={s.id} className={`rail-btn ${section === s.id && !activeT ? "active" : ""}`} onClick={() => go(s.id)}>
            <Icon name={s.icon} size={21} />
            {s.badge && openAlertCount > 0 && <span className="rail-badge">{openAlertCount}</span>}
            <span className="rail-tip">{s.label}</span>
          </button>
        ))}
        <div className="rail-spacer" />
        <button className={`rail-btn ${section === "settings" && !activeT ? "active" : ""}`} onClick={() => go("settings")}><Icon name="settings" size={20} /><span className="rail-tip">Settings</span></button>
        <button className="rail-btn" onClick={() => onSignOut && onSignOut()}><Icon name="logout" size={20} /><span className="rail-tip">{onSignOut ? "Switch role / sign out" : "Sign out"}</span></button>
      </div>

      <div className="main">
        {/* top bar */}
        <div className="topbar">
          <div className="brand"><b>MedBridge</b><span>Health Data Harmonization</span></div>
          <div style={{ width: 1, height: 24, background: "var(--border)" }} />
          <div className="seg">
            {ROLES.map((r) => {
              const on = role === r.id;
              return (
                <button key={r.id} className={on ? "active" : ""} onClick={() => { setRole(r.id); }}
                  style={on ? { backgroundColor: "#fff", color: "var(--primary-dark)", boxShadow: "var(--sh-sm)" } : { backgroundColor: "transparent" }}>
                  <Icon name={r.icon} size={14} />{r.label}
                </button>
              );
            })}
          </div>
          <select className="juris" value={jurisId} onChange={(e) => setJurisId(e.target.value)} style={{ cursor: "pointer" }}>
            {JURIS.map((j) => <option key={j.id} value={j.id}>{j.name}</option>)}
          </select>

          <div className="topbar-right">
            <button className="icon-btn" onClick={() => go("alerts")} title="Alerts">
              <Icon name="bell" size={19} />{openAlertCount > 0 && <span className="ct">{openAlertCount}</span>}
            </button>
            <div style={{ width: 1, height: 26, background: "var(--border)", margin: "0 4px" }} />
            <div className="user-wrap">
              <button className="user-chip" onClick={() => setMenuOpen((v) => !v)}>
                <div className="avatar" style={{ width: 32, height: 32, fontSize: 12, background: "var(--primary-dark)" }}>{roleMeta.initials}</div>
                <div><div className="uname">{roleMeta.user}</div><div className="urole">{roleMeta.title}</div></div>
                <Icon name="chevD" size={15} className="muted" />
              </button>
              {menuOpen && (
                <>
                  <div className="um-backdrop" onClick={() => setMenuOpen(false)} />
                  <div className="user-menu">
                    <div className="um-head"><div className="um-name">{roleMeta.user}</div><div className="um-role">{roleMeta.title}</div></div>
                    <button className="um-item" onClick={() => { setMenuOpen(false); go("settings"); }}><span className="um-ic"><Icon name="settings" size={16} /></span>Settings</button>
                    {onSignOut && <button className="um-item" onClick={() => { setMenuOpen(false); onSignOut(); }}><span className="um-ic"><Icon name="grid" size={16} /></span>Switch workspace</button>}
                    <div className="um-sep" />
                    <button className="um-item danger" onClick={() => { setMenuOpen(false); onSignOut && onSignOut(); }}><span className="um-ic"><Icon name="logout" size={16} /></span>Sign out</button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* routed content */}
        {activeT ? (
          <TransferDetail t={activeT} onBack={() => setActiveTransfer(null)} />
        ) : (
          <>
            {section === "overview" && <Overview role={role} juris={juris} go={go} openTransfer={openTransfer} />}
            {section === "transfers" && <TransferList openTransfer={openTransfer} />}
            {section === "alerts" && <Alerts openTransfer={openTransfer} />}
            {section === "attribution" && <Attribution />}
            {section === "benchmark" && <Benchmark />}
            {section === "roi" && <Roi />}
            {section === "integration" && <Integration />}
            {section === "settings" && <SettingsScreen persona={{ name: roleMeta.user, title: roleMeta.title, initials: roleMeta.initials, org: "Nova Scotia Health", hue: 168 }} t={t} setTweak={setTweak} appearanceControls={["theme", "accent", "density"]} accentOptions={ACCENTS} scope="dashboard" onClose={() => go("overview")} onGoIntegration={() => go("integration")} />}
          </>
        )}
      </div>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Surface theme" value={t.theme} options={["clinical", "navy"]} onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={["regular", "compact"]} onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

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