/* global React, Icons */
// The Brief: the AI weekly synthesis, full width. This is dujour's hero and
// the only place violet is spent. Evidence-first: every theme cites sources.
(() => {
  const e = React.createElement;

  function fmtWindow(s) {
    if (!s || !s.window_start) return "";
    const f = (iso) => {
      const [y, m, d] = iso.split("-").map(Number);
      return new Date(y, m - 1, d).toLocaleDateString("en-US", { month: "short", day: "numeric" });
    };
    return `${f(s.window_start)} to ${f(s.window_end)}`;
  }

  function EvidenceChip({ ev }) {
    const isTweet = ev.kind === "tweet";
    const href = ev.url
      || (isTweet ? `https://x.com/i/status/${ev.id}` : `https://www.youtube.com/watch?v=${ev.id}`);
    const label = isTweet ? `@${ev.handle}` : ev.channel;
    return e("a", { className: "ev-chip", href, target: "_blank", rel: "noopener", title: ev.note || label },
      isTweet ? e(Icons.Tweet, { size: 11 }) : e(Icons.Mic, { size: 11 }),
      e("span", null, label));
  }

  function ThemeCard({ theme }) {
    return e("article", { className: "theme fade-in" },
      e("div", { className: "theme-top" },
        theme.trend && e("span", { className: `trend ${theme.trend}` }, theme.trend),
        e("h3", { className: "theme-head" }, theme.headline)),
      theme.takeaway ? e("div", { className: "theme-take" }, theme.takeaway) : null,
      theme.body ? e("div", { className: "theme-body" }, theme.body) : null,
      (theme.evidence && theme.evidence.length)
        ? e(React.Fragment, null,
            e("div", { className: "theme-ev-label" }, "Evidence"),
            e("div", { className: "theme-evidence" },
              theme.evidence.map((ev, i) => e(EvidenceChip, { ev, key: i }))))
        : null);
  }

  function BriefView({ synthesis, loading }) {
    const p = synthesis && synthesis.payload;
    if (loading) {
      return e("div", { className: "brief" },
        e("div", { className: "brief-inner" },
          e("div", { className: "brief-kicker" }, "THE BRIEF"),
          e("div", { className: "theme-grid" },
            [1, 2, 3, 4, 5, 6].map((i) => e("div", { className: "theme-skel", key: i })))));
    }
    if (!p) {
      return e("div", { className: "brief" },
        e("div", { className: "brief-inner" },
          e("div", { className: "empty" }, "// no brief yet",
            e("br"), "the nightly routine writes one")));
    }
    const c = p.counts || {};
    return e("div", { className: "brief" },
      e("div", { className: "brief-inner" },
        e("div", { className: "brief-head" },
          e("span", { className: "brief-kicker" }, "The Brief"),
          e("span", { className: "brief-meta tabnum" },
            `${fmtWindow(synthesis)}  ·  ${c.tweets || 0} tweets  ·  ${c.episodes || 0} episodes`)),
        p.overview ? e("p", { className: "brief-overview" }, p.overview) : null,
        e("div", { className: "theme-grid" },
          (p.themes || []).map((t) => e(ThemeCard, { theme: t, key: t.key || t.headline }))),
        e("div", { className: "brief-caveat" },
          `AI-generated from the week's tweets and podcasts (${synthesis.model || "Claude"}). `,
          "Every theme cites its sources; verify against the evidence before acting.")));
  }

  Object.assign(window, { BriefView });
})();