/* global React, Icons, Column, Empty */
// The Zeitgeist column: AI weekly-theme synthesis, evidence-first.
// Violet is the family's reserved pop color; this column is the pop.
(() => {
  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 }) {
    const [open, setOpen] = React.useState(false);
    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", style: { margin: "7px 0 0" } }, theme.headline),
      e("div", { className: "theme-take" }, theme.takeaway),
      open && theme.body ? e("div", { className: "theme-body" }, theme.body) : null,
      e("div", { className: "theme-evidence" },
        (theme.evidence || []).map((ev, i) => e(EvidenceChip, { ev, key: i }))),
      theme.body ? e("button", {
        className: "pod-expand", onClick: () => setOpen(!open),
        style: { marginTop: 8 },
      }, open ? "Less" : "More") : null);
  }

  function SynthesisColumn({ synthesis, loading }) {
    const p = synthesis && synthesis.payload;
    return e(Column, {
      colKey: "zeitgeist", icon: e(Icons.Sparkle, { size: 15 }),
      title: "Zeitgeist", wide: true, synth: true,
      count: p && p.themes ? p.themes.length : null,
    },
      loading ? e("div", { className: "empty" }, "reading the week...")
        : !p ? e(Empty, null, "// no synthesis yet", e("br"), "the nightly routine writes one")
        : e(React.Fragment, null,
            e("div", { className: "syn-meta" },
              e("span", { className: "syn-window" }, fmtWindow(synthesis)),
              ` · ${(p.counts && p.counts.tweets) || 0} tweets · `,
              `${(p.counts && p.counts.episodes) || 0} episodes`),
            p.overview && e("div", { className: "syn-overview" }, p.overview),
            (p.themes || []).map((t) => e(ThemeCard, { theme: t, key: t.key || t.headline })),
            e("div", { className: "syn-caveat" },
              `AI-generated synthesis (${synthesis.model || "claude"}). `,
              "Every theme cites its sources; verify against the evidence before acting.")));
  }

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