"use client";
import useSWR from "swr";
import { useEffect, useMemo, useState } from "react";
import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";

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

export default function PartnerScroller() {
  const { data: catData } = useSWR<{ categories: any[] }>("/api/partner-categories", fetcher);
  const categories = catData?.categories ?? [];
  const defaultCatId = categories[0]?.id || "";
  const [selectedId, setSelectedId] = useState<string>(defaultCatId);

  useEffect(() => {
    if (!selectedId) {
      let id = "";
      try {
        id = (window as any).__partnerCategoryId || localStorage.getItem("selectedPartnerCategoryId") || "";
      } catch {}
      if (!id) id = defaultCatId;
      if (id) setSelectedId(id);
    }
  }, [defaultCatId, selectedId]);

  // Listen to HeroBanner selection events
  useEffect(() => {
    // initialize from global if present
    try {
      const initial = (window as any).__partnerCategoryId;
      const stored = localStorage.getItem("selectedPartnerCategoryId");
      if (initial) setSelectedId(initial);
      else if (stored) setSelectedId(stored);
    } catch {}
    const handler = (e: Event) => {
      const ce = e as CustomEvent<{ id: string }>;
      if (ce?.detail?.id) setSelectedId(ce.detail.id);
    };
    window.addEventListener("partnerCategorySelect", handler as EventListener);
    return () => window.removeEventListener("partnerCategorySelect", handler as EventListener);
  }, []);

  const partnersQuery = useMemo(() => (selectedId ? `/api/partners?categoryId=${encodeURIComponent(selectedId)}` : "/api/partners"), [selectedId]);
  const { data: partnersData } = useSWR<{ partners: any[] }>(partnersQuery, fetcher);
  const partners = partnersData?.partners ?? [];

  // Fallback to approved partner requests if no partners
  const { data: reqData } = useSWR<{ items: any[] }>(partners.length === 0 ? "/api/partner-shops" : null, fetcher);
  const activeCategoryName = useMemo(() => categories.find((c: any) => c.id === selectedId)?.name, [categories, selectedId]);
  const fallbackItems = useMemo(() => {
    if (!reqData?.items) return [] as any[];
    const filtered = activeCategoryName ? reqData.items.filter((it: any) => it.category === activeCategoryName) : reqData.items;
    return filtered.map((s: any) => ({ id: s.id, region: s.region, name: s.name, address: s.address, image: s.imageUrl || "/sample.jpg" }));
  }, [reqData, activeCategoryName]);

  const items = partners.length > 0
    ? partners.map((p: any) => ({ id: p.id, region: p.address ? String(p.address).split(" ")[0] : p.category, name: p.name, address: p.address || "", image: p.imageUrl || "/sample.jpg" }))
    : fallbackItems;

  const isLoading = !partnersData && (!reqData || partners.length === 0);

  if (isLoading) {
    // 스켈레톤: 실제 카드와 동일 사이즈(384x308)로 5~6개 표시
    const skeletons = Array.from({ length: 6 }).map((_, i) => i);
    return (
      <div className="relative h-[400px]">
        <div className="scrollbar-hidden h-full overflow-x-auto overflow-y-hidden">
          <div className="flex h-full items-center gap-4">
            {skeletons.map((i) => (
              <article
                key={`sk-${i}`}
                className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.05),0_0_2px_rgba(0,0,0,0.05)]"
              >
                <div className="grid grid-rows-[192px_116px] h-full">
                  <div className="w-full h-[192px] overflow-hidden rounded-t-[16px] bg-neutral-200 animate-pulse" />
                  <div className="h-[116px] px-8 py-4 grid grid-rows-[26px_auto_16px]">
                    <div className="w-[68px] h-[26px] rounded-[20px] bg-neutral-200 animate-pulse" />
                    <div className="self-center">
                      <div className="h-6 w-[70%] rounded bg-neutral-200 animate-pulse" />
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="h-4 w-[60%] rounded bg-neutral-200 animate-pulse" />
                      <div className="h-4 w-8 rounded bg-neutral-200 animate-pulse" />
                      <div className="h-4 w-8 rounded bg-neutral-200 animate-pulse" />
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (items.length === 0) return null;
  return <HorizontalCardScroller items={items} />;
}


