import { execFileSync } from "node:child_process";
import { readFileSync, rmSync, writeFileSync } from "node:fs";
import { createRequire } from "node:module";
import { dirname, join, resolve } from "node:path";
import { fileURLToPath } from "node:url";

const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
const input = resolve(root, "src/styles/panel.css");
const tmp = resolve(root, "src/styles/.panel.out.css");
const output = resolve(root, "src/styles/panel.generated.ts");

const require = createRequire(import.meta.url);
const cliPackagePath = require.resolve("@tailwindcss/cli/package.json");
const cliPackage = JSON.parse(readFileSync(cliPackagePath, "utf8"));
const cliBin =
  typeof cliPackage.bin === "string"
    ? cliPackage.bin
    : cliPackage.bin.tailwindcss;
const tailwindCli = join(dirname(cliPackagePath), cliBin);

execFileSync(
  process.execPath,
  [tailwindCli, "-i", input, "-o", tmp, "--minify"],
  {
    cwd: root,
    stdio: "inherit",
  },
);

let css = readFileSync(tmp, "utf8");
rmSync(tmp, { force: true });

// The compiled sheet is injected into a shadow root, where `:root` never
// matches. Move Tailwind's theme/preflight layers onto `:host` so the custom
// properties and base styles reach the panel. Our own token blocks already
// target `:host`/`.dark`.
css = css.replaceAll(":root", ":host");

const banner =
  "// Generated by scripts/build-styles.mjs. Do not edit by hand.\n";
writeFileSync(
  output,
  `${banner}export const panelCss = ${JSON.stringify(css)};\n`,
);

console.log(`wrote ${output} (${css.length} bytes of css)`);