"use client";

import { FiSlash } from "react-icons/fi";
import Button from "../../../../components/ui/Button";
import { useModal } from "../../../../lib/modal-system/ModalContext";
import useUserStatusUpdate from "../../../../hooks/features/admin/users/useUserStatusUpdate";
import { useParams } from "next/navigation";

export default function DeactivateUserModal({ userId }: { userId?: string }) {
  const { closeModal } = useModal();
  const { handleUserStatusUpdate, loading } = useUserStatusUpdate(
    "User deactivated successfully",
  );
  let { id } = useParams<{ id: string }>();

  const handleDelete = async () => {
    if (userId) {
      id = userId;
    }

    if (!id) return;

    try {
      await handleUserStatusUpdate(id);
      closeModal();
    } catch (error) {}
  };

  return (
    <div className="text-center">
      <div className="mx-auto flex h-29 w-29 items-center justify-center rounded-full bg-danger-light">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-red-400">
          <FiSlash size={34} className="text-white" />
        </div>
      </div>

      <h2 className="mt-7 text-2xl font-semibold leading-8 text-heading">
        Are you sure you want to deactivate this user?
      </h2>

      <p className="mx-auto mt-5 max-w-98 text-lg leading-6 text-text">
        Deactivated users cannot access the system or sign in. All active
        sessions will be terminated immediately. You can reactivate this account
        later if needed.
      </p>

      <div className="mt-7.5 flex flex-col justify-center gap-4 sm:flex-row">
        <Button
          variant="white"
          onClick={closeModal}
          buttonClassName="shadow-none!"
          BtnInnerclassName="px-8! py-3.5!"
        >
          Cancel
        </Button>

        <Button
          variant="white"
          onClick={handleDelete}
          loading={loading}
          buttonClassName="shadow-none! p-0!"
          BtnInnerclassName="border border-danger-400 text-danger! px-8! py-3.5!"
        >
          Yes, Deactivate
        </Button>
      </div>
    </div>
  );
}
