import { readFileSync } from "node:fs";
import { fileURLToPath } from "node:url";

import { describe, expect, it } from "vitest";

const styles = readFileSync(
  fileURLToPath(new URL("../app/globals.css", import.meta.url)),
  "utf8"
).replace(/\r\n/g, "\n");

function cssRule(selector: string): string {
  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const match = styles.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
  if (!match) throw new Error(`CSS rule not found: ${selector}`);
  return match[1];
}

describe("modal compositing contract", () => {
  it.each([".task-detail-backdrop", ".seedream-layer-edit-backdrop"])(
    "%s avoids full-screen backdrop blur",
    (selector) => {
      const rule = cssRule(selector);

      expect(rule).not.toMatch(/(?:^|[;\s])(?:-webkit-)?backdrop-filter\s*:/);
      expect(rule).toMatch(/background\s*:\s*rgba\(/);
    }
  );
});