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

import { eslint } from "./lintProbe.testkit";

// `local/surface-role` (eslint.config.js): a glass surface is a role from ui/surfaces.ts, which brings
// its radius (docs/DESIGN.md B5; E28 S3d). ~140 sites paired three tiers with five radii; this pins
// that the rule keeping a new one out fires, and where it stands down.
const RULE = "local/surface-role";

async function hits(source: string, filePath = "src/components/__probe.tsx"): Promise<number> {
  const [result] = await eslint.lintText(source, { filePath });
  return (result?.messages ?? []).filter((m) => m.ruleId === RULE).length;
}

describe("a bare glass tier", () => {
  it("is refused in a class string, a template fragment and a ui/ composite", async () => {
    expect(await hits('export const A = () => <div className="glass rounded-2xl p-4" />;\n')).toBe(
      1,
    );
    expect(await hits('export const B = "glass-menu w-60 rounded-xl p-2";\n')).toBe(1);
    expect(await hits("export const C = (x: string) => `glass-card ${x}`;\n")).toBe(1);
    expect(
      await hits(
        'export const D = () => <div className="glass p-3" />;\n',
        "src/components/ui/Toaster.tsx",
      ),
    ).toBe(1);
  });

  it("passes as a lone value, through a role, and in the role table itself", async () => {
    expect(await hits('export const E = { variant: "glass" };\n')).toBe(0);
    expect(
      await hits(
        'import { SURFACE } from "./ui/surfaces";\nexport const F = () => <div className={`${SURFACE.card} p-3`} />;\n',
      ),
    ).toBe(0);
    expect(
      await hits('export const G = "glass rounded-2xl";\n', "src/components/ui/surfaces.ts"),
    ).toBe(0);
  });
});

// A role brings its own shadow, whose inset top highlight a `shadow-*` size would replace wholesale.
describe("a shadow size beside a role", () => {
  const SUR = 'import clsx from "clsx";\nimport { SURFACE } from "./ui/surfaces";\n';
  const tpl = (cls: string) =>
    `${SUR}export const A = () => <div className={\`\${SURFACE.floating} ${cls}\`} />;\n`;
  const call = (role: string, cls: string) =>
    `${SUR}export const B = () => <div className={clsx(SURFACE.${role}, "${cls}")} />;\n`;

  it("is refused in a template and in clsx, variants included", async () => {
    expect(await hits(tpl("h-12 shadow-lg"))).toBe(1);
    expect(await hits(call("menu", "hover:shadow-2xl"))).toBe(1);
  });

  it("passes a shadow colour, shadow-float, and a shadow with no role beside it", async () => {
    expect(await hits(tpl("shadow-black/20"))).toBe(0);
    expect(await hits(call("popover", "shadow-float"))).toBe(0);
    expect(await hits('export const E = () => <div className="rounded-lg shadow-lg" />;\n')).toBe(
      0,
    );
  });
});