// screens_admin.jsx — Interfaz de administración del sistema (API-driven)
const { useState: useStateAdm, useEffect: useEffectAdm, useCallback: useCallbackAdm } = React;

const PERFILES = [
  { id: "reception",        label: "Recepción",         color: "#b45309", firma: false },
  { id: "nurse",            label: "Enfermería",         color: "#0891b2", firma: false },
  { id: "doctor",           label: "Médico tratante",    color: "#2563eb", firma: true },
  { id: "surgeon",          label: "Cirujano",           color: "#be123c", firma: true },
  { id: "anesthesiologist", label: "Anestesiólogo",      color: "#7c3aed", firma: true },
  { id: "lab",              label: "Laboratorio clínico",color: "#15803d", firma: true },
];

const ROL_TONE = { reception: "amber", nurse: "blue", doctor: "blue", surgeon: "red", anesthesiologist: "purple", lab: "green", admin: "neutral" };
const ROL_LABEL = { reception: "Recepción", nurse: "Enfermería", doctor: "Médico tratante", surgeon: "Cirujano", anesthesiologist: "Anestesiólogo", lab: "Laboratorio", admin: "Administrador" };

const ADMIN_NAV = [
  { id: "admin",           label: "Panel general",     icon: "dashboard" },
  { id: "usuarios",        label: "Usuarios",           icon: "patients" },
  { id: "roles",           label: "Roles y permisos",  icon: "shield" },
  { id: "auditoria",       label: "Auditoría",          icon: "folder" },
  { id: "establecimiento", label: "Establecimiento",   icon: "doc" },
];

function AdminDashboard({ onNav, role }) {
  const [usuarios, setUsuarios] = useStateAdm([]);
  const [loadingU, setLoadingU] = useStateAdm(true);

  useEffectAdm(() => {
    window.apiFetch("/api/users")
      .then((data) => setUsuarios(Array.isArray(data) ? data : []))
      .catch(() => setUsuarios([]))
      .finally(() => setLoadingU(false));
  }, []);

  const activos = usuarios.filter((u) => u.is_active && !u.deleted_at && !u.is_blocked).length;
  const bloqueados = usuarios.filter((u) => u.is_blocked && !u.deleted_at).length;
  const eliminados = usuarios.filter((u) => u.deleted_at).length;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      <div>
        <h1 style={{ margin: 0, fontSize: 25, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Panel de administración</h1>
        <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>CIECAV · Centro Integral de Enfermedades Cardiovasculares</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: 14 }}>
        <Stat label="Usuarios activos" value={loadingU ? "…" : activos} icon="patients" tone="blue" sub={`de ${usuarios.length} registrados`} />
        <Stat label="Bloqueados" value={loadingU ? "…" : bloqueados} icon="shield" tone="red" sub="Sin acceso al sistema" />
        <Stat label="Eliminados" value={loadingU ? "…" : eliminados} icon="folder" tone="neutral" sub="Acceso revocado, datos conservados" />
        <Stat label="Total usuarios" value={loadingU ? "…" : usuarios.length} icon="heart" tone="green" sub="Incluyendo todos los estados" />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 22, alignItems: "start" }} className="g-dash-grid">
        <Card title="Actividad por módulo" subtitle="Estadísticas de uso" icon="dashboard">
          <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
            {[["Emergencia (008)", 32, "#dc2626"], ["Evoluciones (005)", 58, "#2563eb"], ["Anestesia (018/019)", 21, "#7c3aed"], ["Consentimientos (024)", 14, "#b45309"], ["Imagenología (012)", 19, "#0d9488"]].map(([k, v, c]) => (
              <div key={k} style={{ display: "flex", alignItems: "center", gap: 13 }}>
                <span style={{ width: 160, fontSize: 13, color: "var(--ink-2)" }}>{k}</span>
                <div style={{ flex: 1, height: 9, borderRadius: 99, background: "var(--line)", overflow: "hidden" }}><div style={{ width: `${v}%`, height: "100%", background: c, borderRadius: 99 }} /></div>
                <span style={{ fontFamily: "var(--mono)", fontWeight: 700, color: "var(--ink)", width: 28, textAlign: "right", fontSize: 13 }}>{v}</span>
              </div>
            ))}
          </div>
        </Card>
        <Card title="Estado del sistema" icon="shield">
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <SysRow label="Servicio HCE" val="Operativo" ok />
            <SysRow label="Firma digital" val="Disponible" ok />
            <SysRow label="Catálogo CIE-10" val="Actualizado" ok />
            <SysRow label="Base de datos D1" val="Operativa" ok />
          </div>
        </Card>
      </div>
      <Card title="Accesos directos" pad={true} icon="dashboard">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(180px,1fr))", gap: 12 }}>
          <AdminShortcut label="Gestionar usuarios" icon="patients" onClick={() => onNav("usuarios")} />
          <AdminShortcut label="Roles y permisos" icon="shield" onClick={() => onNav("roles")} />
          <AdminShortcut label="Ver auditoría" icon="folder" onClick={() => onNav("auditoria")} />
          <AdminShortcut label="Datos del establecimiento" icon="doc" onClick={() => onNav("establecimiento")} />
        </div>
      </Card>
    </div>
  );
}

function SysRow({ label, val, ok }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
      <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{label}</span>
      <span style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: ok ? "var(--ok-ink)" : "var(--ink)" }}>
        {ok && <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--ok)" }} />}{val}
      </span>
    </div>
  );
}

function AdminShortcut({ label, icon, onClick }) {
  return (
    <button onClick={onClick} className="g-formpick" style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 15px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--surface)", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}>
      <span style={{ width: 38, height: 38, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={icon} size={19} /></span>
      <span style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{label}</span>
    </button>
  );
}

function ConfirmModal({ open, title, msg, confirmLabel, onConfirm, onClose, danger }) {
  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} title={title} width={420}
      footer={<><Btn variant="ghost" onClick={onClose}>Cancelar</Btn><Btn onClick={onConfirm} style={danger ? { background: "var(--danger)", color: "#fff" } : {}}>{confirmLabel || "Confirmar"}</Btn></>}>
      <p style={{ margin: 0, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6 }}>{msg}</p>
    </Modal>
  );
}

function UserManagement({ role }) {
  const [q, setQ] = useStateAdm("");
  const [usuarios, setUsuarios] = useStateAdm([]);
  const [loading, setLoading] = useStateAdm(true);
  const [add, setAdd] = useStateAdm(false);
  const [actionTarget, setActionTarget] = useStateAdm(null); // { user, action: 'block'|'unblock'|'delete' }
  const [busy, setBusy] = useStateAdm(false);
  const [feedback, setFeedback] = useStateAdm(null);

  const isSuperadmin = role?.kind === "superadmin";
  const isAdmin = role?.kind === "admin" || isSuperadmin;

  const fetchUsers = useCallbackAdm(() => {
    setLoading(true);
    window.apiFetch("/api/users")
      .then((data) => setUsuarios(Array.isArray(data) ? data : []))
      .catch(() => setUsuarios([]))
      .finally(() => setLoading(false));
  }, []);

  useEffectAdm(() => { fetchUsers(); }, []);

  const norm = (s) => (s || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
  const rows = usuarios.filter((u) => !q || [u.name, u.email, u.role].some((f) => norm(f).includes(norm(q))));

  const execAction = async () => {
    if (!actionTarget) return;
    setBusy(true);
    try {
      const { user: u, action } = actionTarget;
      if (action === "delete") {
        await window.apiFetch(`/api/users/${u.id}`, { method: "DELETE" });
        setFeedback({ ok: true, msg: `Acceso de ${u.name} revocado. Los datos clínicos han sido conservados.` });
      } else if (action === "block") {
        await window.apiFetch(`/api/users/${u.id}/block`, { method: "PATCH" });
        setFeedback({ ok: true, msg: `${u.name} ha sido bloqueado.` });
      } else if (action === "unblock") {
        await window.apiFetch(`/api/users/${u.id}/unblock`, { method: "PATCH" });
        setFeedback({ ok: true, msg: `${u.name} ha sido desbloqueado.` });
      }
      setActionTarget(null);
      fetchUsers();
    } catch (e) {
      setFeedback({ ok: false, msg: e.message });
    } finally {
      setBusy(false);
    }
  };

  const confirmMsg = actionTarget ? {
    delete: `Esta acción revocará el acceso de ${actionTarget.user.name} de forma permanente. Los datos clínicos vinculados a este usuario NO serán eliminados.`,
    block: `Se bloqueará el acceso de ${actionTarget.user.name}. Todas sus sesiones activas serán terminadas. Puede desbloquearse posteriormente.`,
    unblock: `Se restaurará el acceso de ${actionTarget.user.name} al sistema.`,
  }[actionTarget.action] : "";

  const getStatus = (u) => {
    if (u.deleted_at) return { label: "Eliminado", tone: "red", dot: false };
    if (u.is_blocked) return { label: "Bloqueado", tone: "red", dot: true };
    if (!u.is_active) return { label: "Inactivo", tone: "neutral", dot: false };
    return { label: "Activo", tone: "green", dot: true };
  };

  const getInitials = (name) => {
    const parts = (name || "").trim().split(/\s+/).filter((p) => !/^(dr\.?a?\.?|dra\.?|lcdo?\.?|blgo?\.?)$/i.test(p));
    return ((parts[0]?.[0] || "") + (parts[1]?.[0] || "")).toUpperCase() || "??";
  };

  const ROLE_COLORS = { reception: "#b45309", nurse: "#0891b2", doctor: "#2563eb", surgeon: "#be123c", anesthesiologist: "#7c3aed", lab: "#15803d", admin: "#334155" };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Gestión de usuarios</h1>
          <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>{loading ? "Cargando…" : `${usuarios.length} usuario${usuarios.length !== 1 ? "s" : ""} en el sistema`}</p>
        </div>
        {isAdmin && <Btn icon="plus" size="lg" onClick={() => setAdd(true)}>Nuevo usuario</Btn>}
      </div>

      {feedback && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderRadius: 11, background: feedback.ok ? "color-mix(in oklch, var(--ok) 14%, transparent)" : "var(--danger-soft)", color: feedback.ok ? "var(--ok-ink)" : "var(--danger)", fontSize: 13.5, fontWeight: 600 }}>
          <Icon name={feedback.ok ? "check" : "alert"} size={17} />
          {feedback.msg}
          <button onClick={() => setFeedback(null)} style={{ marginLeft: "auto", border: "none", background: "transparent", cursor: "pointer", color: "inherit", fontFamily: "inherit", fontSize: 12 }}>Cerrar</button>
        </div>
      )}

      <div style={{ position: "relative", maxWidth: 380 }}>
        <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)", display: "flex" }}><Icon name="search" size={18} /></span>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar usuario, email, rol…" className="g-input" style={{ ...window.inputStyle, paddingLeft: 40 }} />
      </div>

      {isSuperadmin && (
        <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "10px 14px", borderRadius: 10, background: "color-mix(in oklch, #4f46e5 9%, transparent)", border: "1px solid color-mix(in oklch, #4f46e5 25%, transparent)", fontSize: 12.5, color: "#4338ca" }}>
          <Icon name="shield" size={15} />
          <strong>Modo superadmin:</strong> puedes bloquear, desbloquear y eliminar usuarios. La eliminación es permanente pero conserva todos los datos clínicos.
        </div>
      )}

      <Card pad={false}>
        {loading ? (
          <div style={{ padding: 40, textAlign: "center" }}>
            <span className="g-spin" style={{ width: 24, height: 24, border: "2px solid var(--line-2)", borderTopColor: "var(--accent)", borderRadius: 99, display: "inline-block" }} />
          </div>
        ) : rows.length === 0 ? (
          <div style={{ padding: 32, textAlign: "center", color: "var(--ink-3)", fontSize: 13 }}>
            {q ? `Sin resultados para "${q}".` : "No hay usuarios registrados. Crea el primer usuario para comenzar."}
          </div>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
              <thead>
                <tr>{["Usuario", "Rol", "Especialidad", "Estado", "Registrado", isAdmin ? "Acciones" : ""].map((c) => (
                  <th key={c} style={{ textAlign: "left", padding: "12px 16px", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>{c}</th>
                ))}</tr>
              </thead>
              <tbody>
                {rows.map((u) => {
                  const status = getStatus(u);
                  const col = ROLE_COLORS[u.role] || "#2563eb";
                  const initials = getInitials(u.name);
                  const isDeleted = !!u.deleted_at;
                  return (
                    <tr key={u.id} className="g-trow" style={{ opacity: isDeleted ? .5 : 1 }}>
                      <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                          <Avatar text={initials} color={col} size={36} />
                          <div>
                            <div style={{ fontWeight: 700, color: "var(--ink)" }}>{u.name}</div>
                            <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{u.email}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
                        <Badge tone={ROL_TONE[u.role] || "blue"}>{ROL_LABEL[u.role] || u.role}</Badge>
                      </td>
                      <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
                        {u.specialty || <span style={{ color: "var(--ink-3)" }}>—</span>}
                        {u.license_number && <div style={{ fontSize: 11.5, color: "var(--ink-3)", fontFamily: "var(--mono)" }}>{u.license_number}</div>}
                      </td>
                      <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
                        <Badge tone={status.tone} dot={status.dot}>{status.label}</Badge>
                      </td>
                      <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 12 }}>
                        {u.created_at?.slice(0, 10) || "—"}
                      </td>
                      {isAdmin && (
                        <td style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
                          <div style={{ display: "flex", gap: 6 }}>
                            {!isDeleted && (
                              u.is_blocked ? (
                                <button title="Desbloquear" onClick={() => setActionTarget({ user: u, action: "unblock" })} style={{ border: "1px solid var(--ok)", background: "color-mix(in oklch, var(--ok) 10%, transparent)", color: "var(--ok-ink)", borderRadius: 7, padding: "5px 10px", cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>
                                  <Icon name="check" size={13} /> Desbloquear
                                </button>
                              ) : (
                                <button title="Bloquear acceso" onClick={() => setActionTarget({ user: u, action: "block" })} style={{ border: "1px solid var(--warn)", background: "color-mix(in oklch, var(--warn) 10%, transparent)", color: "var(--warn-ink)", borderRadius: 7, padding: "5px 10px", cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>
                                  <Icon name="shield" size={13} /> Bloquear
                                </button>
                              )
                            )}
                            {isSuperadmin && !isDeleted && (
                              <button title="Eliminar usuario" onClick={() => setActionTarget({ user: u, action: "delete" })} style={{ border: "1px solid var(--danger)", background: "var(--danger-soft)", color: "var(--danger)", borderRadius: 7, padding: "5px 10px", cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>
                                <Icon name="close" size={13} /> Eliminar
                              </button>
                            )}
                            {isDeleted && <span style={{ fontSize: 12, color: "var(--ink-3)", fontStyle: "italic" }}>Eliminado {u.deleted_at?.slice(0, 10)}</span>}
                          </div>
                        </td>
                      )}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>

      <NewUserModal open={add} onClose={() => { setAdd(false); fetchUsers(); }} isSuperadmin={isSuperadmin} />

      <ConfirmModal
        open={!!actionTarget}
        title={actionTarget?.action === "delete" ? "Eliminar usuario" : actionTarget?.action === "block" ? "Bloquear acceso" : "Desbloquear acceso"}
        msg={confirmMsg}
        confirmLabel={busy ? "Procesando…" : actionTarget?.action === "delete" ? "Sí, eliminar" : actionTarget?.action === "block" ? "Sí, bloquear" : "Sí, desbloquear"}
        danger={actionTarget?.action === "delete" || actionTarget?.action === "block"}
        onConfirm={execAction}
        onClose={() => setActionTarget(null)}
      />
    </div>
  );
}

function NewUserModal({ open, onClose, isSuperadmin }) {
  const [form, setForm] = useStateAdm({ name: "", email: "", password: "", role: "doctor", specialty: "", license_number: "" });
  const [loading, setLoading] = useStateAdm(false);
  const [err, setErr] = useStateAdm("");

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = async () => {
    setErr("");
    if (!form.name || !form.email || !form.password || !form.role) { setErr("Todos los campos marcados son obligatorios."); return; }
    if (form.password.length < 8) { setErr("La contraseña debe tener al menos 8 caracteres."); return; }
    setLoading(true);
    try {
      await window.apiFetch("/api/users", {
        method: "POST",
        body: JSON.stringify({ name: form.name, email: form.email, password: form.password, role: form.role, specialty: form.specialty || null, license_number: form.license_number || null }),
      });
      setForm({ name: "", email: "", password: "", role: "doctor", specialty: "", license_number: "" });
      onClose();
    } catch (e) {
      setErr(e.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose} title="Nuevo usuario" width={560}
      footer={<><Btn variant="ghost" onClick={onClose} disabled={loading}>Cancelar</Btn><Btn icon="check" onClick={submit} disabled={loading}>{loading ? "Creando…" : "Crear usuario"}</Btn></>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <Field label="Nombre completo *" full>
          <TextInput value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Dr. Nombre Apellido" />
        </Field>
        <Field label="Usuario *">
          <TextInput value={form.email} onChange={(e) => set("email", e.target.value)} type="text" placeholder="drbarrio o correo@dominio.com" />
        </Field>
        <Field label="Contraseña temporal *">
          <TextInput value={form.password} onChange={(e) => set("password", e.target.value)} type="password" placeholder="Mín. 8 caracteres" />
        </Field>
        <Field label="Rol *">
          <Select value={form.role} onChange={(e) => set("role", e.target.value)}>
            {PERFILES.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
            {isSuperadmin && <option value="admin">Administrador</option>}
          </Select>
        </Field>
        <Field label="Especialidad">
          <TextInput value={form.specialty} onChange={(e) => set("specialty", e.target.value)} placeholder="Cardiología" />
        </Field>
        <Field label="Registro profesional (ACESS)">
          <TextInput value={form.license_number} onChange={(e) => set("license_number", e.target.value)} placeholder="ACESS 0000-00" />
        </Field>
      </div>
      {err && (
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 12, padding: "10px 13px", borderRadius: 10, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 13, fontWeight: 600 }}>
          <Icon name="alert" size={16} /> {err}
        </div>
      )}
    </Modal>
  );
}

// ── Roles y permisos ───────────────────────────────────────────────────────
const PERM_COLS = [
  ["reception", "Recepción"], ["nurse", "Enfermería"], ["doctor", "Médico tratante"],
  ["surgeon", "Cirujano"], ["anesthesiologist", "Anestesiólogo"], ["lab", "Laboratorio"],
];
const PERMISOS = [
  { mod: "Historia clínica única",         grupo: "Clínico",    reception: "V", nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "V", lab: "V" },
  { mod: "Admisión y filiación (001)",     grupo: "Clínico",    reception: "E", nurse: "V", doctor: "V", surgeon: "V", anesthesiologist: "V", lab: "" },
  { mod: "Triage y signos vitales",        grupo: "Clínico",    reception: "",  nurse: "E", doctor: "V", surgeon: "V", anesthesiologist: "V", lab: "" },
  { mod: "Evolución y notas (005)",        grupo: "Clínico",    reception: "",  nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "V", lab: "" },
  { mod: "Protocolo quirúrgico (017)",     grupo: "Clínico",    reception: "",  nurse: "V", doctor: "V", surgeon: "E", anesthesiologist: "V", lab: "" },
  { mod: "Registro anestésico (018/019)",  grupo: "Clínico",    reception: "",  nurse: "V", doctor: "V", surgeon: "V", anesthesiologist: "E", lab: "" },
  { mod: "Consentimiento informado (024)", grupo: "Clínico",    reception: "V", nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "E", lab: "" },
  { mod: "Prescripción y medicación",      grupo: "Clínico",    reception: "",  nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "E", lab: "" },
  { mod: "Laboratorio clínico (012A)",     grupo: "Apoyo",      reception: "",  nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "V", lab: "E" },
  { mod: "Firma digital de documentos",    grupo: "Documental", reception: "",  nurse: "",  doctor: "E", surgeon: "E", anesthesiologist: "E", lab: "E" },
  { mod: "Expediente clínico (PDF)",       grupo: "Documental", reception: "V", nurse: "V", doctor: "E", surgeon: "E", anesthesiologist: "V", lab: "V" },
];
const PERM_STYLE = {
  E: { bg: "color-mix(in oklch, var(--ok) 16%, transparent)", fg: "var(--ok-ink)", t: "Edita" },
  V: { bg: "color-mix(in oklch, var(--accent) 14%, transparent)", fg: "var(--accent-ink)", t: "Consulta" },
  "": { bg: "transparent", fg: "var(--ink-3)", t: "—" },
};

function RolesPermissions() {
  let lastGrupo = null;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Roles y permisos</h1>
          <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>Control de acceso por perfil funcional (RBAC)</p>
        </div>
      </div>
      <Card>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
          {[["E", "Puede editar / registrar"], ["V", "Solo consulta"], ["", "Sin acceso"]].map(([k, l]) => {
            const s = PERM_STYLE[k];
            return (
              <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--ink-2)" }}>
                <span style={{ display: "inline-flex", minWidth: 58, justifyContent: "center", padding: "3px 9px", borderRadius: 7, fontSize: 11, fontWeight: 700, background: s.bg, color: s.fg, border: k === "" ? "1px solid var(--line)" : "none" }}>{s.t}</span>
                {l}
              </span>
            );
          })}
        </div>
      </Card>
      <Card pad={false}>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead><tr>
              <th style={{ textAlign: "left", padding: "13px 18px", fontSize: 11, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", borderBottom: "1px solid var(--line)", position: "sticky", left: 0, background: "var(--surface)", minWidth: 220 }}>Módulo / Acción</th>
              {PERM_COLS.map(([k, l]) => <th key={k} style={{ textAlign: "center", padding: "13px 12px", fontSize: 11, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>{l}</th>)}
            </tr></thead>
            <tbody>
              {PERMISOS.map((p) => {
                const showGrupo = p.grupo !== lastGrupo; lastGrupo = p.grupo;
                return (
                  <React.Fragment key={p.mod}>
                    {showGrupo && (
                      <tr><td colSpan={PERM_COLS.length + 1} style={{ padding: "9px 18px", background: "var(--field)", fontSize: 10.5, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em", borderBottom: "1px solid var(--line)" }}>{p.grupo}</td></tr>
                    )}
                    <tr className="g-trow">
                      <td style={{ padding: "11px 18px", borderBottom: "1px solid var(--line)", fontWeight: 600, color: "var(--ink)", position: "sticky", left: 0, background: "var(--surface)" }}>{p.mod}</td>
                      {PERM_COLS.map(([k]) => {
                        const s = PERM_STYLE[p[k]];
                        return (
                          <td key={k} style={{ padding: "9px 12px", borderBottom: "1px solid var(--line)", textAlign: "center" }}>
                            <span style={{ display: "inline-flex", minWidth: 56, justifyContent: "center", padding: "4px 8px", borderRadius: 7, fontSize: 11, fontWeight: 700, background: s.bg, color: s.fg, border: p[k] === "" ? "1px solid var(--line)" : "none" }}>{s.t}</span>
                          </td>
                        );
                      })}
                    </tr>
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

function Establecimiento() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div><h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Datos del establecimiento</h1><p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>Configuración institucional para documentos MSP</p></div>
      <Card title="Identificación institucional" icon="doc">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Nombre del establecimiento" full><TextInput defaultValue="CIECAV — Centro Integral de Enfermedades Cardiovasculares" /></Field>
          <Field label="RUC"><TextInput defaultValue="1791234567001" /></Field>
          <Field label="Tipo de establecimiento"><Select defaultValue="Cardiología Intervencionista"><option>Cardiología Intervencionista</option><option>Consultorio general</option><option>Centro especializado</option></Select></Field>
          <Field label="Ciudad / Provincia"><TextInput defaultValue="Guayaquil — Guayas" /></Field>
          <Field label="Código MSP"><TextInput defaultValue="09D01-CIECAV" /></Field>
          <Field label="Dirección" full><TextInput defaultValue="Av. Principal y Calle 2, Guayaquil, Ecuador" /></Field>
        </div>
      </Card>
      <Card title="Logo institucional" icon="folder">
        <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
          <div style={{ background: "#fff", borderRadius: 12, padding: "12px 16px", border: "1px solid var(--line)" }}>
            <img src="assets/ciecav-logo.svg" alt="CIECAV" style={{ height: 60, width: "auto", display: "block" }} />
          </div>
          <div style={{ flex: 1, minWidth: 200 }}>
            <p style={{ margin: 0, fontSize: 13, color: "var(--ink-2)" }}>Este logo aparece en el membrete de todos los documentos y expedientes PDF generados.</p>
            <div style={{ marginTop: 10 }}><Btn variant="ghost" size="sm" icon="attach">Reemplazar logo</Btn></div>
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { AdminDashboard, UserManagement, RolesPermissions, Establecimiento, ADMIN_NAV, PERFILES });