"use client";

import { useEffect } from "react";
import type { GalleryFiltersData } from "./GalleryFilters.schema";

/**
 * Filter chip bar that wires up clicks to filter the sibling .masonry items
 * via a CSS attribute selector. Pairs with `<GalleryGrid />`.
 */
export function GalleryFilters({ data }: { data: GalleryFiltersData }) {
  useEffect(() => {
    const buttons = document.querySelectorAll<HTMLButtonElement>("[data-filter]");
    const masonry = document.querySelector<HTMLElement>(".masonry");
    const visibleCount = document.getElementById("visibleCount");
    const emptyState = document.getElementById("emptyState");
    if (!masonry || buttons.length === 0) return;
    const tiles = Array.from(masonry.querySelectorAll<HTMLElement>(".gtile"));

    const isArabic = document.documentElement.lang !== "en";
    const arabicDigit = (n: number) => String(n).replace(/\d/g, (d) => "٠١٢٣٤٥٦٧٨٩"[Number(d)] ?? d);
    const formatCount = (n: number) => (isArabic ? arabicDigit(n) : String(n));

    const apply = (value: string) => {
      let visible = 0;
      tiles.forEach((tile) => {
        const match = value === "all" || tile.dataset.cat === value;
        tile.style.display = match ? "" : "none";
        if (match) visible++;
      });
      if (visibleCount) visibleCount.textContent = formatCount(visible);
      if (emptyState) emptyState.style.display = visible === 0 ? "" : "none";
    };

    const handlers: Array<() => void> = [];
    buttons.forEach((btn) => {
      const handler = () => {
        buttons.forEach((b) => b.classList.remove("on"));
        btn.classList.add("on");
        apply(btn.dataset.filter || "all");
      };
      btn.addEventListener("click", handler);
      handlers.push(() => btn.removeEventListener("click", handler));
    });
    apply("all");
    return () => handlers.forEach((off) => off());
  }, []);

  return (
    <div className="gallery-filters" data-screen-label="Filters">
      <div className="filter-row" id="filter-row">
        {data.filters.map((filter, i) => (
          <button key={filter.value} className={`pill${i === 0 ? " on" : ""}`} data-filter={filter.value} type="button">
            {filter.label} <span className="pc">{String(filter.count).padStart(2, "0")}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// Registration moved to GalleryFilters.register.ts — see that file for why.