"use client";

import React, {useEffect,useMemo, useRef,useState,} from "react";
import Image from "next/image";
import AnimatedScroll from "../../ui/Animated-Scroll/AnimatedScroll";
import { SliderItem } from "@/src/lib/types/home";
import { withCDN } from "@/src/lib/utils";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";
import ImageLightbox from "../../ui/ImageLightbox";

export default function ClientDiscoverSlider({
data,
  mainHeading,
  ctaText,
  sliderTexts,
}: {
  data: SliderItem[];
  mainHeading: string;
  ctaText: string;
  sliderTexts?: string[];
}) {
 
  /*STATE*/
  const [activeTab, setActiveTab] = useState<number>(0);
  const [activeImage, setActiveImage] = useState<string>(
    data[0]?.mainImage || ""
  );
  const [isPaused, setIsPaused] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(
    null
  );

  /* CURRENT DATA*/
  const currentData = data[activeTab] ?? data[0];

   /* TAB REFS*/
  const tabContainerRef =useRef<HTMLDivElement | null>(null);
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
  /*TOUCH SWIPE REF */
  const touchStartX = useRef<number | null>(null);
  const touchStartY = useRef<number | null>(null);

  /*GALLERY IMAGES*/
  const galleryImages = useMemo(
    () =>
      Array.from(
        new Set(
          [
            currentData?.mainImage,
            ...(currentData?.thumbnails || []),
          ].filter(Boolean) as string[]
        )
      ),
    [currentData]
  );

  /*SCROLL ACTIVE TAB INTO VIEW ON MOBILE */
  const scrollToTab = (index: number) => {
    if (typeof window === "undefined") return;
    if (window.innerWidth >= 768) return;
    const container = tabContainerRef.current;
    const tab = tabRefs.current[index];
    if (!container || !tab) return;
   
    const containerRect = container.getBoundingClientRect();

    const tabRect = tab.getBoundingClientRect();
    const offset =
      tabRect.left -
      containerRect.left -
      container.clientWidth / 2 +
      tab.clientWidth / 2;

    container.scrollBy({
      left: offset,
      behavior: "smooth",
    });
  };

  /*UPDATE IMAGE WHEN ACTIVE TAB CHANGES*/
  useEffect(() => {
    setActiveImage(
      currentData?.mainImage || ""
    );
  }, [
    activeTab,
    currentData?.mainImage,
  ]);

  /* PREVIOUS TAB*/
  const handlePrevTab = () => {
    setActiveTab((prev) => {
      if (prev === 0) {
        return prev;
      }
      const next = prev - 1;
      scrollToTab(next);
      return next;
    });
  };

  /* NEXT TAB*/
  const handleNextTab = () => {
    setActiveTab((prev) => {
      if (prev === data.length - 1) {
        return prev;
      }
      const next = prev + 1;
      scrollToTab(next);
      return next;
    });
  };
  
  /* MOBILE SWIPE START*/
  const handleTouchStart = (
    e: React.TouchEvent<HTMLDivElement>
  ) => {
    const touch = e.touches[0];
    touchStartX.current =
      touch.clientX;

    touchStartY.current =
      touch.clientY;
  };

  /* MOBILE SWIPE END */

  const handleTouchEnd = (
    e: React.TouchEvent<HTMLDivElement>
  ) => {
    if (
      touchStartX.current === null ||
      touchStartY.current === null
    ) {
      return;
    }

    const touch = e.changedTouches[0];

    const deltaX =
      touch.clientX -
      touchStartX.current;

    const deltaY =
      touch.clientY -
      touchStartY.current;

    // Reset touch positions
    touchStartX.current = null;
    touchStartY.current = null;

    if (
      Math.abs(deltaY) >
      Math.abs(deltaX)
    ) {
      return;
    }

    const SWIPE_THRESHOLD = 50;
    if (
      Math.abs(deltaX) <
      SWIPE_THRESHOLD
    ) {
      return;
    }

    /* SWIPE LEFT → NEXT*/
    if (deltaX < 0) {
      handleNextTab();
      return;
    }

    /*SWIPE RIGHT → PREVIOUS */
    if (deltaX > 0) {
      handlePrevTab();
      return;
    }
  };

  return (
    <section className=" px-4 md:px-10 lg:px-16 xl:px-12 relative w-full py-16 md:py-20 overflow-hidden xl:mt-[-6px] 2xl:mt-16 md:mt-[10px] lg:mt-[-30px] mt-[-30px] bg-transparent pt-30 xl:pt-15 max-[767px]:pt-14" >

      {/*BACKGROUND*/}
      <div className=" absolute inset-0 w-full h-full -z-10 " >
      
      {/* MOBILE BACKGROUND */}
        <div className=" block md:hidden  w-full  h-full max-[767px]:mt-[0px]"
          style={{
            backgroundImage: "url('https://yefranchisees.b-cdn.net/frontend/home/path.png')",
            backgroundSize: "cover",
            backgroundRepeat: "repeat",
            backgroundPosition: "center",
          }}
        />

        {/* DESKTOP BACKGROUND */}
        <div className=" hidden md:block  w-full h-full "
          style={{
            backgroundImage:"url('https://yefranchisees.b-cdn.net/frontend/discover/bg%20(14).png')",
            backgroundSize: "cover",
            backgroundRepeat: "repeat",
            backgroundPosition: "start",
          }}
        />
      </div>

      {/*MAIN CONTENT*/}
      <div className=" w-full max-w-[1300px] mx-auto md:pt-8 lg:pt-0 xl:pb-5" >

        {/*HEADING*/}
        <h1 className=" text-[30px] 2xl:text-[50px] md:text-[30px] lg:text-[50px] xl:text-[50px]  px-1 lg:px-2 xl:px-0 font-[700] text-[#0097DC] uppercase text-balance mb-2 md:mb-2 leading-tight discover-title "
          dangerouslySetInnerHTML={{
            __html: mainHeading,
          }}
        />

        {/* TABS */}
        <div
          ref={tabContainerRef}
          className=" flex flex-nowrap w-full gap-2 overflow-x-auto  md:overflow-x-hidden no-scrollbar md:gap-3  items-stretch pb-5 " >

          {data.map((item, index) => (
            <div
              key={item.id || index}
              className=" flex w-full md:w-auto md:flex-1  md:min-w-0 items-stretch discover-tab-btn "
            >
              <button
                ref={(el) => { tabRefs.current[index] = el;}}
                onClick={() => {
                  setActiveTab(index);
                  scrollToTab(index);
                }}
                className={`text-[9px] md:text-[10px] lg:text-[15px] xl:text-[15px] 2xl:text-[15px] sm:text-xs md:text-sm uppercase transition
                  py-2 leading-tight w-24  md:w-full h-full flex items-center justify-center break-words whitespace-normal px-1 md:px-2 lg:px-2 xl:px-1 cursor-pointer text-center
                  border border-[#0097DC]  rounded-[7px] px-[9px] md:px-[16px] lg:px-[10px] py-[10px] bg-[#fff]
                  ${
                    activeTab === index
                      ? "text-[#0097DC]"
                      : "text-gray-800 hover:text-gray-900"
                  }
                `}
              >
                <span>
                  {item.tabTitle}
                </span>
              </button>
            </div>
          ))}
        </div>
       
        
        {/* CONTENT*/}
        <div
          onMouseEnter={() => setIsPaused(true) }
          onMouseLeave={() => setIsPaused(false) }
          className="relative flex flex-col-reverse  md:flex-row gap-1 lg:gap-9 items-center md:items-start pb-12 px-1 md:px-2 lg:px-2 xl:px-2 " >

          {/*LEFT CONTENT */}
          <div className=" w-full md:w-[290px] md:h-[222px] lg:w-[342px] lg:min-h-[309px] lg:max-h-[309px xl:w-[470px]
              xl:min-h-[309px] xl:max-h-[309px] 2xl:w-[470px] 2xl:min-h-[309px] 2xl:max-h-[309px] flex flex-col gap-6 mt-4
              lg:mt-2 xl:mt-2 md:mt-[-24px] lg:flex-shrink-0 discover-card-left
            " >
            <div>

              <h2 className=" text-[18px] md:text-[20px] lg:text-[26px] xl:text-[30px] 2xl:text-[30px] font-medium text-[#0097DC] uppercase
                  mb-2 leading-tight pt-2 xl:pt-3 pr-0
                ">
                {currentData?.contentTitle}
              </h2>

              <p className=" text-[18px] md:text-[16px] lg:text-[20px] xl:text-[22px] 2xl:text-[22px] text-[#58585A] leading-normal md:leading-tight xl:leading-[32px] font-light discover-text-left">
                {currentData?.description}
              </p>
            </div>

            {/* CTA */}
            <LanguageAwareLink
              href="/programs"
              className=" inline-flex gap-2 items-center justify-center bg-[#0097DC] hover:shadow-[10px_14px_14px_#0000000D] active:bg-[#0084C1]
                text-white font-regular tracking-[0.5px] px-7 py-2 rounded-full transition w-fit max-[480px]:w-full " >

              <Image
                src={withCDN(
                  "/gear-white.png"
                )}
                alt="Ticket Icon"
                width={20}
                height={20}
                className=" w-5 h-5 object-contain "
                loading="lazy"
              />

              <span className=" text-[18px] md:text-[14px] lg:text-[16px] xl:text-[24px] 2xl:text-[24px] font-regular cursor-pointer max-[360px]:text-[14px] ">
                {ctaText}
              </span>
            </LanguageAwareLink>
          </div>

          {/*RIGHT IMAGE SECTION*/}

          <div className=" relative sm:items-stretch w-full md:w-[60%] flex gap-4 lg:gap-6 px-0 h-[220px] md:h-[261px] lg:h-[350px] xl:h-[400px] 2xl:h-[424px]
              overflow-visible mb-[24px] md:mb-0 touch-pan-y "
            onTouchStart={ handleTouchStart}
            onTouchEnd={ handleTouchEnd }
          >

            {/* MAIN IMAGE + THUMBNAILS */}
            <div className="flex w-full h-full gap-4 items-start ">

              {/* MAIN IMAGE */}
              <div className=" flex-1 h-full min-h-[180px] md:min-h-[261px] lg:min-h-[410px] xl:min-h-[445px] 2xl:min-h-[470px] rounded-[32px] overflow-hidden ">

                <div className=" w-full  h-full bg-gray-200 rounded-2xl overflow-hidden " >

                  <img
                    src={activeImage}
                    alt="Main"
                    className=" w-full h-full object-cover cursor-pointer"
                    loading="lazy"
                    onClick={() =>
                      setLightboxIndex(
                        Math.max(
                          0,
                          galleryImages.indexOf(
                            activeImage
                          )
                        )
                      )
                    }
                  />

                </div>

              </div>

              {/*  DESKTOP THUMBNAILS */}

              <div className=" hidden md:flex  w-full md:w-24 lg:w-30 xl:w-[130px] flex md:flex-col gap-3 overflow-x-auto md:overflow-hidden
                  items-center md:items-stretch h-full lg:min-h-[410px] xl:min-h-[445px] 2xl:min-h-[470px]" >

                {currentData?.thumbnails?.map(
                  (thumbnail, index) => {

                    const isSelected =
                      thumbnail ===
                      activeImage;

                    return (

                      <button
                        key={index}
                        onClick={() =>
                          setActiveImage(
                            thumbnail
                          )
                        }
                        className=" flex-none md:flex-1 rounded-xl overflow-hidden relative cursor-pointer w-[110px] md:w-auto h-[70px] md:h-auto ">

                        <img
                          src={thumbnail}
                          alt={`Thumb ${index + 1}`}
                          className={` w-full h-full object-cover transition-all duration-300
                            ${
                              isSelected
                                ? "brightness-50"
                                : "brightness-100"
                            }
                          `}
                          loading="lazy"
                        />

                        {isSelected && (
                          <div
                            className=" absolute inset-0 bg-black/10 pointer-events-none "
                          />
                        )}

                      </button>

                    );
                  }
                )}

              </div>

            </div>

            {/*MOBILE NAVIGATION DOTS */}

            <div
              className=" hidden md:hidden justify-center gap-2 absolute bottom-[-30px] left-1/2 -translate-x-1/2 z-20 ">
              {data.map((_, index) => (
                <button
                  key={index}
                  onClick={() => {
                    setActiveTab(index);
                    scrollToTab(index);
                  }}
                  aria-label={`Go to slide ${index + 1}`}
                  className={` w-2.5 h-2.5 rounded-full transition-all duration-300
                    ${
                      activeTab === index
                        ? "bg-[#0097DC] scale-110"
                        : "bg-gray-300"
                    }
                  `}
                />

              ))}
            </div>
          </div>

          {/* DESKTOP TAB NAVIGATION */}

        <div className=" flex items-center justify-center md:justify-start gap-3 absolute w-full md:w-[550px] lg:w-[550px] bottom-[0%] md:left-10 lg:ml-[-40px] discover-navigaton" >

          {/* PREVIOUS */}
          <button
            onClick={handlePrevTab}
            disabled={activeTab === 0}
            className={` flex items-center justify-center w-8 h-8 transition
              ${
                activeTab === 0
                  ? "opacity-40 cursor-not-allowed"
                  : "cursor-pointer"
              }
            `}
          >
            <Image
              src={withCDN(
                "/arrow-left.svg"
              )}
              alt="Previous"
              width={28}
              height={28}
            />
          </button>

          {/* NEXT */}
          <button
            onClick={handleNextTab}
            disabled={
              activeTab ===
              data.length - 1
            }
            className={` flex justify-center w-8 h-8 transition
              ${
                activeTab ===
                data.length - 1
                  ? "opacity-40 cursor-not-allowed"
                  : "cursor-pointer"
              }
            `}
          >
            <Image
              src={withCDN(
                "/arrow-right.svg"
              )}
              alt="Next"
              width={28}
              height={28}
            />
          </button>

        </div>
        </div>
      </div>

      {/* ANIMATED SCROLL*/}

      <div className=" absolute bottom-0 left-0 w-full ">
        <AnimatedScroll items={sliderTexts}/>
      </div>

      {/* LIGHTBOX */}
      <ImageLightbox
        images={galleryImages}
        index={lightboxIndex}
        onClose={() =>
          setLightboxIndex(null)
        }
      />
    </section>
  );
}