Import roster

One person per line: email, full name, role. Valid roles include Doctor, Hygienist, Assistant, FrontDesk, TC, OfficeManager, and Owner.

setCsv(e.target.value)} rows={8} spellCheck="false"
        style={{ width: "100%", resize: "vertical", fontFamily: "monospace", lineHeight: 1.6 }} />
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button className="btn accent" onClick={submit} disabled={busy || !rows.length}>{busy ? "Sending…" : `Review & invite ${rows.length || ""}`}</button>
        <span className="mono" style={{ color: tokens.mute, fontSize: 11 }}>{rows.length} parsed row{rows.length === 1 ? "" : "s"}</span>
      </div>
    </div>
  );
}

// ─── Members view ──────────────────────────────────────────────────────────
function MembersView({ tokens, accent, isPhone, me, orgId, onNotice }) {
  // orgId is undefined for a practice admin (server uses their identity org);
  // a super-admin drilling into a practice passes an explicit orgId.
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  const [busyEmail, setBusyEmail] = useState(null);
  const [showAdd, setShowAdd] = useState(false);
  const [showBulk, setShowBulk] = useState(false);
  const [showPlan, setShowPlan] = useState(false);
  const [showStructure, setShowStructure] = useState(false);
  const [showAudit, setShowAudit] = useState(false);
  const [addEmail, setAddEmail] = useState("");
  const [addName, setAddName] = useState("");
  const [addRole, setAddRole] = useState("");
  const [adding, setAdding] = useState(false);

const path = "/api/admin/members" + (orgId ? "?orgId=" + encodeURIComponent(orgId) : "");

const reload = useCallback(async () => {
    setLoading(true);
    const res = await apiGet(path);
    if (res.ok) setData(res.data);
    else onNotice({ kind: "error", text: (res.data && res.data.error) || "Couldn't load members." });
    setLoading(false);
  }, [path, onNotice]);

useEffect(() => { reload(); }, [reload]);

if (loading && !data) return <Spinner tokens={tokens} />;
  if (!data) return null;

const seatLabel = data.seats != null
    ? `${data.seatUsage ? data.seatUsage.total : "?"} / ${data.seats} seats`
    : null;

return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginBottom: 18 }}>
        <div>
          <h2 className="display" style={{ fontSize: 28 }}>{data.orgName}</h2>
          <div className="mono" style={{ color: tokens.mute, marginTop: 6 }}>
            {data.members.length} member{data.members.length === 1 ? "" : "s"}{seatLabel ? ` · ${seatLabel}` : ""}
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn ghost" onClick={() => setShowAudit((s) => !s)}>{showAudit ? "Hide activity" : "Activity"}</button>
          <button className="btn ghost" onClick={() => setShowStructure((s) => !s)}>{showStructure ? "Hide teams" : "Teams"}</button>
          <button className="btn ghost" onClick={() => setShowPlan((s) => !s)}>{showPlan ? "Hide plan" : "Edit plan"}</button>
          <button className="btn ghost" onClick={() => setShowBulk((s) => !s)}>{showBulk ? "Cancel import" : "Import roster"}</button>
          <button className="btn accent" onClick={() => setShowAdd((s) => !s)}>{showAdd ? "Cancel" : "+ Add member"}</button>
        </div>
      </div>

{showPlan && (
        <PlanEditor
          tokens={tokens} accent={accent} isPhone={isPhone}
          orgId={orgId}
          initialEntitlements={data.entitlements}
          initialSeats={data.seats}
          seatUsage={data.seatUsage}
          onSaved={reload}
          onNotice={onNotice}
        />
      )}

{showBulk && <BulkInvitePanel tokens={tokens} accent={accent} orgId={orgId} onNotice={onNotice} onDone={reload} />}
      {showStructure && <StructurePanel tokens={tokens} accent={accent} orgId={orgId} data={data} onNotice={onNotice} onDone={reload} />}
      {showAudit && <AuditPanel tokens={tokens} orgId={orgId} onNotice={onNotice} />}

{showAdd && (
        <form onSubmit={doInvite} className="card" style={{ padding: 20, marginBottom: 22, display: "grid", gap: 12 }}>
          <div style={{ display: "grid", gridTemplateColumns: isPhone ? "1fr" : "1.4fr 1fr 1fr", gap: 12 }}>
            <input type="email" required placeholder="email@practice.com" value={addEmail} onChange={(e) => setAddEmail(e.target.value)} />
            <input type="text" placeholder="Full name (optional)" value={addName} onChange={(e) => setAddName(e.target.value)} />
            <select value={addRole} onChange={(e) => setAddRole(e.target.value)}>
              <option value="">Role (optional)</option>
              {ROLE_OPTIONS.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
            </select>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button type="submit" className="btn accent" disabled={adding}>{adding ? "Adding…" : "Add to practice"}</button>
            <span className="mono" style={{ color: tokens.mute, alignSelf: "center", fontSize: 11 }}>
              {me && me.authProvider === "clerk"
                ? "Sends a Clerk invitation and adds them to the practice roster."
                : "Adds them to Cloudflare access + the roster."}
            </span>
          </div>
        </form>
      )}

<div className="card" style={{ overflow: "hidden" }}>
        {data.members.length === 0 && (
          <div style={{ padding: 28, color: tokens.soft }}>No members yet. Add the first one above.</div>
        )}
        {data.members.map((row, i) => (
          <div key={row.userId || `pending:${row.email}`} style={{
            display: "grid",
            gridTemplateColumns: isPhone ? "1fr" : "1.6fr 1fr auto",
            gap: isPhone ? 8 : 16, alignItems: "center",
            padding: isPhone ? "16px 18px" : "16px 22px",
            borderTop: i === 0 ? "none" : `1px solid ${tokens.line}`,
            opacity: row.status === "deactivated" ? 0.62 : 1,
          }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 500, display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                {row.displayName || row.email.split("@")[0]}
                {row.isOwner && <span className="pill">Owner</span>}
                <StatusBadge status={row.status} tokens={tokens} accent={accent} />
              </div>
              <div className="mono" style={{ color: tokens.mute, marginTop: 4, fontSize: 11, overflow: "hidden", textOverflow: "ellipsis" }}>
                {row.email} · last seen {fmtDate(row.lastSeenAt)}
              </div>
              {row.invitation && <div className="mono" style={{ color: row.invitation.status === "failed" ? "#E08A8A" : tokens.mute, marginTop: 3, fontSize: 10 }}>
                Invite {row.invitation.status}{row.invitation.expiresAt ? ` · expires ${fmtDate(row.invitation.expiresAt)}` : ""}
              </div>}
            </div>

<div>
              {row.status === "pending" ? (
                <span style={{ color: tokens.mute, fontSize: 13 }}>{row.role ? ROLE_LABEL[row.role] || row.role : "—"}</span>
              ) : (
                <select
                  value={row.role || ""}
                  disabled={busyEmail === row.email}
                  onChange={(e) => doSetRole(row, e.target.value)}
                  style={{ padding: "8px 10px" }}
                >
                  <option value="">No role</option>
                  {ROLE_OPTIONS.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
                </select>
              )}
            </div>

<div style={{ display: "flex", gap: 8, justifyContent: isPhone ? "flex-start" : "flex-end" }}>
              {row.status === "pending" && <>
                <button className="btn" style={{ padding: "8px 12px", fontSize: 12 }} disabled={busyEmail === row.email} onClick={() => doInvitationAction(row, "resend")}>Resend</button>
                {row.invitation && row.invitation.url && <button className="btn ghost" style={{ padding: "8px 12px", fontSize: 12 }} onClick={() => navigator.clipboard.writeText(row.invitation.url).then(() => onNotice({ kind: "ok", text: "Copied the invitation link." }))}>Copy link</button>}
                <button className="btn ghost" style={{ padding: "8px 12px", fontSize: 12 }} disabled={busyEmail === row.email} onClick={() => doInvitationAction(row, "revoke")}>Revoke</button>
              </>}
              {row.status === "active" && (
                <button className="btn ghost" style={{ padding: "8px 14px", fontSize: 13, color: "#E08A8A" }}
                  disabled={busyEmail === row.email} onClick={() => doDeactivate(row)}>Deactivate</button>
              )}
              {row.status === "deactivated" && (
                <button className="btn" style={{ padding: "8px 14px", fontSize: 13 }}
                  disabled={busyEmail === row.email} onClick={() => doReactivate(row)}>Reactivate</button>
              )}
              {row.status === "active" && !row.isOwner && <button className="btn ghost" style={{ padding: "8px 12px", fontSize: 12 }} disabled={busyEmail === row.email} onClick={() => doTransfer(row)}>Make owner</button>}
              {!row.isOwner && <button className="btn ghost" style={{ padding: "8px 12px", fontSize: 12, color: "#E08A8A" }} disabled={busyEmail === row.email} onClick={() => doRemove(row)}>Remove</button>}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, display: "flex", justifyContent: "flex-end" }}>
        <button className="btn ghost" onClick={doSyncClerk}>Repair Clerk sync</button>
      </div>
    </div>
  );
}

// ─── Practices view (super-admin) ────────────────────────────────────────
function PracticesView({ tokens, accent, isPhone, authProvider, onOpenOrg, onNotice }) {
  const [loading, setLoading] = useState(true);
  const [orgs, setOrgs] = useState([]);
  const [showCreate, setShowCreate] = useState(false);
  const [name, setName] = useState("");
  const [ownerEmail, setOwnerEmail] = useState("");
  const [seats, setSeats] = useState("");
  const [courses, setCourses] = useState(() => [...ALL_COURSE_KEYS_UI]);
  const [creating, setCreating] = useState(false);
  const [resyncing, setResyncing] = useState(false);

const reload = useCallback(async () => {
    setLoading(true);
    const res = await apiGet("/api/admin/orgs");
    if (res.ok && res.data) setOrgs(res.data.orgs || []);
    else onNotice({ kind: "error", text: (res.data && res.data.error) || "Couldn't load practices." });
    setLoading(false);
  }, [onNotice]);

useEffect(() => { reload(); }, [reload]);

if (loading) return <Spinner tokens={tokens} />;

return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginBottom: 18 }}>
        <div>
          <h2 className="display" style={{ fontSize: 28 }}>Practices</h2>
          <div className="mono" style={{ color: tokens.mute, marginTop: 6 }}>{orgs.length} practice{orgs.length === 1 ? "" : "s"}</div>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {authProvider !== "clerk" && (
            <button className="btn ghost" onClick={doResync} disabled={resyncing} title="Repair Redis ↔ Cloudflare drift">
              {resyncing ? "Resyncing…" : "Resync Cloudflare"}
            </button>
          )}
          <button className="btn accent" onClick={() => setShowCreate((s) => !s)}>{showCreate ? "Cancel" : "+ Create practice"}</button>
        </div>
      </div>

{showCreate && (
        <form onSubmit={doCreate} className="card" style={{ padding: 20, marginBottom: 22, display: "grid", gap: 12 }}>
          <div><div className="eyebrow" style={{ color: accent.c }}>New practice</div><p style={{ color: tokens.mute, margin: "6px 0 2px", fontSize: 13 }}>Create its Clerk workspace, set access, and email the owner.</p></div>
          <div style={{ display: "grid", gridTemplateColumns: isPhone ? "1fr" : "1.5fr 1.5fr 0.7fr", gap: 12 }}>
            <input type="text" required placeholder="Practice name" value={name} onChange={(e) => setName(e.target.value)} />
            <input type="email" required placeholder="Owner email" value={ownerEmail} onChange={(e) => setOwnerEmail(e.target.value)} />
            <input type="number" min="1" placeholder="Seats" value={seats} onChange={(e) => setSeats(e.target.value)} />
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>{COURSE_OPTIONS.map((course) => {
            const selected = courses.includes(course.key);
            return <button key={course.key} type="button" className={selected ? "chip active" : "chip"} onClick={() => setCourses((current) => selected ? current.filter((key) => key !== course.key) : [...current, course.key])}>{selected ? "✓ " : ""}{course.label}</button>;
          })}</div>
          <div>
            <button type="submit" className="btn accent" disabled={creating}>{creating ? "Creating…" : "Create & invite owner"}</button>
          </div>
        </form>
      )}

<div className="card" style={{ overflow: "hidden" }}>
        {orgs.length === 0 && <div style={{ padding: 28, color: tokens.soft }}>No practices yet. Create one above.</div>}
        {orgs.map((o, i) => (
          <button key={o.orgId} onClick={() => onOpenOrg(o)} style={{
            width: "100%", textAlign: "left", background: "none", border: "none",
            borderTop: i === 0 ? "none" : `1px solid ${tokens.line}`,
            padding: "18px 22px", cursor: "pointer", color: tokens.text,
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
          }}>
            <div>
              <div className="display" style={{ fontSize: 19 }}>{o.name}</div>
              <div className="mono" style={{ color: tokens.mute, marginTop: 4, fontSize: 11 }}>
                {o.ownerEmail} · {o.memberCount} active · {o.pendingCount || 0} pending{o.seats != null ? ` · ${o.seats} seats` : ""}
              </div>
            </div>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <StatusBadge status={o.provisioningStatus} tokens={tokens} accent={accent} />
              <span style={{ color: accent.c, fontSize: 16 }}>→</span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ─── App ────────────────────────────────────────────────────────────────
function AdminApp({ tokens, accent }) {
  const isPhone = (window.useIsPhone || (() => false))();
  const [phase, setPhase] = useState("loading"); // loading | ready | forbidden | offline
  const [me, setMe] = useState(null);
  const [notice, setNotice] = useState(null);
  // view: { name: "practices" } | { name: "members", orgId?, orgName? }
  const [view, setView] = useState(null);

useEffect(() => {
    let cancelled = false;
    (async () => {
      let res;
      try { res = await fetch("/api/me", { credentials: "same-origin" }); }
      catch (e) { if (!cancelled) setPhase("offline"); return; }

if (res.status === 401 || res.status === 403 || res.status === 404) {
        if (!cancelled) setPhase("forbidden");
        return;
      }
      if (!res.ok) { if (!cancelled) setPhase("offline"); return; }
      const data = await safeJson(res);
      if (!data) { if (!cancelled) setPhase("offline"); return; }
      if (cancelled) return;

const isSuper = !!data.isSuperAdmin;
      const isPracticeAdmin = !!data.isOwner || data.role === "Owner" || data.role === "OfficeManager";
      if (!isSuper && !isPracticeAdmin) { setPhase("forbidden"); setMe(data); return; }

setMe(data);
      setView(isSuper ? { name: "practices" } : { name: "members" });
      setPhase("ready");
    })();
    return () => { cancelled = true; };
  }, []);

const wrap = (children) => (
    <div style={{ background: tokens.bg, minHeight: "100vh" }}>
      <ChairsideHeader product="Admin" tokens={tokens} accent={accent} currentHref="Chairside-Admin.html" />
      <main style={{ maxWidth: 980, margin: "0 auto", padding: isPhone ? "28px 18px 96px" : "44px 28px 120px" }}>
        {children}
      </main>
    </div>
  );

if (phase === "loading") return wrap(<Spinner tokens={tokens} />);

if (phase === "offline") {
    return wrap(
      <div style={{ textAlign: "center", padding: "80px 20px", color: tokens.soft }}>
        <h2 className="display" style={{ fontSize: 30, marginBottom: 12 }}>Admin is unavailable</h2>
        <p>Couldn't reach the server. Open this page through praxia.school while signed in.</p>
      </div>,
    );
  }

if (phase === "forbidden") {
    return wrap(
      <div style={{ textAlign: "center", padding: "80px 20px", color: tokens.soft }}>
        <div className="eyebrow" style={{ color: accent.c, marginBottom: 14 }}>Restricted</div>
        <h2 className="display" style={{ fontSize: 30, marginBottom: 12 }}>You don't have admin access</h2>
        <p>This area is for practice owners, office managers, and platform admins. If that's you, contact your practice owner.</p>
      </div>,
    );
  }

const isSuper = !!(me && me.isSuperAdmin);

return wrap(
    <div className="fade-up">
      <Notice notice={notice} onClose={() => setNotice(null)} tokens={tokens} />

{/* Sub-nav: super-admin gets Practices + (when drilled in) the org's Members */}
      {isSuper && (
        <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
          <button className={"chip" + (view && view.name === "practices" ? " active" : "")}
            onClick={() => setView({ name: "practices" })}>Practices</button>
          {view && view.name === "members" && (
            <button className="chip active">Members · {view.orgName || view.orgId}</button>
          )}
        </div>
      )}

{view && view.name === "practices" && (
        <PracticesView
          tokens={tokens} accent={accent} isPhone={isPhone}
          authProvider={me && me.authProvider}
          onOpenOrg={(o) => setView({ name: "members", orgId: o.orgId, orgName: o.name })}
          onNotice={setNotice}
        />
      )}

{view && view.name === "members" && (
        <div>
          {isSuper && (
            <button className="btn ghost" style={{ marginBottom: 14, padding: "8px 14px", fontSize: 13 }}
              onClick={() => setView({ name: "practices" })}>← All practices</button>
          )}
          <MembersView
            tokens={tokens} accent={accent} isPhone={isPhone} me={me}
            orgId={isSuper ? view.orgId : undefined}
            onNotice={setNotice}
          />
        </div>
      )}
    </div>,
  );
}

Object.assign(window, { AdminRoot, AdminApp });