/* Prueft, dass die beiden Blickfang-Motive wirklich ankommen: richtige
   Datei je Geraet, sichtbare Groesse, und keine 404 auf dem Weg. */
import { chromium } from "playwright";
import http from "http";
import fs from "fs";
import path from "path";

const TYP = {
  ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
  ".png": "image/png", ".svg": "image/svg+xml", ".webp": "image/webp",
  ".json": "application/json", ".ico": "image/x-icon", ".jpg": "image/jpeg",
};

const fehlt = [];
const srv = http.createServer((q, r) => {
  const u = decodeURIComponent(q.url.split("?")[0]);
  const p = path.join(process.cwd(), u);
  if (fs.existsSync(p) && !p.endsWith("/")) {
    r.writeHead(200, { "content-type": TYP[path.extname(p)] || "text/plain" });
    return r.end(fs.readFileSync(p));
  }
  fehlt.push(u);
  r.writeHead(404);
  r.end("");
});

let ok = 0, fehl = 0;
const pruefe = (name, gut, info) => {
  if (gut) { ok++; console.log("  ok   " + name + (info ? "  -> " + info : "")); }
  else { fehl++; console.log("  FEHL " + name + (info ? "  -> " + info : "")); }
};

srv.listen(4402, async () => {
  const browser = await chromium.launch();

  for (const [seite, kl] of [["ueber", "wappen"], ["portfolio", "monolith"]]) {
    for (const [gr, vp] of [["pc", { width: 1440, height: 950 }],
                            ["handy", { width: 390, height: 844 }]]) {
      const s = await browser.newPage({ viewport: vp });
      await s.goto(`http://127.0.0.1:4402/webdesign/${seite}.html`);
      await s.waitForTimeout(1400);

      const el = s.locator(".wd-blickfang--" + kl);
      const r = await el.evaluate((e) => {
        const c = getComputedStyle(e);
        const b = e.getBoundingClientRect();
        const treffer = c.backgroundImage.match(/img\/([a-z0-9-]+\.webp)/i);
        return {
          datei: treffer ? treffer[1] : "(keins)",
          h: Math.round(b.height), w: Math.round(b.width),
          versteckt: e.getAttribute("aria-hidden"),
        };
      });

      /* Auf dem Handy MUSS die kleine Fassung kommen -- sonst laedt ein
         Telefon ueber Mobilfunk die volle Datei fuer nichts. */
      const richtig = gr === "handy" ? r.datei.includes("-klein") : !r.datei.includes("-klein");
      pruefe(`${seite}/${gr}: richtige Bilddatei`, richtig, r.datei);
      pruefe(`${seite}/${gr}: sichtbar gross`, r.h > 80 && r.w > 200, `${r.w}x${r.h}`);
      pruefe(`${seite}/${gr}: als Zierbild ausgezeichnet`, r.versteckt === "true", r.versteckt);

      await el.scrollIntoViewIfNeeded();
      await s.waitForTimeout(700);
      await s.screenshot({ path: `blickfang-${seite}-${gr}.png` });
      await s.close();
    }
  }

  const verpasst = fehlt.filter((f) => /\.(webp|png|css|js|svg)$/.test(f));
  pruefe("keine fehlenden Dateien", verpasst.length === 0, verpasst.join(", ") || "keine");

  console.log(`\n===== ${ok} bestanden, ${fehl} fehlgeschlagen =====`);
  await browser.close();
  srv.close();
  process.exit(fehl ? 1 : 0);
});