"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;

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