/* Bilermen site - News list + article detail */

const { useState } = React;

function NewsList({ navigate }) {
  const items = window.SITE_DATA.NEWS;
  const lang = window.SITE_LANG || 'en';
  const allLabel = t('sub.news.filters.all');
  const [filter, setFilter] = useState(allLabel);
  // Build category list (use translated category if available)
  const catSet = new Set();
  items.forEach(n => catSet.add(n['category_' + lang] || n.category));
  const categories = [allLabel, ...Array.from(catSet)];
  const filtered = filter === allLabel ? items : items.filter(n => (n['category_' + lang] || n.category) === filter);
  const dateLocale = lang === 'ru' ? 'ru-RU' : 'en-US';
  const formatDate = (iso) => {
    const d = new Date(iso);
    return d.toLocaleDateString(dateLocale, { month: 'long', year: 'numeric' });
  };
  const coverColors = [
    ['#006D77', '#0E8B95'], ['#143038', '#1B4E66'], ['#3CB4B4', '#2D8E95'],
    ['#1B4E7A', '#2D6BA1'], ['#2D5F3C', '#3F7A4E'], ['#5B3D7A', '#7B5BA8'],
  ];
  return (
    <>
      <section className="subhero" data-screen-label="News - List">
        <div className="container">
          <FadeIn>
            <a className="crumb" onClick={() => navigate('/')}>{t('sub.home')}</a>
            <Eyebrow>{t('sub.news.eyebrow')}</Eyebrow>
            <h1 className="display-xl">{fmtAmp(t('sub.news.title'))}</h1>
            <p className="lede">{t('sub.news.lede')}</p>
          </FadeIn>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="news-filters">
            {categories.map(c => (
              <button key={c}
                      className={'news-chip' + (filter === c ? ' active' : '')}
                      onClick={() => setFilter(c)}>{c}</button>
            ))}
          </div>
          <div className="news-grid-full">
            {filtered.map((n, i) => {
              const c = coverColors[i % coverColors.length];
              const title = n['title_' + lang] || n.title;
              const dek = n['dek_' + lang] || n.dek;
              const category = n['category_' + lang] || n.category;
              return (
                <FadeIn key={n.slug} delay={i * 50}>
                  <article className="news-teaser-card" onClick={() => navigate('/news/' + n.slug)}>
                    {n.image ? (
                      <div className="news-teaser-cover news-teaser-cover-img">
                        <img src={n.image} alt={title} loading="lazy" decoding="async" />
                        <div className="news-teaser-tag">{category}</div>
                      </div>
                    ) : (
                      <div className="news-teaser-cover" style={{ background: `linear-gradient(135deg, ${c[0]}, ${c[1]})` }}>
                        <div className="news-teaser-cover-pattern"></div>
                        <div className="news-teaser-tag">{category}</div>
                      </div>
                    )}
                    <div className="news-teaser-body">
                      <div className="news-teaser-date">{formatDate(n.date)}</div>
                      <h4 className="news-teaser-title">{fmtAmp(title)}</h4>
                      <p className="news-teaser-dek">{dek}</p>
                      <span className="news-teaser-link">{t('sub.news.readMore')} →</span>
                    </div>
                  </article>
                </FadeIn>
              );
            })}
          </div>
        </div>
      </section>
      <section className="subscribe-band">
        <div className="container">
          <div className="subscribe-grid">
            <div>
              <Eyebrow>{lang === 'ru' ? 'Будьте в курсе' : 'Stay updated'}</Eyebrow>
              <h3 className="display-md">{lang === 'ru' ? 'Получайте новости и аналитику Bilermen.' : 'Get news and insights from Bilermen.'}</h3>
              <p>{lang === 'ru' ? 'Оставьте рабочий email - и мы будем присылать наши материалы о рынке Туркменистана.' : 'Leave your work email and we will share our notes on the Turkmen market.'}</p>
            </div>
            <form className="subscribe-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder={lang === 'ru' ? 'Ваш рабочий email' : 'Your work email'} />
              <Button arrow>{lang === 'ru' ? 'Подписаться' : 'Subscribe'}</Button>
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

function ArticleDetail({ slug, navigate }) {
  const a = window.SITE_DATA.NEWS.find(x => x.slug === slug);
  if (!a) return null;
  const lang = window.SITE_LANG || 'en';
  const dateLocale = lang === 'ru' ? 'ru-RU' : 'en-GB';
  const formatDate = (iso) => new Date(iso).toLocaleDateString(dateLocale, { day: '2-digit', month: 'long', year: 'numeric' });
  const others = window.SITE_DATA.NEWS.filter(n => n.slug !== slug).slice(0, 3);
  const title = a['title_' + lang] || a.title;
  const dek = a['dek_' + lang] || a.dek;
  const body = a['body_' + lang] || a.body;
  const category = a['category_' + lang] || a.category;
  const L = {
    crumb: lang === 'ru' ? '← Новости и брифинги' : '← News & briefings',
    by: lang === 'ru' ? 'Партнёры Bilermen' : 'Bilermen partners',
    more: lang === 'ru' ? 'Ещё от Bilermen' : 'More from Bilermen',
  };
  return (
    <>
      <section className="subhero" data-screen-label={'News - ' + title.slice(0, 40)} style={{ position: 'relative', overflow: 'hidden', color: 'var(--color-on-dark)' }}>
        {a.image && <img src={a.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(6,52,58,0.86) 0%, rgba(10,31,38,0.50) 55%, rgba(0,109,119,0.30) 100%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <FadeIn>
            <a className="crumb" style={{ color: 'var(--color-on-dark-soft)' }} onClick={() => navigate('/news')}>{L.crumb}</a>
            <Eyebrow onDark>{category}</Eyebrow>
            <h1 className="display-lg" style={{ maxWidth: 820, color: '#fff' }}>{fmtAmp(title)}</h1>
          </FadeIn>
        </div>
      </section>
      <section>
        <div className="container">
          <article className="article-body">
            <FadeIn>
              <div className="meta">
                <span className="cat">{category}</span>
                <span>{formatDate(a.date)}</span>
                <span>{L.by}</span>
              </div>
              <p style={{ fontSize: 22, fontFamily: 'var(--font-serif)', fontWeight: 500, lineHeight: 1.45, color: 'var(--color-ink)', letterSpacing: '-0.3px', marginBottom: 36 }}>{dek}</p>
              {body.split('\n\n').map((para, i) => <p key={i}>{para}</p>)}
            </FadeIn>
            <FadeIn>
              <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--color-hairline)' }}>
                <Eyebrow>{L.more}</Eyebrow>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 12 }}>
                  {others.map(o => (
                    <a key={o.slug} className="text-link" onClick={() => navigate('/news/' + o.slug)}>{o['title_' + lang] || o.title} <span>→</span></a>
                  ))}
                </div>
              </div>
            </FadeIn>
          </article>
        </div>
      </section>
      <CtaDark navigate={navigate} />
    </>
  );
}

window.NewsList = NewsList;
window.ArticleDetail = ArticleDetail;