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

const html = await readFile(new URL("../public/mobile.html", import.meta.url), "utf8");
const js = await readFile(new URL("../public/mobile.js", import.meta.url), "utf8");
const css = await readFile(new URL("../public/mobile.css", import.meta.url), "utf8");

test("mobile capture page lets each person name their device", () => {
  assert.match(html, /id="mobile-device-name"/);
  assert.match(js, /saveMobileDeviceName/);
  assert.match(js, /mobileDeviceNameInput/);
});

test("mobile capture page supports batch offline entry", () => {
  assert.match(html, /id="mobile-batch-text"/);
  assert.match(html, /id="save-batch-offline-button"/);
  assert.match(js, /saveBatchOfflineDrafts/);
  assert.match(js, /parseMobileBatchNames/);
});

test("mobile drafts can be edited and deleted one by one", () => {
  assert.match(js, /editOfflineDraft/);
  assert.match(js, /deleteOfflineDraft/);
  assert.match(js, /data-edit-draft/);
  assert.match(js, /data-delete-draft/);
  assert.match(css, /\.offline-actions/);
});

test("mobile page tells users when there are pending records to sync", () => {
  assert.match(js, /pendingDrafts\.length/);
  assert.match(js, /电脑已收到/);
  assert.match(js, /有 \$\{pendingDrafts\.length\} 条可同步/);
});

test("mobile app exposes server binding settings for app-like use", () => {
  assert.match(html, /id="mobile-server-url"/);
  assert.match(html, /id="save-mobile-server-button"/);
  assert.match(html, /id="test-mobile-server-button"/);
  assert.match(html, /id="mobile-binding-summary"/);
  assert.match(html, /id="mobile-app-state"/);
  assert.match(js, /MOBILE_SERVER_KEY/);
  assert.match(js, /mobileServerBaseUrl/);
  assert.match(js, /saveMobileServerUrl/);
  assert.match(js, /testMobileServerConnection/);
  assert.match(js, /apiUrl\(url\)/);
  assert.match(css, /\.app-settings-panel/);
  assert.match(css, /\.binding-summary/);
});

test("mobile layout prioritizes quick capture before device settings", () => {
  assert.ok(html.indexOf('id="collect-form"') < html.indexOf('class="device-settings-panel"'));
  assert.ok(html.indexOf('id="collect-form"') < html.indexOf('id="mobile-device-name"'));
  assert.ok(html.indexOf('id="offline-status"') < html.indexOf('id="mobile-server-url"'));
  assert.match(html, /<details class="device-settings-panel">/);
  assert.match(css, /\.device-settings-panel/);
  assert.match(css, /\.mobile-status-stack/);
  assert.match(css, /#collect-button\s*\{/);
});