// news.js — News-Board (v4): kuratierte Neuigkeiten rund um lokale LLMs.

import { api } from "../core/api.js";
import { $, esc, ago } from "../core/ui.js";

function mount() {
  $(".view[data-view='news']").innerHTML = `
    <div class="pagehead">
      <div><h1>News</h1>
        <div class="sub">Neuigkeiten rund um lokale LLMs — automatisch aus kuratierten Quellen (HuggingFace, llama.cpp, Ollama, r/LocalLLaMA …).</div></div>
      <button class="ghost" id="news-refresh">Aktualisieren</button>
    </div>
    <div class="card"><div id="news-list">
      <div class="empty" style="text-align:center;padding:40px">Lade News…</div>
    </div></div>`;
  $("#news-refresh").addEventListener("click", load);
  load();
}

function card(n) {
  const date = n.ts ? ago(n.ts) : "";
  const rel = n.relevant ? ' · <span class="text-accent">für deine Hardware</span>' : "";
  return `<a class="li" href="${esc(n.link)}" target="_blank" rel="noopener" style="text-decoration:none;color:inherit">
    <div class="li-main">
      <div style="font-size:14px;line-height:1.4">${esc(n.title)}</div>
      <div class="li-sub">${esc(n.source)}${rel}</div>
    </div>
    <div class="li-right"><div class="li-time">${esc(date)}</div></div>
  </a>`;
}

async function load() {
  const el = $("#news-list"); if (!el) return;
  el.innerHTML = `<div class="empty" style="text-align:center;padding:40px">Lade News… (erstes Laden kann kurz dauern)</div>`;
  try {
    const d = await api("/api/news");
    const items = d.items || [];
    el.innerHTML = items.length
      ? `<div class="list">${items.map(card).join("")}</div>`
      : `<div class="empty-c"><div class="e-t">Keine News geladen</div>
           <div class="e-s">Die Quellen sind gerade nicht erreichbar — später nochmal probieren.</div></div>`;
  } catch (e) {
    el.innerHTML = `<div class="alert err" style="margin:0">${esc(e.message)}</div>`;
  }
}

export default { id: "news", mount };