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

test("mobile shell keeps one viewport with internal scrolling panels", async () => {
  const [appCss, chatsCss, conversationCss, pickerCss] = await Promise.all([
    readFile(new URL("./app/app.css", import.meta.url), "utf8"),
    readFile(new URL("./features/chats/chats.css", import.meta.url), "utf8"),
    readFile(new URL("./features/conversation/conversation.css", import.meta.url), "utf8"),
    readFile(new URL("./features/chats/project-picker.css", import.meta.url), "utf8")
  ]);

  assert.match(appCss, /\.app-shell\{[^}]*height:100dvh[^}]*overflow:hidden[^}]*grid-template-rows:auto auto 1fr/);
  assert.match(appCss, /\.app-shell>\.panel,\.app-shell>\.chats-panel,\.app-shell>\.new-chat-overlay,\.app-shell>\.chat,\.app-shell>\.chat-transition,\.app-shell>\.settings-page\{[^}]*grid-row:3/);
  assert.match(chatsCss, /\.chats-panel\{[^}]*overflow:hidden[^}]*display:grid/);
  assert.match(chatsCss, /\.chats-panel \.thread-list\{[^}]*min-height:0[^}]*overflow:auto/);
  assert.match(conversationCss, /\.chat\{[^}]*grid-template-rows:1fr auto[^}]*overflow:hidden/);
  assert.match(conversationCss, /\.event-list\{[^}]*min-height:0[^}]*overflow:auto/);
  assert.match(pickerCss, /\.new-chat-panel\{[^}]*min-height:0[^}]*overflow:auto/);
});

test("mobile shell stays below the device status-bar safe area", async () => {
  const appCss = await readFile(new URL("./app/app.css", import.meta.url), "utf8");

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

test("settings stays over the primary app column", async () => {
  const appCss = await readFile(new URL("./app/app.css", import.meta.url), "utf8");

  assert.match(appCss, /\.app-shell\{grid-template-columns:minmax\(0,1fr\)\}/);
  assert.match(appCss, /\.app-shell>\.panel,\.app-shell>\.chats-panel,\.app-shell>\.new-chat-overlay,\.app-shell>\.chat,\.app-shell>\.chat-transition,\.app-shell>\.settings-page\{grid-column:1\}/);
});

test("390px mobile controls keep 16px text inputs and 48px touch targets", async () => {
  const [chatsCss, conversationCss, pickerCss] = await Promise.all([
    readFile(new URL("./features/chats/chats.css", import.meta.url), "utf8"),
    readFile(new URL("./features/conversation/conversation.css", import.meta.url), "utf8"),
    readFile(new URL("./features/chats/project-picker.css", import.meta.url), "utf8")
  ]);

  assert.match(chatsCss, /\.chat-search-input\{[^}]*height:56px[^}]*font-size:16px/);
  assert.match(chatsCss, /@media\(max-width:640px\)\{[\s\S]*?\.thread-row\{[^}]*min-height:48px/);
  assert.match(chatsCss, /\.chat-context-menu button\{[^}]*min-height:48px/);
  assert.match(conversationCss, /@media\(max-width:640px\)[^\n]*\.composer input:not\(\[type=file\]\)\{[^}]*font-size:16px[^}]*min-height:56px/);
  assert.match(conversationCss, /@media\(max-width:640px\)[^\n]*\.composer button\{[^}]*min-height:56px/);
  assert.match(pickerCss, /@media\(max-width:640px\)\{[\s\S]*?\.project-search\{[^}]*min-height:48px[^}]*font-size:16px/);
  assert.match(pickerCss, /@media\(max-width:640px\)\{[\s\S]*?\.project-picker-list button,\.project-picker-actions>button,\.project-create-menu>button\{[^}]*min-height:48px/);
});

test("mobile composers stay docked above the safe area", async () => {
  const [chatsCss, conversationCss] = await Promise.all([
    readFile(new URL("./features/chats/chats.css", import.meta.url), "utf8"),
    readFile(new URL("./features/conversation/conversation.css", import.meta.url), "utf8")
  ]);

  assert.match(chatsCss, /\.chats-panel\{--bottom-composer-offset:calc\(18px \+ env\(safe-area-inset-bottom\)\)/);
  assert.match(chatsCss, /@media\(max-width:640px\)\{\.chats-panel\{--bottom-composer-offset:calc\(14px \+ env\(safe-area-inset-bottom\)\)/);
  assert.match(chatsCss, /\.chat-search-bar,\.project-chat-composer\{[^}]*position:absolute[^}]*bottom:var\(--bottom-composer-offset\)/);
  assert.match(conversationCss, /\.composer-dock\{[^}]*position:absolute[^}]*left:0[^}]*right:0[^}]*bottom:0/);
  assert.match(conversationCss, /\.composer\{[^}]*padding:0 18px calc\(18px \+ env\(safe-area-inset-bottom\)\)/);
  assert.match(conversationCss, /@media\(max-width:640px\)[^\n]*\.composer\{[^}]*padding:0 14px calc\(14px \+ env\(safe-area-inset-bottom\)\)/);
});
