// RFS CFD + 새벽청과 L6 — upgraded showcase journeys in real Chromium.
import puppeteer from "puppeteer-core";
import { createRequire } from "node:module";
import fs from "node:fs";
import http from "node:http";
import path from "node:path";
import url from "node:url";

const require = createRequire(import.meta.url);
const here = path.dirname(url.fileURLToPath(import.meta.url));
const root = path.resolve(here, "..");
const publicRoot = path.join(root, "public");
const chrome = [
  process.env.CHROME_PATH,
  "C:/Program Files/Google/Chrome/Application/chrome.exe",
  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
].find((candidate) => candidate && fs.existsSync(candidate));
if (!chrome) throw new Error("Chrome executable not found");

const MIME = new Map([
  [".html", "text/html; charset=utf-8"],
  [".css", "text/css; charset=utf-8"],
  [".js", "text/javascript; charset=utf-8"],
  [".svg", "image/svg+xml"],
  [".webp", "image/webp"],
  [".png", "image/png"],
  [".jpg", "image/jpeg"],
  [".jpeg", "image/jpeg"],
  [".woff2", "font/woff2"],
]);

const server = http.createServer((request, response) => {
  const pathname = decodeURIComponent(new URL(request.url, "http://localhost").pathname);
  const candidate = path.resolve(publicRoot, `.${pathname}`);
  if (!candidate.startsWith(publicRoot + path.sep)) {
    response.writeHead(403).end("forbidden");
    return;
  }
  const file = fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()
    ? path.join(candidate, "index.html")
    : candidate;
  if (!fs.existsSync(file) || !fs.statSync(file).isFile()) {
    response.writeHead(404).end("not found");
    return;
  }
  response.setHeader("Content-Type", MIME.get(path.extname(file).toLowerCase()) || "application/octet-stream");
  response.setHeader("Cache-Control", "no-store");
  fs.createReadStream(file).pipe(response);
});

await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
const address = server.address();
const origin = `http://127.0.0.1:${address.port}`;
const urls = {
  rfs: `${origin}/work/rfs-cfd/`,
  market: `${origin}/work/saebyeok-cheonggwa/`,
};

let pass = 0;
let fail = 0;
const suites = new Map();
const failures = [];
const browserErrors = [];
const assert = (condition, suite, name, detail = "") => {
  const state = suites.get(suite) || { pass: 0, fail: 0 };
  if (condition) {
    pass += 1;
    state.pass += 1;
  } else {
    fail += 1;
    state.fail += 1;
    failures.push(`${suite} · ${name}${detail ? ` — ${detail}` : ""}`);
  }
  suites.set(suite, state);
};
const assertEvery = (items, predicate, suite, name, describe = (item) => JSON.stringify(item)) => {
  for (const item of items) assert(predicate(item), suite, name, describe(item));
};

const browser = await puppeteer.launch({
  executablePath: chrome,
  headless: "new",
  args: ["--no-sandbox", "--use-angle=swiftshader", "--enable-unsafe-swiftshader", "--force-device-scale-factor=1"],
});

async function newPage({ javascript = true } = {}) {
  const page = await browser.newPage();
  await page.setCacheEnabled(false);
  await page.setJavaScriptEnabled(javascript);
  if (javascript) {
    await page.evaluateOnNewDocument(() => {
      window.__recentShowcasePerf = { cls: 0, lcp: 0 };
      new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (!entry.hadRecentInput) window.__recentShowcasePerf.cls += entry.value;
        }
      }).observe({ type: "layout-shift", buffered: true });
      new PerformanceObserver((list) => {
        const entries = list.getEntries();
        if (entries.length) window.__recentShowcasePerf.lcp = entries.at(-1).startTime;
      }).observe({ type: "largest-contentful-paint", buffered: true });
    });
  }
  page.on("pageerror", (error) => browserErrors.push(`pageerror: ${error.message}`));
  page.on("console", (message) => {
    if (message.type() === "error") browserErrors.push(`console: ${message.text()}`);
  });
  page.on("response", (response) => {
    if (response.status() >= 400) browserErrors.push(`response: ${response.status()} ${response.url()}`);
  });
  return page;
}

async function goto(page, target) {
  await page.goto(target, { waitUntil: "domcontentloaded", timeout: 30000 });
  await page.waitForNetworkIdle({ idleTime: 250, timeout: 5000 }).catch(() => {});
  await Promise.race([
    page.evaluate(() => document.fonts.ready),
    new Promise((resolve) => setTimeout(resolve, 5000)),
  ]);
}

function expectedKoreanStamp() {
  const parts = Object.fromEntries(
    new Intl.DateTimeFormat("en-CA", {
      timeZone: "Asia/Seoul",
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
      .formatToParts(new Date())
      .filter((part) => part.type !== "literal")
      .map((part) => [part.type, part.value]),
  );
  return {
    month: Number(parts.month),
    text: `${parts.month}월 ${parts.day}일 02:00`,
    datetime: `${parts.year}-${parts.month}-${parts.day}T02:00+09:00`,
  };
}

try {
  const page = await newPage();

  // 1. Both pages remain structurally complete throughout the target width matrix.
  for (const [site, target] of Object.entries(urls)) {
    for (const width of [320, 390, 768, 1440]) {
      await page.setViewport({ width, height: width < 500 ? 844 : 900, isMobile: width < 500, hasTouch: width < 500 });
      await goto(page, target);
      if (site === "rfs") {
        await page.waitForFunction(
          () => document.querySelector("[data-field-shell]")?.dataset.fieldState !== "loading",
          { timeout: 8000 },
        );
      }
      const geometry = await page.evaluate((siteName) => {
        const h1 = document.querySelector("h1");
        const lead = document.querySelector(".hero-lead, .hero-intro");
        const targetSelector = siteName === "rfs"
          ? ".scenario-btn, .vis-tab"
          : ".board-select, [data-season-dir], #copyOrder, #orderItem, #orderQty";
        const targets = [...document.querySelectorAll(targetSelector)]
          .filter((element) => {
            const style = getComputedStyle(element);
            const rect = element.getBoundingClientRect();
            return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
          })
          .map((element) => {
            const rect = element.getBoundingClientRect();
            return { label: element.textContent.trim().slice(0, 24), width: Math.round(rect.width), height: Math.round(rect.height) };
          });
        return {
          width: innerWidth,
          scrollWidth: document.documentElement.scrollWidth,
          h1Count: document.querySelectorAll("h1").length,
          h1Inset: Math.round(h1.getBoundingClientRect().left),
          leadInset: lead ? Math.round(lead.getBoundingClientRect().left) : null,
          targets,
          brokenImages: [...document.images].filter((image) => image.complete && image.naturalWidth === 0).length,
          fieldState: document.querySelector("[data-field-shell]")?.dataset.fieldState || "n/a",
        };
      }, site);
      const suite = `${site} responsive ${width}`;
      assert(geometry.scrollWidth <= geometry.width, suite, "no horizontal overflow", `${geometry.scrollWidth}/${geometry.width}`);
      assert(geometry.h1Count === 1, suite, "one h1", String(geometry.h1Count));
      assert(geometry.h1Inset >= 12, suite, "h1 left inset >=12px", String(geometry.h1Inset));
      assert(geometry.leadInset === null || Math.abs(geometry.h1Inset - geometry.leadInset) <= 10, suite, "hero copy shares one left axis", `${geometry.h1Inset}/${geometry.leadInset}`);
      assert(geometry.brokenImages === 0, suite, "all images decode", String(geometry.brokenImages));
      if (width < 500) assertEvery(geometry.targets, (item) => item.height >= 44, suite, "new touch target height >=44px", (item) => `${item.label} ${item.width}x${item.height}`);
      if (site === "rfs") assert(["live", "static"].includes(geometry.fieldState), suite, "field exits loading", geometry.fieldState);
    }
  }

  // 2. RFS presets interpret the operating state, manual edits clear the preset, and render views switch.
  await page.setViewport({ width: 1440, height: 900 });
  await goto(page, urls.rfs);
  await page.waitForFunction(() => document.querySelector("[data-field-shell]")?.dataset.fieldState !== "loading", { timeout: 8000 });
  assert((await page.$$eval("[data-field-preset]", (items) => items.length)) === 3, "RFS controls", "three operating presets");
  await page.click('[data-field-preset="overload"]');
  const overload = await page.evaluate(() => ({
    load: document.querySelector("#ctlLoad").value,
    supply: document.querySelector("#ctlSupply").value,
    selected: document.querySelector('[data-field-preset="overload"]').getAttribute("aria-pressed"),
    scene: document.querySelector("#fieldScene").textContent.trim(),
    state: document.querySelector("#fieldState").textContent.trim(),
    watch: document.querySelector("#fieldWatch").textContent.trim(),
    action: document.querySelector("#fieldAction").textContent.trim(),
  }));
  assert(overload.load === "95" && overload.supply === "50", "RFS controls", "overload preset sets both inputs", `${overload.load}/${overload.supply}`);
  assert(overload.selected === "true" && overload.scene === "랙 과부하", "RFS controls", "selected preset is announced", `${overload.selected}/${overload.scene}`);
  assert(overload.state.includes("발열이 급기보다 크게"), "RFS controls", "output interprets the imbalance", overload.state);
  assert(overload.watch.includes("천장 배기") && overload.action.includes("급기 상향"), "RFS controls", "output gives observation and next action", `${overload.watch}/${overload.action}`);

  await page.$eval("#ctlLoad", (input) => {
    input.value = "80";
    input.dispatchEvent(new Event("input", { bubbles: true }));
  });
  const manual = await page.evaluate(() => ({
    scene: document.querySelector("#fieldScene").textContent.trim(),
    pressed: [...document.querySelectorAll("[data-field-preset]")].map((button) => button.getAttribute("aria-pressed")),
    out: document.querySelector("#outLoad").textContent.trim(),
  }));
  assert(manual.scene === "수동 조정", "RFS controls", "manual slider clears named scene", manual.scene);
  assert(manual.pressed.every((value) => value === "false"), "RFS controls", "manual slider clears every preset", manual.pressed.join(","));
  assert(manual.out === "80%", "RFS controls", "manual slider output stays synchronized", manual.out);

  await page.click('[data-vis-target="side"]');
  const view = await page.evaluate(() => ({
    topHidden: document.querySelector('[data-vis-panel="top"]').hidden,
    sideHidden: document.querySelector('[data-vis-panel="side"]').hidden,
    sidePressed: document.querySelector('[data-vis-target="side"]').getAttribute("aria-pressed"),
    visibleFigures: [...document.querySelectorAll("[data-vis-panel]")].filter((figure) => !figure.hidden).length,
  }));
  assert(view.topHidden && !view.sideHidden && view.sidePressed === "true", "RFS visual output", "side view replaces top view", JSON.stringify(view));
  assert(view.visibleFigures === 1, "RFS visual output", "only one render occupies the viewer", String(view.visibleFigures));

  await page.focus('[data-field-preset="baseline"]');
  await page.keyboard.press("Tab");
  assert(await page.$eval('[data-field-preset="overload"]', (button) => button === document.activeElement), "RFS keyboard", "preset order follows visual order");
  await page.keyboard.press("Enter");
  assert(await page.$eval('[data-field-preset="overload"]', (button) => button.getAttribute("aria-pressed") === "true"), "RFS keyboard", "preset activates from keyboard");

  // 3. Reduced-motion keeps RFS interpretation interactive without starting the simulation.
  await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);
  await goto(page, urls.rfs);
  await page.click('[data-field-preset="supply-loss"]');
  const reduced = await page.evaluate(() => ({
    fieldState: document.querySelector("[data-field-shell]").dataset.fieldState,
    scene: document.querySelector("#fieldScene").textContent.trim(),
    load: document.querySelector("#ctlLoad").value,
    supply: document.querySelector("#ctlSupply").value,
  }));
  assert(reduced.fieldState === "static", "RFS reduced motion", "simulation is static", reduced.fieldState);
  assert(reduced.scene === "급기 저하" && reduced.load === "65" && reduced.supply === "25", "RFS reduced motion", "controls and interpretation remain available", JSON.stringify(reduced));
  await page.emulateMediaFeatures([]);

  // 4. 새벽청과 uses the current Korean market date and turns every price row into a readable lot.
  await goto(page, urls.market);
  const stamp = expectedKoreanStamp();
  const date = await page.$eval(".hero-meta time", (time) => ({ text: time.textContent.trim(), datetime: time.dateTime }));
  assert(date.text === stamp.text && date.datetime === stamp.datetime, "새벽청과 date", "market stamp is current in Korea", `${date.text}/${date.datetime}`);
  assert((await page.$$eval("[data-market-row]", (items) => items.length)) === 6, "새벽청과 lot board", "six selectable lots");
  await page.click('[data-market-row][data-name="무화과"]');
  const fig = await page.evaluate(() => ({
    selected: document.querySelector('[data-market-row][data-name="무화과"]').getAttribute("aria-pressed"),
    name: document.querySelector("#lotName").textContent.trim(),
    origin: document.querySelector("#lotOrigin").textContent.trim(),
    grade: document.querySelector("#lotGrade").textContent.trim(),
    pack: document.querySelector("#lotPack").textContent.trim(),
    price: document.querySelector("#lotPrice").textContent.trim(),
    orderItem: document.querySelector("#orderItem").value,
  }));
  assert(fig.selected === "true" && fig.name === "무화과" && fig.origin === "전남 영암", "새벽청과 lot board", "selected lot identity is synchronized", JSON.stringify(fig));
  assert(fig.grade.includes("당도 표기 대상 아님") && fig.pack === "1.2 kg" && fig.price === "24,000원", "새벽청과 lot board", "selected lot facts are explicit", JSON.stringify(fig));
  assert(fig.orderItem === "무화과", "새벽청과 lot board", "selected lot carries into order memo", fig.orderItem);

  // 5. Season browsing and order memo calculations have explicit, asserted outcomes.
  const beforeMonth = await page.$eval("#seasonMonth", (output) => Number.parseInt(output.textContent, 10));
  await page.click('[data-season-dir="1"]');
  const season = await page.evaluate(() => ({
    month: Number.parseInt(document.querySelector("#seasonMonth").textContent, 10),
    count: document.querySelector("#seasonCount").textContent.trim(),
    selectedHeads: document.querySelectorAll(".season thead .is-focus").length,
  }));
  const expectedNextMonth = (beforeMonth % 12) + 1;
  assert(season.month === expectedNextMonth, "새벽청과 season", "next month wraps correctly", `${beforeMonth}->${season.month}`);
  assert(/^\d+품목 · /.test(season.count) && season.selectedHeads === 1, "새벽청과 season", "month has one highlighted header and a named list", JSON.stringify(season));

  await page.select("#orderItem", "샤인머스캣");
  await page.$eval("#orderQty", (input) => {
    input.value = "4";
    input.dispatchEvent(new Event("input", { bubbles: true }));
    input.dispatchEvent(new Event("change", { bubbles: true }));
  });
  const order = await page.evaluate(() => ({
    pack: document.querySelector("#orderPack").textContent.trim(),
    total: document.querySelector("#orderTotal").textContent.trim(),
    quantity: document.querySelector("#orderQty").value,
  }));
  assert(order.pack === "2 kg × 4상자" && order.total === "106,000원", "새벽청과 order", "pack and auction example total recalculate", JSON.stringify(order));
  assert(order.quantity === "4", "새벽청과 order", "valid quantity is preserved", order.quantity);

  await page.$eval("#orderQty", (input) => {
    input.value = "1";
    input.dispatchEvent(new Event("change", { bubbles: true }));
  });
  assert((await page.$eval("#orderQty", (input) => input.value)) === "3", "새벽청과 order", "quantity clamps to the stated minimum");

  await browser.defaultBrowserContext().overridePermissions(origin, ["clipboard-read", "clipboard-write"]);
  await page.$eval("#orderQty", (input) => {
    input.value = "4";
    input.dispatchEvent(new Event("change", { bubbles: true }));
  });
  await page.click("#copyOrder");
  await page.waitForFunction(() => document.querySelector("#orderStatus")?.textContent.includes("복사했습니다"));
  const copied = await page.evaluate(async () => ({
    status: document.querySelector("#orderStatus").textContent.trim(),
    text: await navigator.clipboard.readText(),
  }));
  assert(copied.status === "발주 메모를 복사했습니다.", "새벽청과 order", "clipboard action reports success", copied.status);
  assert(copied.text.includes("품목: 샤인머스캣") && copied.text.includes("수량: 4상자") && copied.text.includes("106,000원"), "새벽청과 order", "clipboard contains the actual selection", copied.text.replaceAll("\n", " / "));

  // 6. Axe scans both upgraded surfaces, and content survives JavaScript loss.
  const axePath = require.resolve("axe-core/axe.min.js");
  for (const [site, target] of Object.entries(urls)) {
    await goto(page, target);
    await page.addScriptTag({ path: axePath });
    const axe = await page.evaluate(async () => axe.run(document, { resultTypes: ["violations"] }));
    const detail = axe.violations.map((item) => `${item.id}: ${item.nodes.map((node) => node.target.join(" ")).join(" | ")}`).join("; ");
    assert(axe.violations.length === 0, `${site} axe`, "zero WCAG violations", detail);
    const perf = await page.evaluate(() => ({
      cls: window.__recentShowcasePerf?.cls ?? -1,
      lcp: window.__recentShowcasePerf?.lcp ?? -1,
      sameOriginBytes: performance.getEntriesByType("resource")
        .filter((entry) => new URL(entry.name).origin === location.origin)
        .reduce((sum, entry) => sum + (entry.encodedBodySize || entry.transferSize || 0), 0),
    }));
    assert(perf.cls >= 0 && perf.cls <= 0.1, `${site} performance`, "CLS <=0.1", String(perf.cls));
    assert(perf.lcp > 0 && perf.lcp <= 3500, `${site} performance`, "local LCP <=3.5s", String(perf.lcp));
    assert(perf.sameOriginBytes > 0 && perf.sameOriginBytes <= 2_000_000, `${site} performance`, "same-origin first load <=2MB", String(perf.sameOriginBytes));
  }

  for (const [site, target] of Object.entries(urls)) {
    const noJs = await newPage({ javascript: false });
    await noJs.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
    await goto(noJs, target);
    const fallback = await noJs.evaluate((siteName) => ({
      h1: document.querySelector("h1")?.textContent.trim() || "",
      bodyLength: document.body.innerText.trim().length,
      coreContent: siteName === "rfs"
        ? document.querySelector("#problem")?.textContent.trim().length || 0
        : document.querySelectorAll("[data-market-row]").length,
      overflow: document.documentElement.scrollWidth > innerWidth,
    }), site);
    assert(fallback.h1.length > 0 && fallback.bodyLength > 1000, `${site} no-JS`, "primary content remains readable", `${fallback.h1}/${fallback.bodyLength}`);
    assert(fallback.coreContent > 0 && !fallback.overflow, `${site} no-JS`, "core evidence survives without horizontal overflow", JSON.stringify(fallback));
    await noJs.close();
  }

  assert(browserErrors.length === 0, "browser runtime", "zero page, console, and response errors", browserErrors.join(" | "));
  await page.close();
} finally {
  await browser.close();
  await new Promise((resolve) => server.close(resolve));
}

for (const [suite, result] of suites) {
  console.log(`${result.fail ? "FAIL" : "PASS"} ${suite} — ${result.pass}/${result.pass + result.fail}`);
}
if (failures.length) {
  console.error("\nFailures:");
  for (const failure of failures) console.error(`- ${failure}`);
}
console.log(`\nPASS ${pass} / FAIL ${fail}`);
process.exit(fail ? 1 : 0);