/* global React, t */

function NewsPage({ setPage }) {
  const [newsItems, setNewsItems] = React.useState([]);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch('/content/news.json');
        if (!res.ok) return;
        const payload = await res.json();
        const list = Array.isArray(payload)
          ? payload
          : (Array.isArray(payload.items) ? payload.items : []);
        if (!cancelled) setNewsItems(list);
      } catch (e) {}
    })();
    return () => { cancelled = true; };
  }, []);

  const tagFilter = React.useMemo(() => {
    try {
      const qp = new URLSearchParams(window.location.search || '');
      return (qp.get('tag') || '').trim().toLowerCase();
    } catch (e) {
      return '';
    }
  }, []);

  const items = React.useMemo(() => {
    const list = Array.isArray(newsItems) ? [...newsItems] : [];
    list.sort((a, b) => {
      const ad = Date.parse(a?.date || '');
      const bd = Date.parse(b?.date || '');
      if (Number.isFinite(ad) && Number.isFinite(bd)) return bd - ad;
      if (Number.isFinite(ad)) return -1;
      if (Number.isFinite(bd)) return 1;
      return String(b?.date || '').localeCompare(String(a?.date || ''));
    });
    if (!tagFilter) return list;
    return list.filter((n) => String(n?.tag || '').trim().toLowerCase() === tagFilter);
  }, [newsItems, tagFilter]);

  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12 }}>
        <div className="eyebrow">{t('news.eyebrow')}</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 52px)', marginTop: 6 }}>{t('news.title')}</h1>
      </div>
      {!!tagFilter && (
        <div style={{ marginTop: 14 }}>
          <span className="tag">{`Tag: ${tagFilter}`}</span>
        </div>
      )}
      <div style={{ marginTop: 28, display: 'grid', gap: 12 }}>
        {items.map((n, i) => (
          <a
            key={n.slug || `${n.title || 'news'}-${i}`}
            href={n.slug ? `/news/[slug]/?slug=${encodeURIComponent(n.slug)}` : '#news'}
            className="card"
            style={{ display: 'grid', gridTemplateColumns: '110px 90px 1fr', gap: 18, alignItems: 'center' }}
          >
            <span className="tag">{n.tag || 'NEWS'}</span>
            <span className="eyebrow" style={{ fontSize: 11 }}>{n.date || ''}</span>
            <span style={{ fontSize: 16, fontWeight: 600 }}>{n.title || ''}</span>
          </a>
        ))}
      </div>
      <button onClick={() => setPage('home')} className="btn btn--ghost" style={{ marginTop: 22 }}>{t('action.back_to_hub')}</button>
    </div>
  );
}

Object.assign(window, { NewsPage });