/* Bild und Mass des Kastens „Kampagne aus einer Einladung" (07.10.2026)

   Etappe 4 des Bauplans. Die Zahlen sind gruen (pruef-kampagne, 94
   Pruefungen) -- das sagt, dass der Weg stimmt, aber nicht, wie es
   AUSSIEHT und ob man es mit dem Daumen treffen kann.

   GEMESSEN WIRD AUF 412 UND 1280 PIXEL. Das sind nicht zwei beliebige
   Breiten: An genau diesen beiden ist die Kopfleiste dieses Hauses am
   06.09.2026 zweimal an einem Tag gebrochen -- 412 px ist die
   haeufigste Android-Breite, 1280 px die schmalste, auf der die Seite
   als „Rechner" gilt. Wer nur bei 1400 nachsieht, sieht beides nicht.

   UND AUGENSCHONUNG WIRD GEMESSEN, NICHT ANGENOMMEN: Kontrast des
   Hinweistextes, und dass bei `prefers-reduced-motion` keine Bewegung
   laeuft.

   Aufrufen mit:  node server/bild-kampagne.mjs
*/
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { notbremse } from "./helfer-notbremse.mjs";
notbremse(240_000, "bild-kampagne");

const ordner = mkdtempSync(join(tmpdir(), "ws-kmpbild-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
const { portMussFreiSein } = await import("./helfer-port.mjs");
const PORT = await portMussFreiSein(4338, "das Bildwerkzeug Kampagne");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) {
  return ec.call(this, n, w, { ...(o || {}), secure: false });
};
await import("./index.js");
await new Promise((r) => setTimeout(r, 1200));
const BASIS = `http://127.0.0.1:${PORT}`;

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const j = new Date().toISOString();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64,
    { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name,rolle,code_hash,code_salt,code_n,aktiv,erstellt)"
    + " VALUES (?,?,?,?,?,1,?)").run(name, rolle, hash, salt, 32768, j);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
anlegen("Filipe", "admin", "CODE-DOGI-0001");
anlegen("Luna", "creator", "CODE-CREA-0001");
d.close();

const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch();
const fehlerAufSeite = [];

const anmelden = async (seite, rolle, code) => {
  await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
  await seite.click(`.rolle[data-rolle="${rolle}"]`);
  await seite.fill("#code", code);
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 25000 });
};

/** Der Kontrast zweier Farben nach WCAG. Gerechnet, nicht geschaetzt. */
const leuchte = ([r, g, b]) => {
  const f = (c) => { const x = c / 255; return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4; };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const kontrast = (a, b) => {
  const [x, y] = [leuchte(a), leuchte(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
};
const farbe = (s) => {
  const m = /rgba?\(([^)]+)\)/.exec(s || "");
  if (!m) return null;
  const t = m[1].split(",").map((x) => parseFloat(x));
  return [t[0], t[1], t[2]];
};

let fehler = 0;
let geprueft = 0;
const ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

async function messen(breite, hoehe, name) {
  const ctx = await browser.newContext({
    viewport: { width: breite, height: hoehe },
    deviceScaleFactor: 2,
    hasTouch: breite < 700, isMobile: breite < 700,
  });
  const seite = await ctx.newPage();
  seite.on("console", (m) => { if (m.type() === "error") fehlerAufSeite.push(m.text()); });
  seite.on("pageerror", (f) => fehlerAufSeite.push(String(f)));
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1600);

  console.log(`\n=== ${name} (${breite} px) ===`);
  const mass = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    if (!k || k.hidden) return { da: false };
    const r = (e) => { const b = e.getBoundingClientRect();
      return { x: Math.round(b.x), y: Math.round(b.y),
        b: Math.round(b.width), h: Math.round(b.height) }; };
    const feld = document.getElementById("kampagne-text");
    const knopf = document.getElementById("kampagne-holen");
    const sagt = document.getElementById("kampagne-sagt");
    const titel = k.querySelector(".kampagneholen__titel");
    const st = getComputedStyle(sagt);
    return {
      da: true,
      kasten: r(k), feld: r(feld), knopf: r(knopf), sagt: r(sagt), titel: r(titel),
      knopfText: knopf.textContent.trim(),
      sagtText: sagt.textContent.trim(),
      textFarbe: st.color,
      kastenFarbe: getComputedStyle(k).backgroundColor,
      seitenFarbe: getComputedStyle(document.body).backgroundColor,
      schrift: st.fontSize,
      /* Ueberdeckt etwas den Knopf? Nicht gerechnet, sondern gefragt:
         Was liegt an seinem Mittelpunkt wirklich obenauf? */
      obenAufKnopf: (() => {
        const b = knopf.getBoundingClientRect();
        const e = document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2);
        return e ? (e.id || e.className || e.tagName) : null;
      })(),
      ueberlauf: k.scrollWidth > document.documentElement.clientWidth + 1,
    };
  });

  ok(mass.da, "der Kasten ist da");
  if (!mass.da) { await ctx.close(); return; }

  console.log(`  Kasten  x=${mass.kasten.x} b=${mass.kasten.b} h=${mass.kasten.h}`);
  console.log(`  Titel   „${"Kampagne aus einer Einladung anlegen"}"  h=${mass.titel.h}`);
  console.log(`  Feld    x=${mass.feld.x} b=${mass.feld.b} h=${mass.feld.h}`);
  console.log(`  Knopf   x=${mass.knopf.x} b=${mass.knopf.b} h=${mass.knopf.h}  „${mass.knopfText}"`);
  console.log(`  Hinweis x=${mass.sagt.x} b=${mass.sagt.b} h=${mass.sagt.h}`);

  /* 44 PIXEL. Die Zahl aus pruef-handy-teamdogi: Darunter trifft ein
     Daumen nicht verlaesslich. Am 07.10.2026 lagen fuenf Flaechen in
     diesem Haus bei 40 und wurden genau deshalb gezogen. */
  ok(mass.knopf.h >= 44, `der Knopf ist ${mass.knopf.h} px hoch (mindestens 44)`);
  ok(mass.feld.b > 120, `das Textfeld ist ${mass.feld.b} px breit -- kein Schlitz`);
  ok(mass.feld.h >= 72, `und ${mass.feld.h} px hoch, also mehrzeilig`);

  /* NICHTS LIEGT AUF DEM KNOPF. Am 06.09.2026 lag der Sicht-Umschalter
     quer ueber dem Chat-Knopf: Wer auf „Meine Sicht" tippte, landete
     im Chat -- auf zwoelf Seiten. */
  ok(String(mass.obenAufKnopf).includes("kampagne-holen"),
    `am Mittelpunkt des Knopfes liegt der Knopf (${mass.obenAufKnopf})`);

  ok(!mass.ueberlauf, "der Kasten laeuft nicht aus der Seite heraus");

  /* BRICHT ES UM, WENN DER PLATZ NICHT REICHT? Keine feste Schwelle,
     sondern `flex-wrap` -- gemessen daran, ob Knopf und Hinweis bei
     412 px untereinander stehen. */
  const nebeneinander = Math.abs(mass.knopf.y - mass.sagt.y) < 10;
  console.log(`  Knopf und Hinweis ${nebeneinander ? "nebeneinander" : "untereinander"}`);

  /* AUGENSCHONEND, GERECHNET. */
  const vorn = farbe(mass.textFarbe);
  const hinten = farbe(mass.kastenFarbe)?.[0] !== undefined
    && farbe(mass.kastenFarbe) || farbe(mass.seitenFarbe);
  if (vorn && hinten) {
    const k = kontrast(vorn, hinten);
    ok(k >= 4.5, `Kontrast des Hinweises ${k.toFixed(2)}:1 (mindestens 4,5)`);
  } else {
    ok(false, `Farben nicht messbar: ${mass.textFarbe} auf ${mass.kastenFarbe}`);
  }
  ok(parseFloat(mass.schrift) >= 13,
    `Schriftgroesse ${mass.schrift} (mindestens 13 px)`);

  const kasten = await seite.$("#kampagneholen");
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}.png` });

  /* UND WIE ES WAEHREND DES HOLENS AUSSIEHT. */
  await seite.evaluate(() => {
    document.getElementById("kampagne-form").dataset.laeuft = "ja";
    document.getElementById("kampagne-sagt").textContent = "Wird geholt …";
  });
  await seite.waitForTimeout(300);
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}-laeuft.png` });

  await ctx.close();
}

await messen(1280, 900, "Am Rechner, schmalste Rechnerbreite");
await messen(412, 915, "Auf dem Handy, haeufigste Android-Breite");

/* ---- Keine Bewegung, wenn jemand keine will -------------------------- */
{
  const ctx = await browser.newContext({
    viewport: { width: 412, height: 915 }, deviceScaleFactor: 2,
    hasTouch: true, isMobile: true, reducedMotion: "reduce",
  });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);
  const ruht = await seite.evaluate(() => {
    const f = document.getElementById("kampagne-form");
    f.dataset.laeuft = "ja";
    const s = getComputedStyle(document.getElementById("kampagne-sagt"));
    return { animation: s.animationName, dauer: s.animationDuration };
  });
  console.log("\n=== Wer keine Bewegung will ===");
  ok(ruht.animation === "none" || ruht.dauer === "0s",
    `keine Bewegung bei prefers-reduced-motion (${ruht.animation}, ${ruht.dauer})`);
}

/* ---- Und ein Creator sieht den Kasten gar nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "creator", "CODE-CREA-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return { da: !!k, versteckt: k ? k.hidden : null,
      sichtbar: k ? k.getBoundingClientRect().height > 0 : null };
  });
  console.log("\n=== Ein Creator ===");
  ok(sicht.versteckt === true && sicht.sichtbar === false,
    `der Kasten bleibt zu (hidden=${sicht.versteckt}, Hoehe>0=${sicht.sichtbar})`);
  await ctx.close();
}

/* ---- Und auf einem anderen Brett steht er nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=technik", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return k ? k.hidden : null;
  });
  console.log("\n=== Auf dem Brett Technik ===");
  ok(sicht === true, `dort bleibt der Kasten zu (hidden=${sicht})`);
  await ctx.close();
}

console.log("\n=== Browser-Meldungen ===");
ok(fehlerAufSeite.length === 0,
  fehlerAufSeite.length ? fehlerAufSeite.slice(0, 4).join(" | ") : "keine Fehler");

console.log(`\n${geprueft} Messungen, ${fehler} Fehler`);
console.log("Bilder: server/bild-kampagne-1280.png, -412.png und je -laeuft.png");
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Rest */ }
process.exit(fehler ? 1 : 0);