import { useModalStore } from "../../context/zustand-store/appStore";
import { XMarkIcon } from "@heroicons/react/16/solid";
import { FC, useRef, useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Modal: FC = () => {
  const { isOpen, title, content, closeModal, isFullSize } = useModalStore();
  const modalRef = useRef<HTMLDivElement>(null);
  const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(
    null
  );

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === mouseDownTarget && e.target === e.currentTarget) {
      closeModal();
    }
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    setMouseDownTarget(e.target);
  };

  useEffect(() => {
    if (isOpen) {
      const originalStyle = window.getComputedStyle(document.body).overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.body.style.overflow = originalStyle;
      };
    }
  }, [isOpen]);

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            className="hidden md:flex fixed inset-0 backdrop-blur-[2px] justify-center items-center z-40 p-4"
            onClick={handleBackdropClick}
            onMouseDown={handleMouseDown}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            <motion.div
              ref={modalRef}
              className={`bg-white dark:bg-gray-900 rounded-xl shadow-2xl overflow-y-auto ${
                isFullSize ? "w-[80%] h-[90%] p-3" : "max-w-md w-full p-6"
              } max-h-[90vh]`}
              onClick={(e) => e.stopPropagation()}
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              transition={{ duration: 0.3 }}
            >
              <div className="flex items-center justify-between pb-2 mb-4 border-b border-gray-200 dark:border-gray-700">
                <h2
                  className={`${
                    isFullSize ? "text-sm" : "text-md font-semibold"
                  } text-gray-900 dark:text-white`}
                >
                  {title}
                </h2>
                <div className="flex items-center gap-2">
                  <button
                    onClick={closeModal}
                    className={`rounded-full cursor-pointer ${
                      isFullSize ? "border-1 " : "p-2"
                    } hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200`}
                    aria-label="Close modal"
                  >
                    <XMarkIcon className="w-5 h-5" />
                  </button>
                </div>
              </div>
              <div className="overflow-hidden pt-1">{content}</div>
            </motion.div>
          </motion.div>

          <motion.div
            className="fixed inset-0 z-50 md:hidden"
            initial="hidden"
            animate="visible"
            exit="hidden"
            variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
            transition={{ duration: 0.2 }}
          >
            <motion.div
              className="absolute inset-0 bg-opacity-30 backdrop-blur-[1px]"
              onClick={handleBackdropClick}
              onMouseDown={handleMouseDown}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            />
            <motion.div
              className="absolute inset-x-0 bottom-0 border-t-5 border-primary-100 bg-white rounded-t-3xl shadow-2xl p-4 pt-2 max-h-[80vh] overflow-y-auto dark:bg-dark-700 dark:border-none"
              onClick={(e) => e.stopPropagation()}
              initial={{ y: "100%" }}
              animate={{ y: 0 }}
              exit={{ y: "100%" }}
              transition={{ type: "spring", stiffness: 300, damping: 30 }}
            >
              <div className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-4" />
              <div className="flex items-center justify-center pb-2 mb-2 border-b border-gray-200 dark:border-gray-700">
                <h2 className="text-base font-medium text-gray-900 dark:text-white">
                  {title}
                </h2>
              </div>
              <div className="text-sm text-gray-800 dark:text-gray-200 mt-2 overflow-hidden pt-1">
                {content}
              </div>
            </motion.div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default Modal;
