"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 { signupUserAction } from "@/lib/actions/auth";
import { SignupSchema, SignupSchemaType } from "@/types/validation/auth";
import { toast } from "sonner";
import Link from "next/link";

interface SignupFormProps extends React.HTMLAttributes<HTMLDivElement> {}

export default function SignupForm({ className, ...props }: SignupFormProps) {
  const router = useRouter();
  const [showPassword, setShowPassword] = useState(false);

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

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

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

      if (res?.data) {
        toast.success("Signup successful. Please verify your email.");
        router.push("/verify-email?email=" + data.emailOrPhone);
      }
      console.log("register", res);

      if (res?.error) {
        toast.error(res.error);
      }
    } catch (error) {
      toast.error(
        "Signup 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">First Name</p>
            <Input
              name="firstname"
              placeholder="First Name"
              type="text"
              disabled={isSubmitting}
              control={control}
            />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Last Name</p>
            <Input
              name="lastname"
              placeholder="Last Name"
              type="text"
              disabled={isSubmitting}
              control={control}
            />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Enter Email</p>
            <Input
              name="emailOrPhone"
              placeholder="Enter email"
              type="text"
              disabled={isSubmitting}
              control={control}
            />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Enter 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" />
                  ) : (
                    <Eye className="h-5 w-5" />
                  )}
                </button>
              }
            />
          </div>

          <p className="text-sm text-foreground">
            By selecting Agree and continue, I agree to WaaLook{" "}
            <Link href={"#"} className="font-bold underline hover:text-primary">
              Terms of Service
            </Link>
            ,{" "}
            <Link href={"#"} className="font-bold underline hover:text-primary">
              Payments Terms of Service
            </Link>{" "}
            and{" "}
            <Link href={"#"} className="font-bold underline hover:text-primary">
              Notification Policy
            </Link>{" "}
            and acknowledge the{" "}
            <Link href={"#"} className="font-bold underline hover:text-primary">
              Privacy Policy
            </Link>{" "}
            .
          </p>

          <Button
            disabled={!isValid || !isDirty || isSubmitting}
            className="mt-4"
          >
            {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
            Agree and Continue
          </Button>
          <p className="text-sm text-center text-foreground">
            Already have an account?,{" "}
            <Link href={"/signin"} className="font-bold underline text-primary">
              Sign In
            </Link>
          </p>
        </div>
      </form>
    </div>
  );
}