"use client";

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } 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 {
  CreateNewPasswordSchema,
  CreateNewPasswordSchemaType,
} from "@/types/validation/auth";
import { toast } from "sonner";
import { OTPInput } from "../ui/input-otp-with-control";
import {
  createnewPasswordAction,
  forgotPasswordAction,
} from "@/lib/actions/auth";

interface CreateNewPasswordFormProps
  extends React.HTMLAttributes<HTMLDivElement> {}

export default function CreateNewPasswordForm({
  className,
  ...props
}: CreateNewPasswordFormProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const emailOrPhone = searchParams.get("email");
  const [showPassword, setShowPassword] = useState(false);
  const [isResending, setIsResending] = useState(false);
  const [timer, setTimer] = useState(60);

  const togglePasswordVisibility = () => {
    setShowPassword((prevState) => !prevState);
  };

  const {
    handleSubmit,
    control,
    formState: { isDirty, isValid, isSubmitting },
  } = useForm<CreateNewPasswordSchemaType>({
    resolver: zodResolver(CreateNewPasswordSchema),
    mode: "onTouched",
    defaultValues: {
      otp: "",
    },
  });

  const onSubmit: SubmitHandler<CreateNewPasswordSchemaType> = async (data) => {
    try {
      const res = await createnewPasswordAction(data);

      if (res?.data) {
        toast.success(res.data.message);
        router.replace("/signin");
      }
      if (res?.error) {
        toast.error(res.error);
      }
    } catch (error) {
      toast.error("Something went wrong. Please try again");
    }
  };

  const resendOTP = async () => {
    if (!emailOrPhone || isResending) return;

    setIsResending(true);
    try {
      const res = await forgotPasswordAction({ emailOrPhone });

      if (res?.data) {
        toast.success("OTP sent!");
      } else if (res?.error) {
        toast.error(res.error);
      }
    } catch (error) {
      toast.error("Something went wrong. Please try again");
    } finally {
      setIsResending(false);
      setTimer(60);
    }
  };

  useEffect(() => {
    if (timer === 0) return;
    const interval = setInterval(() => {
      setTimer((prevTimer) => prevTimer - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [timer]);

  return (
    <div className={cn("grid gap-6", className)} {...props}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="grid gap-4">
          <p className="text-sm mx-auto">Enter OTP</p>
          <div className="grid mx-auto gap-1">
            <OTPInput name="otp" disabled={isSubmitting} control={control} />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">New Password</p>
            <Input
              name="password"
              placeholder="Enter password"
              type={showPassword ? "text" : "password"}
              disabled={isSubmitting}
              autoCorrect="off"
              control={control}
              endIcon={
                <button
                  type="button"
                  onClick={togglePasswordVisibility}
                  className="flex items-center focus:outline-none"
                >
                  {showPassword ? (
                    <EyeOff className="h-5 w-5 text-gray-500" />
                  ) : (
                    <Eye className="h-5 w-5 text-gray-500" />
                  )}
                </button>
              }
            />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Confirm Password</p>
            <Input
              name="confirmpassword"
              placeholder="Enter password"
              type={showPassword ? "text" : "password"}
              disabled={isSubmitting}
              autoCorrect="off"
              control={control}
              endIcon={
                <button
                  type="button"
                  onClick={togglePasswordVisibility}
                  className="flex items-center focus:outline-none"
                >
                  {showPassword ? (
                    <EyeOff className="h-5 w-5 text-gray-500" />
                  ) : (
                    <Eye className="h-5 w-5 text-gray-500" />
                  )}
                </button>
              }
            />
          </div>
          <div className="flex items-center justify-between">
            <span className="text-xs">
              Didn&apos;t receive OTP?{" "}
              <button
                type="button"
                onClick={resendOTP}
                disabled={isResending || timer > 0}
                className="text-green-600"
              >
                {isResending ? "Resending..." : "Resend"}
              </button>
            </span>
            <span className="text-xs">{`00:${timer
              .toString()
              .padStart(2, "0")}`}</span>
          </div>

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