/* MedBridge — unified app root: role-based entry (login) → routed workspace */

const { useState: useRS } = React;

const ENTRY_ROLES = [
  {
    id: "ministry", name: "Ministry / Government", view: "Province-wide dashboard",
    icon: "chart", tag: "GOV", tagClass: "gov",
    persona: "Marie Boudreau", ptitle: "Digital Health Lead · Dept. of Health & Wellness",
    initials: "MB", hue: 212, app: "dashboard", role: "ministry", section: "overview",
  },
  {
    id: "hospital", name: "Hospital Executive", view: "Hospital & authority KPI dashboard",
    icon: "shield",
    persona: "Dr. Daniel Reyes", ptitle: "Associate CMIO · Nova Scotia Health",
    initials: "DR", hue: 168, app: "dashboard", role: "cmio", section: "overview",
  },
  {
    id: "clinician", name: "Clinician", view: "Patient-level chart summary across all sources",
    icon: "stethoscope", tag: "CLINICAL", tagClass: "clin",
    persona: "Dr. Priya Sharma", ptitle: "Emergency Medicine · Edmonton General",
    initials: "PS", hue: 282, app: "patient",
  },
  {
    id: "itadmin", name: "IT / Admin", view: "Integration, uptime & maintenance status",
    icon: "layers",
    persona: "Scott McKenna", ptitle: "Chief Information Officer · Nova Scotia Health",
    initials: "SM", hue: 24, app: "dashboard", role: "cmio", section: "integration",
  },
];

function Login({ onPick }) {
  return (
    <div className="mb-login">
      {/* brand panel */}
      <div className="lg-brand">
        <div className="lg-mark">
          <span className="m"><svg width="24" height="24" 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></span>
          <div><b>MedBridge</b><span>One Health · Health Data Harmonization</span></div>
        </div>

        <div className="lg-hero">
          <h1>Complete patient information at <em>every care transition</em>.</h1>
          <p>A provincially-funded analytics layer that reads existing hospital EMRs over FHIR R4, scores completeness at each transfer, and links data gaps to patient outcomes — without replacing a single system.</p>

          <div className="lg-stats">
            <div className="lg-stat"><div className="v">$9.4B</div><div className="l">annual cost of disconnected health data in Canada</div></div>
            <div className="lg-stat"><div className="v">8 fields</div><div className="l">scored at every transition event</div></div>
            <div className="lg-stat"><div className="v">4.2×</div><div className="l">return per $1 invested, NS pilot model</div></div>
          </div>

          <div className="lg-trust">
            <span className="lg-chip"><Icon name="shield" size={13} />Federated query · no central record store</span>
            <span className="lg-chip"><Icon name="check" size={13} />De-identified · PHIA compliant</span>
            <span className="lg-chip"><Icon name="layers" size={13} />AWS ca-central-1 · Montreal</span>
          </div>
        </div>

        <div className="lg-foot">Confidential & proprietary · Version 1.0 · May 2026 · synthetic demonstration data</div>
      </div>

      {/* entry panel */}
      <div className="lg-entry">
        <div className="lg-entry-head">
          <div className="eyebrow">Role-based entry</div>
          <h2>Choose your workspace</h2>
          <p>Every role sees a view scoped to their decisions. Access is role-controlled and fully audit-logged.</p>
        </div>

        <div className="lg-roles">
          {ENTRY_ROLES.map((r) => (
            <button key={r.id} className="lg-role" onClick={() => onPick(r)}>
              <span className="r-ic"><Icon name={r.icon} size={22} /></span>
              <span className="r-main">
                <span className="r-name">{r.name}{r.tag && <span className={`lg-tag ${r.tagClass || ""}`}>{r.tag}</span>}</span>
                <span className="r-view">{r.view}</span>
                <span className="r-persona">
                  <span className="pdot" style={{ background: `hsl(${r.hue} 42% 46%)` }}>{r.initials}</span>
                  <span><b style={{ color: "var(--text)" }}>{r.persona}</b> · {r.ptitle}</span>
                </span>
              </span>
              <span className="r-go"><Icon name="chevR" size={20} /></span>
            </button>
          ))}
        </div>

        <div className="lg-note">
          <Icon name="info" size={14} />
          <span>This is an interactive demonstration. Pick any role to explore its workspace — sign out from inside any view to return here and switch roles.</span>
        </div>
      </div>
    </div>
  );
}

function RootApp() {
  const [active, setActive] = useRS(null);
  const signOut = () => setActive(null);

  if (!active) return <Login onPick={setActive} />;

  if (active.app === "patient") {
    return <PatientApp key="clinician" onSignOut={signOut} persona={{ name: active.persona, title: active.ptitle, initials: active.initials, org: "Edmonton General", hue: active.hue }} />;
  }
  return <MBApp key={active.id} entryRole={active.role} entrySection={active.section} onSignOut={signOut} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<RootApp />);