Nexus/apps/web/src/components/admin/UserEditModal.tsx

import { SystemRole, PermissionKey, type PermissionOverrides } from "@nexus/shared";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";

const ALL_PERMISSION_KEYS = Object.values(PermissionKey);

const PERMISSION_LABELS: Record<string, string> = {
  viewPlanning: "View Planning",
  viewCosts: "View Costs",
  useAssistantAdvancedTools: "Assistant Advanced Tools",
  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",
  viewScores: "View Scores",
};

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

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

type UserEditModalProps = {
  editState: EditState;
  selectedUserName: string;
  editingName: { userId: string; name: string } | null;
  roleDefaultsMap: Record<SystemRole, string[]>;
  isPending: boolean;
  updateRolePending: boolean;
  setPermissionsPending: boolean;
  resetPermissionsPending: boolean;
  updateNamePending: boolean;
  onEditStateChange: (state: EditState) => void;
  onSaveRole: () => void;
  onSavePermissions: () => void;
  onReset: () => void;
  onClose: () => void;
  onEditingNameChange: (state: { userId: string; name: string } | null) => void;
  onSaveName: (userId: string, name: string) => void;
  currentName: string;
};

export function UserEditModal({
  editState,
  selectedUserName,
  editingName,
  roleDefaultsMap,
  isPending,
  updateRolePending,
  setPermissionsPending,
  resetPermissionsPending,
  updateNamePending,
  onEditStateChange,
  onSaveRole,
  onSavePermissions,
  onReset,
  onClose,
  onEditingNameChange,
  onSaveName,
  currentName,
}: UserEditModalProps) {
  function cyclePermission(key: string) {
    const roleDefaults = new Set(roleDefaultsMap[editState.systemRole] ?? []);
    const isRoleDefault = roleDefaults.has(key as PermissionKey);
    const isGranted = editState.granted.has(key);
    const isDenied = editState.denied.has(key);

    const nextGranted = new Set(editState.granted);
    const nextDenied = new Set(editState.denied);

    if (isRoleDefault) {
      if (isDenied) {
        nextDenied.delete(key);
      } else {
        nextDenied.add(key);
        nextGranted.delete(key);
      }
    } else {
      if (isGranted) {
        nextGranted.delete(key);
      } else {
        nextGranted.add(key);
        nextDenied.delete(key);
      }
    }
    onEditStateChange({ ...editState, granted: nextGranted, denied: nextDenied });
  }

  return (
    <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">{selectedUserName}</p>
          </div>
          <button
            type="button"
            onClick={onClose}
            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">
          {/* User Name */}
          <section>
            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
              Display Name
            </h3>
            {editingName?.userId === editState.userId ? (
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={editingName.name}
                  onChange={(e) => onEditingNameChange({ ...editingName, name: e.target.value })}
                  className="flex-1 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"
                  autoFocus
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && editingName.name.trim()) {
                      onSaveName(editingName.userId, editingName.name.trim());
                    }
                    if (e.key === "Escape") onEditingNameChange(null);
                  }}
                />
                <button
                  type="button"
                  onClick={() => onSaveName(editingName.userId, editingName.name.trim())}
                  disabled={!editingName.name.trim() || updateNamePending}
                  className="px-3 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
                >
                  {updateNamePending ? "..." : "Save"}
                </button>
                <button
                  type="button"
                  onClick={() => onEditingNameChange(null)}
                  className="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm"
                >
                  Cancel
                </button>
              </div>
            ) : (
              <div className="flex items-center gap-2">
                <span className="text-sm text-gray-900 dark:text-gray-100">
                  {currentName || "—"}
                </span>
                <button
                  type="button"
                  onClick={() =>
                    onEditingNameChange({ userId: editState.userId, name: currentName })
                  }
                  className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
                >
                  Edit
                </button>
              </div>
            )}
          </section>

          {/* 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) =>
                  onEditStateChange({ ...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={onSaveRole}
                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"
              >
                {updateRolePending ? "Saving…" : "Save Role"}
              </button>
            </div>
          </section>

          {/* Permissions */}
          <section>
            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
              Permissions{" "}
              <InfoTooltip content="Permissions inherited from the role are shown with a filled checkbox. Click to override: grant additional permissions or deny role defaults." />
            </h3>
            <div className="flex gap-1.5 mb-3 text-[11px]">
              <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
                <span className="inline-block w-3 h-3 rounded border border-green-400 bg-green-100 dark:bg-green-900/40" />{" "}
                Role default
              </span>
              <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
                <span className="inline-block w-3 h-3 rounded border border-blue-400 bg-blue-100 dark:bg-blue-900/40" />{" "}
                Extra grant
              </span>
              <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
                <span className="inline-block w-3 h-3 rounded border border-red-400 bg-red-100 dark:bg-red-900/40 relative">
                  <span className="absolute inset-0 flex items-center justify-center text-red-500 text-[9px] leading-none">
                    &times;
                  </span>
                </span>{" "}
                Denied
              </span>
            </div>
            <div className="space-y-1">
              {ALL_PERMISSION_KEYS.map((key) => {
                const roleDefaults = new Set(roleDefaultsMap[editState.systemRole] ?? []);
                const isRoleDefault = roleDefaults.has(key as PermissionKey);
                const isGranted = editState.granted.has(key);
                const isDenied = editState.denied.has(key);

                let state: "default" | "granted" | "denied" | "off";
                if (isDenied) state = "denied";
                else if (isGranted) state = "granted";
                else if (isRoleDefault) state = "default";
                else state = "off";

                const stateStyles = {
                  default:
                    "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800",
                  granted: "bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800",
                  denied: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800",
                  off: "bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-gray-700",
                };

                const checkStyles = {
                  default: "text-green-600 border-green-300 bg-green-100 dark:bg-green-900/40",
                  granted: "text-blue-600 border-blue-300 bg-blue-100 dark:bg-blue-900/40",
                  denied: "text-red-600 border-red-300 bg-red-100 dark:bg-red-900/40",
                  off: "text-gray-400 border-gray-300 dark:border-gray-600",
                };

                return (
                  <button
                    key={key}
                    type="button"
                    onClick={() => cyclePermission(key)}
                    className={`flex items-center gap-2.5 w-full px-3 py-1.5 rounded-lg border text-sm text-left transition-colors ${stateStyles[state]} hover:opacity-80`}
                  >
                    <span
                      className={`flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center ${checkStyles[state]}`}
                    >
                      {state === "default" && (
                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      )}
                      {state === "granted" && (
                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                            clipRule="evenodd"
                          />
                        </svg>
                      )}
                      {state === "denied" && (
                        <span className="text-xs font-bold leading-none">&times;</span>
                      )}
                    </span>
                    <span
                      className={`flex-1 ${state === "denied" ? "line-through text-red-500 dark:text-red-400" : state === "off" ? "text-gray-500 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"}`}
                    >
                      {PERMISSION_LABELS[key] ?? key}
                    </span>
                    {state === "default" && (
                      <span className="text-[10px] text-green-600 dark:text-green-400 font-medium uppercase tracking-wide">
                        Role
                      </span>
                    )}
                    {state === "granted" && (
                      <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium uppercase tracking-wide">
                        Extra
                      </span>
                    )}
                    {state === "denied" && (
                      <span className="text-[10px] text-red-600 dark:text-red-400 font-medium uppercase tracking-wide">
                        Denied
                      </span>
                    )}
                  </button>
                );
              })}
            </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) => onEditStateChange({ ...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={onReset}
            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"
          >
            {resetPermissionsPending ? "Resetting…" : "Reset to Defaults"}
          </button>
          <div className="flex gap-3">
            <button
              type="button"
              onClick={onClose}
              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={onSavePermissions}
              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"
            >
              {setPermissionsPending ? "Saving…" : "Save Permissions"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}