"use client";

import { useEffect } from "react";
import { useLucideIcons } from "@/hooks/useLucideIcons";
import { CATEGORY_LABELS, type GalleryTile, toArabicDigits } from "./galleryData";

interface GalleryLightboxProps {
  tiles: ReadonlyArray<GalleryTile>;
  activeIndex: number | null;
  onClose: () => void;
  onNext: () => void;
  onPrev: () => void;
}

export function GalleryLightbox({ tiles, activeIndex, onClose, onNext, onPrev }: GalleryLightboxProps) {
  useLucideIcons([activeIndex]);
  const isOpen = activeIndex !== null;
  const displayIndex = activeIndex ?? 0;
  const tile = tiles[displayIndex] ?? null;

  useEffect(() => {
    if (!isOpen) return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = previous;
    };
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
      // RTL: left arrow advances to next
      if (event.key === "ArrowLeft") onNext();
      if (event.key === "ArrowRight") onPrev();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [isOpen, onClose, onNext, onPrev]);

  const onBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    if (event.target === event.currentTarget) onClose();
  };

  const counter = `${toArabicDigits(String(displayIndex + 1).padStart(2, "0"))} / ${toArabicDigits(String(tiles.length))}`;

  return (
    <div
      className={`lb-modal${isOpen ? " on" : ""}`}
      aria-hidden={!isOpen}
      role="dialog"
      onClick={onBackdropClick}
    >
      <button type="button" className="lb-nav lb-prev" aria-label="السابق" onClick={onPrev}>
        <i data-lucide="chevron-right" />
      </button>
      <div className="lb-stage">
        <div className="lb-bar">
          <div className="counter">{counter}</div>
          <div className="lb-controls">
            <button type="button" className="lb-icon" aria-label="مشاركة">
              <i data-lucide="share-2" />
            </button>
            <button type="button" className="lb-icon close" aria-label="إغلاق" onClick={onClose}>
              <i data-lucide="x" />
            </button>
          </div>
        </div>
        <div className={`lb-image ${tile?.bg ?? ""}`}>
          <div className="lb-cap">
            <div className="left">
              <span className="cat-tag">{tile ? CATEGORY_LABELS[tile.category] : ""}</span>
              <h3>{tile?.title}</h3>
              <span className="loc">
                {activeIndex === null ? "JAX · RIYADH · JUN 2026" : tile?.location}
              </span>
            </div>
            <div className="right">
              <a href="https://wa.me/" className="lb-wa" rel="noopener noreferrer" target="_blank">
                <i data-lucide="message-circle" />
                اسأل عن هذه التجربة
              </a>
            </div>
          </div>
        </div>
      </div>
      <button type="button" className="lb-nav lb-next" aria-label="التالي" onClick={onNext}>
        <i data-lucide="chevron-left" />
      </button>
    </div>
  );
}