/* global React */

// Lightbox viewer for the Gallery: large photo, prev/next, ESC + click-outside to close.
function GalleryViewer({ items, index, onClose, onPrev, onNext }) {
  React.useEffect(() => {
    if (index == null) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [index, onClose, onPrev, onNext]);

  if (index == null || !items[index]) return null;
  const item = items[index];

  return (
    <div className="ws-viewer" onClick={onClose}>
      <button className="ws-viewer__close" onClick={onClose} aria-label="Close">
        <Icon name="x" size={22} />
      </button>

      <button className="ws-viewer__arrow ws-viewer__arrow--prev"
              onClick={(e) => { e.stopPropagation(); onPrev(); }}
              aria-label="Previous">
        <Icon name="chevron-left" size={28} />
      </button>

      <div className="ws-viewer__stage" onClick={(e) => e.stopPropagation()}>
        <img className="ws-viewer__img" src={item.src} alt={item.alt || item.cat} />
        <div className="ws-viewer__meta">
          <span className="ws-viewer__cat">{item.cat}</span>
          <span className="ws-viewer__count">{index + 1} / {items.length}</span>
        </div>
      </div>

      <button className="ws-viewer__arrow ws-viewer__arrow--next"
              onClick={(e) => { e.stopPropagation(); onNext(); }}
              aria-label="Next">
        <Icon name="chevron-right" size={28} />
      </button>
    </div>
  );
}

window.GalleryViewer = GalleryViewer;

const GALLERY_ITEMS = window.WS_GALLERY_ITEMS;

function GalleryPage({ onNavigate }) {
  const [filter, setFilter] = React.useState("All");
  const [viewerIdx, setViewerIdx] = React.useState(null);
  const cats = [
    "All",
    "Exterior",
    "Living Room 1",
    "Living Room 2",
    "Dining Room",
    "Kitchen",
    "Bedroom 1 · Orange Room",
    "Bedroom 2 · Red Room",
    "Bedroom 3 · Green Room",
    "Bedroom 4 · Twin Room",
    "Ground Floor Bathroom",
    "First Floor Bathroom",
    "Third Floor Bathroom",
    "Second Floor Details",
  ];
  const visible = filter === "All" ? GALLERY_ITEMS : GALLERY_ITEMS.filter(i => i.cat === filter);

  const open = (i) => {
    setViewerIdx(i);
  };
  const close = () => setViewerIdx(null);
  const prev = () => setViewerIdx((i) => (i - 1 + visible.length) % visible.length);
  const next = () => setViewerIdx((i) => (i + 1) % visible.length);

  return (
    <div>
      <section className="ws-hero ws-hero--split">
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">Gallery</div>
          <h1 className="ws-hero__title ws-hero__title--one-line" style={{ fontSize: 60 }}>Inside 59 William Street</h1>
          <p className="ws-hero__body">Carefully restored. Beautifully designed. See the heritage facade, rooms and details that make 59 William Street feel like home.</p>
        </div>
        <div className="ws-hero__bg" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("livingRoom1", 1)})` }} />
      </section>

      <section className="ws-section ws-on-cream" style={{ paddingTop: 56 }}>
        <div className="ws-container">
          <div className="ws-gallery-filters">
            {cats.map(c => (
              <button
                key={c}
                className={"ws-filter-pill" + (filter === c ? " is-active" : "")}
                onClick={() => setFilter(c)}
              >{c}</button>
            ))}
          </div>

          <div className="ws-gallery-grid">
            {visible.map((item, i) => (
              <div
                key={i}
                className={"tile" + (item.tall ? " tall" : "")}
                onClick={() => open(i)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(i); } }}
              >
                <img
                  src={item.src}
                  alt={item.alt || `${item.cat} at 59 William Street Listowel`}
                  loading={i < 6 ? "eager" : "lazy"}
                  decoding="async"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      <GalleryViewer
        items={visible}
        index={viewerIdx}
        onClose={close}
        onPrev={prev}
        onNext={next}
      />

      <CTAStrip
        title="Ready to experience it for yourself?"
        body="Check availability and book your stay at 59 William Street."
        onPrimary={() => onNavigate("book")}
      />
    </div>
  );
}

window.GalleryPage = GalleryPage;