"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 } from "lucide-react";

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

import { setupProfileAction } from "@/lib/actions/auth";
import {
  SetupProfileSchema,
  SetupProfileSchemaType,
} from "@/types/validation/auth";
import { toast } from "sonner";
import { PhoneInput } from "../ui/phone-input";

interface SetupProfileFormProps extends React.HTMLAttributes<HTMLDivElement> {}

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

  const {
    handleSubmit,
    register,
    setValue,
    control,
    formState: { isDirty, isValid, isSubmitting, errors },
    setError,
  } = useForm<SetupProfileSchemaType>({
    resolver: zodResolver(SetupProfileSchema),
    mode: "onTouched",
    defaultValues: {
      phoneNumber: "",
    },
  });

  const onSubmit: SubmitHandler<SetupProfileSchemaType> = async (data) => {
    try {
      await setupProfileAction({
        username: data.username,
        phoneNumber: data.phoneNumber,
      });
      router.push("/home");
    } catch (error) {
      toast.error(
        "SetupProfile 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">Username</p>
            <Input
              control={control}
              name="username"
              placeholder="Create Username"
            />
          </div>
          <div className="grid gap-1">
            <p className="text-sm">Phone Number</p>

            <PhoneInput
              id="phoneNumber"
              {...register("phoneNumber", { required: true })}
              onChange={(value) => setValue("phoneNumber", value)}
              defaultCountry="NG"
              placeholder="Your phone number"
            />
            {errors.phoneNumber && (
              <small className="text-xs text-red-500">
                This field is required
              </small>
            )}
          </div>

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