/* News / editorial feed + single article view. */

function NewsPage({ data, navigate, dark, route }) {
  // single article
  if (route.id) {
    const item = data.news.find((n) => n.id === route.id);
    if (!item) return <div className="news-page"><div className="no-results"><h3>Story not found.</h3></div></div>;
    const artist = data.artists.find((a) => a.id === item.artistId);
    const date = new Date(item.date + "T00:00:00").toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
    const others = data.news.filter((n) => n.id !== item.id).slice(0, 3);
    return (
      <article className="article">
        <button className="back-link" onClick={() => navigate({ name: "news" })}>
          <ArrowIcon dir="left" /> All news
        </button>
        <div className="article-head">
          <Eyebrow>{item.kind} · {item.tag}</Eyebrow>
          <h1 className="article-title">{item.title}</h1>
          <p className="article-meta">{date}{artist ? ` · on ${artist.name}` : ""}</p>
        </div>
        <div className="article-hero">
          <ArtImage work={{ id: item.id, hue: item.hue, w: 16, h: 8 }} dark={dark} captionVisible={false} />
        </div>
        <div className="article-body">
          <p className="article-lede">{item.excerpt}</p>
          <p>This is placeholder editorial copy for the prototype. In the live product, this is where the full story would run — studio visits, interviews, exhibition reviews and new-work announcements, written by the Handify editorial team and contributing critics.</p>
          <p>Each story links back to the artist's public profile and any available works, so readers can move seamlessly from reading to discovering to collecting.</p>
          {artist && (
            <button className="article-artist-cta" onClick={() => navigate({ name: "profile", slug: artist.slug })}>
              <Portrait artist={artist} dark={dark} round style={{ width: 48, height: 48 }} />
              <span className="aac-text">
                <span className="aac-name">{artist.name}</span>
                <span className="aac-meta">{artist.field} · {artist.flag} {artist.city}</span>
              </span>
              <span className="aac-arrow">View profile <ArrowIcon /></span>
            </button>
          )}
        </div>
        <section className="article-more alt-band">
          <div className="section-head"><h2 className="section-title">Keep <span className="title-num">reading</span></h2></div>
          <div className="news-grid-rest three">
            {others.map((n) => (
              <NewsCard key={n.id} item={n} artist={data.artists.find((a) => a.id === n.artistId)} navigate={navigate} dark={dark} />
            ))}
          </div>
        </section>
      </article>
    );
  }

  // feed
  const NEWS_PAGE_SIZE = 12;
  const [tag, setTag]   = React.useState("All");
  const [page, setPage] = React.useState(1);

  const tags = ["All", ...Array.from(new Set(data.news.map((n) => n.tag)))];
  const list = data.news.filter((n) => tag === "All" || n.tag === tag);

  React.useEffect(() => { setPage(1); }, [tag]);

  const [lead, ...rest] = list;
  const restPaged  = rest.slice((page - 1) * NEWS_PAGE_SIZE, page * NEWS_PAGE_SIZE);
  const totalPages = Math.ceil(list.length / NEWS_PAGE_SIZE) || 1;

  return (
    <div className="news-page">
      <div className="news-masthead">
        <Eyebrow>The journal · spotlights, interviews & new work</Eyebrow>
        <h1 className="news-page-title">NEWS</h1>
        <div className="chip-wrap news-tags">
          {tags.map((t) => (
            <button key={t} className={"chip" + (tag === t ? " on" : "")} onClick={() => setTag(t)}>{t}</button>
          ))}
        </div>
      </div>

      {page === 1 && lead && (
        <div className="news-lead">
          <NewsCard item={lead} artist={data.artists.find((a) => a.id === lead.artistId)} navigate={navigate} dark={dark} feature />
        </div>
      )}

      <div className="news-feed-grid">
        {restPaged.map((n) => (
          <NewsCard key={n.id} item={n} artist={data.artists.find((a) => a.id === n.artistId)} navigate={navigate} dark={dark} />
        ))}
      </div>
      <Pagination page={page} totalPages={totalPages} onChange={setPage} />
    </div>
  );
}

Object.assign(window, { NewsPage });