'use client';

import { useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { Phone, ShieldCheck } from 'lucide-react';
import { authApi } from '@/lib/api/auth';
import { getUserFacingError } from '@/components/shared/formatApiError';
import { useAuth } from '@/lib/hooks/useAuth';
import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
import { BrandLockup } from '@/components/ui/shared/BrandLockup';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';

type ForgotPasswordForm = {
  mobile: string;
  code: string;
};

function normalizeIranMobile(input: string): string {
  let digits = input.replace(/\D/g, '');
  if (digits.startsWith('98') && digits.length === 12) digits = digits.slice(2);
  if (digits.startsWith('0') && digits.length === 11) digits = digits.slice(1);
  return digits;
}

export default function ForgotPasswordPage() {
  const t = useTranslations('auth');
  const tValidation = useTranslations('validation');
  const tErrors = useTranslations('errors');
  const router = useRouter();
  const { refreshSession } = useAuth();
  const [step, setStep] = useState<'mobile' | 'code'>('mobile');
  const [error, setError] = useState<string | null>(null);
  const [isSending, setIsSending] = useState(false);
  const [isVerifying, setIsVerifying] = useState(false);
  const [sentMobile, setSentMobile] = useState('');

  const schema = useMemo(
    () =>
      z.object({
        mobile: z
          .string()
          .min(1, tValidation('mobileRequired'))
          .refine((value) => /^9\d{9}$/.test(normalizeIranMobile(value)), {
            message: tValidation('mobileInvalid'),
          }),
        code: z.string(),
      }),
    [tValidation],
  );

  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<ForgotPasswordForm>({
    resolver: zodResolver(schema),
    defaultValues: { mobile: '', code: '' },
  });

  const onSendCode = async () => {
    const mobile = getValues('mobile');
    const parsed = schema.safeParse({ mobile, code: '' });
    if (!parsed.success) {
      setError(parsed.error.issues[0]?.message ?? tValidation('mobileInvalid'));
      return;
    }

    try {
      setError(null);
      setIsSending(true);
      await authApi.sendForgotPasswordCode(mobile);
      setSentMobile(mobile);
      setStep('code');
    } catch (err: unknown) {
      setError(getUserFacingError(err, tErrors, t('codeSendFailed')));
    } finally {
      setIsSending(false);
    }
  };

  const onVerify = async (data: ForgotPasswordForm) => {
    if (!data.code.trim()) {
      setError(tValidation('codeRequired'));
      return;
    }

    try {
      setError(null);
      setIsVerifying(true);
      const response = await authApi.verifyForgotPasswordCode(
        sentMobile || data.mobile,
        data.code.trim(),
      );

      const orgs = response.data.organizations;
      if (orgs.length === 1) {
        await authApi.selectOrganization(orgs[0].id);
        localStorage.setItem('currentOrganizationId', orgs[0].id);
        await refreshSession();
        router.push('/settings/account?reset=1');
        return;
      }

      if (orgs.length > 1) {
        sessionStorage.setItem('authRedirect', '/settings/account?reset=1');
        await refreshSession();
        router.push('/select-organization');
        return;
      }

      await refreshSession();
      router.push('/settings/account?reset=1');
    } catch (err: unknown) {
      setError(getUserFacingError(err, tErrors, t('verifyFailed')));
    } finally {
      setIsVerifying(false);
    }
  };

  return (
    <AuthPageShell
      header={
        <>
          <Link href="/" className="flex justify-center">
            <BrandLockup className="text-2xl sm:text-3xl text-text-primary" />
          </Link>
          <h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
            {t('forgotPasswordTitle')}
          </h2>
          <p className="mt-2 text-center text-sm text-text-secondary">
            {step === 'mobile' ? t('forgotPasswordSubtitle') : t('codeSentHint')}
          </p>
        </>
      }
    >
      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
        <form
          className="space-y-5 sm:space-y-6"
          onSubmit={handleSubmit(step === 'code' ? onVerify : () => undefined)}
        >
          {step === 'mobile' ? (
            <Input
              label={t('mobile')}
              {...register('mobile')}
              type="tel"
              inputMode="tel"
              autoComplete="tel"
              placeholder={t('mobilePlaceholder')}
              error={errors.mobile?.message}
              icon={<Phone className="h-5 w-5 icon-flat" />}
            />
          ) : (
            <Input
              label={t('verificationCode')}
              {...register('code')}
              type="text"
              inputMode="numeric"
              autoComplete="one-time-code"
              placeholder={t('verificationCodePlaceholder')}
              error={errors.code?.message}
              icon={<ShieldCheck className="h-5 w-5 icon-flat" />}
            />
          )}

          {error && (
            <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
              <p className="text-sm text-red-400">{error}</p>
            </div>
          )}

          {step === 'mobile' ? (
            <Button
              type="button"
              variant="primary"
              isLoading={isSending}
              fullWidth
              onClick={() => onSendCode()}
            >
              {t('sendCode')}
            </Button>
          ) : (
            <Button type="submit" variant="primary" isLoading={isVerifying} fullWidth>
              {t('verifyAndContinue')}
            </Button>
          )}

          <p className="text-center text-sm text-text-secondary">
            <Link href="/login" className="font-medium text-primary hover:opacity-90">
              {t('backToSignIn')}
            </Link>
          </p>
        </form>
      </div>
    </AuthPageShell>
  );
}
