maternal-app/maternal-web/components/auth/MFAVerificationDialog.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  Typography,
  Alert,
  CircularProgress,
  Box,
  Link as MuiLink,
} from '@mui/material';
import { Security } from '@mui/icons-material';
import axios from 'axios';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3020';

interface MFAVerificationDialogProps {
  open: boolean;
  userId: string;
  mfaMethod: 'totp' | 'email';
  onVerified: (tokens: { accessToken: string; refreshToken: string }, user: any) => void;
  onCancel: () => void;
}

export function MFAVerificationDialog({
  open,
  userId,
  mfaMethod,
  onVerified,
  onCancel,
}: MFAVerificationDialogProps) {
  const [verificationCode, setVerificationCode] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [isVerifying, setIsVerifying] = useState(false);
  const [isSendingCode, setIsSendingCode] = useState(false);
  const [codeSent, setCodeSent] = useState(false);

  // Auto-send email code when dialog opens
  useEffect(() => {
    if (open && mfaMethod === 'email' && !codeSent) {
      sendEmailCode();
    }
  }, [open, mfaMethod, codeSent]);

  const sendEmailCode = async () => {
    try {
      setIsSendingCode(true);
      setError(null);
      await axios.post(`${API_BASE_URL}/api/v1/auth/mfa/email/send-code`, {
        userId,
      });
      setCodeSent(true);
    } catch (err: any) {
      console.error('Failed to send email code:', err);
      setError(err.response?.data?.message || 'Failed to send verification code');
    } finally {
      setIsSendingCode(false);
    }
  };

  const handleVerify = async () => {
    if (!verificationCode || verificationCode.length < 6) {
      setError('Please enter a valid verification code');
      return;
    }

    try {
      setIsVerifying(true);
      setError(null);

      const response = await axios.post(`${API_BASE_URL}/api/v1/auth/mfa/verify`, {
        userId,
        code: verificationCode,
      });

      if (response.data.success) {
        // Get tokens after successful MFA verification
        // Note: Backend should return tokens after MFA verification
        // For now, we'll assume success and let the parent handle it
        onVerified(response.data.tokens, response.data.user);
      }
    } catch (err: any) {
      console.error('Failed to verify MFA code:', err);
      setError(err.response?.data?.message || 'Invalid verification code');
    } finally {
      setIsVerifying(false);
    }
  };

  const handleResendCode = async () => {
    setCodeSent(false);
    setVerificationCode('');
    setError(null);
    await sendEmailCode();
  };

  const handleCancel = () => {
    setVerificationCode('');
    setError(null);
    setCodeSent(false);
    onCancel();
  };

  return (
    <Dialog
      open={open}
      onClose={handleCancel}
      maxWidth="sm"
      fullWidth
      aria-labelledby="mfa-dialog-title"
      aria-describedby="mfa-dialog-description"
    >
      <DialogTitle id="mfa-dialog-title">
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Security color="primary" aria-hidden="true" />
          <Typography variant="h6">Two-Factor Authentication</Typography>
        </Box>
      </DialogTitle>
      <DialogContent>
        {mfaMethod === 'totp' ? (
          <>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} id="mfa-dialog-description">
              Enter the 6-digit code from your authenticator app to continue.
            </Typography>
          </>
        ) : (
          <>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} id="mfa-dialog-description">
              {codeSent
                ? 'A 6-digit verification code has been sent to your email.'
                : 'Sending verification code to your email...'}
            </Typography>
            {isSendingCode && (
              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }} role="status" aria-label="Sending verification code">
                <CircularProgress size={24} />
              </Box>
            )}
          </>
        )}

        {error && (
          <Alert severity="error" sx={{ mb: 3 }} role="alert">
            {error}
          </Alert>
        )}

        <TextField
          fullWidth
          label="Verification Code"
          placeholder={mfaMethod === 'totp' ? '000000' : '123456'}
          value={verificationCode}
          onChange={(e) =>
            setVerificationCode(e.target.value.replace(/\D/g, '').slice(0, mfaMethod === 'totp' ? 6 : 6))
          }
          disabled={isVerifying || isSendingCode}
          autoFocus
          inputProps={{
            'aria-label': 'Six digit verification code',
            style: { textAlign: 'center', fontSize: '1.5rem', letterSpacing: '0.5rem' },
            maxLength: 6,
          }}
        />

        {mfaMethod === 'email' && codeSent && (
          <Box sx={{ mt: 2, textAlign: 'center' }}>
            <Typography variant="body2" color="text.secondary">
              Didn't receive the code?{' '}
              <MuiLink
                component="button"
                variant="body2"
                onClick={handleResendCode}
                disabled={isSendingCode}
                sx={{ cursor: 'pointer' }}
              >
                Resend
              </MuiLink>
            </Typography>
          </Box>
        )}

        <Alert severity="info" sx={{ mt: 3 }}>
          <Typography variant="body2">
            <strong>Tip:</strong> You can also use a backup code if you don't have access to your{' '}
            {mfaMethod === 'totp' ? 'authenticator app' : 'email'}.
          </Typography>
        </Alert>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCancel} disabled={isVerifying}>
          Cancel
        </Button>
        <Button
          onClick={handleVerify}
          variant="contained"
          disabled={isVerifying || verificationCode.length !== 6}
        >
          {isVerifying ? <CircularProgress size={20} /> : 'Verify'}
        </Button>
      </DialogActions>
    </Dialog>
  );
}