emaui/apps/portal/src/app/features/auth/pages/OTPVerificationPage.tsx

import {
  Paper,
  TextInput,
  Button,
  Stack,
  Title,
  Center,
  Text,
} from '@mantine/core';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useNavigate, useLocation } from 'react-router-dom';
import { useApiMutation } from '@ema-platform/api';
import { notify } from '@ema-platform/ui';

const schema = z.object({
  verificationCode: z.string().min(1, { message: 'Verification code is required' }),
});

type FormValues = z.infer<typeof schema>;

export function OTPVerificationPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const state = location.state as
    | { email?: string; phoneNumber?: string }
    | null;
  const email = state?.email ?? '';
  const phoneNumber = state?.phoneNumber ?? '';

  const [verifyTrigger, { isLoading: loading }] = useApiMutation();
  const [resendTrigger, { isLoading: resending }] = useApiMutation();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (values: FormValues) => {
    try {
      await verifyTrigger({
        url: '/auth/verify-phone-number',
        method: 'PATCH',
        body: { email, phoneNumber, verificationCode: values.verificationCode },
      }).unwrap();

      notify.success('Phone number verified successfully');
      navigate('/dashboard');
    } catch (err) {
      const msg = err instanceof Error ? err.message : 'Something went wrong';
      notify.error(msg);
    }
  };

  const handleResendOtp = async () => {
    try {
      await resendTrigger({
        url: '/auth/resend-otp',
        method: 'POST',
        body: { email },
      }).unwrap();

      notify.success('Verification code resent to your email');
    } catch (err) {
      const msg = err instanceof Error ? err.message : 'Something went wrong';
      notify.error(msg);
    }
  };

  return (
    <Center h="100vh">
      <Paper p="xl" shadow="md" radius="md" w={400}>
        <Stack gap="md">
          <Title order={3}>Verify your email</Title>
          <Text c="dimmed" size="sm">
            A verification code has been sent to {email || 'your email'}. Enter it
            below to complete your registration.
          </Text>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Stack gap="sm">
              <TextInput
                label="Verification Code"
                placeholder="Enter the code from your email"
                error={errors.verificationCode?.message}
                {...register('verificationCode')}
              />
              <Button type="submit" loading={loading} fullWidth mt="sm">
                Verify
              </Button>
            </Stack>
          </form>
          <Button
            variant="subtle"
            size="sm"
            loading={resending}
            onClick={handleResendOtp}
            fullWidth
          >
            Send OTP again
          </Button>
        </Stack>
      </Paper>
    </Center>
  );
}