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");
const desktopHtml = await readFile(new URL("../public/index.html", import.meta.url), "utf8");
const desktopJs = await readFile(new URL("../public/app.js", import.meta.url), "utf8");
const desktopCss = await readFile(new URL("../public/styles.css", import.meta.url), "utf8");
const server = await readFile(new URL("../src/server.js", import.meta.url), "utf8");
const storage = await readFile(new URL("../src/storage.js", import.meta.url), "utf8");

test("mobile page exposes a sync-to-desktop action", () => {
  assert.match(html, /id="sync-offline-button"/);
  assert.match(js, /syncOfflineDrafts/);
  assert.match(js, /postJson\("\/api\/mobile-sync"/);
  assert.match(js, /MOBILE_DEVICE_KEY/);
});

test("mobile drafts record synced state after upload", () => {
  assert.match(js, /sync_status/);
  assert.match(js, /synced_at/);
  assert.match(js, /acceptedIds/);
  assert.match(css, /\.sync-status/);
});

test("server stores mobile sync drafts outside history", () => {
  assert.match(server, /\/api\/mobile-sync/);
  assert.match(server, /saveMobileSyncDrafts/);
  assert.match(server, /listMobileSyncDrafts/);
  assert.match(storage, /MOBILE_SYNC_FILE/);
  assert.match(storage, /mobile-sync\.json/);
  assert.match(storage, /export async function saveMobileSyncDrafts/);
  assert.match(storage, /export async function listMobileSyncDrafts/);
});

test("desktop page shows mobile sync drafts as a pending queue", () => {
  assert.match(desktopHtml, /id="mobile-sync-panel"/);
  assert.match(desktopHtml, /id="mobile-sync-list"/);
  assert.match(desktopJs, /mobileSyncList\s*=\s*document\.querySelector\("#mobile-sync-list"\)/);
  assert.match(desktopJs, /loadMobileSyncDrafts/);
  assert.match(desktopJs, /getJson\("\/api\/mobile-sync"\)/);
  assert.match(desktopCss, /\.mobile-sync-panel/);
  assert.match(desktopCss, /\.mobile-sync-item/);
});

test("desktop mobile sync queue sits at the bottom of the main app content", () => {
  assert.ok(desktopHtml.indexOf('id="temporary-query-panel"') < desktopHtml.indexOf('id="mobile-sync-panel"'));
  assert.ok(desktopHtml.indexOf('id="mobile-sync-panel"') < desktopHtml.indexOf("</main>"));
});