// HomeView — landing page: About, Recent News, Recent Publications.
const HV = window.WINTELAcademicDesignSystem_045d4f;

// A Recent-Publications row: title, authors, then a journal tag right after
// the author list. No status pill.
function RecentPub({ pub }) {
  const owner = (pub.a || []).find((x) => x.owner);
  const ownerName = owner ? owner.name : 'A. Celik';
  const authors = (pub.a || []).map((x) => x.name);
  const VenueTag = window.VenueTag;
  const venueTag = window.venueTag;
  const info = venueTag ? venueTag(pub) : { short: pub.v, full: pub.v };
  const TopicTag = window.TopicTag;
  const topics = window.topicsFor ? window.topicsFor(pub) : [];
  return (
    <li style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
      <h3 style={{ margin: 0, fontSize: 'var(--text-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)', textWrap: 'pretty' }}>
        {pub.u ? (
          <a href={pub.u} target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: 'var(--link-decoration)', textUnderlineOffset: '2px' }}>{pub.t}</a>
        ) : pub.t}
      </h3>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.5rem', fontSize: 'var(--text-base)', fontWeight: 'var(--weight-light)', color: 'var(--text-body)', lineHeight: 'var(--leading-snug)' }}>
        <span style={{ textWrap: 'pretty' }}>
          {authors.map((a, i) => {
            const isOwner = a.trim() === ownerName.trim();
            return (
              <React.Fragment key={i}>
                <span style={{ fontWeight: isOwner ? 'var(--weight-semibold)' : 'var(--weight-light)', color: isOwner ? 'var(--text-primary)' : undefined }}>{a}</span>
                {i < authors.length - 1 ? ', ' : ''}
              </React.Fragment>
            );
          })}
        </span>
        {VenueTag ? <VenueTag info={info} /> : <span>{info.short}</span>}
        {TopicTag ? topics.map((t) => <TopicTag key={t.label} topic={t} />) : null}
      </div>
    </li>
  );
}

function HomeView({ data, onNavigate }) {
  const NewsItem = window.NewsItem;
  const recentNews = (data.news || []).slice(0, 5);
  const P = window.WINTEL_PUBLICATIONS || {};
  const recentPubs = [...(P.inPress || []), ...(P.articles || [])].slice(0, 10);
  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
      <AboutSection data={data} onNavigate={onNavigate} />

      <section style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <HV.SectionHeading title="Recent News" />
        <ul style={{ margin: 0, padding: 0, borderTop: '1px solid var(--border-default)' }}>
          {recentNews.map((n, i) => <NewsItem key={i} item={n} />)}
        </ul>
        <div>
          <HV.Button variant="outline" size="sm" onClick={() => onNavigate('news')}>All news</HV.Button>
        </div>
      </section>

      <section style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
        <HV.SectionHeading title="Recent Publications" />
        <ol style={{ margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
          {recentPubs.map((pub, i) => (
            <RecentPub key={i} pub={pub} />
          ))}
        </ol>
        <div>
          <HV.Button variant="outline" size="sm" onClick={() => onNavigate('publications')}>View all publications</HV.Button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomeView });