import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Shield,
  Key,
  Lock,
  Unlock,
  LogOut,
  Plus,
  Trash2,
  RefreshCw,
  User as UserIcon,
  CheckCircle2,
  AlertTriangle,
  FileText,
  Hash,
} from 'lucide-react';
import { Modal } from '../ui/Modal';
import { useToast } from '../ui/Toast';
import {
  getUser,
  getUserRoles,
  getSystemRoles,
  assignUserRole,
  removeUserRole,
  getUserClaims,
  forceLogoutUser,
  setUserLockout,
  updateUserStatus,
} from '../../services/api';
import { clearCachedUserRbac, fetchAndCacheRoleClaims } from '../../services/roleClaimsCache';
import { HelpTooltip } from '../ui/HelpTooltip';
import { ObfuscatedIdNumber } from '../ui/ObfuscatedIdNumber';
import { decodeIdNumberHex } from '../../utils/hashids';
import { useAuth } from '../../auth/AuthProvider';
import { User, Role, Claim, ActivityStatus } from '../../types';
import { formatDate, getActivityStatusBadge, getUserRoleBadge } from '../../lib/formatters';
import { useRbac, ROLE_CLAIM_DEFINITIONS } from '../../auth/rbac';

interface UserSecurityModalProps {
  user: User | null;
  isOpen: boolean;
  onClose: () => void;
}

export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
  user,
  isOpen,
  onClose,
}) => {
  const queryClient = useQueryClient();
  const { success, error: toastError } = useToast();
  const { user: currentAuthUser } = useAuth();
  const { canApprove, canAdd, canView, canAccess, isUnrestricted } = useRbac();
  const hasTenantSelfHelpAccess = canAccess('tenant_self_service') || canView('tenant_self_service');

  const userId = user?.id || '';
  const isSelf =
    Boolean(currentAuthUser?.id && userId && String(currentAuthUser.id).toLowerCase() === String(userId).toLowerCase()) ||
    Boolean(currentAuthUser?.email && user?.email && currentAuthUser.email.toLowerCase() === user.email.toLowerCase());

  const canManageRolesAndClaims =
    canApprove('settings_users') ||
    canApprove('tenant_management') ||
    canApprove('tenant_self_service') ||
    isUnrestricted;
  const canManageSessions =
    canApprove('settings_users') ||
    canApprove('tenant_management') ||
    hasTenantSelfHelpAccess ||
    isUnrestricted;
  const canChangeStatus =
    !isSelf &&
    (canAdd('settings_users') ||
      canAdd('tenant_management') ||
      canAdd('tenant_self_service') ||
      canApprove('settings_users') ||
      isUnrestricted);

  const [activeTab, setActiveTab] = useState<'overview' | 'roles' | 'claims' | 'sessions'>('overview');

  const [selectedRoleToAdd, setSelectedRoleToAdd] = useState('');

  // 1. Fetch fresh user details
  const { data: freshUser, isLoading: loadingUser, refetch: refetchUser } = useQuery<User | null>({
    queryKey: ['user-detail', userId],
    queryFn: () => (userId ? getUser(userId) : null),
    enabled: isOpen && !!userId,
  });

  // 2. Fetch assigned user roles
  const { data: userRoles = [], isLoading: loadingUserRoles, refetch: refetchUserRoles } = useQuery<Role[]>({
    queryKey: ['user-roles', userId],
    queryFn: () => (userId ? getUserRoles(userId) : []),
    enabled: isOpen && !!userId,
  });

  // 3. Fetch system roles directory
  const { data: systemRoles = [], isLoading: loadingSystemRoles } = useQuery<Role[]>({
    queryKey: ['system-roles'],
    queryFn: getSystemRoles,
    enabled: isOpen,
  });

  // Effective role derivation for hooks (Single-role policy)
  const rawRoleValue = freshUser?.role || user?.role;
  const userRoleStr = rawRoleValue != null ? String(rawRoleValue).trim() : '';

  const assignedRole = React.useMemo(() => {
    if (Array.isArray(userRoles) && userRoles.length > 0) {
      return userRoles[0];
    }
    if (userRoleStr && Array.isArray(systemRoles)) {
      const match = systemRoles.find(
        (r) =>
          r &&
          ((r.name && r.name.toLowerCase() === userRoleStr.toLowerCase()) ||
            String(r.id) === userRoleStr)
      );
      if (match) return match;
      return { id: userRoleStr, name: userRoleStr } as Role;
    }
    return null;
  }, [userRoles, userRoleStr, systemRoles]);

  const assignedRoleId = assignedRole?.id || assignedRole?.Id || '';
  const assignedRoleName = assignedRole?.name || assignedRole?.Name || '';

  // 4. Fetch claims derived from the user's role by hitting the endpoint
  const {
    data: roleClaims = [],
    isLoading: loadingRoleClaims,
    refetch: refetchRoleClaims,
  } = useQuery<Claim[]>({
    queryKey: ['role-claims-detail', assignedRoleId, assignedRoleName],
    queryFn: async () => {
      if (!assignedRoleId && !assignedRoleName) return [];
      return await fetchAndCacheRoleClaims(String(assignedRoleId), assignedRoleName, true);
    },
    enabled: isOpen && (!!assignedRoleId || !!assignedRoleName),
  });

  // 5. Fetch direct user claims if any
  const {
    data: directClaims = [],
    isLoading: loadingDirectClaims,
    refetch: refetchDirectClaims,
  } = useQuery<Claim[]>({
    queryKey: ['user-direct-claims', userId],
    queryFn: () => (userId ? getUserClaims(userId) : []),
    enabled: isOpen && !!userId,
  });

  // Combined claims with metadata
  const userEffectiveClaims = React.useMemo(() => {
    const map = new Map<string, Claim & { description?: string; label?: string; source: string }>();

    // 1. Role claims from endpoint
    if (Array.isArray(roleClaims)) {
      roleClaims.forEach((c) => {
        if (!c) return;
        const type = (c.claimType || c.type || '').trim();
        if (!type) return;
        const def = ROLE_CLAIM_DEFINITIONS.find((d) => d.claim.toLowerCase() === type.toLowerCase());
        map.set(type.toLowerCase(), {
          ...c,
          claimType: type,
          claimValue: c.claimValue || c.value || 'all',
          label: def?.label || type,
          description: def?.description || 'Security claim granted via role membership',
          source: assignedRoleName ? `Role: ${assignedRoleName}` : 'Role Policy',
        });
      });
    }

    // 2. Direct user claims if any
    if (Array.isArray(directClaims)) {
      directClaims.forEach((c) => {
        if (!c) return;
        const type = (c.claimType || c.type || '').trim();
        if (!type) return;
        if (!map.has(type.toLowerCase())) {
          const def = ROLE_CLAIM_DEFINITIONS.find((d) => d.claim.toLowerCase() === type.toLowerCase());
          map.set(type.toLowerCase(), {
            ...c,
            claimType: type,
            claimValue: c.claimValue || c.value || 'all',
            label: def?.label || type,
            description: def?.description || 'Direct user account claim',
            source: 'Direct User Claim',
          });
        }
      });
    }

    return Array.from(map.values());
  }, [roleClaims, directClaims, assignedRoleName]);

  // Role Mutations (Strictly single-role per user)
  const assignRoleMutation = useMutation({
    mutationFn: (roleId: string) => {
      if ((Array.isArray(userRoles) ? userRoles : []).length >= 1) {
        throw new Error('Single-role policy: This user already has an assigned role. Please remove the existing role before assigning a new one.');
      }
      const selectedRole = (Array.isArray(systemRoles) ? systemRoles : []).find(
        (r) => r && (String(r.id) === String(roleId) || String(r.Id) === String(roleId))
      );
      const roleName = selectedRole?.name || selectedRole?.Name || '';
      if (selectedRole && (roleName.toLowerCase() === 'admin' || String(selectedRole.id) === '1') && hasTenantSelfHelpAccess) {
        throw new Error('Security policy: Users with tenant self-help access cannot assign Admin roles.');
      }
      return assignUserRole(userId, roleId);
    },
    onSuccess: () => {
      clearCachedUserRbac(userId);
      success('Role Assigned', 'Role assigned successfully.');
      refetchUserRoles();
      refetchUser();
      refetchRoleClaims();
      queryClient.invalidateQueries({ queryKey: ['users'] });
      setSelectedRoleToAdd('');
    },
    onError: (err: unknown) => toastError('Role Assignment Failed', err),
  });

  const removeRoleMutation = useMutation({
    mutationFn: (roleId: string) => removeUserRole(userId, roleId),
    onSuccess: () => {
      clearCachedUserRbac(userId);
      success('Role Removed', 'Role revoked from user.');
      refetchUserRoles();
      refetchUser();
      refetchRoleClaims();
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
    onError: (err: unknown) => toastError('Role Removal Failed', err),
  });

  // Session & Lockout Mutations
  const logoutMutation = useMutation({
    mutationFn: () => forceLogoutUser(userId),
    onSuccess: () => success('Session Terminated', 'Target user session revoked. Re-authentication required.'),
    onError: (err: unknown) => toastError('Logout Failed', err),
  });

  const lockUserMutation = useMutation({
    mutationFn: () => setUserLockout(userId, true),
    onSuccess: () => {
      success('Account Locked', 'User account lockout enabled (disable = true).');
      refetchUser();
      queryClient.invalidateQueries({ queryKey: ['users'] });
      queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
    },
    onError: (err: unknown) => toastError('Lock User Failed', err),
  });

  const unlockUserMutation = useMutation({
    mutationFn: () => setUserLockout(userId, false),
    onSuccess: () => {
      success('Account Unlocked', 'User account lockout disabled (disable = false).');
      refetchUser();
      queryClient.invalidateQueries({ queryKey: ['users'] });
      queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
    },
    onError: (err: unknown) => toastError('Unlock User Failed', err),
  });

  const statusMutation = useMutation({
    mutationFn: (newStatus: ActivityStatus) => {
      if (isSelf) {
        throw new Error('Maker-Checker Violation: You cannot alter your own account activity status.');
      }
      return updateUserStatus(userId, newStatus);
    },
    onSuccess: () => {
      success('Status Updated', 'User activity status changed.');
      refetchUser();
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
    onError: (err: unknown) => toastError('Status Update Failed', err),
  });

  const availableRoles = React.useMemo(() => {
    return (Array.isArray(systemRoles) ? systemRoles : []).filter((r) => {
      if (!r) return false;
      const rId = r.id || r.Id;
      const rName = r.name || r.Name || '';
      if (hasTenantSelfHelpAccess && (rName.toLowerCase() === 'admin' || String(rId) === '1')) {
        return false;
      }
      return true;
    });
  }, [systemRoles, hasTenantSelfHelpAccess]);

  if (!isOpen || !user) return null;

  const effectiveUser: User = freshUser || user;
  const decodedId = effectiveUser.idNumber ? decodeIdNumberHex(effectiveUser.idNumber) : null;

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={`User Security: ${effectiveUser.email || effectiveUser.id}`}
      subtitle="Manage account status, role assignment, permissions, and active sessions."
    >
      <div className="space-y-4 text-xs">
        {/* Navigation Tabs */}
        <div className="flex gap-1.5 border-b border-slate-800 pb-2">
          <button
            type="button"
            onClick={() => setActiveTab('overview')}
            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
              activeTab === 'overview'
                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            Profile &amp; Status
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('roles')}
            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'roles'
                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Shield className="w-3.5 h-3.5" />
            <span>Role ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('claims')}
            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'claims'
                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Key className="w-3.5 h-3.5" />
            <span>Claims ({userEffectiveClaims.length})</span>
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('sessions')}
            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'sessions'
                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Lock className="w-3.5 h-3.5" />
            <span>Security &amp; Sessions</span>
          </button>
        </div>

        {/* TAB 1: Overview & Profile */}
        {activeTab === 'overview' && (
          <div className="space-y-3">
            <div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-2.5">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <span className="text-slate-400 font-semibold block text-[11px] uppercase">Email:</span>
                  <span className="text-white font-medium">{effectiveUser.email || '—'}</span>
                </div>
                <div>
                  <span className="text-slate-400 font-semibold block text-[11px] uppercase">User UUID:</span>
                  <span className="font-mono text-slate-300 text-[11px] break-all">{effectiveUser.id}</span>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 border-t border-slate-800/80 pt-2">
                <div>
                  <span className="text-slate-400 font-semibold block text-[11px] uppercase">Id Number:</span>
                  <div className="flex items-center gap-2 mt-0.5">
                    <ObfuscatedIdNumber idNumber={effectiveUser.idNumber} />
                    {decodedId && decodedId !== effectiveUser.idNumber && (
                      <div className="flex items-center gap-1 text-[10px] text-blue-400 font-mono">
                        <span>(Decoded:</span>
                        <ObfuscatedIdNumber idNumber={decodedId} />
                        <span>)</span>
                      </div>
                    )}
                  </div>
                </div>
                <div>
                  <span className="text-slate-400 font-semibold block text-[11px] uppercase">Last Login:</span>
                  <span className="font-mono text-slate-300">
                    {effectiveUser.lastLoginAt ? formatDate(effectiveUser.lastLoginAt) : 'Never'}
                  </span>
                </div>
              </div>

              <div className="border-t border-slate-800/80 pt-2 flex items-center justify-between">
                <div>
                  <span className="text-slate-400 font-semibold block text-[11px] uppercase mb-0.5">
                    Account Status:
                  </span>
                  <span
                    className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border ${
                      (getActivityStatusBadge(effectiveUser?.status) || {}).className || 'bg-slate-800 text-slate-300'
                    }`}
                  >
                    {(getActivityStatusBadge(effectiveUser?.status) || {}).label || 'Active'}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  {isSelf ? (
                    <span
                      className="px-2.5 py-1 text-[11px] font-semibold text-slate-400 bg-slate-900 border border-slate-800 rounded-lg"
                      title="Maker-Checker policy: Administrators cannot change their own account activity status"
                    >
                      Self-Account (Protected)
                    </span>
                  ) : effectiveUser?.status === ActivityStatus.Active ? (
                    <button
                      type="button"
                      onClick={() => statusMutation.mutate(ActivityStatus.Inactive)}
                      disabled={statusMutation.isPending || !canChangeStatus}
                      className="px-2.5 py-1 text-xs font-semibold text-amber-400 bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/20 rounded-lg transition disabled:opacity-50 cursor-pointer"
                    >
                      Suspend User
                    </button>
                  ) : (
                    <button
                      type="button"
                      onClick={() => statusMutation.mutate(ActivityStatus.Active)}
                      disabled={statusMutation.isPending || !canChangeStatus}
                      className="px-2.5 py-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-lg transition disabled:opacity-50 cursor-pointer"
                    >
                      Activate User
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* TAB 2: Roles (Single-Role Policy) */}
        {activeTab === 'roles' && (
          <div className="space-y-3">
            {/* If user already has a role, enforce single-role policy */}
            {(Array.isArray(userRoles) ? userRoles : []).length > 0 ? (
              <div className="p-3 bg-slate-900/80 rounded-xl border border-slate-800 flex items-center justify-between gap-3">
                <div className="flex items-center gap-2 min-w-0">
                  <Shield className="w-4 h-4 text-blue-400 shrink-0" />
                  <div className="min-w-0">
                    <span className="font-semibold text-white block">Active Assigned Role (1 of 1 Max)</span>
                    <p className="text-[11px] text-slate-400">
                      The system strictly enforces one role per user. To assign a different role, remove the current role first.
                    </p>
                  </div>
                </div>
                <span className="text-[10px] font-mono text-emerald-400 bg-emerald-500/10 border border-emerald-500/25 px-2 py-0.5 rounded-full shrink-0 font-semibold">
                  Role Assigned
                </span>
              </div>
            ) : (
              /* Add Role selector when user has no role */
              <div className="space-y-1.5">
                <label className="block text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                  Assign System Role (1 Role Max)
                </label>
                <div className="flex items-center gap-2">
                  <select
                    value={selectedRoleToAdd}
                    onChange={(e) => setSelectedRoleToAdd(e.target.value)}
                    disabled={loadingSystemRoles || availableRoles.length === 0 || !canManageRolesAndClaims || assignRoleMutation.isPending}
                    className="flex-1 bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-white focus:outline-none focus:border-blue-500 disabled:opacity-50 text-xs"
                  >
                    <option value="">
                      {availableRoles.length === 0 ? 'No available roles' : 'Select role to assign...'}
                    </option>
                    {availableRoles.map((r) => {
                      const roleOptId = r?.id || r?.Id || String(r);
                      const roleOptName = r?.name || r?.Name || String(r);
                      return (
                        <option key={roleOptId} value={roleOptId}>
                          {roleOptName}
                        </option>
                      );
                    })}
                  </select>
                  <button
                    type="button"
                    onClick={() => selectedRoleToAdd && assignRoleMutation.mutate(selectedRoleToAdd)}
                    disabled={!selectedRoleToAdd || assignRoleMutation.isPending || !canManageRolesAndClaims}
                    className="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold transition disabled:opacity-50 cursor-pointer shrink-0 text-xs shadow-md shadow-blue-600/20"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>{assignRoleMutation.isPending ? 'Assigning...' : 'Assign Role'}</span>
                  </button>
                </div>
              </div>
            )}

            {/* List of currently assigned roles */}
            <div className="bg-slate-900/60 rounded-xl border border-slate-800 divide-y divide-slate-800/80">
              {loadingUserRoles ? (
                <div className="p-6 text-center text-slate-400 flex flex-col items-center gap-2">
                  <RefreshCw className="w-5 h-5 animate-spin text-blue-400" />
                  <span>Loading assigned role...</span>
                </div>
              ) : (Array.isArray(userRoles) ? userRoles : []).length === 0 ? (
                <div className="p-6 text-center text-slate-500 flex flex-col items-center gap-2">
                  <Shield className="w-7 h-7 text-slate-600 mb-0.5" />
                  <p className="font-semibold text-slate-300">No role assigned to this user.</p>
                  <p className="text-[11px] text-slate-500">Select a role above to assign it. Users must have exactly one role.</p>
                </div>
              ) : (
                (Array.isArray(userRoles) ? userRoles : []).map((role) => {
                  if (!role) return null;
                  const roleId = role.id || role.Id || String(role);
                  const roleName = role.name || role.Name || String(role);
                  return (
                    <div key={roleId} className="p-3.5 flex items-center justify-between gap-3">
                      <div className="min-w-0">
                        <div className="text-white font-semibold flex items-center gap-2">
                          <Shield className="w-4 h-4 text-blue-400 shrink-0" />
                          <span className="text-sm">{roleName}</span>
                          <span className="text-[10px] text-blue-400 bg-blue-500/10 border border-blue-500/20 px-2 py-0.5 rounded font-mono font-medium">
                            Active
                          </span>
                        </div>
                        <div className="text-[10px] text-slate-400 font-mono mt-1">Role ID: {roleId}</div>
                      </div>
                      <button
                        type="button"
                        onClick={() => removeRoleMutation.mutate(roleId)}
                        disabled={removeRoleMutation.isPending || !canManageRolesAndClaims}
                        className="p-2 text-rose-400 hover:text-white hover:bg-rose-500/20 border border-transparent hover:border-rose-500/30 rounded-xl transition disabled:opacity-50 cursor-pointer shrink-0"
                        title="Remove Role"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  );
                })
              )}
            </div>
          </div>
        )}

        {/* TAB 3: Claims (Read-Only Inherited from Role) */}
        {activeTab === 'claims' && (
          <div className="space-y-3">
            {/* Informational Policy Banner */}
            <div className="p-3 bg-blue-500/10 rounded-xl border border-blue-500/20 text-xs flex items-center justify-between gap-3">
              <div className="flex items-center gap-2.5 min-w-0">
                <CheckCircle2 className="w-4 h-4 text-blue-400 shrink-0" />
                <div className="min-w-0">
                  <span className="font-semibold text-white block">Role-Derived Security Claims</span>
                  <p className="text-[11px] text-slate-400">
                    {assignedRoleName ? (
                      <>Claims are inherited directly from the assigned role (<strong className="text-blue-300">{assignedRoleName}</strong>). They cannot be manually added or removed at the individual user level.</>
                    ) : (
                      <>Assign a role on the Roles tab to grant security claims to this user.</>
                    )}
                  </p>
                </div>
              </div>
              <span className="text-[10px] font-mono text-blue-400 bg-blue-500/20 px-2 py-0.5 rounded border border-blue-500/30 shrink-0 font-semibold">
                Read-Only
              </span>
            </div>

            {/* Claims list */}
            <div className="bg-slate-900/60 rounded-xl border border-slate-800 divide-y divide-slate-800/80">
              {loadingRoleClaims || loadingDirectClaims ? (
                <div className="p-8 text-center text-slate-400 flex flex-col items-center gap-2">
                  <RefreshCw className="w-6 h-6 animate-spin text-blue-400" />
                  <span>Loading security claims from role endpoint...</span>
                </div>
              ) : userEffectiveClaims.length === 0 ? (
                <div className="p-8 text-center text-slate-500 flex flex-col items-center gap-2">
                  <Key className="w-8 h-8 text-slate-600 mb-1" />
                  <p className="font-semibold text-slate-300">No active claims found for user.</p>
                  <p className="text-[11px] text-slate-500 max-w-sm">
                    {assignedRoleName
                      ? `The assigned role (${assignedRoleName}) does not contain any configured permission claims.`
                      : 'Assign a role to this user on the Roles tab to establish functional permissions.'}
                  </p>
                </div>
              ) : (
                userEffectiveClaims.map((claim, idx) => {
                  const claimType = claim.claimType || claim.type || 'Custom Claim';
                  const claimVal = claim.claimValue ?? claim.value ?? 'all';
                  return (
                    <div key={idx} className="p-3.5 flex items-center justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="text-white font-medium flex items-center gap-2 flex-wrap">
                          <Key className="w-3.5 h-3.5 text-amber-400 shrink-0" />
                          <span className="font-semibold text-xs text-white">{claim.label || claimType}</span>
                          <span className="text-[10px] font-mono text-slate-400 bg-slate-800 px-1.5 py-0.2 rounded border border-slate-700/60">
                            {claimType}
                          </span>
                        </div>
                        {claim.description && (
                          <p className="text-[11px] text-slate-400 mt-0.5 leading-relaxed">
                            {claim.description}
                          </p>
                        )}
                      </div>
                      <div className="flex items-center gap-2 shrink-0">
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-mono">
                          Value: {claimVal}
                        </span>
                        <span className="text-[10px] text-slate-500 hidden sm:inline">
                          {claim.source}
                        </span>
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </div>
        )}

        {/* TAB 4: Sessions & Security Interventions */}
        {activeTab === 'sessions' && (
          <div className="space-y-3">
            <div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-4">
              {/* Force Logout Action */}
              <div className="flex items-center justify-between border-b border-slate-800/80 pb-3 gap-3">
                <div>
                  <h4 className="text-white font-semibold flex items-center gap-1.5">
                    <LogOut className="w-4 h-4 text-amber-400" />
                    <span>Revoke Active User Session</span>
                  </h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">
                    Immediately invalidates active JWT tokens and logs the user out.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => logoutMutation.mutate()}
                  disabled={logoutMutation.isPending || !canManageSessions}
                  className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50 shrink-0"
                >
                  {logoutMutation.isPending ? 'Revoking...' : 'Force Logout'}
                </button>
              </div>

              {/* Lock / Unlock Account */}
              <div className="flex items-center justify-between gap-3">
                <div>
                  <h4 className="text-white font-semibold flex items-center gap-1.5">
                    <Lock className="w-4 h-4 text-rose-400" />
                    <span>Account Lockout</span>
                  </h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">
                    Control tenant login authorization for this account.
                  </p>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <button
                    type="button"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      lockUserMutation.mutate();
                    }}
                    disabled={lockUserMutation.isPending || unlockUserMutation.isPending || !canManageSessions}
                    className="px-3 py-1.5 bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
                  >
                    {lockUserMutation.isPending ? 'Locking...' : 'Lock User'}
                  </button>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      unlockUserMutation.mutate();
                    }}
                    disabled={unlockUserMutation.isPending || lockUserMutation.isPending || !canManageSessions}
                    className="px-3 py-1.5 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
                  >
                    {unlockUserMutation.isPending ? 'Unlocking...' : 'Unlock User'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Modal Footer */}
        <div className="pt-2 border-t border-slate-800 flex justify-end">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 text-xs font-semibold text-white bg-slate-800 hover:bg-slate-700 rounded-xl transition cursor-pointer"
          >
            Close
          </button>
        </div>
      </div>
    </Modal>
  );
};