"use client";

import { useEffect, useRef, useState } from "react";
import { SectionIcon } from "./icons";
import type { GalleryGridData } from "./GalleryGrid.schema";

const COUNT_LABELS = {
  ar: { pre: "عرض ", post: " صورة" },
  en: { pre: "Showing ", post: " photos" },
} as const;

function detectLocale(): "ar" | "en" {
  if (typeof document === "undefined") return "ar";
  return document.documentElement.lang === "en" ? "en" : "ar";
}

export function GalleryGrid({ data }: { data: GalleryGridData }) {
  const total = data.items.length;
  const ref = useRef<HTMLDivElement | null>(null);
  const [locale, setLocale] = useState<"ar" | "en">("ar");
  useEffect(() => setLocale(detectLocale()), []);
  const labels = COUNT_LABELS[locale];

  useEffect(() => {
    let lightbox: { destroy: () => void } | null = null;
    (async () => {
      try {
        const GLightboxModule = (await import("glightbox")) as unknown as {
          default: (options: Record<string, unknown>) => { destroy: () => void };
        };
        lightbox = GLightboxModule.default({
          selector: '[data-screen-label="Gallery"] .gtile',
          touchNavigation: true,
          loop: true,
        });
      } catch (error) {
        console.warn("[GalleryGrid] GLightbox init failed:", error);
      }
    })();
    return () => {
      lightbox?.destroy();
    };
  }, []);

  return (
    <section className="gallery-section" id="gallery" data-screen-label="Gallery" ref={ref}>
      <div className="wrap">
        <div className="gallery-head">
          <div>
            {data.eyebrow ? (
              <span className="eyebrow">
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {data.title_lines.length > 0 ? (
              <h2>
                {data.title_lines.map((line, i) => (
                  <span
                    key={i}
                    dangerouslySetInnerHTML={{ __html: line + (i < data.title_lines.length - 1 ? "<br/>" : "") }}
                  />
                ))}
              </h2>
            ) : null}
          </div>
          <div className="count">
            {labels.pre}
            <span className="n" id="visibleCount">{data.default_count_display}</span> / {data.default_count_display}
            {labels.post}
          </div>
        </div>

        <div className="masonry" id="masonry">
          {data.items.map((item, i) => (
            <a
              key={i}
              className={`gtile tile-${item.tile} ${item.bg}`}
              data-cat={item.cat}
              data-title={item.title}
              data-loc={item.loc}
              href={item.image_url || "#"}
            >
              <div
                className="g-bg"
                style={
                  item.image_url
                    ? { backgroundImage: `url('${item.image_url}')`, backgroundSize: "cover", backgroundPosition: "center" }
                    : undefined
                }
                role={item.image_url ? "img" : undefined}
                aria-label={item.image_url ? item.image_alt || item.title : undefined}
              />
              <span className="g-tag">{item.tag}</span>
              <div className="g-zoom">
                <SectionIcon name="maximize-2" size={18} />
              </div>
              <div className="g-content">
                <div className="cat">{item.category_eyebrow}</div>
                <h4>{item.title}</h4>
              </div>
            </a>
          ))}
        </div>

        <div className="empty-state" id="emptyState" style={{ display: "none" }}>
          <div className="ic">
            <SectionIcon name={data.empty_state.icon} size={32} />
          </div>
          <h3>{data.empty_state.title}</h3>
          <p>{data.empty_state.subtitle}</p>
        </div>

        <span hidden>{total}</span>
      </div>
    </section>
  );
}

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