CapaKraken/apps/web/src/components/admin/UsersClient.tsx

"use client";

import { useState } from "react";
import { SystemRole, PermissionKey, type PermissionOverrides } from "@planarchy/shared";
import { trpc } from "~/lib/trpc/client.js";
import { FilterChips } from "~/components/ui/FilterChips.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
import { useTableSort } from "~/hooks/useTableSort.js";
import { useViewPrefs } from "~/hooks/useViewPrefs.js";

const ALL_PERMISSION_KEYS = Object.values(PermissionKey);

const PERMISSION_LABELS: Record<string, string> = {
  viewCosts: "View Costs",
  exportData: "Export Data",
  importData: "Import Data",
  approveVacations: "Approve Vacations",
  manageBlueprints: "Manage Blueprints",
  viewAllResources: "View All Resources",
  manageResources: "Manage Resources",
  manageProjects: "Manage Projects",
  manageAllocations: "Manage Allocations",
  manageRoles: "Manage Roles",
  manageUsers: "Manage Users",
};

const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
  [SystemRole.ADMIN]: "Admin",
  [SystemRole.MANAGER]: "Manager",
  [SystemRole.CONTROLLER]: "Controller",
  [SystemRole.USER]: "User",
  [SystemRole.VIEWER]: "Viewer",
};

const ROLE_BADGE_COLORS: Record<SystemRole, string> = {
  [SystemRole.ADMIN]: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400",
  [SystemRole.MANAGER]: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
  [SystemRole.CONTROLLER]: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
  [SystemRole.USER]: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
  [SystemRole.VIEWER]: "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500",
};

// Lower = more privileged (sort asc = most privileged first)
const ROLE_ORDER: Record<string, number> = {
  ADMIN: 0,
  MANAGER: 1,
  CONTROLLER: 2,
  USER: 3,
  VIEWER: 4,
};

type UserRow = {
  id: string;
  name: string | null;
  email: string;
  systemRole: string;
  createdAt: Date;
};

type EditState = {
  userId: string;
  systemRole: SystemRole;
  granted: Set<string>;
  denied: Set<string>;
  chapterIds: string;
};

type CreateState = {
  name: string;
  email: string;
  password: string;
  systemRole: SystemRole;
};

const EMPTY_CREATE: CreateState = {
  name: "",
  email: "",
  password: "",
  systemRole: SystemRole.USER,
};

export function UsersClient() {
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [editState, setEditState] = useState<EditState | null>(null);
  const [createState, setCreateState] = useState<CreateState | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<SystemRole | "">("");

  const utils = trpc.useUtils();

  const { data: users, isLoading } = trpc.user.list.useQuery(undefined, {
    staleTime: 10_000,
  });

  const { data: effectivePerms } = trpc.user.getEffectivePermissions.useQuery(
    { userId: selectedUserId ?? "" },
    { enabled: !!selectedUserId },
  );

  const updateRoleMutation = trpc.user.updateRole.useMutation({
    onSuccess: async () => {
      await utils.user.list.invalidate();
      await utils.user.getEffectivePermissions.invalidate();
    },
    onError: (err) => setActionError(err.message),
  });

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore TS2589: tRPC infers union type too deeply for nullable overrides schema
  const setPermissionsMutation = trpc.user.setPermissions.useMutation({
    onSuccess: async () => {
      await utils.user.list.invalidate();
      await utils.user.getEffectivePermissions.invalidate();
    },
    onError: (err) => setActionError(err.message),
  });

  const createUserMutation = trpc.user.create.useMutation({
    onSuccess: async () => {
      await utils.user.list.invalidate();
      setCreateState(null);
      setActionError(null);
    },
    onError: (err) => setActionError(err.message),
  });

  const autoLinkMutation = trpc.user.autoLinkAllByEmail.useMutation({
    onSuccess: async () => {
      await utils.user.list.invalidate();
    },
    onError: (err) => setActionError(err.message),
  });

  const resetPermissionsMutation = trpc.user.resetPermissions.useMutation({
    onSuccess: async () => {
      await utils.user.list.invalidate();
      await utils.user.getEffectivePermissions.invalidate();
      if (editState) {
        setEditState({ ...editState, granted: new Set(), denied: new Set(), chapterIds: "" });
      }
    },
    onError: (err) => setActionError(err.message),
  });

  function openEdit(user: UserRow) {
    const role = (user.systemRole as SystemRole) ?? SystemRole.USER;
    setSelectedUserId(user.id);
    setEditState({
      userId: user.id,
      systemRole: role,
      granted: new Set(),
      denied: new Set(),
      chapterIds: "",
    });
    setActionError(null);
  }

  function closeEdit() {
    setSelectedUserId(null);
    setEditState(null);
    setActionError(null);
  }

  function toggleGranted(key: string) {
    if (!editState) return;
    const next = new Set(editState.granted);
    const nextDenied = new Set(editState.denied);
    if (next.has(key)) {
      next.delete(key);
    } else {
      next.add(key);
      nextDenied.delete(key);
    }
    setEditState({ ...editState, granted: next, denied: nextDenied });
  }

  function toggleDenied(key: string) {
    if (!editState) return;
    const next = new Set(editState.denied);
    const nextGranted = new Set(editState.granted);
    if (next.has(key)) {
      next.delete(key);
    } else {
      next.add(key);
      nextGranted.delete(key);
    }
    setEditState({ ...editState, denied: next, granted: nextGranted });
  }

  async function handleSaveRole() {
    if (!editState) return;
    setActionError(null);
    await updateRoleMutation.mutateAsync({ id: editState.userId, systemRole: editState.systemRole });
  }

  async function handleSavePermissions() {
    if (!editState) return;
    setActionError(null);
    const granted = Array.from(editState.granted);
    const denied = Array.from(editState.denied);
    const chapterIds = editState.chapterIds
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean);
    const overrides: PermissionOverrides = {
      ...(granted.length > 0 ? { granted: granted as unknown as PermissionKey[] } : {}),
      ...(denied.length > 0 ? { denied: denied as unknown as PermissionKey[] } : {}),
      ...(chapterIds.length > 0 ? { chapterIds } : {}),
    };
    const hasOverrides = granted.length > 0 || denied.length > 0 || chapterIds.length > 0;
    await setPermissionsMutation.mutateAsync({
      userId: editState.userId,
      overrides: hasOverrides ? overrides : null,
    });
  }

  async function handleReset() {
    if (!editState) return;
    setActionError(null);
    await resetPermissionsMutation.mutateAsync({ userId: editState.userId });
  }

  const allUsers = (users ?? []) as unknown as UserRow[];

  // Client-side filtering
  const filteredUsers = allUsers.filter((u) => {
    if (search) {
      const q = search.toLowerCase();
      if (!(u.name ?? "").toLowerCase().includes(q) && !u.email.toLowerCase().includes(q)) return false;
    }
    if (roleFilter && u.systemRole !== roleFilter) return false;
    return true;
  });

  const usersViewPrefs = useViewPrefs("users");
  const { sorted, sortField, sortDir, toggle } = useTableSort(filteredUsers, {
    initialField: usersViewPrefs.savedSort?.field ?? null,
    initialDir: usersViewPrefs.savedSort?.dir ?? null,
    onSortChange: (field, dir) => {
      usersViewPrefs.setSavedSort(field && dir ? { field, dir } : null);
    },
  });

  function handleSort(field: string) {
    if (field === "systemRole") {
      toggle("systemRole", (u) => ROLE_ORDER[u.systemRole] ?? 99);
    } else {
      toggle(field as keyof UserRow);
    }
  }

  const selectedUser = editState ? allUsers.find((u) => u.id === editState.userId) : null;

  async function handleCreateUser() {
    if (!createState) return;
    setActionError(null);
    await createUserMutation.mutateAsync({
      name: createState.name,
      email: createState.email,
      password: createState.password,
      systemRole: createState.systemRole,
    });
  }

  const isPending =
    updateRoleMutation.isPending ||
    setPermissionsMutation.isPending ||
    resetPermissionsMutation.isPending ||
    createUserMutation.isPending;

  function clearAll() {
    setSearch("");
    setRoleFilter("");
  }

  const chips = [
    ...(search ? [{ label: `Search: "${search}"`, onRemove: () => setSearch("") }] : []),
    ...(roleFilter ? [{ label: `Role: ${SYSTEM_ROLE_LABELS[roleFilter]}`, onRemove: () => setRoleFilter("") }] : []),
  ];

  return (
    <div className="p-6 max-w-5xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">User Management</h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            Manage user roles and permission overrides
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => void autoLinkMutation.mutateAsync().then((r) => {
              setActionError(r.linked > 0 ? null : `No unlinked accounts found (checked ${r.checked})`);
              if (r.linked > 0) setActionError(null);
            })}
            disabled={autoLinkMutation.isPending}
            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
            title="Auto-link user accounts to resources by matching email addresses"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
            {autoLinkMutation.isPending ? "Linking..." : "Auto-link Resources"}
          </button>
          <button
            type="button"
            onClick={() => { setCreateState({ ...EMPTY_CREATE }); setActionError(null); }}
            className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-brand-700 transition-colors"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Create User
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap items-center gap-3 mb-3">
        <input
          type="search"
          placeholder="Search by name or email…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 w-64 bg-white dark:bg-gray-900 dark:text-gray-100"
        />
        <select
          value={roleFilter}
          onChange={(e) => setRoleFilter(e.target.value as SystemRole | "")}
          className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 bg-white dark:bg-gray-900 dark:text-gray-100"
        >
          <option value="">All Roles</option>
          {Object.values(SystemRole).map((role) => (
            <option key={role} value={role}>{SYSTEM_ROLE_LABELS[role]}</option>
          ))}
        </select>
      </div>

      {chips.length > 0 && (
        <div className="mb-3">
          <FilterChips chips={chips} onClearAll={clearAll} />
        </div>
      )}

      {actionError && (
        <div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400 flex items-center justify-between">
          {actionError}
          <button
            type="button"
            onClick={() => setActionError(null)}
            className="text-red-400 hover:text-red-600 text-lg leading-none"
          >
            &times;
          </button>
        </div>
      )}

      {/* User Table */}
      <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="The user's display name. Shown in the UI and linked to a resource record if auto-linked." />
              <SortableColumnHeader label="Email" field="email" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Login email address. Also used to auto-link user accounts to resource records by matching email." />
              <SortableColumnHeader label="Role" field="systemRole" sortField={sortField} sortDir={sortDir} onSort={handleSort} align="center" tooltip="System role determines default access level. ADMIN: full access · MANAGER: manage resources/projects · CONTROLLER: read + export costs · USER: standard access · VIEWER: read-only. Individual permissions can be overridden via the edit dialog." tooltipWidth="w-80" />
              <SortableColumnHeader label="Created" field="createdAt" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Account creation date." />
              <th className="text-right px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">Actions</th>
            </tr>
          </thead>
          <tbody>
            {isLoading && (
              <tr>
                <td colSpan={5} className="text-center py-8 text-gray-400">
                  Loading…
                </td>
              </tr>
            )}
            {!isLoading && sorted.length === 0 && (
              <tr>
                <td colSpan={5} className="text-center py-8 text-gray-400">
                  No users found.
                </td>
              </tr>
            )}
            {sorted.map((user) => (
              <tr
                key={user.id}
                className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
              >
                <td className="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">
                  {user.name ?? <span className="italic text-gray-400">—</span>}
                </td>
                <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{user.email}</td>
                <td className="px-4 py-3 text-center">
                  <span
                    className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                      ROLE_BADGE_COLORS[user.systemRole as SystemRole] ?? ROLE_BADGE_COLORS[SystemRole.USER]
                    }`}
                  >
                    {SYSTEM_ROLE_LABELS[user.systemRole as SystemRole] ?? user.systemRole}
                  </span>
                </td>
                <td className="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
                  {new Date(user.createdAt).toLocaleDateString("en-GB")}
                </td>
                <td className="px-4 py-3 text-right">
                  <button
                    type="button"
                    onClick={() => openEdit(user)}
                    className="text-xs text-brand-600 hover:text-brand-800 font-medium"
                  >
                    Edit
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Create User Modal */}
      {createState && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col">
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                Create User
              </h2>
              <button
                type="button"
                onClick={() => { setCreateState(null); setActionError(null); }}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
              >
                &times;
              </button>
            </div>

            <div className="px-6 py-5 space-y-4">
              {actionError && (
                <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-3 py-2 text-sm text-red-700 dark:text-red-400">
                  {actionError}
                </div>
              )}

              <div>
                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Name <InfoTooltip content="The display name for this user account." />
                </label>
                <input
                  type="text"
                  value={createState.name}
                  onChange={(e) => setCreateState({ ...createState, name: e.target.value })}
                  placeholder="Max Mustermann"
                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                />
              </div>

              <div>
                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Email <InfoTooltip content="Login email address. Also used to auto-link the user to a resource record." />
                </label>
                <input
                  type="email"
                  value={createState.email}
                  onChange={(e) => setCreateState({ ...createState, email: e.target.value })}
                  placeholder="user@example.com"
                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                />
              </div>

              <div>
                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Password <InfoTooltip content="Minimum 8 characters. Stored securely using Argon2 hashing." />
                </label>
                <input
                  type="password"
                  value={createState.password}
                  onChange={(e) => setCreateState({ ...createState, password: e.target.value })}
                  placeholder="Min. 8 characters"
                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                />
              </div>

              <div>
                <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Role <InfoTooltip content="ADMIN: full system access. MANAGER: manage resources, projects, allocations. CONTROLLER: read + export financial data. USER: standard access. VIEWER: read-only." />
                </label>
                <select
                  value={createState.systemRole}
                  onChange={(e) => setCreateState({ ...createState, systemRole: e.target.value as SystemRole })}
                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                >
                  {Object.values(SystemRole).map((role) => (
                    <option key={role} value={role}>{SYSTEM_ROLE_LABELS[role]}</option>
                  ))}
                </select>
              </div>
            </div>

            <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
              <button
                type="button"
                onClick={() => { setCreateState(null); setActionError(null); }}
                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={() => void handleCreateUser()}
                disabled={isPending || !createState.name.trim() || !createState.email.trim() || createState.password.length < 8}
                className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {createUserMutation.isPending ? "Creating..." : "Create User"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Modal */}
      {editState && selectedUser && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-2xl mx-4 flex flex-col max-h-[90vh]">
            {/* Modal Header */}
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
              <div>
                <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  Edit User
                </h2>
                <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                  {selectedUser.name ?? selectedUser.email}
                </p>
              </div>
              <button
                type="button"
                onClick={closeEdit}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
              >
                &times;
              </button>
            </div>

            {/* Modal Body */}
            <div className="overflow-y-auto flex-1 px-6 py-5 space-y-6">
              {/* System Role */}
              <section>
                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                  System Role <InfoTooltip content="The base role determines default permissions. Change the role and click 'Save Role' to apply. Permission overrides below can further customize access." />
                </h3>
                <div className="flex items-center gap-3">
                  <select
                    value={editState.systemRole}
                    onChange={(e) =>
                      setEditState({ ...editState, systemRole: e.target.value as SystemRole })
                    }
                    className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                  >
                    {Object.values(SystemRole).map((role) => (
                      <option key={role} value={role}>
                        {SYSTEM_ROLE_LABELS[role]}
                      </option>
                    ))}
                  </select>
                  <button
                    type="button"
                    onClick={handleSaveRole}
                    disabled={isPending}
                    className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
                  >
                    {updateRoleMutation.isPending ? "Saving…" : "Save Role"}
                  </button>
                </div>
              </section>

              {/* Effective Permissions */}
              {effectivePerms && (
                <section>
                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
                    Effective Permissions <InfoTooltip content="The final set of permissions after combining the role's defaults with any overrides below. Green = granted, strikethrough = denied." />
                  </h3>
                  <div className="flex flex-wrap gap-1.5">
                    {ALL_PERMISSION_KEYS.map((key) => {
                      const isActive = effectivePerms.effectivePermissions.includes(key);
                      return (
                        <span
                          key={key}
                          className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
                            isActive
                              ? "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400"
                              : "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-600 line-through"
                          }`}
                        >
                          {PERMISSION_LABELS[key] ?? key}
                        </span>
                      );
                    })}
                  </div>
                </section>
              )}

              {/* Permission Overrides */}
              <section>
                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                  Permission Overrides <InfoTooltip content="Override specific permissions for this user. Grants add permissions beyond the role default; Denials remove permissions the role would normally have." />
                </h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {/* Additional Grants */}
                  <div>
                    <p className="text-xs font-medium text-green-700 dark:text-green-400 mb-2 uppercase tracking-wide">
                      Additional Grants
                    </p>
                    <div className="space-y-1.5">
                      {ALL_PERMISSION_KEYS.map((key) => (
                        <label
                          key={`grant-${key}`}
                          className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
                        >
                          <input
                            type="checkbox"
                            checked={editState.granted.has(key)}
                            onChange={() => toggleGranted(key)}
                            className="rounded border-gray-300 text-green-600 focus:ring-green-500"
                          />
                          {PERMISSION_LABELS[key] ?? key}
                        </label>
                      ))}
                    </div>
                  </div>

                  {/* Explicit Denials */}
                  <div>
                    <p className="text-xs font-medium text-red-700 dark:text-red-400 mb-2 uppercase tracking-wide">
                      Explicit Denials
                    </p>
                    <div className="space-y-1.5">
                      {ALL_PERMISSION_KEYS.map((key) => (
                        <label
                          key={`deny-${key}`}
                          className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none"
                        >
                          <input
                            type="checkbox"
                            checked={editState.denied.has(key)}
                            onChange={() => toggleDenied(key)}
                            className="rounded border-gray-300 text-red-600 focus:ring-red-500"
                          />
                          {PERMISSION_LABELS[key] ?? key}
                        </label>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Chapter Scope */}
                <div className="mt-4">
                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
                    Chapter Scope (comma-separated IDs, leave blank for all) <InfoTooltip content="Restrict this user's access to specific chapters/disciplines only. Leave blank to allow access to all chapters." />
                  </label>
                  <input
                    type="text"
                    value={editState.chapterIds}
                    onChange={(e) => setEditState({ ...editState, chapterIds: e.target.value })}
                    placeholder="e.g. chapter-1, chapter-2"
                    className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                  />
                </div>
              </section>
            </div>

            {/* Modal Footer */}
            <div className="flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 gap-3">
              <button
                type="button"
                onClick={handleReset}
                disabled={isPending}
                className="px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-200 dark:border-red-700 hover:border-red-300 dark:hover:border-red-600 rounded-lg disabled:opacity-50"
              >
                {resetPermissionsMutation.isPending ? "Resetting…" : "Reset to Defaults"}
              </button>
              <div className="flex gap-3">
                <button
                  type="button"
                  onClick={closeEdit}
                  className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
                >
                  Close
                </button>
                <button
                  type="button"
                  onClick={handleSavePermissions}
                  disabled={isPending}
                  className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
                >
                  {setPermissionsMutation.isPending ? "Saving…" : "Save Permissions"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}