import test from "node:test";
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";

test("screen navigation keeps its origin visible and reverses direction on close", async () => {
  const [app, css] = await Promise.all([
    readFile(new URL("../App.jsx", import.meta.url), "utf8"),
    readFile(new URL("./app.css", import.meta.url), "utf8")
  ]);

  assert.match(app, /<ChatsPanel[\s\S]*active=\{/);
  assert.match(app, /motion-screen--enter/);
  assert.match(app, /motion-screen--exit/);
  assert.match(css, /@keyframes motion-screen-enter[^{]*\{[^}]*translateX\(100%\)/s);
  assert.match(css, /@keyframes motion-screen-exit[\s\S]*translateX\(100%\)/);
});

test("motion system defines anchored popovers, sheets, press feedback, and reduced motion", async () => {
  const [base, menus, sheets] = await Promise.all([
    readFile(new URL("../shared/styles/base.css", import.meta.url), "utf8"),
    readFile(new URL("../features/conversation/composer-menus.css", import.meta.url), "utf8"),
    readFile(new URL("../features/changes/change-sheet.css", import.meta.url), "utf8")
  ]);

  assert.match(base, /--motion-screen:/);
  assert.match(base, /button:active/);
  assert.match(base, /@media\(prefers-reduced-motion:reduce\)/);
  assert.match(menus, /transform-origin:/);
  assert.match(menus, /transition-behavior:\s*allow-discrete/);
  assert.match(sheets, /change-sheet-enter/);
  assert.match(sheets, /change-sheet-exit/);
});

test("startup and screen navigation avoid competing loaders and background zoom", async () => {
  const [startup, css] = await Promise.all([
    readFile(new URL("./StartupScreen.jsx", import.meta.url), "utf8"),
    readFile(new URL("./app.css", import.meta.url), "utf8")
  ]);

  assert.doesNotMatch(startup, /startup-progress/);
  assert.doesNotMatch(css, /\.chats-panel--background\{[^}]*transform:scale/);
  assert.match(css, /\.startup-mark\{[^}]*border:0[^}]*background:transparent[^}]*box-shadow:none/);
});

test("ready app content does not fade the whole screen on remount", async () => {
  const css = await readFile(new URL("./app.css", import.meta.url), "utf8");

  assert.doesNotMatch(css, /\.app-shell--ready\{[^}]*animation:/);
});
