import test from "node:test";
import assert from "node:assert/strict";
import { TidePoolContent } from "./components/tide-pool.tsx";
import { Shell } from "./components/shell.tsx";
import { Artifacts } from "./components/artifacts.tsx";
import { otherEntries } from "./components/other-index.tsx";

test("public tide pool keeps the shell and progressive enhancement with an immersive surface", async () => {
  const html = (await <Shell title="Tide pool"><TidePoolContent /></Shell>).toString();
  assert.ok(html.includes('class="page-container"'));
  assert.ok(html.includes('class="tide-exit" href="/other"'));
  assert.ok(html.includes('Tap the water to drop brass.'));
  assert.ok(!html.includes("page-container-wide"));
  assert.ok(!html.includes('name="robots"'));
  assert.ok(html.includes('data-veiled="loading"'));
  assert.ok(html.includes('class="tide-veil-ring"'));
  assert.ok(html.includes('class="tide-mark" aria-hidden="true">Tide pool</p>'));
  assert.ok(html.includes("<noscript>"));
  assert.ok(html.includes("The pool needs JavaScript to fill"));
  assert.ok(!html.includes("tide-still"));
  assert.ok(html.includes('id="tide-canvas" hidden'));
  assert.ok(html.includes('id="tide-sound" aria-pressed="false" disabled'));
  assert.ok(html.split('id="tide-inspect"')[1].split("</section>")[0].includes('<button type="button" id="tide-inspect-close" aria-label="Close">'));
  assert.ok(html.includes('role="status"'));
  assert.ok(!html.includes("<audio"));
  assert.ok(html.includes("Your settings stay in this browser; nothing else you do here is saved, and nothing is sent."));
  // Settings open from the playback corner, and the keys work anywhere on the page.
  assert.ok(html.includes('id="tide-settings-toggle" aria-expanded="false" aria-controls="tide-settings" disabled'));
  assert.ok(html.includes('id="tide-settings" hidden'));
  for (const option of ["wander", "edge", "map"]) assert.ok(html.includes(`data-option="${option}"`));
  assert.ok(html.includes('id="tide-compass"') && html.includes('id="tide-map"') && html.includes('id="tide-machine-next"'));
});

test("the tide pool is listed under Other, not Artifacts, and the artifacts keep their entries", async () => {
  assert.equal(otherEntries.filter((entry) => entry.href === "/tide-pool").length, 1);
  const html = (await <Artifacts />).toString();
  assert.ok(!html.includes("tide-pool"));
  for (const slug of ["thoughtstore-and-jazz", "tinker", "what-fits-in-a-lora", "lora-without-regret"]) {
    assert.ok(html.includes(`/artifacts/${slug}`));
  }
});