pfm/PostFundManagement.ConsoleUI/src/components/auth/AccountActivationModal.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ShieldAlert,
  RefreshCw,
  LogOut,
  UserCheck,
  CheckCircle2,
  AlertTriangle,
  ArrowLeft,
  Mail,
  Building2,
  Fingerprint,
} from 'lucide-react';
import { BrandLogo } from '../ui/BrandLogo';
import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';

interface AccountActivationModalProps {
  user: AuthUserProfile | null;
  claims: UserClaims;
  sub: string;
  onSync: (force?: boolean) => Promise<{ success: boolean; isUnauthorized?: boolean; errorMessage?: string }>;
  onLogout: () => Promise<void>;
  initialError?: string | null;
}

export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
  user,
  claims,
  sub,
  onSync,
  onLogout,
  initialError,
}) => {
  const navigate = useNavigate();
  const [isSyncing, setIsSyncing] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(initialError || null);
  const [syncAttemptCount, setSyncAttemptCount] = useState(0);

  // Activation process dismisses all other modals so that it is displayed without overlapping.
  // By extension, any active session expiration modal is dismissed and its processes cancelled.
  useEffect(() => {
    cancelSessionExpiration();
    dismissSubordinateModals();
  }, []);

  const displayName =
    user?.name ||
    (claims.name as string) ||
    (claims.preferred_username as string) ||
    'Registered User';

  const displayEmail =
    user?.email ||
    (claims.email as string) ||
    (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
    '';

  const tenant = user?.tenant || (claims.tenant as string) || (claims.org as string) || 'Standard Enterprise';
  const role = user?.role || (claims.role as string) || 'User';

  const handleSyncClick = async () => {
    if (isSyncing) return;
    setIsSyncing(true);
    setErrorMessage(null);

    try {
      const result = await onSync(true);

      if (result.isUnauthorized) {
        // HTTP 401: Routine process of routing user to landing page
        await onLogout();
        navigate('/', { replace: true });
        return;
      }

      if (!result.success) {
        setSyncAttemptCount((prev) => prev + 1);
        setErrorMessage(
          result.errorMessage ||
            'Account is not yet enabled. The administrator has not activated your account in the system directory.'
        );
      }
      // If result.success is true, AuthProvider updates state, and this modal unmounts automatically!
    } catch (err: any) {
      if (err?.response?.status === 401) {
        await onLogout();
        navigate('/', { replace: true });
        return;
      }
      setErrorMessage(
        err?.message ||
          'Account activation check encountered an error. Please confirm with your administrator and try again.'
      );
    } finally {
      setIsSyncing(false);
    }
  };

  const handleSignOut = async () => {
    await onLogout();
    navigate('/', { replace: true });
  };

  const handleNavigateLanding = () => {
    navigate('/');
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="activation-modal-title"
      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-[#060a12]/90 backdrop-blur-md animate-in fade-in duration-200 select-none"
    >
      {/* Non-dismissable Card Container: No X button, no escape dismiss, no backdrop click */}
      <div
        className="relative w-full max-w-xl bg-[#0d1322] border border-amber-500/30 rounded-2xl shadow-2xl shadow-black/80 overflow-hidden flex flex-col text-slate-100"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Amber accent top bar */}
        <div className="h-1.5 w-full bg-gradient-to-r from-amber-500 via-amber-400 to-yellow-500" />

        {/* Modal Header */}
        <div className="p-6 pb-4 border-b border-slate-800/80 bg-[#0f172a]/60">
          <div className="flex items-start justify-between gap-4">
            <div className="flex items-center gap-3.5">
              <div className="relative p-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400">
                <ShieldAlert className="w-6 h-6" />
                <span className="absolute -top-1 -right-1 flex h-2.5 w-2.5">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
                </span>
              </div>
              <div>
                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wider uppercase text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2 py-0.5 rounded-full mb-1">
                  Access Restricted • Awaiting Enablement
                </span>
                <h2 id="activation-modal-title" className="text-lg sm:text-xl font-bold text-white tracking-tight">
                  Account Pending Administrator Activation
                </h2>
              </div>
            </div>

            <BrandLogo size={36} showGlow={false} animateOnHover={false} />
          </div>
        </div>

        {/* Modal Body */}
        <div className="p-6 space-y-5 overflow-y-auto max-h-[70vh]">
          {/* Status notification block */}
          <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-2.5">
            <div className="flex items-center gap-2 text-emerald-400 text-xs font-semibold">
              <CheckCircle2 className="w-4 h-4 shrink-0" />
              <span>Identity Verified & Signed In Successfully</span>
            </div>
            <p className="text-xs text-slate-300 leading-relaxed">
              You are a registered user and have successfully authenticated via Enterprise Single Sign-On.
              However, your account has not yet been enabled in the system directory by a system administrator.
            </p>
            <p className="text-xs text-slate-400 leading-relaxed border-t border-slate-800/80 pt-2 font-medium">
              If your administrator informs you that your account has been activated, please click the{' '}
              <strong className="text-white">Sync Account</strong> button below to refresh your status and unlock the system.
            </p>
          </div>

          {/* User Profile Card */}
          <div className="rounded-xl border border-slate-800 bg-[#090e1a]/60 p-4 space-y-3">
            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider flex items-center justify-between">
              <span>Authenticated User Profile</span>
              <span className="text-amber-400/90 text-[10px] font-mono bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
                Lockout Active
              </span>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
                <UserCheck className="w-4 h-4 text-blue-400 shrink-0" />
                <div className="min-w-0">
                  <span className="text-[10px] text-slate-500 block">Name</span>
                  <span className="font-semibold text-white truncate block">{displayName}</span>
                </div>
              </div>

              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
                <Mail className="w-4 h-4 text-blue-400 shrink-0" />
                <div className="min-w-0">
                  <span className="text-[10px] text-slate-500 block">Email</span>
                  <span className="font-semibold text-slate-200 truncate block">{displayEmail || 'Not specified'}</span>
                </div>
              </div>

              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
                <Building2 className="w-4 h-4 text-indigo-400 shrink-0" />
                <div className="min-w-0">
                  <span className="text-[10px] text-slate-500 block">Tenant / Role</span>
                  <span className="font-semibold text-slate-200 truncate block">
                    {tenant} ({role})
                  </span>
                </div>
              </div>

              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
                <Fingerprint className="w-4 h-4 text-slate-400 shrink-0" />
                <div className="min-w-0">
                  <span className="text-[10px] text-slate-500 block">Subject ID</span>
                  <span className="font-mono text-[11px] text-slate-400 truncate block">{sub || 'SSO-Principal'}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Sync Attempt Feedback / Error Notice */}
          {errorMessage && (
            <div className="rounded-xl border border-rose-500/30 bg-rose-500/10 p-3.5 flex items-start gap-3 animate-in fade-in duration-150">
              <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
              <div className="space-y-1">
                <p className="text-xs font-semibold text-rose-300">Account Not Activated Yet</p>
                <p className="text-xs text-rose-200/90 leading-relaxed">{errorMessage}</p>
                {syncAttemptCount > 0 && (
                  <p className="text-[11px] text-rose-400/80 pt-1">
                    Attempt #{syncAttemptCount} checked at {new Date().toLocaleTimeString()}
                  </p>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Modal Actions */}
        <div className="p-5 border-t border-slate-800/80 bg-[#0a0f1d] flex flex-col sm:flex-row items-center justify-between gap-3">
          <div className="flex items-center gap-2 w-full sm:w-auto">
            <button
              onClick={handleNavigateLanding}
              type="button"
              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-medium text-slate-400 hover:text-slate-200 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-xl transition cursor-pointer"
              title="View public landing page. Entering the console again will display this modal until enabled."
            >
              <ArrowLeft className="w-3.5 h-3.5" />
              <span>Landing Page</span>
            </button>

            <button
              onClick={handleSignOut}
              type="button"
              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-medium text-slate-400 hover:text-rose-400 bg-slate-900 hover:bg-rose-500/10 border border-slate-800 hover:border-rose-500/30 rounded-xl transition cursor-pointer"
              title="Sign out of current SSO session"
            >
              <LogOut className="w-3.5 h-3.5" />
              <span>Sign Out</span>
            </button>
          </div>

          <button
            onClick={handleSyncClick}
            disabled={isSyncing}
            type="button"
            id="activation-sync-btn"
            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none rounded-xl shadow-lg shadow-blue-600/30 transition cursor-pointer"
          >
            <RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin' : ''}`} />
            <span>{isSyncing ? 'Verifying Activation...' : 'Sync Account'}</span>
          </button>
        </div>
      </div>
    </div>
  );
};