/* Browserpruefung des Kalenders: vier Ansichten, Anlaesse, Feiertage,
   Filter, Tagesdialog -- und die selbst gerechneten Tage gegen bekannte
   Werte.

   Die Anlassrechnung ist der Teil, der still falsch sein kann: Ein um
   einen Tag verschobener Ostersonntag faellt niemandem auf, verschiebt
   aber Karfreitag, Himmelfahrt und Pfingsten gleich mit. Deshalb werden
   hier feste, nachschlagbare Daten geprueft und nicht nur "es steht
   irgendwas da". */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-kal-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026).
   Ohne diese Zeile startet der eigene Server bei belegtem Port
   STILL nicht -- und alles Folgende misst gegen einen fremden
   Stand. Das ist der dritte Ausgang: belegt ist etwas anderes
   als kaputt. */
const PORT = await eigenerPort(import.meta, "pruef-kalender");
process.env.PORT = `${PORT}`;
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
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 }); };
import { notbremse } from "./helfer-notbremse.mjs";
import { eigenerPort } from "./helfer-port.mjs";
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
   zwei Auffangnetze ein, die einen Absturz nur protokollieren --
   richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
   Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
   Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(480_000, "pruef-kalender");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 200_000).unref?.();

/* ORTSZEIT, nicht UTC. Die Anwendung rechnet "heute" nach der Uhr des
   Benutzers; toISOString() liefert dagegen UTC und damit zwischen
   Mitternacht und 2 Uhr den VORTAG. In diesem Fenster schlug diese
   Pruefung fehl, ohne dass etwas kaputt war. */
const tagText = (d = new Date()) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`
  + `-${String(d.getDate()).padStart(2, "0")}`;

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

await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = tagText();
const morgen = tagText(new Date(Date.now() + 86400_000));
const in5 = tagText(new Date(Date.now() + 5 * 86400_000));

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, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
const idAnna = anlegen("Tili", "creator", "CODE-ANNA-0001");

/* Drei Arten von Terminen und eine Frist -- damit alle vier Filter etwas
   zu zeigen haben und man sieht, ob die Farben auseinandergehalten
   werden. */
const termine = [
  ["call",   heute  + "T10:00", "Wochen-Call"],
  ["call",   heute  + "T15:30", "Kurzes Rueckfragen"],
  ["termin", morgen + "T09:00", "Dreh im Studio"],
  ["review", in5    + "T14:00", "Monats-Review"],
];
for (const [art, beginn, titel] of termine) {
  d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, teilnehmer_id,
             erledigt, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,0,?,?)`)
    .run(titel, art, beginn, 30, idAnna, idAnna, jetzt, idDogi);
}
d.prepare(`INSERT INTO aufgaben (titel, status, creator_id, verantwortlich_id, frist,
           prioritaet, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?)`)
  .run("Thumbnail bauen", "offen", idAnna, idAnna, morgen, "hoch", jetzt, idDogi);

/* ---- Zettel von den Brettern (17.09.2026) --------------------------

   Filipe: „ich will dass die auch in einer kalender drin sind."

   SECHS STUECK, und jedes beantwortet eine andere Frage. Vier sollen
   erscheinen, zwei ausdruecklich nicht -- ohne die beiden waere der
   Abschnitt eine Pruefung, die nur bestaetigt: Dass etwas auftaucht,
   ist leicht; dass das Richtige WEGBLEIBT, ist der eigentliche
   Schnitt. */
const brettzettel = [
  /* [bereich, titel, datum, uhrzeit, geplant, event_ende, status, soll_erscheinen] */
  ["wunsch",  "Zugesagt: Retro-Abend",  heute, null, in5,  null, "angenommen", true],
  ["content", "Clip am Wochenende",     in5,   null, null, null, "offen",      true],
  ["live",    "Stream um acht",         morgen,"20:00", null, null, "offen",   true],
  ["agentur", "Messe Koeln",            morgen, null, null, in5,  "offen",     true],
  /* DER RUECKFALL. `datum` ist ein Pflichtfeld und faellt auf HEUTE
     zurueck, wenn niemand eins waehlt -- das ist das Erfassungsdatum
     und kein Termin. Erschiene dieser Zettel, stuende im Kalender
     kuenftig jeder je getippte Gedanke an dem Tag, an dem er getippt
     wurde. */
  ["ideen",   "Nur so notiert",         heute, null, null, null, "offen",      false],
  /* WAS ERLEDIGT IST, GEHOERT AUFS BRETT UND NICHT IN DIE PLANUNG. */
  ["content", "Laengst rausgegangen",   in5,   null, null, null, "erledigt",   false],
];
for (const [bereich, titel, datum, uhrzeit, geplant, ende, status] of brettzettel) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, datum, uhrzeit, geplant,
             event_ende, status, dringlichkeit, erstellt, erstellt_von)
             VALUES (?,?,?,?,?,?,?,?,?,'mittel',?,?)`)
    .run(bereich, "sonstiges", titel, "Text dazu", datum, uhrzeit, geplant, ende,
      status, jetzt, idDogi);
}
/* UND EINER, DEN NUR DIE LEITUNG SEHEN DARF. Er ist die Gegenprobe zur
   Rechtefrage: Im Kalender steht nur eine kleine Pille mit einem Titel
   -- dass darin etwas Vertrauliches steckt, faellt niemandem auf, der
   nicht danach sucht. Genau so ist am 03.09. eine Managerin an fremde
   Aufgabenfristen gekommen. */
d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, datum, status,
           dringlichkeit, nur_leitung, erstellt, erstellt_von)
           VALUES (?,?,?,?,?,'offen','mittel',1,?,?)`)
  .run("ideen", "sonstiges", "Vertraulich: Sponsorgespraech", null, in5, jetzt, idDogi);
d.close();

/* =====================================================================
   DIE ERWARTETEN ZAHLEN WERDEN GERECHNET, NICHT ABGESCHRIEBEN
   (17.09.2026)

   Hier standen „alle fünf Einträge", „vier Arten, vier Farben", „vier
   Filter", „drei Einträge übrig". Alle vier stimmten -- solange die
   Testdaten oben aus genau vier Terminen und einer Frist bestanden.

   Mit den Zetteln von den Brettern wurden daraus zehn, und SIEBEN
   Prüfungen je Bildschirmgröße wurden rot, ohne dass am Kalender
   irgendetwas kaputt war. Das ist dieselbe Falle wie eine feste
   Umbruchschwelle im CSS: eine Rechnung von gestern, die still falsch
   wird, sobald jemand etwas hinzufügt.

   Jetzt kommt jede Zahl aus den Daten darüber. Wer morgen einen
   fünften Termin einträgt, muss hier nichts nachziehen -- und wenn
   doch etwas rot wird, liegt es am Kalender und nicht an der
   Buchhaltung dieser Datei. */
const ERWARTET = {
  termine: termine.length,
  fristen: 1,
  /* Was der Server ausliefern MUSS: die Zettel mit `soll_erscheinen`.
     Der vertrauliche kommt dazu, weil DogFather ihn sehen darf. */
  brettzettel: brettzettel.filter((z) => z[7]).length + 1,
};
ERWARTET.pillen = ERWARTET.termine + ERWARTET.fristen + ERWARTET.brettzettel;
/* Die Arten: call, termin, review (aus `termine`), frist, brett. */
ERWARTET.arten = new Set([...termine.map((x) => x[0]), "frist", "brett"]).size;
/* Mit Uhrzeit: die Termine (alle haben eine) plus die Zettel, denen
   eine gegeben wurde. Die Frist hat keine. */
ERWARTET.mitUhr = ERWARTET.termine
  + brettzettel.filter((z) => z[7] && z[3]).length;
ERWARTET.calls = termine.filter((x) => x[0] === "call").length;
ERWARTET.ohneCalls = ERWARTET.pillen - ERWARTET.calls;

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

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

const lesen = (seite) => seite.evaluate(() => ({
  zeitraum: document.getElementById("zeitraum")?.textContent || "",
  unter: document.getElementById("zeitraum-unter")?.textContent || "",
  ansicht: document.getElementById("kalender")?.dataset.ansicht || null,
  /* Monatsraster */
  zellen: document.querySelectorAll(".k-tag").length,
  kwSpalten: document.querySelectorAll(".k-kw").length,
  kwWerte: [...document.querySelectorAll(".k-kw")].map((k) => k.textContent),
  heuteZellen: document.querySelectorAll('.k-tag[data-heute="ja"]').length,
  feiertagZellen: document.querySelectorAll('.k-tag[data-feiertag="ja"]').length,
  fremdZellen: document.querySelectorAll('.k-tag[data-fremd="ja"]').length,
  /* Eintraege */
  pillen: [...document.querySelectorAll(".k-pille")].map((p) => ({
    text: p.textContent,
    farbe: getComputedStyle(p).borderLeftColor,
    brett: p.querySelector(".k-pille__brett")?.textContent || null,
    zugesagt: !!p.querySelector('.k-pille__zusage'),
  })),
  anlaesse: [...document.querySelectorAll("#kalender .k-anlass")].map((a) => a.textContent),
  /* Leisten */
  saison: [...document.querySelectorAll("#saison .k-anlasskarte")].map((k) => ({
    name: k.querySelector(".k-anlasskarte__name")?.textContent,
    rest: k.querySelector(".k-anlasskarte__rest")?.textContent,
    feiertag: k.classList.contains("feiertag"),
  })),
  monatsanlaesse: [...document.querySelectorAll("#monatsanlaesse .k-anlasskarte")]
    .map((k) => k.querySelector(".k-anlasskarte__name")?.textContent),
  monatTitel: document.getElementById("monat-titel")?.textContent || "",
  /* Filter */
  chips: [...document.querySelectorAll(".k-chip")].map((c) => ({
    text: c.textContent, an: c.getAttribute("aria-pressed") === "true",
  })),
  /* Andere Ansichten */
  wochenSpalten: document.querySelectorAll(".k-wochentag").length,
  listentage: document.querySelectorAll(".k-listentag").length,
  strahlTage: document.querySelectorAll(".k-strahl__tag").length,
  zeilen: document.querySelectorAll(".k-zeile").length,
  ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
  /* Abgeschnittener Text ist der häufigste stille Fehler: Er sieht auf
     den ersten Blick nach Absicht aus. Gemessen wird die tatsächliche
     Textbreite gegen die verfügbare. Die Pillen im Raster sind bewusst
     ausgenommen -- eine Zelle ist 150 px breit, dort IST das Kürzen die
     richtige Lösung, und der volle Text steht im Tagesdialog. */
  abgeschnitten: [...document.querySelectorAll(
    ".k-anlasskarte__name, .k-anlasskarte__wann, .k-anlasskarte__rest, "
    + ".k-zeile__titel, .k-listentag__datum, .k-chip, .k-ansicht, .k-zeitraum")]
    .filter((e) => e.scrollWidth > e.clientWidth + 1)
    .map((e) => e.textContent.trim().slice(0, 30)),
}));

for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
  console.log(`\n=== ${wie} (${breite}px)`);
  const kontext = await browser.newContext({ viewport: { width: breite, height: 1100 } });
  const konsole = [];
  const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));
  await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(700);

  const r = await lesen(seite);
  console.log("   Zeitraum:", r.zeitraum, "·", r.unter);
  console.log("   Als Nächstes:", r.saison.map((s) => `${s.name} (${s.rest})`).join(" · "));

  /* ---- Monatsraster ---- */
  ok(r.ansicht === "monat", `startet im Monat (${r.ansicht})`);
  /* Ein Monatsraster hat immer ganze Wochen: 28, 35 oder 42 Zellen.
     Alles andere heisst, dass die Wochenberechnung daneben liegt. */
  ok([28, 35, 42].includes(r.zellen), `ganze Wochen im Raster (${r.zellen} Zellen)`);
  ok(r.kwSpalten === r.zellen / 7, `je Woche eine KW (${r.kwSpalten} für ${r.zellen / 7} Wochen)`);
  ok(r.kwWerte.every((w) => Number(w) >= 1 && Number(w) <= 53),
     `alle Kalenderwochen plausibel (${r.kwWerte.join(",")})`);
  ok(r.heuteZellen === 1, `genau ein Tag ist "heute" (${r.heuteZellen})`);
  ok(r.fremdZellen > 0, `die Nachbarmonatstage sind erkennbar (${r.fremdZellen})`);

  /* ---- Eintraege im Raster ---- */
  ok(r.pillen.length === ERWARTET.pillen,
    `alle ${ERWARTET.pillen} Einträge stehen im Raster (${r.pillen.length})`);
  ok(r.pillen.some((p) => p.text.includes("Wochen-Call")), "der Call ist dabei");
  ok(r.pillen.some((p) => p.text.includes("Thumbnail bauen")), "die Frist aus den Aufgaben auch");
  /* Jede Art traegt ihre eigene Farbe. Zwei Calls, ein Termin, ein
     Review, eine Frist -> vier verschiedene Farben. */
  const farben = new Set(r.pillen.map((p) => p.farbe));
  ok(farben.size === ERWARTET.arten,
    `${ERWARTET.arten} Arten, ${ERWARTET.arten} Farben (${farben.size})`);
  /* Die Uhrzeit steht vorn -- ausser bei der Frist, die keine hat. */
  {
    const mitUhr = r.pillen.filter((p) => /^\d{2}:\d{2}/.test(p.text)).length;
    ok(mitUhr === ERWARTET.mitUhr,
      `${ERWARTET.mitUhr} Einträge mit Uhrzeit, die Frist ohne (${mitUhr})`);
  }

  /* ---- Zaehler in der Kopfzeile ---- */
  ok(new RegExp(`KW \\d+( – \\d+)? · ${ERWARTET.pillen} Einträge`).test(r.unter),
    `die Kopfzeile zählt mit ("${r.unter}")`);

  /* ---- Filter ---- */
  ok(r.chips.length === ERWARTET.arten,
    `${ERWARTET.arten} Filter (${r.chips.length})`);
  ok(r.chips.every((c) => c.an), "und alle zunächst an");
  ok(r.chips.some((c) => c.text.includes("Call (2)")), `der Call-Filter zählt zwei (${r.chips.map((c) => c.text).join(" ")})`);
  ok(r.chips.some((c) => c.text.includes("Frist (1)")), "der Fristen-Filter zählt eine");

  /* Ausschalten muss WIRKLICH etwas ausblenden -- ein Filter, der nur
     die Farbe des Knopfes aendert, ist keiner. */
  await seite.click('.k-chip:has-text("Call")');
  await seite.waitForTimeout(250);
  const nachFilter = await lesen(seite);
  ok(nachFilter.pillen.length === ERWARTET.ohneCalls,
    `Calls ausgeschaltet: ${ERWARTET.ohneCalls} Einträge übrig (${nachFilter.pillen.length})`);
  ok(new RegExp(`· ${ERWARTET.ohneCalls} Einträge`).test(nachFilter.unter),
    `und die Kopfzeile zählt neu ("${nachFilter.unter}")`);
  await seite.click('.k-chip:has-text("Call")');
  await seite.waitForTimeout(250);

  /* ---- Anlassleisten ---- */
  ok(r.saison.length === 3, `drei kommende Anlässe (${r.saison.length})`);
  ok(r.saison.every((s) => /^(heute|morgen|in \d+ Tagen)$/.test(s.rest.replace("Vorlauf läuft", "").trim())),
     `jeder mit Abstand in Tagen (${r.saison.map((s) => s.rest).join(" | ")})`);
  ok(r.monatTitel.startsWith("Im "), `die zweite Leiste nennt den Monat ("${r.monatTitel}")`);

  /* ---- Blättern ---- */
  const vorher = r.zeitraum;
  await seite.click("#vor-zeit");
  await seite.waitForTimeout(400);
  const weiter = await lesen(seite);
  ok(weiter.zeitraum !== vorher, `vorwärts blättern wechselt den Monat (${vorher} → ${weiter.zeitraum})`);
  ok(weiter.heuteZellen === 0, "im nächsten Monat ist kein Tag mehr \"heute\"");
  await seite.click("#heute-knopf");
  await seite.waitForTimeout(400);
  const zurueck = await lesen(seite);
  ok(zurueck.zeitraum === vorher, `"Heute" führt zurück (${zurueck.zeitraum})`);

  /* ---- Die anderen drei Ansichten ---- */
  for (const [name, pruefung] of [
    ["woche", (x) => x.wochenSpalten === 7],
    ["liste", (x) => x.listentage > 0 && x.zeilen > 0],
    ["zeitstrahl", (x) => x.strahlTage === 42],
  ]) {
    await seite.click(`.k-ansicht[data-ansicht="${name}"]`);
    await seite.waitForTimeout(450);
    const a = await lesen(seite);
    ok(a.ansicht === name && pruefung(a),
       `Ansicht ${name} baut auf (Spalten=${a.wochenSpalten} Tage=${a.listentage} `
       + `Striche=${a.strahlTage} Zeilen=${a.zeilen})`);
    ok(a.ueber <= 0, `  und steht nicht über (${a.ueber}px)`);
  }
  await seite.click('.k-ansicht[data-ansicht="monat"]');
  await seite.waitForTimeout(400);

  /* ---- BLAETTERN DIREKT UEBER DEM KALENDER (09.09.2026) --------------
     Filipe, mit Bildschirmfoto: "ich will dass genau da ueber dem
     kalender auch noch buttons sind um den monat zu wechseln, tage
     wechseln ... die einen rot und die anderen gruen von den neuen."

     Die Pfeile gab es schon -- oben neben der Ueberschrift, einen
     halben Bildschirm entfernt von dem Raster, das sie bewegen.

     Geprueft wird nicht nur, DASS die Knoepfe da sind, sondern dass
     ihre Beschriftung die Wahrheit sagt: Ein Pfeil verspricht keinen
     Sprungweite, ein Wort schon. Steht "Monat vor" und es springt eine
     Woche, ist das schlimmer als gar keine Beschriftung. */
  {
    const vorher = await seite.textContent("#zeitraum");
    await seite.click("#schritt-vor");
    await seite.waitForTimeout(700);
    const nachher = await seite.textContent("#zeitraum");
    ok(vorher !== nachher, `der gruene Knopf blaettert weiter ("${vorher}" -> "${nachher}")`);

    const b = await seite.evaluate(() => ({
      zurueck: document.getElementById("schritt-zurueck-text")?.textContent,
      vor: document.getElementById("schritt-vor-text")?.textContent,
      heuteAus: document.getElementById("schritt-heute")?.disabled,
    }));
    ok(b.zurueck === "Monat zurück" && b.vor === "Monat vor",
       `und die Beschriftung nennt die Schrittweite ("${b.zurueck}" / "${b.vor}")`);
    ok(b.heuteAus === false, "Heute ist jetzt anklickbar, weil man woanders steht");

    await seite.click("#schritt-zurueck");
    await seite.waitForTimeout(700);
    const zurueck = await seite.textContent("#zeitraum");
    ok(zurueck === vorher, `der rote Knopf blaettert zurueck ("${zurueck}")`);
    const wiederDa = await seite.evaluate(() =>
      document.getElementById("schritt-heute")?.disabled);
    ok(wiederDa === true,
       "und Heute ist wieder ausgegraut -- ein Knopf, der nichts tut, wird sonst nie ernst genommen");

    /* DIE BESCHRIFTUNG FOLGT DER ANSICHT. In der Wochenansicht ist ein
       Schritt eine Woche -- steht dort weiter "Monat", luegt der Knopf. */
    await seite.click('.k-ansicht[data-ansicht="woche"]');
    await seite.waitForTimeout(600);
    const w = await seite.evaluate(() => ({
      zurueck: document.getElementById("schritt-zurueck-text")?.textContent,
      vor: document.getElementById("schritt-vor-text")?.textContent,
    }));
    ok(w.zurueck === "Woche zurück" && w.vor === "Woche vor",
       `in der Wochenansicht heissen sie anders ("${w.zurueck}" / "${w.vor}")`);

    /* Und sie springt dort wirklich eine Woche, nicht einen Monat. */
    const wVor = await seite.textContent("#zeitraum");
    await seite.click("#schritt-vor");
    await seite.waitForTimeout(700);
    const wNach = await seite.textContent("#zeitraum");
    ok(wVor !== wNach, `der Schritt wirkt auch dort ("${wVor}" -> "${wNach}")`);

    await seite.click('.k-ansicht[data-ansicht="monat"]');
    await seite.waitForTimeout(500);
    await seite.click("#schritt-heute");
    await seite.waitForTimeout(700);

    /* ROT UND GRUEN, an echten Bildpunkten. Eine Farbe im Stylesheet
       sagt nichts darueber, was am Bildschirm ankommt -- dieselbe
       Lehre wie beim Rollenstreifen der Personenkachel. */
    const farben = await seite.evaluate(() => {
      const lies = (id) => {
        const c = document.createElement("canvas");
        c.width = 1; c.height = 1;
        const g = c.getContext("2d", { willReadFrequently: true });
        g.fillStyle = "#000000";
        g.fillStyle = getComputedStyle(document.getElementById(id)).color;
        g.fillRect(0, 0, 1, 1);
        const p = g.getImageData(0, 0, 1, 1).data;
        return [p[0], p[1], p[2]];
      };
      return { rot: lies("schritt-zurueck"), gruen: lies("schritt-vor") };
    });
    ok(farben.rot[0] > farben.rot[1] + 25 && farben.rot[0] > farben.rot[2] + 25,
       `der Zurueck-Knopf ist wirklich rot (rgb(${farben.rot}))`);
    ok(farben.gruen[1] > farben.gruen[0] + 25 && farben.gruen[1] > farben.gruen[2] + 25,
       `der Vor-Knopf ist wirklich gruen (rgb(${farben.gruen}))`);

    /* GEGENPROBE: Die beiden sind NICHT dieselbe Farbe. Ohne sie hiesse
       "rot" und "gruen" nur, dass zweimal etwas gemessen wurde. */
    const abstand = farben.rot.reduce((s, x, i) => s + Math.abs(x - farben.gruen[i]), 0);
    ok(abstand > 120, `und die beiden unterscheiden sich deutlich (Abstand ${abstand})`);
  }

  /* ---- Tagesdialog ---- */
  await seite.click(`.k-tag[data-tag="${heute}"]`);
  await seite.waitForTimeout(300);
  const dialog = await seite.evaluate(() => ({
    offen: document.getElementById("tagdialog")?.open,
    titel: document.getElementById("tagdialog-titel")?.textContent,
    unter: document.getElementById("tagdialog-unter")?.textContent,
    zeilen: document.querySelectorAll("#tagdialog-liste .k-zeile").length,
  }));
  ok(dialog.offen === true, "ein Klick auf den Tag öffnet den Dialog");
  ok(dialog.zeilen === 2, `und zeigt die beiden Calls von heute (${dialog.zeilen})`);
  ok(/heute/.test(dialog.unter), `und weiss, dass es heute ist ("${dialog.unter}")`);
  await seite.keyboard.press("Escape");
  await seite.waitForTimeout(250);
  ok(await seite.evaluate(() => !document.getElementById("tagdialog").open),
     "Esc schließt ihn wieder");

  ok(r.ueber <= 0, `nichts steht über (${r.ueber}px)`);
  ok(r.abgeschnitten.length === 0,
     `kein Text wird abgeschnitten (${r.abgeschnitten.join(" | ") || "keiner"})`);
  ok(konsole.length === 0, `keine Fehler in der Konsole${konsole.length ? " -> " + konsole.join(" | ") : ""}`);

  await seite.screenshot({
    path: breite === 1440 ? "pruef-kalender-computer.png" : "pruef-kalender-handy.png",
    fullPage: true });
  await kontext.close();
}

/* ---------------------------------------------------------------------
   Die gerechneten Tage gegen bekannte Werte.

   Diese Zahlen stehen in jedem Kalender und lassen sich nachschlagen.
   Ohne diese Prüfung koennte die Osterformel um einen Tag daneben
   liegen und niemand wuerde es merken -- bis irgendwann jemand
   Karfreitag arbeitet.
   --------------------------------------------------------------------- */
console.log("\n=== Die gerechneten Tage");
{
  const kontext = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
  const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(600);

  /* Zu jedem Jahr: der Monat wird angesteuert und im Raster nachgesehen,
     an welchem Tag der Anlass steht. Damit wird wirklich das geprueft,
     was der Kalender ANZEIGT -- nicht eine Formel, die daneben noch
     einmal gerechnet wird. */
  const faelle = [
    ["2026-04-05", "Ostersonntag"],
    ["2026-04-03", "Karfreitag"],
    ["2026-05-14", "Christi Himmelfahrt"],
    ["2026-05-10", "Muttertag"],
    ["2026-11-27", "Black Friday"],
    ["2026-12-20", "4. Advent"],
    ["2027-03-28", "Ostersonntag"],
    ["2027-11-26", "Black Friday"],
    ["2027-12-19", "4. Advent"],
    ["2030-04-21", "Ostersonntag"],
  ];

  /* Zum Zielmonat blättern -- über die echten Knöpfe, nicht durch
     Setzen einer inneren Variablen: So wird auch die Navigation selbst
     mitgeprüft.

     Wichtig ist die RICHTUNG. Ein erster Versuch klickte stur vorwärts
     und erreichte April 2026 nie, weil heute September 2026 ist. Der
     Test meldete daraufhin zehnmal "Monat nicht erreicht" -- und hätte
     bei oberflächlichem Hinsehen wie ein Rechenfehler in der
     Osterformel ausgesehen. Deshalb wird jetzt verglichen, welcher
     Monat offen ist, und gezielt in die passende Richtung geblättert. */
  async function zuMonat(tag) {
    for (let i = 0; i < 90; i++) {
      const stand = await seite.evaluate((t) => {
        if (document.querySelector(`.k-tag[data-tag="${t}"]`)) return "da";
        /* Der offene Monat ist der der Zellen OHNE data-fremd -- die
           Randzellen gehören zum Nachbarmonat. */
        const eigen = document.querySelector('.k-tag:not([data-fremd="ja"])');
        return eigen ? eigen.dataset.tag.slice(0, 7) : null;
      }, tag);
      if (stand === "da") return true;
      if (!stand) return false;
      await seite.click(stand < tag.slice(0, 7) ? "#vor-zeit" : "#zurueck-zeit");
      await seite.waitForTimeout(70);
    }
    return false;
  }

  for (const [tag, name] of faelle) {
    const erreicht = await zuMonat(tag);
    const text = erreicht ? await seite.evaluate((t) => {
      const z = document.querySelector(`.k-tag[data-tag="${t}"]`);
      return z ? [...z.querySelectorAll(".k-anlass")].map((a) => a.textContent).join(" | ") : null;
    }, tag) : null;
    ok(text !== null && text.includes(name),
       `${name} liegt ${tag} (gefunden: ${text ?? "Monat nicht erreicht"})`);
  }
  await kontext.close();
}

/* =====================================================================
   WAS VON DEN BRETTERN KOMMT (17.09.2026)

   Gemessen vor dem Bau: /workspace/api/termine lieferte `termine` und
   `fristen` -- die Zettel von den achtzehn Brettern kamen nirgends
   vor, obwohl `eintraege` seit langem vier Zeitfelder hat (datum,
   uhrzeit, geplant, event_ende).
   ===================================================================== */
{
  console.log("\n=== Zettel von den Brettern ===");
  const kontext = await browser.newContext({ viewport: { width: 1366, height: 900 } });
  const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);

  /* Erst die Schnittstelle -- sie ist die Quelle, und wenn sie schon
     falsch liefert, sagt die Oberflaeche nichts ueber die Ursache. */
  const roh = await seite.evaluate(async () => {
    const a = await fetch("/workspace/api/termine?tage=30", { credentials: "same-origin" });
    return a.ok ? a.json() : null;
  });
  ok(!!roh && Array.isArray(roh.brettsachen),
    `die Schnittstelle liefert die Zettel (${roh?.brettsachen?.length})`);
  const titel = (roh?.brettsachen || []).map((b) => b.titel);

  for (const [, t2, , , , , , soll] of brettzettel) {
    ok(titel.includes(t2) === soll,
      soll ? `„${t2}" ist dabei` : `„${t2}" bleibt draussen -- und das ist der Punkt`);
  }
  ok(!titel.includes("Vertraulich: Sponsorgespraech")
    || true, "(die Leitung darf den vertraulichen sehen)");
  ok(titel.includes("Vertraulich: Sponsorgespraech"),
    "DogFather sieht auch den vertraulichen");

  /* DER MASSGEBLICHE TAG. Eine Zusage schlaegt das Erfassungsdatum --
     wer sagt „am 24.", meint den 24., auch wenn der Zettel am 3.
     entstanden ist. Ohne diese Zeile stuende die Zusage am falschen
     Tag, und das faellt niemandem auf, weil sie ja dasteht. */
  {
    const z = (roh?.brettsachen || []).find((b) => b.titel === "Zugesagt: Retro-Abend");
    ok(z?.wann === in5,
      `die Zusage steht am zugesagten Tag (${z?.wann}), nicht am Erfassungstag (${heute})`);
    ok(z?.grund === "zugesagt", `und der Grund steht dabei (${z?.grund})`);
  }

  /* Jetzt die Oberflaeche. */
  const gesehen = await lesen(seite);
  const brettpillen = gesehen.pillen.filter((p) => p.brett);
  ok(brettpillen.length >= 4,
    `im Kalender stehen ${brettpillen.length} Zettel mit Brettnamen`);
  ok(brettpillen.some((p) => p.zugesagt),
    "eine Zusage traegt ihr eigenes Zeichen");
  ok(brettpillen.some((p) => !p.zugesagt),
    "und ein bloss datierter Zettel nicht -- sonst waere das Zeichen bedeutungslos");
  ok(gesehen.chips.some((c) => c.text.startsWith("Vom Brett")),
    `der Filter kennt sie (${gesehen.chips.map((c) => c.text).join(", ")})`);

  /* WEGSCHALTEN MUSS GEHEN. Ein Kalender, in dem alles steht und nichts
     ausblendbar ist, ist wieder eine Liste. */
  {
    const vorher = (await lesen(seite)).pillen.filter((p) => p.brett).length;
    await seite.click('.k-chip:has-text("Vom Brett")');
    await seite.waitForTimeout(300);
    const nachher = (await lesen(seite)).pillen.filter((p) => p.brett).length;
    ok(vorher > 0 && nachher === 0,
      `der Schalter blendet sie aus (${vorher} -> ${nachher})`);
    await seite.click('.k-chip:has-text("Vom Brett")');
    await seite.waitForTimeout(300);
  }

  /* KEINE KALENDER-KNOEPFE AN EINEM ZETTEL. „Erledigt" haette
     PATCH /api/termine/b12 geschickt -- eine Nummer, die es dort nicht
     gibt, an eine Schnittstelle, die davon nichts weiss. Still, ohne
     Wirkung, ohne Meldung. */
  {
    await seite.click('.k-ansicht[data-ansicht="liste"]');
    await seite.waitForTimeout(600);
    const zeilen = await seite.evaluate(() =>
      [...document.querySelectorAll('.k-zeile[data-art="brett"]')].map((z) => ({
        art: z.querySelector(".k-zeile__art")?.textContent || "",
        knoepfe: [...z.querySelectorAll(".k-zeile__knoepfe *")]
          .map((k) => k.textContent.trim()).filter(Boolean),
      })));
    ok(zeilen.length > 0, `in der Liste stehen ${zeilen.length} Zettel`);
    /* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext.
       `every()` liefert auf einem LEEREN Feld `true` -- beim ersten Lauf
       stand hier genau das: „jeder hat den Weg zurueck" war gruen, und
       es gab null Zeilen, weil der Umschalter-Selektor falsch war. Eine
       Pruefung, die ohne Daten bestaetigt, bestaetigt nichts. */
    ok(zeilen.length > 0 && zeilen.every((z) => z.knoepfe.includes("zum Brett")),
      `jeder der ${zeilen.length} hat den Weg zurueck zu seinem Brett`);
    ok(zeilen.length > 0
      && zeilen.every((z) => !z.knoepfe.some((k) => /erledigt|l..schen|Wecker/i.test(k))),
      `und keiner die Knoepfe eines Termins (${zeilen[0]?.knoepfe.join(", ")})`);
    ok(zeilen.length > 0 && zeilen.some((z) => z.art && z.art !== "Vom Brett"),
      `in der Liste steht das Brett und nicht die Art (${zeilen[0]?.art})`);
  }
  /* ---- DIE ZWEITE ZEILE NUR, WO SIE LESBAR IST ---------------------

     GEMESSEN WIRD SICHTBARKEIT, NICHT VORHANDENSEIN. `textContent`
     liefert den Brettnamen auch dann, wenn `display: none` ihn
     ausblendet -- eine Pruefung darauf waere fuer diese Aenderung
     blind gewesen und trotzdem gruen. Gefragt wird deshalb nach der
     tatsaechlichen Hoehe. */
  {
    const messen = () => seite.evaluate(() =>
      [...document.querySelectorAll(".k-tag .k-pille__brett")]
        .map((b) => b.offsetHeight > 0));
    await seite.click('.k-ansicht[data-ansicht="monat"]');
    await seite.waitForTimeout(400);
    const breit = await messen();
    ok(breit.length > 0 && breit.every(Boolean),
      `am Rechner steht das Brett an allen ${breit.length} Zetteln`);

    await seite.setViewportSize({ width: 390, height: 844 });
    await seite.waitForTimeout(500);
    const eng = await messen();
    ok(eng.length > 0 && eng.every((x) => x === false),
      `am Handy bleibt es weg -- dort waere es ein „Co…" (${eng.length} geprueft)`);
    await seite.setViewportSize({ width: 1366, height: 900 });
    await seite.waitForTimeout(400);
  }

  /* ---- DER WEG ZUM ZETTEL, NICHT NUR ZUM BRETT ---------------------

     Ein Link, der auf das Brett fuehrt, laesst einen zwischen zwanzig
     Eintraegen suchen -- dann hat er nichts gebracht. Geprueft wird
     deshalb nicht, dass die Adresse stimmt, sondern dass am Ende der
     richtige Zettel HERVORGEHOBEN dasteht. */
  {
    await seite.click('.k-ansicht[data-ansicht="liste"]');
    await seite.waitForTimeout(500);
    const wohin = await seite.evaluate(() => {
      const z = [...document.querySelectorAll('.k-zeile[data-art="brett"]')]
        .find((x) => /Clip am Wochenende/.test(x.textContent));
      return z?.querySelector("a")?.getAttribute("href") || null;
    });
    ok(!!wohin && /zeigen=eintrag-\d+/.test(wohin),
      `der Weg fuehrt auf den Zettel (${wohin})`);
    await seite.goto(BASIS + "/workspace/" + wohin, { waitUntil: "networkidle" });
    await seite.waitForTimeout(1400);
    const dort = await seite.evaluate(() => {
      const t2 = [...document.querySelectorAll('.eintrag-karte[data-treffer="ja"]')];
      return {
        markiert: t2.length,
        text: t2[0]?.textContent?.slice(0, 60) || "",
        leiste: document.querySelector(".ziel-leiste__text")?.textContent || "",
      };
    });
    ok(dort.markiert === 1,
      `auf dem Brett ist genau ein Zettel hervorgehoben (${dort.markiert})`);
    ok(/Clip am Wochenende/.test(dort.text),
      `und zwar der richtige (${dort.text.trim().slice(0, 40)})`);
    ok(dort.leiste.length > 5, `mit einer Zeile, die sagt was gezeigt wird ("${dort.leiste}")`);
  }

  await kontext.close();

  /* ---- DIE RECHTEFRAGE ---------------------------------------------

     Im Kalender steht nur eine kleine Pille mit einem Titel. Dass
     darin ein vertrauliches Vorhaben steckt, faellt niemandem auf, der
     nicht danach sucht -- genau deshalb ist das die Stelle, an der ein
     Leck lange unbemerkt bliebe. */
  {
    const k2 = await browser.newContext({ viewport: { width: 1366, height: 900 } });
    const s2 = await anmelden(k2, "creator", "CODE-ANNA-0001");
    await s2.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
    await s2.waitForTimeout(1200);
    const roh2 = await s2.evaluate(async () => {
      const a = await fetch("/workspace/api/termine?tage=30", { credentials: "same-origin" });
      return a.ok ? a.json() : null;
    });
    const t2 = (roh2?.brettsachen || []).map((b) => b.titel);
    ok(!t2.includes("Vertraulich: Sponsorgespraech"),
      `eine Creatorin sieht den vertraulichen Zettel NICHT (${t2.length} sichtbar)`);
    /* GEGENPROBE: Sie sieht ueberhaupt etwas. Ohne diese Zeile waere
       „sieht das Vertrauliche nicht" auch dann gruen, wenn die Abfrage
       gar nichts liefert -- und dann bewiese sie nichts. */
    ok(t2.length > 0,
      `aber sehr wohl die offenen (${t2.slice(0, 2).join(", ")})`);
    await k2.close();
  }
}

await browser.close();
/* Der Testordner bleibt manchmal gesperrt, weil der Server im selben
   Prozess noch auf der Datenbank sitzt. Das ist kein Prüfergebnis --
   ein Aufräumfehler darf einen bestandenen Lauf nicht rot machen. */
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
process.exit(fehler ? 1 : 0);