import assert from "node:assert/strict";
import test from "node:test";
import { renderToStaticMarkup } from "react-dom/server";

import { RdxPageActions } from "./rdx-page-actions.tsx";
import { RdxPageContainer } from "./rdx-page-container.tsx";
import { RdxPageHeader } from "./rdx-page-header.tsx";
import { RdxPageStack } from "./rdx-page-stack.tsx";

test("RdxPageContainer renders children with full width by default", () => {
  const html = renderToStaticMarkup(<RdxPageContainer>Content</RdxPageContainer>);

  assert.match(html, /Content/);
  assert.match(html, /w-full/);
  assert.doesNotMatch(html, /max-w-screen-2xl/);
  assert.doesNotMatch(html, /max-w-5xl/);
});

test("RdxPageContainer applies width variants and merges className", () => {
  const wideHtml = renderToStaticMarkup(
    <RdxPageContainer className="custom-wide" width="wide">
      Wide
    </RdxPageContainer>
  );
  const contentHtml = renderToStaticMarkup(
    <RdxPageContainer width="content">Content</RdxPageContainer>
  );

  assert.match(wideHtml, /max-w-screen-2xl/);
  assert.match(wideHtml, /custom-wide/);
  assert.match(contentHtml, /max-w-5xl/);
});

test("RdxPageStack applies default spacing and className", () => {
  const html = renderToStaticMarkup(
    <RdxPageStack className="custom-stack">
      <div>One</div>
    </RdxPageStack>
  );

  assert.match(html, /flex/);
  assert.match(html, /gap-6/);
  assert.match(html, /custom-stack/);
});

test("RdxPageStack applies spacing variants", () => {
  const compactHtml = renderToStaticMarkup(<RdxPageStack spacing="compact">Compact</RdxPageStack>);
  const relaxedHtml = renderToStaticMarkup(<RdxPageStack spacing="relaxed">Relaxed</RdxPageStack>);

  assert.match(compactHtml, /gap-4/);
  assert.match(relaxedHtml, /gap-8/);
});

test("RdxPageHeader renders semantic title, description and optional regions", () => {
  const html = renderToStaticMarkup(
    <RdxPageHeader
      actions={<span>Actions</span>}
      description="Description"
      leading={<span>Leading</span>}
      metadata={<span>Metadata</span>}
      title="Header title"
    />
  );

  assert.match(html, /<h1[^>]*>Header title<\/h1>/);
  assert.match(html, /Description/);
  assert.match(html, /Leading/);
  assert.match(html, /Metadata/);
  assert.match(html, /Actions/);
});

test("RdxPageHeader omits optional wrappers when content is absent", () => {
  const html = renderToStaticMarkup(<RdxPageHeader title="Only title" />);

  assert.match(html, /<h1[^>]*>Only title<\/h1>/);
  assert.equal((html.match(/<p/g) ?? []).length, 0);
  assert.doesNotMatch(html, /Actions/);
  assert.doesNotMatch(html, /Metadata/);
});

test("RdxPageActions renders only populated regions in the expected order", () => {
  const html = renderToStaticMarkup(
    <RdxPageActions
      overflow={<span>Overflow</span>}
      primary={<span>Primary</span>}
      secondary={<span>Secondary</span>}
    />
  );

  assert.ok(html.indexOf("Secondary") < html.indexOf("Primary"));
  assert.ok(html.indexOf("Primary") < html.indexOf("Overflow"));
});

test("RdxPageActions returns null when all regions are empty", () => {
  const html = renderToStaticMarkup(<RdxPageActions />);

  assert.equal(html, "");
});