'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useTranslations } from 'next-intl';
import { AxiosError } from 'axios';
import { authApi } from '@/lib/auth';
import { Input } from '@/components/ui/input';
import { useUnmountSafeTimeout } from '@/components/ui/useUnmountSafeTimeout';

const RESEND_SECONDS = 60;

const identifierSchema = z
  .string()
  .min(3)
  .refine(
    (val) => {
      const trimmed = val.trim();
      const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed);
      const isPhone = /^\+\d{8,15}$/.test(trimmed);
      return isEmail || isPhone;
    },
    { message: 'identifier_invalid' },
  );

const formSchema = z.object({ identifier: identifierSchema });
type FormValues = z.infer<typeof formSchema>;

export function ForgotPasswordForm() {
  const t = useTranslations('auth.forgot');
  const [neutralMessage, setNeutralMessage] = useState<string | null>(null);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [resendIn, setResendIn] = useState<number>(0);
  const schedule = useUnmountSafeTimeout();

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

  const submit = async (identifier: string) => {
    setSubmitError(null);
    try {
      await authApi.requestPasswordReset({ identifier: identifier.trim() });
      setNeutralMessage(t('success_neutral'));
      startResendCountdown();
    } catch (err) {
      const ax = err as AxiosError<{ errors?: { message?: string } }>;
      if (ax.response?.status === 429) {
        setSubmitError(t('too_many_requests'));
      } else {
        // Neutral on 422 too — never reveal whether identifier mapped to a user.
        setNeutralMessage(t('success_neutral'));
        startResendCountdown();
      }
    }
  };

  const startResendCountdown = () => {
    setResendIn(RESEND_SECONDS);
    const tick = (remaining: number) => {
      if (remaining <= 0) {
        setResendIn(0);
        return;
      }
      schedule(() => {
        setResendIn(remaining - 1);
        tick(remaining - 1);
      }, 1000);
    };
    tick(RESEND_SECONDS);
  };

  const onSubmit = handleSubmit(({ identifier }) => submit(identifier));

  const handleResend = () => {
    if (resendIn > 0) return;
    const { identifier } = getValues();
    if (identifier) void submit(identifier);
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4" noValidate>
      <Input
        label={t('identifier_label')}
        placeholder={t('identifier_placeholder')}
        autoComplete="username"
        {...register('identifier')}
        error={
          errors.identifier?.message === 'identifier_invalid'
            ? t('identifier_invalid')
            : errors.identifier?.message
        }
      />

      <button type="submit" disabled={isSubmitting || resendIn > 0} className="btn-primary w-full">
        {isSubmitting ? t('submitting') : t('submit')}
      </button>

      {neutralMessage ? (
        <div
          role="status"
          aria-live="polite"
          className="rounded-md bg-success/10 p-3 text-sm text-success"
        >
          {neutralMessage}
        </div>
      ) : null}

      {submitError ? (
        <p role="alert" className="rounded-md bg-danger/10 p-3 text-sm text-danger">
          {submitError}
        </p>
      ) : null}

      {neutralMessage ? (
        resendIn > 0 ? (
          <p className="text-xs text-neutral-500">{t('resend_in', { seconds: resendIn })}</p>
        ) : (
          <button
            type="button"
            onClick={handleResend}
            className="text-sm text-primary-600 hover:underline"
          >
            {t('resend')}
          </button>
        )
      ) : null}
    </form>
  );
}