"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { FiEye, FiEyeOff, FiLock } from "react-icons/fi";
import { BiArrowBack } from "react-icons/bi";

import CustomInput from "../../../../components/ui/CustomInput";
import Button from "../../../../components/ui/Button";
import { useAppForm } from "../../../../hooks/useAppForm";
import useUpdatePassword from "../../../../hooks/features/auth/update-password/useUpdatePassword";
import {
  updatePasswordSchema,
  UpdatePasswordSchema,
} from "../../../../hooks/features/auth/update-password/schema";

export default function ChangePasswordPage() {
  const router = useRouter();
  const { handleUpdatePassword, loading } = useUpdatePassword();

  const [showOldPassword, setShowOldPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

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

          reset();
          router.back();
        } catch (error) {}
      },
    });

  return (
    <div className="mx-auto max-w-188.5 px-4">
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <div className="mb-8 flex items-center gap-4">
            <button
              type="button"
              onClick={() => router.back()}
              className="flex cursor-pointer items-center gap-3 text-link-1"
            >
              <BiArrowBack size={28} />

              <h1 className="font-body text-lg font-bold leading-8.5 text-heading md:text-xl">
                Change Password
              </h1>
            </button>
          </div>

          <form onSubmit={handleSubmit} className="space-y-7.5">
            <div className="space-y-6">
              <CustomInput
                name="currentPassword"
                label="Old Password*"
                type={showOldPassword ? "text" : "password"}
                placeholder="Enter Old Password"
                register={register("currentPassword")}
                error={errors.currentPassword?.message}
                icon={<FiLock size={18} />}
                rightIcon={
                  <button
                    type="button"
                    onClick={() => setShowOldPassword((prev) => !prev)}
                    className="text-link-1 cursor-pointer"
                  >
                    {showOldPassword ? (
                      <FiEyeOff size={18} />
                    ) : (
                      <FiEye size={18} />
                    )}
                  </button>
                }
              />

              <CustomInput
                name="newPassword"
                label="New Password*"
                type={showNewPassword ? "text" : "password"}
                register={register("newPassword")}
                error={errors.newPassword?.message}
                placeholder="Enter New Password"
                icon={<FiLock size={18} />}
                rightIcon={
                  <button
                    type="button"
                    onClick={() => setShowNewPassword((prev) => !prev)}
                    className="text-link-1 cursor-pointer"
                  >
                    {showNewPassword ? (
                      <FiEyeOff size={18} />
                    ) : (
                      <FiEye size={18} />
                    )}
                  </button>
                }
              />

              <CustomInput
                name="confirmPassword"
                label="Confirm Password*"
                type={showConfirmPassword ? "text" : "password"}
                register={register("confirmPassword")}
                error={errors.confirmPassword?.message}
                placeholder="Confirm Your Password"
                icon={<FiLock size={18} />}
                rightIcon={
                  <button
                    type="button"
                    onClick={() => setShowConfirmPassword((prev) => !prev)}
                    className="text-link-1 cursor-pointer"
                  >
                    {showConfirmPassword ? (
                      <FiEyeOff size={18} />
                    ) : (
                      <FiEye size={18} />
                    )}
                  </button>
                }
              />
            </div>

            <Button
              type="submit"
              className="w-full"
              disabled={loading}
              buttonClassName="w-full"
              BtnInnerclassName="!w-full !py-4.5"
            >
              {loading ? "Updating..." : "Update Password"}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}
