"use client";

import { toast } from "sonner";
import { Button } from "../ui/button";
import { OTPInput } from "../ui/input-otp-with-control";
import { SubmitHandler, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  ValidateOTPSchema,
  ValidateOTPSchemaType,
} from "@/types/validation/auth";
import { validateOTPAction } from "@/lib/actions/auth";
import { useRouter, useSearchParams } from "next/navigation";

interface VerifyEmailFormProps extends React.HTMLAttributes<HTMLDivElement> {}

export default function VerifyEmailForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const emailOrPhone = searchParams.get("email");
  const {
    handleSubmit,
    control,
    formState: { isDirty, isValid, isSubmitting },
  } = useForm<ValidateOTPSchemaType>({
    resolver: zodResolver(ValidateOTPSchema),
    mode: "onTouched",
    defaultValues: { otp: "" },
  });
  const onSubmit: SubmitHandler<ValidateOTPSchemaType> = async (data) => {
    if (!emailOrPhone) {
      toast.error("No email found in the URL. Please check the link again.");
      return;
    }
    try {
      const res = await validateOTPAction({ ...data, emailOrPhone });

      if (res?.data) {
        toast.success("Email verification successful. You can now log in.");
        router.replace("/signin");
      }
      console.log("Email verification", res);

      if (res?.error) {
        toast.error(res.error);
      }
    } catch (error) {
      toast.error("Email verification failed. Please check your OTP.");
    }
  };
  return (
    <div className={""}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="flex flex-col w-full">
          <div className="grid mx-auto gap-1">
            <OTPInput name="otp" disabled={isSubmitting} control={control} />
          </div>
          <Button
            className="mt-4"
            disabled={!isDirty || !isValid || isSubmitting}
          >
            Verify
          </Button>
          <Button
            disabled={!isDirty || !isValid || isSubmitting}
            variant={"outline"}
            className="mt-4"
          >
            Resend Email
          </Button>
        </div>
      </form>
    </div>
  );
}