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

const read = (path) => readFile(new URL(path, import.meta.url), "utf8");
const readOptional = async (path) => {
  try {
    return await read(path);
  } catch (error) {
    if (error?.code === "ENOENT") return "";
    throw error;
  }
};

test("wide usable viewports keep Chats interactive beside the active conversation", async () => {
  const [app, css] = await Promise.all([
    read("./App.jsx"),
    read("./app/app.css")
  ]);

  assert.match(app, /const splitLayoutActive = adaptiveSplitView && app\.tab === "chat" && !app\.newChatOpen/);
  assert.match(app, /<main className=\{`app-shell app-shell--ready\$\{splitLayoutActive \? " app-shell--split" : ""\}`\}/);
  assert.match(app, /<ChatsPanel active=\{!app\.newChatOpen && \(app\.tab === "threads" \|\| splitLayoutActive\)\}/);
  assert.match(css, /\.app-shell--split\{grid-template-columns:clamp\(280px,32vw,380px\) minmax\(0,1fr\)\}/);
  assert.match(css, /\.app-shell--split>\.chats-panel\{grid-column:1\}/);
  assert.match(css, /\.app-shell--split>\.motion-screen\{grid-column:2/);
});

test("adaptive split view requires both medium width and non-compact height", async () => {
  const source = await readOptional("./app/useAdaptiveSplitView.js");

  assert.match(source, /\(min-width: 600px\) and \(min-height: 480px\)/);
  assert.match(source, /media\.addEventListener\("change", update\)/);
  assert.match(source, /media\.removeEventListener\("change", update\)/);
});

test("the app shell protects interactive content from landscape display cutouts", async () => {
  const css = await read("./app/app.css");

  assert.match(css, /\.app-shell\{[^}]*padding-left:env\(safe-area-inset-left\)[^}]*padding-right:env\(safe-area-inset-right\)/);
});
