import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
import { renderToReadableStream } from "hono/jsx/streaming";
import { otherEntries } from "./components/other-index.tsx";
import { PageNav } from "./components/page-nav.tsx";
import { ServicesContent } from "./components/services.tsx";
import { Shell } from "./components/shell.tsx";
import { Webring } from "./components/webring.tsx";

async function render(component: Parameters<typeof renderToReadableStream>[0]): Promise<string> {
  return new Response(renderToReadableStream(component)).text();
}

test("site navigation keeps Services under Other", async () => {
  const html = await render(<PageNav profile={null} active="other" />);
  const labels = [...html.matchAll(/<a href="[^"]+"[^>]*>([^<]+)<\/a>/g)].map((match) => match[1]);

  assert.deepEqual(labels, ["About", "Blog", "Code", "Knowledge", "Other"]);
  assert.doesNotMatch(html, /href="\/services"/);
  assert.match(html, /<a href="\/other" class="active" aria-current="page">Other<\/a>/);
});

test("home navigation uses compact horizontal rails", async () => {
  const html = await render(
    <Webring name="Letta" label="webring" slug="lettamates" from="https://cameron.stream" />,
  );
  const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8");

  assert.match(html, />previous<\/a><a [^>]*>webring<\/a><a [^>]*>next<\/a>/);
  assert.doesNotMatch(html, />Letta webring</);
  assert.match(css, /\.home-links \.site-nav-centered \{[\s\S]*?grid-template-columns: repeat\(5, auto\)/);
  assert.match(css, /\.home-links \.site-nav-centered a \{[\s\S]*?min-height: 2\.75rem/);
  assert.match(css, /\.home-links \.site-nav-centered a \+ a::before/);
  assert.match(css, /\.home-page \{[\s\S]*?min-height: 100svh;/);
});

test("appearance controls avoid emoji and leave the mobile header", async () => {
  const html = await render(
    <Shell title="Services">
      <ServicesContent />
    </Shell>,
  );
  const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8");
  const script = await readFile(new URL("../public/theme.js", import.meta.url), "utf8");

  assert.match(html, /<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Use dark theme"><\/button>/);
  assert.match(html, /class="theme-preferences" aria-labelledby="theme-preferences-label"/);
  assert.deepEqual(
    [...html.matchAll(/data-theme-choice="([^"]+)"/g)].map((match) => match[1]),
    ["system", "light", "dark"],
  );
  assert.match(css, /\.theme-toggle \{[\s\S]*?width: 2\.75rem;[\s\S]*?height: 2\.75rem;/);
  assert.match(css, /@media \(max-width: 680px\) \{[\s\S]*?\.theme-toggle \{\s*display: none;/);
  assert.match(css, /@media \(max-width: 680px\) \{[\s\S]*?\.theme-preferences \{[\s\S]*?display: flex;/);
  assert.match(script, /btn\.innerHTML = icon\(dark\)/);
  assert.match(script, /document\.documentElement\.removeAttribute\("data-theme"\)/);
  assert.doesNotMatch(script, /\\u2600|\\u263E|☀|☾|🌞|🌙/);
});

test("Other begins with the Now page", () => {
  assert.deepEqual(otherEntries[0], {
    index: "01",
    href: "/knowledge/now",
    title: "Now",
    description: "My current understanding of the systems I am studying.",
    meta: "Living note",
    external: false,
  });
  assert.deepEqual(otherEntries[1], {
    index: "02",
    href: "/services",
    title: "Services",
    description: "Private tutoring, company workshops, and AI and agent consulting.",
    meta: "Available work",
    external: false,
  });
});

test("Services page presents the three reviewed offers and contact link", async () => {
  const html = await render(
    <Shell title="Services">
      <ServicesContent />
    </Shell>,
  );

  assert.match(html, /<title>Services — Cameron&#39;s website<\/title>/);
  assert.match(html, /I offer three services tailored to your specific needs\./);
  assert.doesNotMatch(html, /I offer several services/);
  assert.match(html, /Private AI tutoring/);
  assert.match(html, /I offer one-on-one sessions to help you use AI more effectively in your work or everyday life\./);
  assert.doesNotMatch(html, /I’ll work with you/);
  assert.match(html, /Company workshops/);
  assert.match(html, /AI and agent consulting/);
  assert.match(html, /href="https:\/\/x\.com\/majamediaco\/status\/2083629089349566747"/);
  assert.match(html, /href="mailto:cameron@pfiffer\.org"/);
});

test("prose links keep the text color and use the accent only for the underline", async () => {
  const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8");
  const linkRule = css.match(/\.blog-content a \{([\s\S]*?)\n\}/)?.[1] ?? "";
  const hoverRule = css.match(/\.blog-content a:hover \{([\s\S]*?)\n\}/)?.[1] ?? "";

  assert.match(linkRule, /color: inherit/);
  assert.match(linkRule, /text-decoration-color: var\(--site-accent\)/);
  assert.doesNotMatch(linkRule, /(?:^|\n)\s*color: var\(--site-accent\)/);
  assert.match(linkRule, /text-decoration-thickness: 0\.1em/);
  assert.match(hoverRule, /text-decoration-thickness: 0\.16em/);
});