Arkie-Library-Frontend/src/components/FigmaBanner.tsx

import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type PointerEvent as ReactPointerEvent,
} from "react";

const FIGMA_ASSET_BASE = "/assets/ark-library/figma";

export const officialRecommendationCoverFallbacks = [
  `${FIGMA_ASSET_BASE}/official-recommendation-cover.png`,
] as const;

type BannerSlide = {
  id: string;
  mobile: string;
  desktop: string;
  alt: string;
};

const BANNERS_BASE = "/assets/ark-library/banners";

const BANNER_SLIDES: BannerSlide[] = [
  {
    id: "ark-banner-1",
    mobile: `${BANNERS_BASE}/banner-1.png`,
    desktop: `${BANNERS_BASE}/banner-1.png`,
    alt: "",
  },
  {
    id: "ark-banner-2",
    mobile: `${BANNERS_BASE}/banner-2.png`,
    desktop: `${BANNERS_BASE}/banner-2.png`,
    alt: "",
  },
  {
    id: "ark-banner-3",
    mobile: `${BANNERS_BASE}/banner-3.png`,
    desktop: `${BANNERS_BASE}/banner-3.png`,
    alt: "",
  },
  {
    id: "ark-banner-4",
    mobile: `${BANNERS_BASE}/banner-4.png`,
    desktop: `${BANNERS_BASE}/banner-4.png`,
    alt: "",
  },
];

const AUTOPLAY_MS = 3000;
const RESUME_AFTER_INTERACTION_MS = 8000;

export function FigmaBanner() {
  const slides = BANNER_SLIDES;
  const scrollerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [autoplayPaused, setAutoplayPaused] = useState(false);
  const resumeTimerRef = useRef<number | null>(null);
  const dragStateRef = useRef<{
    pointerId: number;
    startX: number;
    startScrollLeft: number;
    moved: boolean;
  } | null>(null);
  const hasMultiple = slides.length > 1;

  const goTo = useCallback((index: number, behavior: ScrollBehavior) => {
    const scroller = scrollerRef.current;
    if (!scroller) return;
    const target = scroller.children[index] as HTMLElement | undefined;
    if (!target) return;
    scroller.scrollTo({ left: target.offsetLeft, behavior });
  }, []);

  const pauseAutoplay = useCallback(() => {
    setAutoplayPaused(true);
    if (resumeTimerRef.current !== null) {
      window.clearTimeout(resumeTimerRef.current);
    }
    resumeTimerRef.current = window.setTimeout(() => {
      setAutoplayPaused(false);
      resumeTimerRef.current = null;
    }, RESUME_AFTER_INTERACTION_MS);
  }, []);

  useEffect(
    () => () => {
      if (resumeTimerRef.current !== null) {
        window.clearTimeout(resumeTimerRef.current);
      }
    },
    [],
  );

  useEffect(() => {
    const scroller = scrollerRef.current;
    if (!scroller) return;

    const handleScroll = () => {
      const width = scroller.clientWidth;
      if (width === 0) return;
      const next = Math.round(scroller.scrollLeft / width);
      setActiveIndex((prev) => (prev === next ? prev : next));
    };

    handleScroll();
    scroller.addEventListener("scroll", handleScroll, { passive: true });
    return () => scroller.removeEventListener("scroll", handleScroll);
  }, [slides.length]);

  useEffect(() => {
    if (!hasMultiple || autoplayPaused) return;
    const timer = window.setInterval(() => {
      setActiveIndex((prev) => {
        const next = (prev + 1) % slides.length;
        goTo(next, "smooth");
        return next;
      });
    }, AUTOPLAY_MS);
    return () => window.clearInterval(timer);
  }, [hasMultiple, autoplayPaused, slides.length, goTo]);

  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.pointerType !== "mouse") return;
    const scroller = scrollerRef.current;
    if (!scroller) return;
    dragStateRef.current = {
      pointerId: event.pointerId,
      startX: event.clientX,
      startScrollLeft: scroller.scrollLeft,
      moved: false,
    };
    scroller.setPointerCapture(event.pointerId);
    pauseAutoplay();
  };

  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragStateRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;
    const scroller = scrollerRef.current;
    if (!scroller) return;
    const dx = event.clientX - drag.startX;
    if (!drag.moved && Math.abs(dx) > 4) {
      drag.moved = true;
      scroller.style.scrollSnapType = "none";
    }
    if (drag.moved) {
      scroller.scrollLeft = drag.startScrollLeft - dx;
    }
  };

  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragStateRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;
    const scroller = scrollerRef.current;
    dragStateRef.current = null;
    if (!scroller) return;
    if (scroller.hasPointerCapture(event.pointerId)) {
      scroller.releasePointerCapture(event.pointerId);
    }
    if (drag.moved) {
      const width = scroller.clientWidth || 1;
      const nearest = Math.round(scroller.scrollLeft / width);
      const clamped = Math.max(0, Math.min(slides.length - 1, nearest));
      scroller.style.scrollSnapType = "";
      goTo(clamped, "smooth");
    }
  };

  const pagination = hasMultiple ? (
    <div
      className="flex items-center justify-center gap-1.5 md:gap-2"
      role="tablist"
      aria-label="Banner pagination"
    >
      {slides.map((slide, index) => {
        const active = index === activeIndex;
        return (
          <button
            key={slide.id}
            type="button"
            role="tab"
            aria-selected={active}
            aria-label={`Go to slide ${index + 1}`}
            onClick={() => {
              pauseAutoplay();
              setActiveIndex(index);
              goTo(index, "smooth");
            }}
            className={`h-1.5 rounded-full transition-all ${
              active
                ? "w-6 bg-ark-gold"
                : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
            }`}
          />
        );
      })}
    </div>
  ) : null;

  return (
    <div className="relative">
      <div
        ref={scrollerRef}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onTouchStart={pauseAutoplay}
        className="flex cursor-grab snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth select-none touch-pan-x [-ms-overflow-style:none] [scrollbar-width:none] active:cursor-grabbing [&::-webkit-scrollbar]:hidden"
        role="region"
        aria-roledescription="carousel"
        aria-label="ARK Library banner"
      >
        {slides.map((slide, index) => (
          <div
            key={slide.id}
            className="relative w-full shrink-0 snap-start"
            role="group"
            aria-roledescription="slide"
            aria-label={`${index + 1} / ${slides.length}`}
          >
            <picture className="block w-full overflow-hidden bg-black md:rounded-xl">
              <source media="(max-width: 767px)" srcSet={slide.mobile} />
              <img
                src={slide.desktop}
                alt={slide.alt}
                className="pointer-events-none h-[219px] w-full object-cover md:h-auto"
                width={1280}
                height={290}
                loading={index === 0 ? "eager" : "lazy"}
                decoding="async"
                draggable={false}
              />
            </picture>
          </div>
        ))}
      </div>

      {hasMultiple ? (
        <>
          <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-[30px] items-center justify-center bg-gradient-to-b from-[#14131900] to-[#141319] md:hidden">
            <div className="pointer-events-auto">{pagination}</div>
          </div>
          <div className="mt-3 hidden md:block">{pagination}</div>
        </>
      ) : null}
    </div>
  );
}