---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout
  title="Новости"
  description="Агрегатор новостей о Пушкино из внешних источников."
>
  <div class="news-head">
    <h1>Новости</h1>
    <p class="meta">
      Агрегатор новостей о Пушкино из внешних источников. Обновляется автоматически каждый час.
    </p>
  </div>
  <div id="news-list" class="news-list">
    <p class="loading">Загружаем новости…</p>
  </div>
</BaseLayout>

<style>
  .news-head { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1.5rem; }
  .news-head h1 { font-family: var(--font-serif); font-size: 1.8rem; margin: 0; }
  .news-head .meta { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; }
  .news-list { display: flex; flex-direction: column; gap: 1.5rem; }
  .news-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .news-item:last-child { border-bottom: 0; }
  .news-item .ni-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
  }
  .news-item .ni-title:hover { color: var(--accent); }
  .news-item .ni-meta {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
  }
  .news-item .ni-desc {
    font-family: var(--font-serif);
    font-size: 0.96rem;
    color: var(--ink-soft);
    margin: 0;
  }
  .loading { color: var(--muted); }
  .empty, .error { color: var(--muted); font-style: italic; }
</style>

<script is:inline>
  (async function () {
    const list = document.getElementById('news-list');
    if (!list) return;
    function fmtDate(s) {
      const d = new Date(s);
      if (Number.isNaN(d.getTime())) return s ?? '';
      return d.toLocaleDateString('ru-RU', {
        day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit'
      });
    }
    function esc(s) {
      const div = document.createElement('div');
      div.textContent = String(s ?? '');
      return div.innerHTML;
    }
    try {
      const r = await fetch('/api/news.json', { cache: 'no-store' });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const data = await r.json();
      const items = data.items || [];
      if (items.length === 0) {
        list.innerHTML = '<p class="empty">Пока нет внешних новостей.</p>';
        return;
      }
      list.innerHTML = items.map((it) => `
        <article class="news-item">
          <a class="ni-title" href="${esc(it.link)}" target="_blank" rel="noopener noreferrer">${esc(it.title)}</a>
          <div class="ni-meta">
            ${it.source ? `<span>${esc(it.source)}</span>` : ''}
            ${it.pubDate ? ` · <time datetime="${esc(it.pubDate)}">${esc(fmtDate(it.pubDate))}</time>` : ''}
          </div>
          ${it.description ? `<p class="ni-desc">${esc(it.description)}</p>` : ''}
        </article>
      `).join('');
    } catch (e) {
      list.innerHTML = '<p class="error">Не удалось загрузить новости. Загляните позже.</p>';
    }
  })();
</script>
