/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, useLang */
const { useState, useEffect, useCallback } = React;

/* ── Photo lightbox ── */
const PhotoLightbox = ({ project, photos, startIdx, onClose }) => {
  const [idx, setIdx] = useState(startIdx || 0);

  const prev = useCallback(() => setIdx(i => Math.max(0, i - 1)), []);
  const next = useCallback(() => setIdx(i => Math.min(photos.length - 1, i + 1)), [photos.length]);

  useEffect(() => {
    const onKey = e => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose, prev, next]);

  if (!photos || !photos.length) return null;

  return (
    <div className="photo-lb" onClick={onClose}>
      <div className="photo-lb__inner" onClick={e => e.stopPropagation()}>
        {/* Top bar */}
        <div className="photo-lb__bar">
          <span className="photo-lb__name">{project.name}</span>
          <span className="photo-lb__counter">{idx + 1} / {photos.length}</span>
          <button className="photo-lb__close" onClick={onClose} aria-label="Close">
            <Icon name="close" size={16}/>
          </button>
        </div>

        {/* Image */}
        <div className="photo-lb__stage">
          <img src={photos[idx]} alt={project.name + " photo " + (idx + 1)} key={photos[idx]}/>
          {idx > 0 && (
            <button className="photo-lb__nav photo-lb__nav--prev" onClick={prev} aria-label="Previous">
              <span className="lb-arrow-flip"><Icon name="arrow" size={18}/></span>
            </button>
          )}
          {idx < photos.length - 1 && (
            <button className="photo-lb__nav photo-lb__nav--next" onClick={next} aria-label="Next">
              <Icon name="arrow" size={18}/>
            </button>
          )}
        </div>

        {/* Thumbnail strip */}
        <div className="photo-lb__thumbs">
          {photos.map((src, i) => (
            <button
              key={i}
              className={"photo-lb__thumb" + (i === idx ? " is-active" : "")}
              onClick={() => setIdx(i)}
              aria-label={"Photo " + (i + 1)}
            >
              <img src={src} alt={""}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ── Gallery card ── */
const GalleryCard = ({ project, photoCount, onOpen, viewGallery, photosBadge, levelSingular, levelPlural, roomsLabel }) => (
  <button className="project gallery-card" onClick={() => onOpen(project)}>
    <div className="project__media">
      <span className="project__tag">{photoCount} {photosBadge || "photos"}</span>
      <img src={project.img} alt={project.name} loading="lazy"/>
      <div className="project__hover-hint">{viewGallery || "View gallery"}</div>
    </div>
    <div className="project__head">
      <h3>{project.name}</h3>
    </div>
    <div className="project__meta">
      <span><Icon name="area" size={14}/> {project.area} m²</span>
      <span><Icon name="levels" size={14}/> {project.levels} {project.levels > 1 ? (levelPlural || "levels") : (levelSingular || "level")}</span>
      {project.rooms && <span><Icon name="rooms" size={14}/> {project.rooms} {roomsLabel || "rooms"}</span>}
    </div>
  </button>
);

/* ── Main gallery page ── */
const GalleryInner = () => {
  const lang = useLang();
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const tg = tr.galleryPage || {};
  const tc = tr.common || {};
  const allProjects = window.NH_DATA.projects;
  const photoData = window.NH_GALLERY || {};

  // Only show houses that have real photos
  const projectsWithPhotos = allProjects.filter(p => photoData[p.id] && photoData[p.id].length > 0);

  const [openProject, setOpenProject] = useState(null);
  const photos = openProject ? (photoData[openProject.id] || []) : [];

  return (
    <>
      <PageHero
        eyebrow={tg.eyebrow || "Real builds"}
        title={tg.h2 || "Gallery"}
        lead={(tg.lead || "Photography from completed Norge House projects across Europe.") + " " + projectsWithPhotos.length + " " + (tg.leadHouses || "houses") + " — " + projectsWithPhotos.reduce((sum, p) => sum + (photoData[p.id] || []).length, 0) + " " + (tg.leadPhotos || "photos") + "."}
      />
      <section className="section" id="gallery-top">
        <div className="container">
          <div className="catalog__grid">
            {projectsWithPhotos.map(p => (
              <GalleryCard
                key={p.id}
                project={p}
                photoCount={(photoData[p.id] || []).length}
                onOpen={setOpenProject}
                viewGallery={tg.viewGallery}
                photosBadge={tg.photosBadge}
                levelSingular={tc.levelSingular}
                levelPlural={tc.levelPlural}
                roomsLabel={tc.roomsLabel}
              />
            ))}
          </div>
        </div>
      </section>
      <section className="divider">
        <div className="container">
          <div className="divider__text">{tg.dividerText1 || "Browse"} <em>{tg.dividerEm1 || "all"}</em> {tg.dividerText2 || "house"} <em>{tg.dividerEm2 || "kits"}</em></div>
          <a href="Projects.html" className="btn btn--lg">{tg.dividerCta || "View Projects"} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </section>
      {openProject && (
        <PhotoLightbox
          project={openProject}
          photos={photos}
          startIdx={0}
          onClose={() => setOpenProject(null)}
        />
      )}
    </>
  );
};

const Gallery = () => (
  <PageShell current="gallery">
    <GalleryInner/>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById("root")).render(<Gallery/>);