/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, formatPrice, useT, useLang, Lightbox, hrefFor */
const { useState, useMemo, useEffect } = React;
const PER_PAGE = 12;

// Lightbox is defined in shared.jsx and exposed via window.Lightbox so the homepage uses the same modal.

const ProjectCard = ({ p, onOpen, levelSingular, levelPlural, viewDetails, roomsLabel, tagLabels }) => (
  <button className="project" onClick={() => onOpen(p)}>
    <div className="project__media">
      <span className="project__tag">{(tagLabels && tagLabels[p.tag]) || p.tag}</span>
      <img src={p.img} alt={p.name} loading="lazy"/>
      <div className="project__hover-hint">{viewDetails || "View details"}</div>
    </div>
    <div className="project__head">
      <h3>{p.name}</h3>
    </div>
    <div className="project__meta">
      <span><Icon name="area" size={14}/> {p.area} m²</span>
      <span><Icon name="levels" size={14}/> {p.levels} {p.levels > 1 ? (levelPlural || "levels") : (levelSingular || "level")}</span>
      {p.rooms && <span><Icon name="rooms" size={14}/> {p.rooms} {roomsLabel || "rooms"}</span>}
    </div>
  </button>
);

const CatalogInner = () => {
  const lang = useLang();
  const tr = ((window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {});
  const t = tr.projectsPage || {};
  const tc = tr.common || {};
  const all = window.NH_DATA.projects;
  const allLabel = t.all || "All";
  const tags = [allLabel, ...Array.from(new Set(all.map(p => p.tag)))];
  const [filter, setFilter] = useState(allLabel);
  const [page, setPage] = useState(1);
  const [openProject, setOpenProject] = useState(null);

  // Open project lightbox when URL hash matches a project id (e.g. /Projects#house-82)
  useEffect(() => {
    const openFromHash = () => {
      const id = window.location.hash.replace("#", "");
      if (!id) return;
      const p = all.find(x => x.id === id);
      if (p) setOpenProject(p);
    };
    openFromHash();
    window.addEventListener("hashchange", openFromHash);
    return () => window.removeEventListener("hashchange", openFromHash);
  }, [all]);

  const filtered = useMemo(() => filter === allLabel ? all : all.filter(p => p.tag === filter), [filter, all, allLabel]);
  const totalPages = Math.ceil(filtered.length / PER_PAGE);
  const pageItems = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  const handleFilter = tag => { setFilter(tag); setPage(1); };
  const handlePage = n => {
    setPage(n);
    const el = document.getElementById("catalog-top");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
  };

  return (
    <>
      <PageHero eyebrow={t.eyebrow || "Our Catalogue"} title={t.h2 || "Projects"} lead={t.lead || "House kits in active production. Click any house for specifications."}/>
      <section className="section" id="catalog-top">
        <div className="container">
          <div className="catalog__bar">
            <div className="catalog__filters">
              {tags.map(tag => (
                <button key={tag} className={filter === tag ? "is-active" : ""} onClick={() => handleFilter(tag)}>{(t.tagLabels && t.tagLabels[tag]) || tag}</button>
              ))}
            </div>
            <div className="catalog__count">
              {filtered.length} {t.filterCount || "projects"}
              {totalPages > 1 && ` · ${t.page || "page"} ${page} / ${totalPages}`}
            </div>
          </div>
          <div className="catalog__grid">
            {pageItems.map(p => (
              <ProjectCard
                key={p.id}
                p={p}
                onOpen={setOpenProject}
                levelSingular={tc.levelSingular}
                levelPlural={tc.levelPlural}
                viewDetails={t.viewDetails}
                roomsLabel={t.roomsLabel}
                tagLabels={t.tagLabels}
              />
            ))}
          </div>
          {totalPages > 1 && (
            <div className="pagination">
              {page > 1 && <a href="#" onClick={e => { e.preventDefault(); handlePage(page - 1); }} style={{ fontSize:18 }}>‹</a>}
              {Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
                <a key={n} href="#" className={n === page ? "is-active" : ""} onClick={e => { e.preventDefault(); handlePage(n); }}>{n}</a>
              ))}
              {page < totalPages && <a href="#" onClick={e => { e.preventDefault(); handlePage(page + 1); }} style={{ fontSize:18 }}>›</a>}
            </div>
          )}
        </div>
      </section>
      <section className="divider">
        <div className="container">
          <div className="divider__text">{t.noCta || "Don't see your"} <em>{t.noCta2 || "house"}</em>{t.noCta3 || "? We design custom."}</div>
          <a href={hrefFor("contacts", lang)} className="btn btn--lg">{t.cta || "Get in Touch"} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </section>
      <Lightbox project={openProject} onClose={() => { setOpenProject(null); if (window.location.hash) history.replaceState(null, "", window.location.pathname + window.location.search); }}/>
    </>
  );
};

const Projects = () => (
  <PageShell current="projects">
    <CatalogInner/>
  </PageShell>
);

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