"use client";

import { useState } from "react";
import { FiEye, FiEyeOff, FiLock } from "react-icons/fi";
import Input from "../../../ui/CustomInput";
import Button from "../../../ui/Button";
import { useModal } from "../../../../lib/modal-system/ModalContext";
import { useAppForm } from "../../../../hooks/useAppForm";
import { updatePasswordSchema, UpdatePasswordSchema } from "../../../../hooks/features/auth/update-password/schema";
import useUpdatePassword from "../../../../hooks/features/auth/update-password/useUpdatePassword";

export default function ChangePasswordModal() {
  const { closeModal } = useModal();

  const { handleUpdatePassword, loading } = useUpdatePassword();

  const { register, errors, handleSubmit, reset } =
    useAppForm<UpdatePasswordSchema>({
      defaultValues: {
        currentPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      schema: updatePasswordSchema,
      onSubmit: async (data) => {
        try {
          await handleUpdatePassword(data);

          reset();
          closeModal();
        } catch (error) {}
      },
    });

  const [showPassword, setShowPassword] = useState({
    oldPassword: false,
    newPassword: false,
    confirmPassword: false,
  });

  const togglePassword = (key: keyof typeof showPassword) => {
    setShowPassword((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  return (
    <div>
      <h2 className="mb-7.5 text-center font-heading text-xl font-semibold text-heading md:text-2xl">
        Change Password
      </h2>

      <div className="space-y-5">
        <Input
          label="Old Password"
          type={showPassword.oldPassword ? "text" : "password"}
          placeholder="Enter Old Password"
          icon={<FiLock />}
          rightIcon={
            <button
              type="button"
              onClick={() => togglePassword("oldPassword")}
              className="text-link-1 cursor-pointer"
            >
              {showPassword.oldPassword ? (
                <FiEyeOff size={18} />
              ) : (
                <FiEye size={18} />
              )}
            </button>
          }
          required
          register={register("currentPassword")}
          error={errors.currentPassword?.message}
        />

        <Input
          label="New Password"
          type={showPassword.newPassword ? "text" : "password"}
          placeholder="Enter New Password"
          icon={<FiLock />}
          required
          rightIcon={
            <button
              type="button"
              onClick={() => togglePassword("newPassword")}
              className="text-link-1 cursor-pointer"
            >
              {showPassword.newPassword ? (
                <FiEyeOff size={18} />
              ) : (
                <FiEye size={18} />
              )}
            </button>
          }
          register={register("newPassword")}
          error={errors.newPassword?.message}
        />

        <Input
          label="Confirm Password"
          required
          type={showPassword.confirmPassword ? "text" : "password"}
          placeholder="Confirm Your Password"
          icon={<FiLock />}
          rightIcon={
            <button
              type="button"
              onClick={() => togglePassword("confirmPassword")}
              className="text-link-1 cursor-pointer"
            >
              {showPassword.confirmPassword ? (
                <FiEyeOff size={18} />
              ) : (
                <FiEye size={18} />
              )}
            </button>
          }
          register={register("confirmPassword")}
          error={errors.confirmPassword?.message}
        />

        <Button type="button" onClick={handleSubmit} className="mt-2.5 w-full">
          Update
        </Button>
      </div>
    </div>
  );
}