import { Check, ChevronLeft, ChevronRight } from "lucide-react";
import { useEffect, useState, useRef } from "react";
import GoToDownload from "../components/navbar/GoToDownload";

import MetaTags from "../components/partials/MetaTags";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../app/store";
import { fetchPackages } from "../app/reducers/package";
import PartialLoading from "../components/partials/PartialLoading";
import { Link } from "react-router-dom";

export default function Package() {
  const dispatch = useDispatch<AppDispatch>();
  const { packages, loading } = useSelector(
    (state: RootState) => state.package
  );

  useEffect(() => {
    dispatch(fetchPackages());
  }, [dispatch]);

  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
  const [isMobile, setIsMobile] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Determine visible packages based on screen size
  const visiblePackages = isMobile ? 1 : 3;
  const shouldSlide = packages.length > visiblePackages;
  const maxIndex = shouldSlide ? packages.length - visiblePackages : 0;

  // Check if mobile on mount and when window resizes
  useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    // Initial check
    checkIfMobile();

    // Add resize listener
    window.addEventListener("resize", checkIfMobile);

    // Cleanup
    return () => window.removeEventListener("resize", checkIfMobile);
  }, []);

  const nextSlide = () => {
    setCurrentIndex((prev) => (prev >= maxIndex ? 0 : prev + 1));
  };

  const prevSlide = () => {
    setCurrentIndex((prev) => (prev <= 0 ? maxIndex : prev - 1));
  };

  // Auto slide functionality
  useEffect(() => {
    if (!shouldSlide || !isAutoPlaying) return;

    const interval = setInterval(() => {
      nextSlide();
    }, 3000);

    return () => clearInterval(interval);
  });

  // Pause auto-sliding when user interacts
  const pauseAutoPlay = () => {
    setIsAutoPlaying(false);
  };

  // Resume auto-sliding after a period of inactivity
  const resumeAutoPlay = () => {
    setIsAutoPlaying(true);
  };

  // Add touch handling variables
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);

  // Minimum swipe distance (in px)
  const minSwipeDistance = 50;

  // Touch event handlers
  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStart(e.targetTouches[0].clientX);
    pauseAutoPlay();
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return;

    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe) {
      nextSlide();
    } else if (isRightSwipe) {
      prevSlide();
    }

    // Reset values
    setTouchEnd(0);
    setTouchStart(0);

    // Resume auto play after some time
    setTimeout(resumeAutoPlay, 10000);
  };

  // Define a type for package if not already defined
  type PackageType = {
    name: string;
    image?: string;
    features: string[];
    price: number;
    validity: number;
    package_id: string | number;
  };

  const setSelectedPackage = (pkg: PackageType) => {
    localStorage.setItem("selectedPackage", JSON.stringify(pkg));
  };

  const showLoading = loading && packages.length === 0;
  return (
    <div className="bg-gray-50 mt-[72px] md:mt-[20px] pt-10 mb-10">
      <MetaTags title="Premium Packages Of Matrimonial" />
      {showLoading ? (
        <PartialLoading text="Loading Available Packages" />
      ) : (
        <div className="max-w-7xl mx-auto px-6 overflow-hidden">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">
              <span className="text-primary">Premium</span> Packages
            </h1>
            <p className="text-xl text-gray-600">
              Unlock premium features to interact with your match faster.
            </p>
          </div>

          <div className="relative" ref={containerRef}>
            {/* Navigation buttons - only show when sliding is needed */}
            {shouldSlide && (
              <>
                <button
                  className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition-all -ml-4 md:ml-0"
                  onClick={() => {
                    prevSlide();
                    pauseAutoPlay();
                    setTimeout(resumeAutoPlay, 10000);
                  }}
                >
                  <ChevronLeft className="h-6 w-6 text-gray-600" />
                </button>

                <button
                  className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition-all -mr-4 md:mr-0"
                  onClick={() => {
                    nextSlide();
                    pauseAutoPlay();
                    setTimeout(resumeAutoPlay, 10000);
                  }}
                >
                  <ChevronRight className="h-6 w-6 text-gray-600" />
                </button>
              </>
            )}

            {/* Packages container with touch events */}

            <div
              className="overflow-visible px-4 md:px-0"
              onMouseEnter={pauseAutoPlay}
              onMouseLeave={resumeAutoPlay}
              onTouchStart={handleTouchStart}
              onTouchMove={handleTouchMove}
              onTouchEnd={handleTouchEnd}
            >
              <div
                className="flex transition-transform duration-500 ease-in-out overflow-visible"
                style={{
                  transform: shouldSlide
                    ? `translateX(-${
                        currentIndex *
                        ((isMobile ? 108.5 : 124) / visiblePackages)
                      }%)`
                    : "none",
                  display: "flex",
                  gap: "2rem",
                }}
              >
                {packages.map((pkg, index) => (
                  <div
                    key={`${pkg.name}-${index}`}
                    className={`${
                      isMobile ? "w-full" : "w-1/3"
                    } flex-none px-2 md:px-4`}
                    style={{ minWidth: isMobile ? "100%" : `${100 / 3}%` }}
                  >
                    <div className="bg-white rounded-lg shadow-sm p-8 relative flex flex-col h-full transition-all duration-300 hover:shadow-xl hover:scale-105 z-10 hover:z-20 transform-gpu">
                      <div className="text-center">
                        <img
                          className="w-16 h-16 rounded-full mb-6 mx-auto"
                          src={pkg.image || undefined}
                          alt={`${pkg.name} package`}
                          referrerPolicy="no-referrer"
                        />
                        <h3 className="text-2xl font-semibold mb-4">
                          {pkg.name}
                        </h3>
                      </div>
                      <ul className="space-y-4 flex-grow">
                        {pkg.features.map((feature) => (
                          <li key={feature} className="flex items-center gap-2">
                            <Check className="text-green-500 w-5 h-5 flex-shrink-0" />
                            <span>{feature}</span>
                          </li>
                        ))}
                      </ul>
                      <p className="text-5xl font-bold mb-2 text-center mt-12">
                        <span
                          style={{
                            fontFamily: "Poppins",
                            fontWeight: "normal",
                          }}
                        >
                          ৳
                        </span>{" "}
                        {Number(pkg.price).toLocaleString(undefined, {
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0,
                        })}
                      </p>
                      <p className="font-bold mb-6 text-center text-primary">
                        {pkg.validity} days
                      </p>
                      <Link to={"/package-payment-method"}>
                        <button
                          onClick={() => setSelectedPackage(pkg)}
                          className="bg-pink-500 text-white font-bold px-6 py-2 rounded-full hover:bg-pink-600 transition text-center w-auto m-auto"
                        >
                          Buy Now
                        </button>
                      </Link>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Pagination dots - only show when sliding is needed */}
            {shouldSlide && (
              <div className="flex justify-center mt-8">
                {Array.from({ length: maxIndex + 1 }).map((_, index) => (
                  <button
                    key={index}
                    className={`h-3 w-3 mx-1 rounded-full transition-all ${
                      currentIndex === index ? "bg-primary w-6" : "bg-gray-300"
                    }`}
                    onClick={() => {
                      setCurrentIndex(index);
                      pauseAutoPlay();
                      setTimeout(resumeAutoPlay, 10000);
                    }}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}