import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Shield } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { useEffect, useState } from 'react';

export function MFARequiredAlert() {
  const navigate = useNavigate();
  const { checkAalStepUp } = useAuth();
  const [needsVerification, setNeedsVerification] = useState(false);

  useEffect(() => {
    checkAalStepUp().then(result => {
      setNeedsVerification(result.needsStepUp);
    });
  }, [checkAalStepUp]);

  const handleAction = () => {
    if (needsVerification) {
      // User has MFA enrolled but needs to verify
      sessionStorage.setItem('mfa_step_up_required', 'true');
      navigate('/auth/mfa-step-up');
    } else {
      // User needs to enroll in MFA
      navigate('/settings?tab=security');
    }
  };

  return (
    <Alert variant="destructive" className="my-4">
      <Shield className="h-4 w-4" />
      <AlertTitle>Two-Factor Authentication Required</AlertTitle>
      <AlertDescription className="mt-2 space-y-3">
        <p>
          {needsVerification 
            ? 'Please verify your identity with two-factor authentication to access this area.'
            : 'Your role requires two-factor authentication to access this area.'}
        </p>
        <Button 
          onClick={handleAction}
          size="sm"
        >
          {needsVerification ? 'Verify Now' : 'Set up MFA'}
        </Button>
      </AlertDescription>
    </Alert>
  );
}