"use client";

import { useRef } from "react";
import { useGLightbox } from "@/hooks/useGLightbox";
import { useLucideIcons } from "@/hooks/useLucideIcons";
import { useSwiperCoverflow } from "@/hooks/useSwiperCoverflow";
import { useCardSpotlight } from "@/hooks/useCardSpotlight";

interface GallerySlide {
  href: string;
  bg: string;
  num: string;
  cat: string;
  trip?: boolean;
  eyebrow: string;
  titleLine1: string;
  titleLine2: string;
  alt: string;
  description: string;
}

const SLIDES: ReadonlyArray<GallerySlide> = [
  { href: "https://picsum.photos/seed/backyard-riyadh-rooftop/1600/1200", bg: "gal-bg-1", num: "٠١ / ٠٨", cat: "فعاليات", eyebrow: "RIYADH · ROOFTOP", titleLine1: "أمسية في", titleLine2: "قلب الرياض.", alt: "أمسية في قلب الرياض", description: "RIYADH · ROOFTOP — حفل تحت أضواء المدينة." },
  { href: "https://picsum.photos/seed/backyard-alula-sunrise/1600/1200", bg: "gal-bg-2", num: "٠٢ / ٠٨", cat: "سياحة", trip: true, eyebrow: "ALULA · SUNRISE", titleLine1: "شروق فوق", titleLine2: "صخور العُلا.", alt: "شروق فوق صخور العُلا", description: "ALULA · SUNRISE — لحظة بداية اليوم." },
  { href: "https://picsum.photos/seed/backyard-diriyah-night/1600/1200", bg: "gal-bg-3", num: "٠٣ / ٠٨", cat: "فعاليات", eyebrow: "DIRIYAH · OPEN AIR", titleLine1: "حفل تحت", titleLine2: "أضواء البنفسج.", alt: "حفل تحت أضواء البنفسج", description: "DIRIYAH · OPEN AIR — أمسية مفتوحة في الهواء الطلق." },
  { href: "https://picsum.photos/seed/backyard-road-makkah/1600/1200", bg: "gal-bg-4", num: "٠٤ / ٠٨", cat: "عمرة", trip: true, eyebrow: "ROAD · TO MAKKAH", titleLine1: "طريق إلى", titleLine2: "مكة المكرّمة.", alt: "طريق إلى مكة المكرّمة", description: "ROAD · TO MAKKAH — لحظة من رحلة العمرة." },
  { href: "https://picsum.photos/seed/backyard-abha-mist/1600/1200", bg: "gal-bg-5", num: "٠٥ / ٠٨", cat: "سياحة", trip: true, eyebrow: "ABHA · MIST", titleLine1: "أبها في", titleLine2: "ضباب الصباح.", alt: "أبها في ضباب الصباح", description: "ABHA · MIST — جبال الجنوب في الفجر." },
  { href: "https://picsum.photos/seed/backyard-desert-night/1600/1200", bg: "gal-bg-6", num: "٠٦ / ٠٨", cat: "فعاليات", eyebrow: "DESERT · NIGHT", titleLine1: "سهرة تحت", titleLine2: "نجوم الصحراء.", alt: "سهرة تحت نجوم الصحراء", description: "DESERT · NIGHT — لقاء في قلب الرمال." },
  { href: "https://picsum.photos/seed/backyard-jeddah-corniche/1600/1200", bg: "gal-bg-7", num: "٠٧ / ٠٨", cat: "فعاليات", eyebrow: "JEDDAH · CORNICHE", titleLine1: "أمسية بحرية", titleLine2: "في جدة.", alt: "أمسية بحرية في جدة", description: "JEDDAH · CORNICHE — على ضفاف البحر الأحمر." },
  { href: "https://picsum.photos/seed/backyard-family/1600/1200", bg: "gal-bg-8", num: "٠٨ / ٠٨", cat: "عائلية", trip: true, eyebrow: "FAMILY · OUTDOORS", titleLine1: "لقاء عائلي", titleLine2: "في الهواء الطلق.", alt: "لقاء عائلي في الهواء الطلق", description: "FAMILY · OUTDOORS — لحظات تجمع العائلة." },
];

const MARQUEE_CHIPS: ReadonlyArray<{ label: string; variant?: string }> = [
  { label: "فعاليات تحت النجوم" },
  { label: "رحلات عائلية", variant: "green" },
  { label: "تجارب طبيعية", variant: "beige" },
  { label: "أمسيات الرياض" },
  { label: "برامج العُلا", variant: "green" },
  { label: "برامج العمرة", variant: "ink" },
  { label: "حفلات موسمية" },
  { label: "أبها · الطائف", variant: "green" },
  { label: "نهاية أسبوع", variant: "beige" },
  { label: "فعاليات للشركات" },
  { label: "رحلات بحرية", variant: "green" },
  { label: "برامج خاصة", variant: "ink" },
];

export function GallerySection() {
  const rootRef = useRef<HTMLElement | null>(null);

  useLucideIcons();
  useSwiperCoverflow(rootRef, {
    containerSelector: ".gal-swiper",
    paginationSelector: "#galPagination",
    currentLabelSelector: "#galCurrent",
  });
  useCardSpotlight(".gallery-sec", ".gal-card");
  useGLightbox({ selector: ".gallery-sec .gallery-link" });

  return (
    <section ref={rootRef} className="gallery-sec" data-screen-label="04b Gallery">
      <div className="pattern" />

      <div className="stamp-bg" aria-hidden="true">
        <div className="orbit" />
        <div className="pol-stack">
          <div className="pol pol-1">
            <div className="photo" />
            <div className="cap">{"Riyadh '26"}</div>
          </div>
          <div className="pol pol-3">
            <div className="photo" />
            <div className="cap">{"AlUla '26"}</div>
          </div>
          <div className="pol pol-2">
            <div className="photo" />
            <div className="cap">Backyard</div>
          </div>
        </div>
        <span className="corner-stamp">
          <span className="dot" />
          {"Gallery '26"}
        </span>
      </div>

      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="gallery-head">
          <div className="left">
            <div className="label-row">
              <span className="eyebrow">
                <span className="pip" />
                من رحلاتنا
              </span>
              <span className="index-pill">
                <span className="num" id="galCurrent">
                  ٠١
                </span>
                <span>/</span>
                <span className="total">٠٨</span>
              </span>
            </div>
            <h2>
              لحظات تستحقّ
              <br />
              أن <em>تُروى.</em>
            </h2>
            <p className="sub">
              من سهرات الصحراء إلى ضباب أبها، ومن أمسيات الرياض إلى طريق مكة — ألبوم لحظات حقيقية صنعناها مع
              ضيوفنا.
            </p>
          </div>
        </div>

        <div className="swiper gal-swiper">
          <div className="swiper-wrapper">
            {SLIDES.map((slide) => (
              <div key={slide.bg} className="swiper-slide">
                <a
                  href={slide.href}
                  className="gallery-link"
                  data-type="image"
                  data-gallery="backyard"
                  data-title={slide.alt}
                  data-description={slide.description}
                >
                  <div className={`gal-card${slide.trip ? " is-trip" : ""}`}>
                    <div className={`img ${slide.bg}`} />
                    <span className="zoom-hint" aria-hidden="true">
                      <i data-lucide="zoom-in" />
                    </span>
                    <span className="num">{slide.num}</span>
                    <span className="cat">
                      <span className="dot" />
                      {slide.cat}
                    </span>
                    <div className="floor">
                      <div className="eb">{slide.eyebrow}</div>
                      <div className="ttl">
                        {slide.titleLine1}
                        <br />
                        {slide.titleLine2}
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            ))}
          </div>
        </div>

        <div className="gallery-nav-bottom">
          <button className="gal-btn gal-prev" aria-label="السابق">
            <i data-lucide="chevron-right" />
          </button>
          <button className="gal-btn gal-next" aria-label="التالي">
            <i data-lucide="chevron-left" />
          </button>
        </div>

        <div className="gallery-marquee" aria-hidden="true">
          <div className="marquee-track">
            {[...MARQUEE_CHIPS, ...MARQUEE_CHIPS.slice(0, 6)].map((chip, index) => (
              <span key={`${chip.label}-${index}`} className={`marq-chip${chip.variant ? ` ${chip.variant}` : ""}`}>
                <span className="sw" />
                {chip.label}
              </span>
            ))}
          </div>
        </div>

        <div className="gallery-foot">
          <div className="pagination" id="galPagination">
            {SLIDES.map((_, index) => (
              <span key={index} className={`dot${index === 0 ? " is-active" : ""}`} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}