"use client";
import { toggleBigSizeImageView } from "../Redux/User/UserSlice.js";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const MediaSlider = () => {
  const dispatch = useDispatch();
  const customer = useSelector((state) => state.customer);

  // Close on Escape key
  useEffect(() => {
    if (!customer?.showBigSizeImage) return;
    
    const handleEscape = (e) => {
      if (e.key === "Escape") {
        dispatch(toggleBigSizeImageView(null));
      }
    };
    window.addEventListener("keydown", handleEscape);
    return () => window.removeEventListener("keydown", handleEscape);
  }, [dispatch, customer?.showBigSizeImage]);

  // Prevent body scroll when slider is open
  useEffect(() => {
    if (!customer?.showBigSizeImage) return;
    
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "auto";
    };
  }, [customer?.showBigSizeImage]);

  const handleClose = (e) => {
    if (e.target === e.currentTarget || e.target.closest('[data-close-modal]')) {
      dispatch(toggleBigSizeImageView(null));
    }
  };

  if (!customer?.showBigSizeImage) return null;

  return (
    <div 
      className="fixed inset-0 z-[5000] flex items-center justify-center  backdrop-blur-sm"
      onClick={handleClose}
    >
      <div className="relative max-w-2xl w-full mx-4 bg-white dark:bg-gray-900 rounded-xl shadow-2xl overflow-hidden">
        {/* Close button */}
        <button
          onClick={() => dispatch(toggleBigSizeImageView(null))}
          className="absolute top-3 right-3 z-50 w-8 h-8 flex items-center justify-center bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors shadow-lg border border-gray-200 dark:border-gray-700"
          aria-label="Close media viewer"
          data-close-modal
        >
          <X className="w-5 h-5 text-gray-800 dark:text-white" />
        </button>

        {/* Media Slider */}
        {customer?.postMediaData?.length > 0 && (
          <div className="relative w-full">
            <Swiper
              modules={[Navigation]}
              navigation={{
                nextEl: ".swiper-button-next-1",
                prevEl: ".swiper-button-prev-1",
              }}
              loop={true}
              spaceBetween={0}
              slidesPerView={1}
              className="w-full"
            >
              {customer?.postMediaData
                ?.filter((item) => item?.type === "image" || item?.type === "video")
                ?.map((media) => (
                  <SwiperSlide key={media?._id} className="relative">
                    <div className="relative w-full h-[70vh] max-h-[600px] flex items-center justify-center bg-gray-100 dark:bg-gray-800">
                      {media?.type === "image" ? (
                        <div className="relative w-full h-full">
                          <Image
                            src={`${BASE_URL}/uploads/${media?.url}`}
                            alt="media file"
                            fill
                            className="object-fill"
                            priority
                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 80vw"
                          />
                        </div>
                      ) : (
                        <div className="relative w-full h-full flex items-center justify-center p-4">
                          <video
                            src={`${BASE_URL}/uploads/${media?.url}`}
                            controls
                            className="w-full h-full object-contain rounded-lg"
                            controlsList="nodownload"
                            disablePictureInPicture
                          />
                        </div>
                      )}
                    </div>
                  </SwiperSlide>
                ))}
            </Swiper>

            {/* Navigation Buttons */}
            <div className="swiper-button-prev-1 absolute left-2 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full flex items-center justify-center z-40 cursor-pointer shadow-xl transition-all opacity-80 hover:opacity-100 border border-gray-200 dark:border-gray-700">
              <ChevronLeft className="w-6 h-6 text-gray-800 dark:text-white" />
            </div>
            <div className="swiper-button-next-1 absolute right-2 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full flex items-center justify-center z-40 cursor-pointer shadow-xl transition-all opacity-80 hover:opacity-100 border border-gray-200 dark:border-gray-700">
              <ChevronRight className="w-6 h-6 text-gray-800 dark:text-white" />
            </div>
          </div>
        )}

        {/* Media counter (optional)
        {customer?.postMediaData?.length > 1 && (
          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-40 bg-black bg-opacity-60 text-white text-sm px-3 py-1 rounded-full">
            {customer?.postMediaData?.filter(item => item?.type === "image" || item?.type === "video")?.length} images
          </div>
        )} */}
      </div>
    </div>
  );
};

export default MediaSlider;