import { readFile } from "node:fs/promises";
import { resolve } from "node:path";

const outputPath = resolve(".next/server/app/index.html");
const source = await readFile(resolve("src/app/page.tsx"), "utf8");

// The placeholder is the first frame for a newly-created project. It must stay
// visible when a client chunk is delayed or rejected; later product pages are
// free to replace it and choose their own bounded animation policy.
if (source.includes("Fluw template")) {
  const html = await readFile(outputPath, "utf8");
  const main = html.match(/<main\b[\s\S]*?<\/main>/i)?.[0];
  if (!main) {
    throw new Error("Fluw placeholder is missing its main landmark");
  }
  const criticalElement = main.match(
    /<[^>]*\bdata-fluw-preview-critical="true"[^>]*>/i,
  )?.[0];
  if (!criticalElement) {
    throw new Error("Fluw placeholder is missing its preview-critical element");
  }

  if (
    /style="[^"]*(?:opacity\s*:\s*0(?:[;"]|\s)|visibility\s*:\s*hidden|display\s*:\s*none)/i.test(
      criticalElement,
    )
  ) {
    throw new Error(
      "Fluw placeholder hides content before client hydration; keep the first frame visible",
    );
  }
}

console.log("No-JS preview visibility verified");