/* global React, I, Field, Btn, Pill, useState, useEffect, BottomNav */

// ============ ALERTS ============
function AlertsScreen({ go }) {
  const [filter, setFilter] = useState("all");
  const alerts = [
    { id: 1, sev: "crit", title: "HR spike: 145 BPM", who: "John Doe", bed: "ICU 4A", body: "72 → 145 (101% ↑) over 12s", time: "2 min ago", ack: false, type: "vital" },
    { id: 2, sev: "warn", title: "SpO₂ drop: 93%", who: "Jane Smith", bed: "Ward B", body: "98 → 93 (5% ↓) sustained", time: "15 min ago", ack: false, type: "vital" },
    { id: 3, sev: "info", title: "Device offline", who: "ARS-003", bed: "ER Triage 2", body: "Last sync 32 min ago", time: "32 min ago", ack: true, type: "device" },
    { id: 4, sev: "warn", title: "Temp rising: 38.4°C", who: "Robert Patel", bed: "PACU 3", body: "Crossed warning band", time: "1 hr ago", ack: true, type: "vital" },
  ];
  const tabs = [
    { id: "all", label: "All", count: 4 },
    { id: "crit", label: "Critical", count: 1 },
    { id: "warn", label: "Warning", count: 2 },
    { id: "device", label: "Device", count: 1 },
    { id: "ack", label: "Done", count: 2 },
  ];
  const filtered = filter === "all" ? alerts
    : filter === "ack" ? alerts.filter(a => a.ack)
    : filter === "device" ? alerts.filter(a => a.type === "device")
    : alerts.filter(a => a.sev === filter);

  return (
    <div style={{ flex: 1, padding: "16px 18px 22px", display: "flex", flexDirection: "column", gap: 12, overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="back" onClick={() => go("device-vitals", "back")}><I.back /> Back</div>
        <div className="tap-hot" style={{ width: 36, height: 36, border: "1.2px solid var(--line)", borderRadius: 10, display: "grid", placeItems: "center", background: "var(--paper-2)" }} onClick={() => go("threshold")}>
          <I.filter />
        </div>
      </div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Alerts</div>
        <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>1 critical · 2 warnings · 1 info</div>
      </div>

      {/* Filter chips */}
      <div style={{ display: "flex", gap: 6, overflowX: "auto" }}>
        {tabs.map(t => (
          <div key={t.id} className={"chip tap-hot " + (filter === t.id ? "on" : "")} onClick={() => setFilter(t.id)}>
            {t.label} <span className="mono" style={{ opacity: 0.7 }}>{t.count}</span>
          </div>
        ))}
      </div>

      {/* groupings */}
      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="section-title">NOW</div>
        {filtered.filter(a => !a.ack).map(a => (
          <AlertCard key={a.id} a={a} go={go} />
        ))}
        {filtered.filter(a => a.ack).length > 0 && (
          <>
            <div className="section-title" style={{ marginTop: 6 }}>EARLIER</div>
            {filtered.filter(a => a.ack).map(a => (
              <AlertCard key={a.id} a={a} go={go} />
            ))}
          </>
        )}
        {filtered.length === 0 && (
          <div className="wf-box-soft" style={{ padding: 20, textAlign: "center", color: "var(--ink-3)", fontSize: 13 }}>
            ✓ No alerts in this filter
          </div>
        )}
      </div>
    </div>
  );
}

function AlertCard({ a, go }) {
  const variant = a.sev === "crit" ? "danger" : a.sev === "warn" ? "warn" : "info";
  return (
    <div className="wf-box" style={{ padding: 14, opacity: a.ack ? 0.7 : 1 }}>
      <div style={{ display: "flex", gap: 10 }}>
        <div className={"sev " + a.sev} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
            <Pill variant={variant}>
              <span className="dot" /> {a.sev === "crit" ? "Critical" : a.sev === "warn" ? "Warning" : "Info"}
            </Pill>
            <div style={{ fontSize: 10, color: "var(--ink-4)", letterSpacing: 0.5 }}>{a.time.toUpperCase()}</div>
          </div>
          <div style={{ fontSize: 15, fontWeight: 800, marginTop: 6, letterSpacing: "-0.2px" }}>{a.title}</div>
          <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 2 }}>{a.who} <span style={{ color: "var(--ink-4)" }}>·</span> {a.bed}</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 6, padding: "6px 8px", background: "var(--paper)", borderRadius: 6 }}>{a.body}</div>

          {!a.ack ? (
            <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
              <Btn variant="ghost" full sm>View</Btn>
              <Btn variant="primary" full sm>Acknowledge</Btn>
            </div>
          ) : (
            <div style={{ fontSize: 11, color: "var(--accent)", marginTop: 6, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 4 }}>
              <I.check /> Acknowledged · Dr. Iyer
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============ THRESHOLD SETTINGS ============
function ThresholdScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="back" onClick={() => go("alerts", "back")}><I.back /> Back</div>
        <div className="tap-hot" style={{ fontSize: 12, fontWeight: 800, color: "var(--accent)" }} onClick={() => go("alerts", "back")}>Save</div>
      </div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Alert thresholds</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Set bands for warnings and critical alerts. Leave blank to disable.</div>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {[
          { k: "Heart Rate", u: "BPM", icon: <I.heart />, color: "var(--danger)", w: ["60", "100"], c: ["50", "120"] },
          { k: "SpO₂", u: "%", icon: <I.drop />, color: "var(--info)", w: ["95", "—"], c: ["88", "—"] },
          { k: "Respiration", u: "RPM", icon: <I.lung />, color: "#5a3da3", w: ["12", "20"], c: ["8", "30"] },
          { k: "Temperature", u: "°C", icon: <I.temp />, color: "var(--warn)", w: ["36.0", "37.5"], c: ["35.0", "39.5"] },
          { k: "Blood Pressure", u: "mmHg", icon: <I.bp />, color: "#0a6f4d", w: ["90/60", "140/90"], c: ["80/50", "160/100"] },
        ].map(t => (
          <div key={t.k} className="wf-box" style={{ padding: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, border: `1.2px solid ${t.color}`, background: t.color + "12", color: t.color, display: "grid", placeItems: "center" }}>
                {t.icon}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 13 }}>{t.k}</div>
                <div style={{ fontSize: 10, color: "var(--ink-4)", letterSpacing: 0.5 }}>{t.u.toUpperCase()}</div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              <div>
                <div style={{ fontSize: 10, color: "var(--warn)", fontWeight: 800, marginBottom: 4 }}>WARNING BAND</div>
                <div className="wf-field mono" style={{ padding: 10, fontSize: 13, justifyContent: "space-between" }}>
                  <span>{t.w[0]}</span><span style={{ color: "var(--ink-4)" }}>—</span><span>{t.w[1]}</span>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: "var(--danger)", fontWeight: 800, marginBottom: 4 }}>CRITICAL BAND</div>
                <div className="wf-field mono" style={{ padding: 10, fontSize: 13, justifyContent: "space-between" }}>
                  <span>{t.c[0]}</span><span style={{ color: "var(--ink-4)" }}>—</span><span>{t.c[1]}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ PROFILE ============
function ProfileScreen({ go, tab, onTab }) {
  const [theme, setTheme] = useState("light");
  return (
    <>
      <div style={{ flex: 1, padding: "16px 22px 90px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Profile</div>
          <div className="tap-hot" style={{ width: 36, height: 36, border: "1.2px solid var(--line)", borderRadius: 10, display: "grid", placeItems: "center", background: "var(--paper-2)" }}>
            <I.dots />
          </div>
        </div>

        {/* profile card */}
        <div className="wf-box" style={{ padding: 18, textAlign: "center" }}>
          <div className="avatar" style={{ width: 72, height: 72, margin: "0 auto 10px", fontSize: 20 }}>
            SC <span className="online" style={{ width: 14, height: 14 }} />
          </div>
          <div style={{ fontSize: 18, fontWeight: 800 }}>Dr. Sarah Chen</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Cardiologist · MD, FRCP</div>
          <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 6, display: "inline-flex", alignItems: "center", gap: 4 }}>
            <I.building /> City General · Mumbai
          </div>
        </div>

        {/* appearance */}
        <div className="wf-box" style={{ padding: 12 }}>
          <div style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: 0.6, textTransform: "uppercase", fontWeight: 800, marginBottom: 8 }}>Appearance</div>
          <div className="tab-row">
            {[
              { id: "light", l: <I.sun />, t: "Light" },
              { id: "dark",  l: <I.moon />, t: "Dark" },
              { id: "auto",  l: null, t: "Auto" },
            ].map(o => (
              <div key={o.id} className={"t " + (theme === o.id ? "on" : "")} onClick={() => setTheme(o.id)}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>{o.l}{o.t}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="section-title">Account</div>
        <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <MenuRow icon={<I.user />} label="Personal information" onClick={() => go("personal")} />
          <MenuRow icon={<I.lock />} label="Change password" onClick={() => go("password")} />
          <MenuRow icon={<I.building />} label="Hospital affiliations" onClick={() => go("affiliations")} />
          <MenuRow icon={<I.shield />} label="Privacy & security" />
          <MenuRow icon={<I.bell />} label="Notification preferences" />
        </div>

        <div className="section-title" style={{ marginTop: 6 }}>Hospital admin</div>
        <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <MenuRow icon={<I.user />} label="Staff management" onClick={() => go("staff-mgmt")} />
          <MenuRow icon={<I.device />} label="Device access policies" />
        </div>

        <div className="section-title" style={{ marginTop: 6 }}>Legal</div>
        <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <MenuRow icon={<I.doc />} label="Terms of service" />
          <MenuRow icon={<I.shield />} label="Privacy policy" />
          <MenuRow icon={<I.doc />} label="About ArogyaSync" />
        </div>

        <Btn variant="danger" onClick={() => go("login", "fade")}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><I.exit /> Sign out</span>
        </Btn>

        <div style={{ textAlign: "center", fontSize: 10, color: "var(--ink-4)", letterSpacing: 1 }}>
          v2.0 · BUILD 26.5 · INTERNAL
        </div>
      </div>
      <BottomNav tab={tab} onTab={onTab} />
    </>
  );
}

function MenuRow({ icon, label, onClick }) {
  return (
    <div className="menu-row" onClick={onClick}>
      <div className="lead">{icon}</div>
      <div className="nm">{label}</div>
      <div className="ch"><I.forward /></div>
    </div>
  );
}

// ============ PERSONAL INFO ============
function PersonalInfoScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="back" onClick={() => go("profile", "back")}><I.back /> Back</div>
        <div className="tap-hot" style={{ fontSize: 12, fontWeight: 800, color: "var(--accent)" }} onClick={() => go("profile", "back")}>Save</div>
      </div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Personal information</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Update your profile details</div>
      </div>

      <div style={{ textAlign: "center" }}>
        <div className="avatar tap-hot" style={{ width: 72, height: 72, margin: "0 auto", fontSize: 20 }}>SC
          <div style={{ position: "absolute", bottom: -3, right: -3, width: 24, height: 24, borderRadius: "50%", background: "var(--ink)", color: "white", border: "2px solid white", display: "grid", placeItems: "center" }}>
            <I.camera />
          </div>
        </div>
        <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 8 }}>Tap to change photo</div>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <FieldGroup label="First name" value="Sarah" icon={<I.user />} />
        <FieldGroup label="Last name" value="Chen" />
        <FieldGroup label="Email" value="sarah.chen@hospital.com" icon={<I.mail />} />
        <FieldGroup label="Phone" value="+91 98XXX XX234" icon={<I.phone />} />
        <FieldGroup label="Specialization" value="Cardiology" />
        <FieldGroup label="License number" value="MCI/2014/8745631" />
      </div>
    </div>
  );
}

function FieldGroup({ label, value, icon }) {
  return (
    <div>
      <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 4, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase" }}>{label}</div>
      <Field icon={icon} label={label} value={value} />
    </div>
  );
}

// ============ CHANGE PASSWORD ============
function ChangePasswordScreen({ go }) {
  const [show, setShow] = useState({});
  const fields = [
    { id: "cur", l: "Current password" },
    { id: "new", l: "New password" },
    { id: "conf", l: "Confirm password" },
  ];
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
      <div className="back" onClick={() => go("profile", "back")}><I.back /> Back</div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Change password</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Keep your clinical account secure</div>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {fields.map(f => (
          <FieldGroup key={f.id} label={f.l} icon={<I.lock />} value={show[f.id] ? "Plaintext sample" : "••••••••••"} />
        ))}
      </div>

      <div className="wf-box-soft" style={{ padding: 12 }}>
        <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 6 }}>Password strength</div>
        <div style={{ display: "flex", gap: 4 }}>
          {[1, 1, 1, 0].map((v, i) => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: v ? "var(--accent)" : "var(--line)" }} />
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 8, fontSize: 11, color: "var(--ink-3)" }}>
          <span style={{ color: "var(--accent)" }}><I.check /> 8+ characters</span>
          <span style={{ color: "var(--accent)" }}><I.check /> Mixed case & number</span>
          <span><span style={{ color: "var(--ink-4)" }}>○</span> Special character</span>
        </div>
      </div>

      <div style={{ marginTop: "auto" }}>
        <Btn variant="primary" onClick={() => go("profile", "back")}>Update password</Btn>
      </div>
    </div>
  );
}

// ============ HOSPITAL AFFILIATIONS ============
function AffiliationsScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      <div className="back" onClick={() => go("profile", "back")}><I.back /> Back</div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Hospital affiliations</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Facilities you have credentialed access to</div>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {[
          { n: "City General Hospital", l: "Mumbai", role: "Cardiology · Attending", since: "2019" },
          { n: "Metro Health Center", l: "Delhi", role: "Consultant", since: "2022" },
          { n: "Aarogya Multispeciality", l: "Bengaluru", role: "Visiting", since: "2024" },
        ].map((h, i) => (
          <div key={i} className="wf-box" style={{ padding: 14 }}>
            <div style={{ display: "flex", gap: 12 }}>
              <div style={{ width: 40, height: 40, border: "1.2px solid var(--line)", borderRadius: 10, background: "var(--paper)", display: "grid", placeItems: "center" }}>
                <I.building />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 14 }}>{h.n}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{h.l}</div>
                <div style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 4 }}>{h.role}</div>
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)", alignSelf: "flex-start" }}>SINCE {h.since}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ STAFF MANAGEMENT ============
function StaffMgmtScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="back" onClick={() => go("profile", "back")}><I.back /> Back</div>
        <div className="tap-hot" style={{ width: 36, height: 36, border: "1.2px solid var(--line)", borderRadius: 10, display: "grid", placeItems: "center", background: "var(--paper-2)" }} onClick={() => go("staff-invite")}>
          <I.plus />
        </div>
      </div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Staff</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>City General · 8 members</div>
      </div>
      <div className="search"><I.search /> Search staff…</div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { n: "Dr. Rohan Iyer", r: "Attending · Cardiology", e: "r.iyer@hosp.com", active: true },
          { n: "Nurse Priya Verma", r: "ICU Lead", e: "p.verma@hosp.com", active: true },
          { n: "Dr. Anita Mehta", r: "Resident", e: "a.mehta@hosp.com", active: true },
          { n: "Tech Karan S.", r: "Biomed", e: "k.singh@hosp.com", active: false },
        ].map((s, i) => (
          <div key={i} className="wf-box" style={{ padding: 12, display: "flex", alignItems: "center", gap: 10 }}>
            <div className="avatar" style={{ width: 36, height: 36, fontSize: 11 }}>{s.n.split(" ").slice(-1)[0][0]}{s.n.split(" ")[0][0]}{s.active && <span className="online" />}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{s.n}</div>
              <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{s.r}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)" }}>{s.e}</div>
            </div>
            <Pill variant={s.active ? "ok" : ""}>{s.active ? <><span className="dot" />Active</> : <><span className="dot" />Off</>}</Pill>
            <div className="tap-hot dim" style={{ paddingLeft: 6 }} onClick={() => go("staff-access")}><I.dots /></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ STAFF INVITE ============
function StaffInviteScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
      <div className="back" onClick={() => go("staff-mgmt", "back")}><I.back /> Back</div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Invite staff</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Add a new member to City General</div>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <FieldGroup label="Email address" value="" icon={<I.mail />} />
        <FieldGroup label="Phone (optional)" value="" icon={<I.phone />} />
        <div>
          <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 4, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase" }}>Role</div>
          <div className="dd">Resident <span className="caret" /></div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 4, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase" }}>Permissions</div>
          <div className="wf-box" style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { l: "View vitals", on: true },
              { l: "Acknowledge alerts", on: true },
              { l: "Configure devices", on: false },
              { l: "Manage patients", on: false },
            ].map((p, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
                <span>{p.l}</span>
                <div className={"tg" + (p.on ? " on" : "")} />
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginTop: "auto" }}>
        <Btn variant="primary" onClick={() => go("staff-mgmt", "back")}>Send invitation</Btn>
      </div>
    </div>
  );
}

// ============ STAFF DEVICE ACCESS ============
function StaffAccessScreen({ go }) {
  return (
    <div style={{ flex: 1, padding: "16px 22px 22px", display: "flex", flexDirection: "column", gap: 14, overflow: "auto" }}>
      <div className="back" onClick={() => go("staff-mgmt", "back")}><I.back /> Back</div>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.3px" }}>Device access</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>Dr. Anita Mehta · Resident</div>
      </div>

      <div className="wf-box" style={{ padding: 12, display: "flex", alignItems: "center", gap: 10, background: "var(--paper)" }}>
        <div className="avatar" style={{ width: 36, height: 36, fontSize: 11 }}>AM<span className="online" /></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 13 }}>Anita Mehta</div>
          <div style={{ fontSize: 11, color: "var(--ink-3)" }}>4 devices assigned · 8 available</div>
        </div>
      </div>

      <div className="section-title">Assigned devices</div>
      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { n: "ICU 4A Monitor", mac: "ARS-001", on: true, assigned: true },
          { n: "Ward A Bed 12", mac: "ARS-005", on: true, assigned: true },
          { n: "Recovery Bay 2", mac: "ARS-008", on: true, assigned: true },
          { n: "ER Triage 2", mac: "ARS-003", on: false, assigned: true },
        ].map(d => (
          <DeviceAccessRow key={d.mac} d={d} />
        ))}
      </div>

      <div className="section-title" style={{ marginTop: 6 }}>Available</div>
      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { n: "Step-down 5", mac: "ARS-011", on: false, assigned: false },
          { n: "ICU 4B Monitor", mac: "ARS-014", on: true, assigned: false },
        ].map(d => (
          <DeviceAccessRow key={d.mac} d={d} />
        ))}
      </div>
    </div>
  );
}

function DeviceAccessRow({ d }) {
  const [on, setOn] = useState(d.assigned);
  return (
    <div className="wf-box" style={{ padding: 12, display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{ width: 30, height: 30, border: "1.2px solid var(--line)", borderRadius: 8, display: "grid", placeItems: "center", color: d.on ? "var(--accent)" : "var(--ink-4)" }}>
        <I.device />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 13 }}>{d.n}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)" }}>{d.mac}</div>
      </div>
      <Pill variant={d.on ? "ok" : ""}>{d.on ? "Online" : "Off"}</Pill>
      <div className={"tg" + (on ? " on" : "")} onClick={() => setOn(o => !o)} />
    </div>
  );
}

Object.assign(window, {
  AlertsScreen, ThresholdScreen, ProfileScreen, PersonalInfoScreen,
  ChangePasswordScreen, AffiliationsScreen, StaffMgmtScreen, StaffInviteScreen, StaffAccessScreen
});