/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, useT, useLang */
const { useState, useMemo } = React;
const PER_PAGE = 6;

const NewsInner = () => {
  const lang = useLang();
  const t = ((window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {}).newsPage || {};
  const all = window.NH_DATA.news;
  const allLabel = t.all || "All";
  const categories = [allLabel, ...Array.from(new Set(all.map(n => n.category)))];
  const [filter, setFilter] = useState(allLabel);
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => filter === allLabel ? all : all.filter(n => n.category === 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 = cat => { setFilter(cat); setPage(1); };
  const handlePage = n => {
    setPage(n);
    const el = document.getElementById("news-top");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
  };

  return (
    <>
      <PageHero eyebrow={t.eyebrow || "News & Updates"} title={t.h2 || "News"} lead={t.lead || "Project deliveries, production updates, and short essays."}/>
      <section className="section" id="news-top">
        <div className="container">
          <div className="catalog__bar">
            <div className="catalog__filters">
              {categories.map(c => (
                <button key={c} className={filter === c ? "is-active" : ""} onClick={() => handleFilter(c)}>{c}</button>
              ))}
            </div>
            <div className="catalog__count">
              {filtered.length} {t.articles || "articles"}
              {totalPages > 1 && ` · ${t.page || "page"} ${page} / ${totalPages}`}
            </div>
          </div>
          <div className="news-list">
            {pageItems.map((n, i) => (
              <article className="news-item" key={i}>
                <div className="news-item__media"><img src={n.img} alt=""/></div>
                <div className="news-item__date">{n.category} · {n.date}</div>
                <h3>{n.title}</h3>
                <span className="news-item__more">
                  <a href={"Article.html#" + n.id}>{t.readMore || "Read article"} <Icon name="arrow" size={14}/></a>
                </span>
              </article>
            ))}
          </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>
    </>
  );
};

const NewsPage = () => (
  <PageShell current="news">
    <NewsInner/>
  </PageShell>
);

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