"use client";
import { z } from "zod";
import InputForm from "../../ui/form/input-form";
import userAuthService from "@/lib/services/auth";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
// import { changePassword } from "@/lib/types/models";
import { toast } from "sonner";
import { ChangePassword } from "@/lib/types/models";

const schema = z
  .object({
    oldPassword: z.string().nonempty("Old password is required"),
    newPassword: z
      .string()
      .min(8, "New password must be at least 8 characters long"),
    confirmPassword: z.string().nonempty("Please confirm your password"),
  })
  .refine((data) => data.newPassword === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

type FormData = z.infer<typeof schema>;

export default function ChangePasswordPage() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    },
  });

  //  Handle form submission
  const onSubmit = async (data: FormData) => {
    // const payload = {
    //   OldPassword: data.oldPassword,
    //   NewPassword: data.newPassword,
    // };
    const payload: ChangePassword = {
      oldPassword: data.oldPassword,
      newPassword: data.newPassword,
      confirmPassword: data.confirmPassword,
    };
    const response = await userAuthService.changePassword(payload);
    if (response?.status === true) {
      toast.success(response.message || "Password changed successfully");
      reset();
    } else {
      toast.error(response?.message || "Failed to change password");
    }
  };

  return (
    <div className="w-full bg-[linear-gradient(180deg,_rgba(250,242,255,1)_5.5%,_rgba(255,255,255,1)_96.99%)]">
      <div className="main-container mobile-container py-10">
        <div className="md:w-1/2 mx-auto md:my-10 rounded-[8px] border border-[#E0E0E0] bg-white shadow-[0px_2px_8px_0px_#00000014]">
          <div className="px-5 md:px-10 py-12">
            <h2 className="text-neutral-black-87 font-semibold text-3xl mb-6">
              Change Password
            </h2>
            <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
              <div className="mb-4">
                <InputForm
                  type="password"
                  placeholder="Enter old password"
                  {...register("oldPassword")}
                  errors={errors.oldPassword?.message}
                  isRequired
                />
              </div>
              <div className="mb-4">
                <InputForm
                  type="password"
                  placeholder="Enter new password"
                  {...register("newPassword")}
                  errors={errors.newPassword?.message}
                  isRequired
                />
              </div>
              <div className="mb-4">
                <InputForm
                  type="password"
                  placeholder="Confirm new password"
                  {...register("confirmPassword")}
                  errors={errors.confirmPassword?.message}
                  isRequired
                />
              </div>

              <button
                className="w-full bg-primary text-white font-semibold py-3 rounded-md hover:bg-primary-900 transition mt-2"
                type="submit"
              >
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}