"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { authClient } from "@/lib/auth-client";
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { toast } from 'sonner'
import { z } from "zod";
const OTPSchema = z.object({
  pin: z.string().min(6, {
    message: "Your one-time password must be 6 characters.",
  }),
});

export default function VerifyOTPForm({ phone_number }: { phone_number: string }) {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  console.log("verification in OTP form", phone_number)
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof OTPSchema>>({
    defaultValues: {
      pin: "",
    },
    resolver: zodResolver(OTPSchema),
  });

  const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {

    startTransition(async () => {
      const isVerified = await authClient.phoneNumber.verify({
        phoneNumber: phone_number,
        code: data.pin,
      });
      console.log({ isVerified });
      if (!isVerified.error) {
        router.push("/devices");
      } else {
        toast.error(isVerified.error.message);
      }
    });
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="bg-white dark:bg-gray-900 w-full max-w-xs  rounded-lg shadow my-4"
    >
      <div className="grid pb-4 pt-2 gap-4 px-10">
        <div className="">
          <Label htmlFor="otp-number" className="text-gray-500">
            Enter the OTP
          </Label>
          <Input
            id="otp-number"
            {...register("pin")}
            type="text"
          />
          {errors.pin && (
            <p className="text-red-500 text-sm">{errors.pin.message}</p>
          )}
        </div>
        <Button
          className="dark:bg-gray-800 w-full dark:text-white"
          disabled={isPending}
          type="submit"
        >
          {isPending ? <Loader className="animate-spin" /> : "Login"}
        </Button>
      </div>
      <div className="mb-4 text-center text-sm">
        Go back to{" "}
        <Link href="login" className="underline">
          login
        </Link>
      </div>
    </form>
  );
}