import assert from "node:assert/strict";
import test from "node:test";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { appendEnvironmentMediaItem, removeEnvironmentMediaItem, cloneEnvironmentSettings } from "../packages/ui-core/dist/index.js";
import { LandingStage, Button, MediaSourceField } from "../packages/ui-react/dist/index.js";

const image = { id: "media-first", source: "url", url: "https://example.invalid/background.png", mediaKind: "image", fileName: null };
const video = { ...image, id: "media-second", url: "https://example.invalid/background.mp4", mediaKind: "video" };
const page = { headerLabel: "Product", eyebrow: "Board", title: "Home", description: "Local operator home", primaryWorkspaceId: null, secondaryWorkspaceId: null, background: { enabled: false, imageDurationSeconds: 10, items: [] } };

test("media edits preserve playback order and leave saved settings untouched", () => {
  const settings = { revision: 9, pages: { home: { ...page, background: appendEnvironmentMediaItem(page.background, image) } } };
  const draft = cloneEnvironmentSettings(settings);
  draft.pages.home.background = appendEnvironmentMediaItem(draft.pages.home.background, video);
  draft.pages.home.background.items[0].url = "https://example.invalid/edited.png";
  assert.equal(settings.pages.home.background.items[0].url, image.url);
  assert.deepEqual(draft.pages.home.background.items.map(item => item.id), [image.id, video.id]);
  const removed = removeEnvironmentMediaItem(draft.pages.home.background, image.id);
  assert.deepEqual(removed.items, [video]);
  assert.equal(removeEnvironmentMediaItem(removed, video.id).enabled, false);
  assert.equal(appendEnvironmentMediaItem(removed, video), removed);
});

test("shared home shows real configured media, and an empty home creates no media", () => {
  const empty = renderToStaticMarkup(createElement(LandingStage, { page }));
  assert.match(empty, /<h1>Home<\/h1>/);
  assert.doesNotMatch(empty, /<(?:video|img)\b/);
  const configured = { ...page, background: { ...page.background, enabled: true, items: [video] } };
  const html = renderToStaticMarkup(createElement(LandingStage, { page: configured }));
  assert.match(html, /<video[^>]+src="https:\/\/example.invalid\/background.mp4"/);
  assert.match(html, /loop=""/);
  assert.match(html, /muted=""/);
});

test("neutral primary retains native disabled semantics and theme default remains opt-in", () => {
  const disabled = renderToStaticMarkup(createElement(Button, { variant: "primary", tone: "neutral", disabled: true }, "Start"));
  assert.match(disabled, /data-tone="neutral"/);
  assert.match(disabled, /disabled=""/);
  const themed = renderToStaticMarkup(createElement(Button, { variant: "primary" }, "Start"));
  assert.doesNotMatch(themed, /data-tone/);
  const field = renderToStaticMarkup(createElement(MediaSourceField, { source: "url", url: "https://example.invalid/a.png", disabled: true, onSourceChange() {}, onUrlChange() {}, onFileChange() {} }));
  assert.match(field, /<input[^>]*disabled=""/);
});