// The post viewer's capture panel: shown only from a capture the editor hands
// it, with the shot and each medium in its own element; nothing without one.
//
// Run with: pnpm --filter yt-dlp-transcript-common exec tsx --test components/PostModal.test.ts

import { test } from "node:test";
import assert from "node:assert/strict";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import {
  captureMediaKind,
  PostCapturePanel,
  type PostCaptureView,
} from "./PostModal";

// common's tsconfig has `jsx: "preserve"`, so tsx falls back to the classic
// transform — `React.createElement` on a free `React` (as BrandMark.test.ts).
(globalThis as { React?: typeof React }).React = React;
const render = (capture: PostCaptureView) =>
  renderToStaticMarkup(React.createElement(PostCapturePanel, { capture }));

const BASE: PostCaptureView = {
  capturedAt: "2026-02-03T04:05:06.000Z",
  state: "captured",
  media: [],
};

test("with media: the shot, each image and video in its own element, the sensitive note", () => {
  const html = render({
    ...BASE,
    sensitive: true,
    shot: { src: "/capture/demo/1/shot.png" },
    media: [
      { src: "/capture/demo/1/1_1.jpg", name: "1_1.jpg" },
      { src: "/capture/demo/1/1_2.mp4", name: "1_2.mp4" },
      { src: "/capture/demo/1/1_3.bin", name: "1_3.bin" },
    ],
  });
  assert.match(html, /data-post-capture=""/);
  assert.match(html, /<img src="\/capture\/demo\/1\/shot\.png"[^>]*data-post-capture-shot=""/);
  assert.match(html, /data-post-capture-media="image"><img src="\/capture\/demo\/1\/1_1\.jpg"/);
  assert.match(html, /data-post-capture-media="video"><video src="\/capture\/demo\/1\/1_2\.mp4"/);
  assert.match(html, /data-post-capture-media="other"><a href="\/capture\/demo\/1\/1_3\.bin"/);
  assert.match(html, /behind a sensitive-media cover/);
});

test("a shot with no media shows the shot alone", () => {
  const html = render({ ...BASE, shot: { src: "/s.png" } });
  assert.match(html, /data-post-capture-shot/);
  assert.doesNotMatch(html, /data-post-capture-media/);
  assert.doesNotMatch(html, /sensitive/);
});

test("without media or a shot (a deleted post's record): nothing at all", () => {
  assert.equal(render({ ...BASE, state: "deleted" }), "");
});

test("an article: its title and a link to its markdown; a failed one says how, with no link", () => {
  const html = render({
    ...BASE,
    shot: { src: "/s.png" },
    article: { state: "captured", title: "A Long <Read>", md: { src: "/capture/demo/1/article.md" } },
  });
  assert.match(html, /data-post-capture-article=""[^>]*>Article: A Long &lt;Read&gt;/);
  assert.match(html, /<a href="\/capture\/demo\/1\/article\.md"[^>]*>article\.md<\/a>/);

  const failed = render({ ...BASE, article: { state: "login-wall" } });
  assert.match(failed, /Article: untitled \(login-wall\)/);
  assert.doesNotMatch(failed, /article\.md/);
});

test("media kinds by extension", () => {
  assert.equal(captureMediaKind("a.JPG"), "image");
  assert.equal(captureMediaKind("a.webp"), "image");
  assert.equal(captureMediaKind("a.mp4"), "video");
  assert.equal(captureMediaKind("a"), "other");
});