import { useState, useEffect, useCallback, useRef } from "react";
import "./Graphics.css";
import { useAdminBanners } from "./../../hooks/useAdminBanners";
import { ClipLoader } from "react-spinners";
import { ChevronLeft, ChevronRight } from "lucide-react";
import GraphicsSkeleton from "./GraphicsSkeleton";

export const Graphics = () => {
  const [currentImage, setCurrentImage] = useState(0);
  const [progressBarWidth, setProgressBarWidth] = useState(0);
  const [images, setImages] = useState<string[]>([]);
  const [loadingComplete, setLoadingComplete] = useState(false);
  const [transitionDirection, setTransitionDirection] = useState("");
  const [isAutoPlaying, setIsAutoPlaying] = useState(true);

  // Touch tracking for swipe
  const [touchStart, setTouchStart] = useState(null);
  const [touchEnd, setTouchEnd] = useState(null);
  const [isSwiping, setIsSwiping] = useState(false);
  const [swipeOffset, setSwipeOffset] = useState(0);

  // Detect if device is mobile
  const [isMobile, setIsMobile] = useState(false);

  // Loading status tracking
  const totalImagesLoaded = useRef(0);
  const imagesRef = useRef({});

  const { getHomepageImages } = useAdminBanners();

  // Check for mobile device on mount and window resize
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    checkMobile();
    window.addEventListener("resize", checkMobile);

    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  // Fetch images on component mount
  useEffect(() => {
    const fetchImages = async () => {
      try {
        // Check if it's a mobile device
        const isMobile = window.innerWidth <= 768; // or use a more sophisticated detection method

        // If mobile, fetch mobile and ALL images
        const fetchedImages = await getHomepageImages(
          isMobile ? "MOBILE" : "DESKTOP"
        );

        if (fetchedImages?.getHomepageImages?.length) {
          // Extract URLs from the image config objects
          const imageUrls = fetchedImages.getHomepageImages.map(
            (img) => img.url
          );
          // Reset loading state when new images are set
          totalImagesLoaded.current = 0;
          setLoadingComplete(false);
          setImages(imageUrls);
        }
      } catch (error) {
        console.error("Failed to fetch images:", error);
      }
    };

    fetchImages();
  }, []);

  // Track image loading status
  const handleImageLoaded = (index) => {
    totalImagesLoaded.current += 1;

    // If all images are loaded, set loading complete
    if (totalImagesLoaded.current === images.length) {
      setLoadingComplete(true);
    }
  };

  // Handle automatic image rotation
  useEffect(() => {
    if (!images.length || !isAutoPlaying || !loadingComplete) return;

    const interval = setInterval(() => {
      if (progressBarWidth >= 100) {
        setTransitionDirection("right");
        setCurrentImage((prevImage) => (prevImage + 1) % images.length);
        setProgressBarWidth(0);
      } else {
        setProgressBarWidth((prevWidth) => prevWidth + 1);
      }
    }, 50);

    return () => clearInterval(interval);
  }, [progressBarWidth, images, isAutoPlaying, loadingComplete]);

  // Navigation handlers
  const goToNextImage = useCallback(() => {
    if (!loadingComplete) return;

    setIsAutoPlaying(false);
    setTransitionDirection("right");
    setCurrentImage((prev) => (prev + 1) % images.length);
    setProgressBarWidth(0);

    setTimeout(() => setIsAutoPlaying(true), 5000);
  }, [images.length, loadingComplete]);

  const goToPrevImage = useCallback(() => {
    if (!loadingComplete) return;

    setIsAutoPlaying(false);
    setTransitionDirection("left");
    setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
    setProgressBarWidth(0);

    setTimeout(() => setIsAutoPlaying(true), 5000);
  }, [images.length, loadingComplete]);

  // Handle direct navigation to a specific image
  const goToImage = (index) => {
    if (!loadingComplete) return;

    setIsAutoPlaying(false);
    setTransitionDirection(index > currentImage ? "right" : "left");
    setCurrentImage(index);
    setProgressBarWidth(0);

    setTimeout(() => setIsAutoPlaying(true), 5000);
  };

  // Touch handlers for swipe functionality
  const handleTouchStart = (e) => {
    if (!loadingComplete) return;

    setIsAutoPlaying(false);
    setTouchStart(e.touches[0].clientX);
    setTouchEnd(null);
    setIsSwiping(true);
    setSwipeOffset(0);
  };

  const handleTouchMove = (e) => {
    if (!touchStart || !loadingComplete) return;

    const currentX = e.touches[0].clientX;
    setTouchEnd(currentX);

    const offset = currentX - touchStart;
    setSwipeOffset(offset);
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd || !loadingComplete) {
      setIsSwiping(false);
      setSwipeOffset(0);
      setTimeout(() => setIsAutoPlaying(true), 3000);
      return;
    }

    const distance = touchStart - touchEnd;
    const minSwipeDistance = 30;

    if (Math.abs(distance) > minSwipeDistance) {
      if (distance > 0) {
        goToNextImage();
      } else {
        goToPrevImage();
      }
    }

    setTouchStart(null);
    setTouchEnd(null);
    setIsSwiping(false);
    setSwipeOffset(0);

    setTimeout(() => setIsAutoPlaying(true), 3000);
  };

  return (
    <section className="graphics" aria-label="Featured promotions slideshow">
      <h2 className="visually-hidden">Featured Promotions</h2>

      <div className="graphics-content">
        {images.length > 0 ? (
          <>
            <div
              className={`graphics-image-wrapper ${transitionDirection} ${
                isSwiping ? "swiping" : ""
              }`}
              role="region"
              aria-roledescription="carousel"
              aria-label={`Image ${currentImage + 1} of ${images.length}`}
              onTouchStart={handleTouchStart}
              onTouchMove={handleTouchMove}
              onTouchEnd={handleTouchEnd}
            >
              {/* Pre-render ALL images, but only show the current one */}
              {images.map((src, index) => (
                <img
                  key={index}
                  ref={(el) => {
                    imagesRef.current[index] = el;
                  }}
                  className={`graphics-image ${
                    index === currentImage ? "active" : ""
                  } ${loadingComplete ? "loaded" : ""}`}
                  src={src}
                  alt={`Royal Gift featured promotion ${index + 1}`}
                  width="1200"
                  height="600"
                  onLoad={() => handleImageLoaded(index)}
                  style={{
                    ...(index === currentImage && isSwiping
                      ? { transform: `translateX(${swipeOffset}px)` }
                      : {}),
                    opacity: loadingComplete && index === currentImage ? 1 : 0,
                    visibility: loadingComplete ? "visible" : "hidden",
                    position: "absolute",
                    zIndex: index === currentImage ? 2 : 0,
                  }}
                />
              ))}

              {/* Mobile indicator text */}
              {isMobile && loadingComplete && (
                <div className="mobile-indicator">
                  <span>
                    {currentImage + 1} / {images.length}
                  </span>
                </div>
              )}

              {/* Loading overlay that sits on top of images */}
              {!loadingComplete && (
                <div className="loading-overlay">
                  <GraphicsSkeleton
                    dotCount={images.length}
                    isMobile={isMobile}
                  />
                </div>
              )}
            </div>

            {loadingComplete && (
              <>
                <button
                  className="nav-button left"
                  onClick={goToPrevImage}
                  aria-label="Previous image"
                >
                  <ChevronLeft size={isMobile ? 24 : 32} />
                  <span className="visually-hidden">Previous</span>
                </button>

                <button
                  className="nav-button right"
                  onClick={goToNextImage}
                  aria-label="Next image"
                >
                  <ChevronRight size={isMobile ? 24 : 32} />
                  <span className="visually-hidden">Next</span>
                </button>

                <div className="progress-bar-row">
                  {images.map((_, index) => (
                    <button
                      key={index}
                      className={`progress-indicator ${
                        index === currentImage ? "active" : ""
                      }`}
                      onClick={() => goToImage(index)}
                      aria-label={`Go to image ${index + 1}`}
                      aria-current={index === currentImage}
                    >
                      <div className="progress-bar">
                        <div
                          className="progress-bar-fill"
                          style={{
                            width:
                              index === currentImage
                                ? `${progressBarWidth}%`
                                : "0%",
                          }}
                        />
                      </div>
                    </button>
                  ))}
                </div>
              </>
            )}
          </>
        ) : (
          <GraphicsSkeleton dotCount={3} isMobile={isMobile} />
        )}
      </div>
    </section>
  );
};

export default Graphics;