"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";

import { Input } from "../ui/input-with-control";
import { Button } from "../ui/button";
import { Loader, Eye, EyeOff } from "lucide-react";

import { useForm, SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { verifyNumberAction } from "@/lib/actions/auth";
import {
  VerifyNumberSchema,
  VerifyNumberSchemaType,
} from "@/types/validation/auth";
import { toast } from "sonner";

interface VerifyNumberFormProps extends React.HTMLAttributes<HTMLDivElement> {}

export default function VerifyNumberForm({
  className,
  ...props
}: VerifyNumberFormProps) {
  const router = useRouter();

  const {
    handleSubmit,
    control,
    formState: { isDirty, isValid, isSubmitting },
    setError,
  } = useForm<VerifyNumberSchemaType>({
    resolver: zodResolver(VerifyNumberSchema),
    mode: "onTouched",
  });

  const onSubmit: SubmitHandler<VerifyNumberSchemaType> = async (data) => {
    try {
      await verifyNumberAction({
        code: data.code,
      });
      router.push("/home");
    } catch (error) {
      toast.error(
        "VerifyNumber failed. Please check your credentials and try again."
      );
    }
  };

  return (
    <div className={cn("grid gap-6", className)} {...props}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="grid gap-4">
          <div className="grid gap-1">
            <p className="text-sm">Enter Code</p>
            <Input
              name="code"
              placeholder="Enter code"
              type="number"
              disabled={isSubmitting}
              control={control}
            />
            <div className="flex items-center justify-between">
              <span className="text-xs">
                Didn&apos;t recieve OTP?{" "}
                <button className="text-green-600">Resend</button>
              </span>
              <span className="text-xs">02:00</span>
            </div>
          </div>

          <Button
            disabled={!isValid || !isDirty || isSubmitting}
            className="mt-4"
          >
            {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
            Verify & Continue
          </Button>
        </div>
      </form>
    </div>
  );
}