'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import Link from 'next/link';
import { toast } from 'sonner';
import { forgotPasswordSchema, type ForgotPasswordInput } from '@/lib/validations/auth';
import { createClient } from '@/lib/supabase/client';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function ForgotPasswordPage() {
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);

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

  async function onSubmit(values: ForgotPasswordInput) {
    setSubmitting(true);
    const supabase = createClient();
    const { error } = await supabase.auth.resetPasswordForEmail(values.email, {
      redirectTo: `${window.location.origin}/reset-password`,
    });

    if (error) {
      toast.error(error.message);
    } else {
      setSent(true);
    }
    setSubmitting(false);
  }

  if (sent) {
    return (
      <div>
        <h1 className="font-display text-2xl text-ink dark:text-paper">Check your email</h1>
        <p className="mt-2 text-sm text-ink-muted dark:text-slate-muted">
          If an account exists for that address, a reset link is on its way.
        </p>
        <Link href="/login" className="mt-6 inline-block text-sm text-azure font-medium">
          Back to log in
        </Link>
      </div>
    );
  }

  return (
    <div>
      <h1 className="font-display text-2xl text-ink dark:text-paper">Reset your password</h1>
      <p className="mt-1 text-sm text-ink-muted dark:text-slate-muted">
        We'll send a reset link to your email.
      </p>

      <form onSubmit={handleSubmit(onSubmit)} className="mt-8 space-y-4" noValidate>
        <Input label="Email" type="email" {...register('email')} error={errors.email?.message} />
        <Button type="submit" isLoading={submitting} className="w-full">
          Send reset link
        </Button>
      </form>

      <p className="mt-6 text-sm text-ink-muted dark:text-slate-muted">
        <Link href="/login" className="text-azure font-medium">
          Back to log in
        </Link>
      </p>
    </div>
  );
}