msgapp/src/app/components/HeroBanner.tsx

"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Image from "next/image";
import { SelectedBanner } from "@/app/components/SelectedBanner";
import Link from "next/link";
import useSWR from "swr";

type Banner = { id: string; title: string; imageUrl: string; linkUrl?: string | null };
type SubItem = { id: string; name: string; href: string };

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export function HeroBanner({ subItems, activeSubId, hideSubOnMobile, showPartnerCats }: { subItems?: SubItem[]; activeSubId?: string; hideSubOnMobile?: boolean; showPartnerCats?: boolean }) {
  const usePartnerCats = ((!Array.isArray(subItems) || subItems.length === 0) && showPartnerCats !== false);
  // 파트너 카테고리 불러오기 (홈 배너 하단 블랙바에 표시)
  const { data: catData } = useSWR<{ categories: any[] }>(usePartnerCats ? "/api/partner-categories" : null, fetcher, { revalidateOnFocus: false, dedupingInterval: 5 * 60 * 1000 });
  const categories = catData?.categories ?? [];
  const [selectedCatId, setSelectedCatId] = useState<string>("");
  useEffect(() => {
    if (!usePartnerCats) return;
    if (!selectedCatId && categories.length > 0) {
      let id = "";
      try {
        id = (window as any).__partnerCategoryId || localStorage.getItem("selectedPartnerCategoryId") || "";
      } catch {}
      if (!id) id = categories[0].id;
      setSelectedCatId(id);
      try {
        (window as any).__partnerCategoryId = id;
        localStorage.setItem("selectedPartnerCategoryId", id);
        window.dispatchEvent(new CustomEvent("partnerCategorySelect", { detail: { id } }));
      } catch {}
    }
  }, [usePartnerCats, categories, selectedCatId]);
  const onSelectCategory = useCallback((id: string) => {
    if (!usePartnerCats) return;
    setSelectedCatId(id);
    // 전역 이벤트로 선택 전달
    try {
      (window as any).__partnerCategoryId = id;
      localStorage.setItem("selectedPartnerCategoryId", id);
      window.dispatchEvent(new CustomEvent("partnerCategorySelect", { detail: { id } }));
    } catch {}
  }, [usePartnerCats]);
  // SWR 캐시 사용: 페이지 전환 시 재요청/깜빡임 최소화
  const { data } = useSWR<{ banners: Banner[] }>("/api/banners", fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 10 * 60 * 1000, // 10분 간 동일 요청 합치기
    keepPreviousData: true,
  });
  const banners = data?.banners ?? [];
  const [activeIndex, setActiveIndex] = useState(0);
  const [isHovered, setIsHovered] = useState(false);
  const [progress, setProgress] = useState(0); // 0..1
  const rotationMs = 5000;
  const rafIdRef = useRef<number | null>(null);
  const startedAtRef = useRef<number>(0);

  const numSlides = banners.length;
  const canAutoPlay = numSlides > 1 && !isHovered;

  const startTicker = useCallback(() => {
    if (!canAutoPlay) return;
    startedAtRef.current = performance.now();
    const tick = () => {
      const now = performance.now();
      const elapsed = now - startedAtRef.current;
      const nextProgress = Math.min(1, elapsed / rotationMs);
      setProgress(nextProgress);
      if (nextProgress >= 1) {
        setActiveIndex((i) => (i + 1) % Math.max(1, numSlides));
        startedAtRef.current = performance.now();
        setProgress(0);
      }
      rafIdRef.current = window.requestAnimationFrame(tick);
    };
    rafIdRef.current = window.requestAnimationFrame(tick);
  }, [canAutoPlay, numSlides, rotationMs]);

  const stopTicker = useCallback(() => {
    if (rafIdRef.current) {
      window.cancelAnimationFrame(rafIdRef.current);
      rafIdRef.current = null;
    }
  }, []);

  useEffect(() => {
    stopTicker();
    setProgress(0);
    startTicker();
    return () => stopTicker();
  }, [startTicker, stopTicker, activeIndex, isHovered, numSlides]);

  const goTo = useCallback((index: number) => {
    if (numSlides === 0) return;
    const next = (index + numSlides) % numSlides;
    setActiveIndex(next);
    setProgress(0);
    startedAtRef.current = performance.now();
  }, [numSlides]);

  const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
  const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);

  const translatePercent = useMemo(() => (numSlides > 0 ? -(activeIndex * 100) : 0), [activeIndex, numSlides]);

  if (numSlides === 0) {
    return (
      <section className="relative w-full overflow-hidden rounded-xl bg-neutral-900 text-white" aria-roledescription="carousel">
        <SelectedBanner className="h-56 sm:h-72 md:h-[264px]" />
        {/* 분리된 하단 블랙 바: 높이 58px, 중앙 서브카테고리 (스켈레톤 상태에서도 동일 레이아웃 유지) */}
        <div className={`${hideSubOnMobile ? "hidden md:flex" : "flex"} h-[58px] bg-black rounded-xl items-end justify-center px-2`}>
          {usePartnerCats ? (
            <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
              {categories.map((c: any) => (
                <button
                  key={c.id}
                  onClick={() => onSelectCategory(c.id)}
                  className={
                    (selectedCatId || categories[0]?.id) === c.id
                      ? "px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap"
                      : "px-3 h-full inline-flex items-center bg-transparent text-[#d5d5d5] hover:bg-white hover:text-[#d73b29] hover:font-[700] hover:rounded-tl-[14px] hover:rounded-tr-[14px] text-[20px] font-[500] whitespace-nowrap"
                  }
                >
                  {c.name}
                </button>
              ))}
            </div>
          ) : (
            Array.isArray(subItems) && subItems.length > 0 && (
              <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
                {subItems.map((s) => (
                  <Link
                    key={s.id}
                    href={s.href}
                    className={
                      s.id === activeSubId
                        ? "px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap"
                        : "px-3 h-full inline-flex items-center bg-transparent text-[#d5d5d5] hover:bg-white hover:text-[#d73b29] hover:font-[700] hover:rounded-tl-[14px] hover:rounded-tr-[14px] text-[20px] font-[500] whitespace-nowrap"
                    }
                  >
                    {s.name}
                  </Link>
                ))}
              </div>
            )
          )}
          {!usePartnerCats && (!Array.isArray(subItems) || subItems.length === 0) && (
            <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
              <span className="px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap">암실소문</span>
            </div>
          )}
        </div>
      </section>
    );
  }

  return (
    <section
      className="relative w-full overflow-hidden rounded-xl bg-neutral-900 text-white"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      aria-roledescription="carousel"
    >
      <div className="relative h-56 sm:h-72 md:h-[264px]">
        <div
          className="flex h-full w-full transition-transform duration-500 ease-out"
          style={{ transform: `translate3d(${translatePercent}%, 0, 0)`, width: `${numSlides * 100}%` }}
        >
          {banners.map((banner) => (
            <div key={banner.id} className="relative h-full w-full shrink-0">
              {banner.linkUrl ? (
                <a href={banner.linkUrl} className="block h-full w-full focus:outline-none focus:ring-2 focus:ring-white/60" aria-label={banner.title}>
                  <Image src={banner.imageUrl} alt={banner.title} fill priority className="object-cover" />
                </a>
              ) : (
                <Image src={banner.imageUrl} alt={banner.title} fill priority className="object-cover" />
              )}
              {/* Figma 스타일: 오버레이 제거 */}
              <div className="absolute bottom-3 left-4 right-4 md:bottom-5 md:left-6 md:right-6">
                <h2 className="line-clamp-2 text-lg font-semibold md:text-2xl">{banner.title}</h2>
              </div>
            </div>
          ))}
        </div>

        {/* 좌우 내비게이션 버튼 */}
        {numSlides > 1 && (
          <div className="pointer-events-none absolute inset-0 flex items-center justify-between px-1 sm:px-2">
            <button
              type="button"
              onClick={goPrev}
              aria-label="이전 배너"
              className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
            >
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <button
              type="button"
              onClick={goNext}
              aria-label="다음 배너"
              className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
            >
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>
        )}

        {/* Pagination - Figma 스타일: 활성은 주황 바, 비활성은 회색 점 (배너 위에 오버랩) */}
        {numSlides > 1 && (
          <div className="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-[10px]">
            {banners.map((_, i) => (
              <button
                key={i}
                aria-label={`Go to slide ${i + 1}`}
                aria-current={activeIndex === i ? "true" : undefined}
                onClick={() => goTo(i)}
                className={
                  activeIndex === i
                    ? "h-[6px] w-[24px] rounded-full bg-[#F94B37]"
                    : "h-[10px] w-[10px] rounded-full bg-[rgba(255,255,255,0.7)] hover:bg-white"
                }
              />
            ))}
          </div>
        )}
      </div>

      {/* 분리된 하단 블랙 바: 높이 58px, 중앙 서브카테고리 */}
      <div className={`${hideSubOnMobile ? "hidden md:flex" : "flex"} h-[58px] bg-black rounded-xl items-end justify-center px-2`}>
        {usePartnerCats ? (
          <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
            {categories.map((c: any) => (
              <button
                key={c.id}
                onClick={() => onSelectCategory(c.id)}
                className={
                  (selectedCatId || categories[0]?.id) === c.id
                    ? "px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap"
                    : "px-3 h-full inline-flex items-center bg-transparent text-[#d5d5d5] hover:bg-white hover:text-[#d73b29] hover:font-[700] hover:rounded-tl-[14px] hover:rounded-tr-[14px] text-[20px] font-[500] whitespace-nowrap"
                }
              >
                {c.name}
              </button>
            ))}
          </div>
        ) : (
          Array.isArray(subItems) && subItems.length > 0 && (
            <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
              {subItems.map((s) => (
                <Link
                  key={s.id}
                  href={s.href}
                  className={
                    s.id === activeSubId
                      ? "px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap"
                      : "px-3 h-full inline-flex items-center bg-transparent text-[#d5d5d5] hover:bg-white hover:text-[#d73b29] hover:font-[700] hover:rounded-tl-[14px] hover:rounded-tr-[14px] text-[20px] font-[500] whitespace-nowrap"
                  }
                >
                  {s.name}
                </Link>
              ))}
            </div>
          )
        )}
        {!usePartnerCats && (!Array.isArray(subItems) || subItems.length === 0) && (
          <div className="flex flex-wrap items-center h-[74%] gap-[24px]">
            <span className="px-3 h-full inline-flex items-center bg-white text-[#d73b29] text-[20px] font-[700] rounded-tl-[14px] rounded-tr-[14px] whitespace-nowrap">암실소문</span>
          </div>
        )}
      </div>

      {/* Progress bar
      {numSlides > 1 && (
        <div className="absolute bottom-0 left-0 right-0 z-10 h-1 bg-white/20">
          <div className="h-full bg-white transition-[width] duration-100" style={{ width: `${progress * 100}%` }} />
        </div>
      )} */}

      
    </section>
  );
}