"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

interface ForgotPasswordFormProps {
  onSubmit: (email: string) => Promise<void>;
  onBackToLogin: () => void;
  defaultEmail?: string;
  isLoading?: boolean;
}

export function ForgotPasswordForm({
  onSubmit,
  onBackToLogin,
  defaultEmail = "",
  isLoading = false,
}: ForgotPasswordFormProps) {
  const t = useTranslations("auth.forgotPassword");
  const tErrors = useTranslations("auth.errors");

  // Define form schema with zod
  const formSchema = z.object({
    email: z.string().email({ message: tErrors("invalidEmail") }),
  });

  // Initialize form with react-hook-form
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: defaultEmail,
    },
  });

  useEffect(() => {
    form.setValue("email", defaultEmail);
  }, [defaultEmail, form]);

  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
    await onSubmit(values.email);
  };

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(handleSubmit)}
        className="flex flex-col gap-6"
      >
        {/* Email Field */}
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel className="text-sm font-semibold text-foreground">
                {t("emailLabel")}
              </FormLabel>
              <FormControl>
                <Input
                  type="email"
                  placeholder={t("emailPlaceholder")}
                  className="h-10 rounded"
                  disabled={isLoading}
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        {/* Action Buttons */}
        <div className="flex gap-4">
          <Button
            type="submit"
            className="h-10 rounded bg-primary text-base font-medium"
            disabled={isLoading}
          >
            {isLoading ? t("submitting") : t("submit")}
          </Button>
          <Button
            type="button"
            variant="outline"
            className="h-10 rounded"
            onClick={onBackToLogin}
            disabled={isLoading}
          >
            {t("backToLogin")}
          </Button>
        </div>
      </form>
    </Form>
  );
}