/* page-news.jsx — full News feed: date groups, category/source/sentiment filters */
const { useState: useStateN, useMemo: useMemoN } = React;
const { NEWS_FULL } = window.RADAR;

const N_CATS = ['All', 'Models', 'Funding', 'Research', 'Launches'];
const N_SENTS = [
  { key: 'all', label: 'All sentiment' },
  { key: 'pos', label: 'Positive' },
  { key: 'neu', label: 'Neutral' },
  { key: 'neg', label: 'Negative' },
];
const SOURCES = ['All sources', ...new Set(NEWS_FULL.map((n) => n.src))];
const SENT_LABEL = { pos: 'Positive', neu: 'Neutral', neg: 'Negative' };

function NewsPage() {
  useRevealAll();
  const [cat, setCat] = useStateN('All');
  const [src, setSrc] = useStateN('All sources');
  const [sent, setSent] = useStateN('all');

  const list = useMemoN(() => NEWS_FULL.filter((n) => {
    if (cat !== 'All' && n.cat !== cat) return false;
    if (src !== 'All sources' && n.src !== src) return false;
    if (sent !== 'all' && n.sent !== sent) return false;
    return true;
  }), [cat, src, sent]);

  const groups = useMemoN(() => {
    const g = [];
    list.forEach((n) => {
      let grp = g.find((x) => x.day === n.day);
      if (!grp) { grp = { day: n.day, items: [] }; g.push(grp); }
      grp.items.push(n);
    });
    return g;
  }, [list]);

  return (
    <>
      <Nav active="news" />
      <PageHero eyebrow="AI news" title={<>The signal, <span className="grad-text">without the scroll.</span></>}
        sub="Every launch, paper, model drop and mega-round — summarized, scored for momentum and sentiment, refreshed around the clock." />

      <main className="wrap page-body" style={{ maxWidth: 920 }}>
        <div className="news-controls reveal">
          <div className="pills" style={{ marginBottom: 0 }}>
            {N_CATS.map((c) => (
              <button key={c} className={'pill' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <select className="select" value={src} onChange={(e) => setSrc(e.target.value)}>
            {SOURCES.map((s) => <option key={s}>{s}</option>)}
          </select>
          <select className="select" value={sent} onChange={(e) => setSent(e.target.value)}>
            {N_SENTS.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}
          </select>
        </div>

        <div className="reveal">
          {groups.map((g) => (
            <section key={g.day}>
              <div className="day-head">{g.day}</div>
              {g.items.map((n) => (
                <article className="feed-item" key={n.title}>
                  <div>
                    <div className="news-meta">
                      <span className={'cat-chip cat-' + n.cat}>{n.cat}</span>
                      <span className="src">{n.src}</span><span>·</span><span>{n.time}</span>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                        <span className={'sent-dot sent-' + n.sent}></span>{SENT_LABEL[n.sent]}
                      </span>
                    </div>
                    <h3>{n.title}</h3>
                    <p className="sum">{n.sum}</p>
                  </div>
                  <div className="trend-big">
                    <div className="n">▲ {n.trend}</div>
                    <div className="l">Trend score</div>
                  </div>
                </article>
              ))}
            </section>
          ))}
          {list.length === 0 && <p className="empty-note">Nothing matches those filters — try widening them.</p>}
        </div>
      </main>
      <Footer />
    </>
  );
}

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