import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowLeft, CheckCircle2, Mail } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { Link } from 'react-router-dom';
import { z } from 'zod';

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useRequestPasswordReset } from '@/hooks/auth/useRequestPasswordReset';
import { cn } from '@/lib/utils';

const forgotPasswordSchema = z.object({
  email: z.string().email('Invalid email address'),
});

type ForgotPasswordForm = z.infer<typeof forgotPasswordSchema>;

export function ForgotPasswordPage() {
  const resetMutation = useRequestPasswordReset();

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

  const onSubmit = (data: ForgotPasswordForm) => {
    resetMutation.mutate(data);
  };

  if (resetMutation.isSuccess) {
    return (
      <>
        <div className="mb-8 flex flex-col items-center text-center">
          <div className="mb-5 flex size-14 items-center justify-center rounded-full bg-emerald-500/10">
            <CheckCircle2 className="size-7 text-emerald-500" />
          </div>
          <h1 className="text-[24px] font-semibold tracking-tight text-foreground">
            Check your email
          </h1>
          <p className="mt-2 max-w-[300px] text-[14px] leading-relaxed text-muted-foreground">
            If an account with that email exists, we&apos;ve sent a password reset link. Please
            check your inbox and spam folder.
          </p>
        </div>
        <Link
          to="/auth/login"
          className="mx-auto flex w-fit items-center gap-1.5 text-[14px] text-muted-foreground transition-colors hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          Back to sign in
        </Link>
      </>
    );
  }

  return (
    <>
      <div className="mb-8">
        <h1 className="text-[24px] font-semibold tracking-tight text-foreground">
          Forgot your password?
        </h1>
        <p className="mt-1.5 text-[14px] text-muted-foreground">
          Enter your email and we&apos;ll send you a link to reset your password.
        </p>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <div className="relative">
            <Mail className="pointer-events-none absolute left-3 top-1/2 size-[18px] -translate-y-1/2 text-muted-foreground" />
            <Input
              id="email"
              type="email"
              {...register('email')}
              placeholder="you@example.com"
              autoComplete="email"
              className="h-11 pl-11 text-[15px]"
            />
          </div>
          {errors.email && <p className="text-[13px] text-destructive">{errors.email.message}</p>}
        </div>

        {resetMutation.isError && (
          <div className="rounded-lg bg-destructive/8 px-3.5 py-3 text-[13px] text-destructive">
            {resetMutation.error instanceof Error
              ? resetMutation.error.message
              : 'An error occurred. Please try again.'}
          </div>
        )}

        <button
          type="submit"
          disabled={resetMutation.isPending}
          className={cn(
            'flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-primary text-[15px] font-medium text-primary-foreground',
            'transition-all hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
            'disabled:pointer-events-none disabled:opacity-50',
          )}
        >
          {resetMutation.isPending ? (
            <>
              <svg
                className="size-[18px] animate-spin"
                viewBox="0 0 24 24"
                fill="none"
                role="status"
                aria-label="Loading"
              >
                <title>Loading</title>
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  strokeWidth="3"
                  className="opacity-25"
                />
                <path
                  d="M12 2a10 10 0 0 1 10 10"
                  stroke="currentColor"
                  strokeWidth="3"
                  strokeLinecap="round"
                  className="opacity-75"
                />
              </svg>
              Sending...
            </>
          ) : (
            'Send reset link'
          )}
        </button>
      </form>

      <p className="mt-8 text-center text-[14px] text-muted-foreground">
        <Link
          to="/auth/login"
          className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          Back to sign in
        </Link>
      </p>
    </>
  );
}
