import { existsSync, readFileSync } from "node:fs";
import { join } from "node:path";
import { describe, expect, it } from "vitest";
import { FILES, FRONTEND, SRC } from "./guard-files.spec-helper";

/**
 * Baukasten guard (spec 10.7). Each T5 task adds the rule it fulfils, with every exception and
 * its reason. A rule scans the files of its scope (spec files excluded) for its pattern; an
 * exception names one file, relative to ApiCore-Frontend, and must still be needed.
 */
type GuardScope = "src/**/*.tsx" | "src/**/*.{ts,tsx}" | "src/**/*.{ts,tsx,css}";

interface GuardRule {
  id: string;
  pattern: RegExp;
  scope: GuardScope;
  allow: { file: string; reason: string }[];
  /** Directories the rule does not cover at all (path prefix relative to ApiCore-Frontend). */
  outside?: { prefix: string; reason: string }[];
  /** Self-test: snippets the pattern must catch and snippets it must leave alone. */
  examples: { catches: string[]; ignores: string[] };
}

/**
 * `keys` (role, type) set to `value` by hand: JSX (role="x", role={on ? "x" : y}), object or
 * spread form (role: "x") and setAttribute("role", "x"). A CSS selector ([role="x"]) only finds
 * kit controls, and the `role` prop inside a <CheckboxField> tag is the kit's own API.
 */
function ownRole(keys: string, value: string): RegExp {
  const quote = "[\"'`]";
  const quoted = `${quote}${value}${quote}`;
  // role="x" | role={... "x" ...} | role: ... "x"  (not role?: or role === "x")
  const attribute = String.raw`(?<![\w[-])(?:${keys})\s*(?:=\s*(?:\{[^}]*?)?|:\s*[^,;}\n]*?)${quoted}`;
  const setAttribute = String.raw`setAttribute\(\s*${quote}(?:${keys})${quote}\s*,\s*${quoted}`;
  return new RegExp(String.raw`(?<!<CheckboxField\b[^<>]*)(?:${attribute}|${setAttribute})`);
}

/**
 * Spec 17.8 lets the hive stage move on its own (Beute §9.4, §9.8: lift on hover, flight into
 * focus). It does so in three.js, not with CSS classes, so no motion rule leaves it out today
 * (the stale-exception test would fail). Should the stage ever need a CSS exception, add an
 * `outside` entry with that reason to the one rule it needs.
 */
/** A duration above --motion-moment (420 ms): Tailwind steps and arbitrary ms values. */
const OVER_MOMENT_MS = String.raw`(?:42[1-9]|4[3-9]\d|[5-9]\d\d|[1-9]\d{3,})`;

/** A px value below 13 (0–12.99…). */
const UNDER_13_PX = String.raw`(?:\d|1[0-2])(?:\.\d+)?px`;
/** A rem/em value below 0.8125 (13 px at a 16 px root): the digits after the point sort below 8125. */
const UNDER_13_REM = String.raw`0?\.(?:[0-7]\d*|8(?:0\d*|1(?:[01]\d*|2(?:[0-4]\d*)?)?)?)r?em`;

const RULES: GuardRule[] = [
  // Task A3/A4/A10: the area tone replaced the gradients (spec 11); the gradient tokens are gone.
  // PageHeader, DetailHeader and EntityCard have no `gradient` prop any more (also a type error).
  // A canvas gradient that paints a 3D texture (createLinearGradient) is no CSS background.
  {
    id: "no gradient prop, gradient token or gradient background",
    pattern: new RegExp(
      [
        String.raw`gradient=`,
        String.raw`--gradient-`,
        String.raw`(?<![\w-])bg-gradient-`,
        String.raw`(?<![\w-])bg-(?:linear|radial|conic)(?!\w)`,
        String.raw`(?<![\w-])(?:repeating-)?(?:linear|radial|conic)-gradient\(`,
      ].join("|"),
    ),
    scope: "src/**/*.{ts,tsx,css}",
    allow: [],
    examples: {
      catches: [
        '<PageHeader gradient="honey" />',
        "<DetailHeader gradient={tone} />",
        '<EntityCard title="A1" gradient="sage" />',
        '"[background-image:var(--gradient-honey)]"',
        '"bg-gradient-to-r from-primary to-warning"',
        '"bg-linear-to-b from-card"',
        '"bg-radial"',
        "background: linear-gradient(90deg, red, blue);",
      ],
      ignores: ["context.createLinearGradient(0, 0, 0, 512)", '"bg-primary text-primary-foreground"', '<PageHeader area="apiaries" />'],
    },
  },
  // Task A3/A4: white text fails on honey and on the light sets. The hive stage uses
  // --holo-label-fg instead, so it needs no exception either.
  {
    id: "no text-white",
    pattern: /(?<![\w-])text-white\b/,
    scope: "src/**/*.{ts,tsx,css}",
    allow: [],
    examples: {
      catches: ['"text-white"', '"text-white/80"', '"hover:text-white"'],
      ignores: ['"text-holo-label-fg"', '"bg-white"', '"text-foreground"'],
    },
  },
  // Task A10: text-primary is the honey fill; as a text colour it fails on the card (spec 4.4).
  // Text uses --primary-ink, text on honey --primary-foreground.
  {
    id: "no text-primary without -foreground or -ink",
    pattern: /(?<![\w-])text-primary(?![\w-])/,
    scope: "src/**/*.{ts,tsx,css}",
    allow: [],
    examples: {
      catches: ['"text-primary"', '"hover:text-primary"', '"text-primary/[0.07]"', '"[&_svg]:text-primary"'],
      ignores: ['"text-primary-ink"', '"text-primary-foreground"', '"bg-primary"', '"stroke-primary/[0.07]"', "--color-text-primary"],
    },
  },
  // Task A4/A10: a mode is only another token set (spec 4.1); no component paints its own dark
  // look. A CSS `.dark` selector and the object key `dark: x` are no Tailwind class.
  {
    id: "no dark: classes",
    pattern: /(?<=^|[\s"'`:])dark:[^\s"'`]/m,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"bg-card dark:bg-input/30"', '"dark:text-foreground"', "`dark:${tone}`", '"hover:dark:bg-muted"'],
      ignores: ['{ dark: "#1a120d" }', "{dark:true}", "(dark?C.dark:C.light)", "@custom-variant dark (&:where(.dark, .dark *));"],
    },
  },
  // Task A10: no text below 13 px (spec 4.5: text-xs = 13 px is the smallest step). Arbitrary
  // Tailwind sizes, SVG `fontSize` in JSX, inline `style={{ fontSize }}`, CSS `font-size` and
  // size constants named *FONT*/*TEXT*/*LABEL*_SIZE. Print sizes of the label designer
  // (`fontSize: 10` in pt, plain object outside `style`) are no screen text. SVG text scales with
  // its viewBox, so chart labels belong in HTML with text-xs (colony-varroa).
  {
    id: "no text below 13 px",
    pattern: new RegExp(
      [
        String.raw`(?<![\w-])text-\[(?:${UNDER_13_PX}|${UNDER_13_REM})\]`,
        String.raw`\bfontSize=\{?\s*["']?(?:\d|1[0-2])(?:\.\d+)?(?:px)?["']?\s*\}?(?![\d.])`,
        String.raw`font-size:\s*(?:${UNDER_13_PX}|${UNDER_13_REM})`,
        String.raw`style=\{\{[^}]*\bfontSize:\s*["'\x60]?(?:\d|1[0-2])(?:\.\d+)?(?:px)?["'\x60]?\s*[,}]`,
        String.raw`\b(?:[A-Z][A-Z0-9_]*_)?(?:FONT|TEXT|LABEL)[A-Z0-9_]*_SIZE(?:_PX)?\s*=\s*(?:\d|1[0-2])(?:\.\d+)?(?![\d.])`,
      ].join("|"),
    ),
    scope: "src/**/*.{ts,tsx,css}",
    allow: [],
    examples: {
      catches: [
        '"text-[10px]"',
        '"text-[11px] uppercase"',
        '"text-[12px]"',
        '"text-[12.5px]"',
        '"text-[0.7rem]"',
        '"text-[0.6rem] font-medium"',
        '"text-[0.8rem]"',
        '"text-[.75rem]"',
        '"text-[0.812rem]"',
        "<text fontSize={10}>",
        '<text fontSize="11">',
        "font-size: 11px;",
        "font-size: 0.75rem;",
        "style={{ fontSize: 11 }}",
        'style={{ lineHeight: 1, fontSize: "12px" }}',
        "const AXIS_LABEL_SIZE = 10;",
        "const FONT_SIZE_PX = 12;",
      ],
      ignores: [
        '"text-[13px]"',
        '"text-[0.8125rem]"',
        '"text-[1rem]"',
        '"text-xs"',
        "<text fontSize={13}>",
        "<text fontSize={AXIS_LABEL_SIZE}>",
        '"forced-colors:text-[CanvasText]"',
        "fontSize: 10,",
        "--text-xs: 0.8125rem;",
        "style={{ fontSize: 14 }}",
        "const LABEL_FONT_SIZE = 16;",
        "const MAX_SIZE = 10;",
        "const LABEL_GAP = 4;",
      ],
    },
  },
  // Task A5: one focus style, drawn by the base rule :where(:focus-visible) (spec 4.6).
  {
    id: "no ring-ring/50",
    pattern: /ring-ring\/50/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"focus-visible:ring-3 focus-visible:ring-ring/50"'],
      ignores: ['"ring-ring"', '"focus:inset-ring-2 focus:inset-ring-ring"'],
    },
  },
  {
    id: "no outline-none",
    pattern: /(?<![\w-])outline-none\b/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"px-2 focus-visible:outline-none"', '"outline-none px-2"'],
      ignores: ['"outline-hidden focus:bg-accent"', '"outline-2"'],
    },
  },
  // Task A5: no own focus outline next to the global rule.
  {
    id: "no own focus outline",
    // An offset alone is no own ring (calendar days pull the global ring inside the cell).
    pattern: /(?<![\w-])focus(?:-visible)?:outline-(?!hidden|offset)/,
    scope: "src/**/*.{ts,tsx}",
    examples: {
      catches: ['"p-3 focus:outline-2 focus:outline-ring"', '"focus-visible:outline-2"'],
      ignores: ['"outline-hidden focus:bg-accent"', '"focus-visible:outline-offset-[calc(-2px_-_var(--focus-width))]"'],
    },
    allow: [
      {
        file: "src/app/(app)/bottling/[id]/print-labels-card.tsx",
        reason:
          "The missing-fields section is focused by script after a click on „Drucken“; :focus-visible does not match such a focus, so the section keeps a focus: outline as the visible cue.",
      },
      {
        file: "src/app/(app)/settings/automation/social-media-tab.tsx",
        reason:
          "The „Gespeichert“ message is focused by script after a click on „Speichern“; :focus-visible does not match such a focus, so the message keeps a focus: outline as the visible cue.",
      },
    ],
  },
  // Task A5: compact sizes only for a fine pointer, never by viewport width (spec 4.5).
  {
    id: "no sm:h-, sm:min-h- or sm:size-",
    pattern: /(?<![\w-])sm:(?:[^\s:"'`]+:)*(?:(?:min-)?h-|size-)/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"h-11 sm:h-9"', '"sm:data-[size=default]:h-9"', '"sm:min-h-9"', '"size-11 sm:size-8"'],
      ignores: ['"sm:hidden pointer-fine:h-9 sm:max-h-96"', '"h-11 pointer-fine:h-9"'],
    },
  },
  // Task A5: inputs stay at 16 px (readable, and iOS does not zoom into them).
  {
    id: "no md:text-sm",
    pattern: /(?<![\w-])md:text-sm\b/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"text-base md:text-sm"'],
      ignores: ['"md:text-base"', '"text-sm"'],
    },
  },
  // Task A6: one radio group for the whole app (spec 10.2, 10.7).
  {
    id: "no role radio, radiogroup or type radio outside choice-group.tsx",
    // JSX (role="radio", type={"radio"}) and object or spread form (role: "radio"); a CSS
    // attribute selector ([role="radio"]) only finds ChoiceGroup radios and is no own build.
    pattern: /(?<![\w[-])(?:role|type)\s*[=:]\s*\{?\s*["'`]radio(?:group)?["'`]/,
    scope: "src/**/*.{ts,tsx}",
    allow: [
      {
        file: "src/components/form/choice-group.tsx",
        reason: "ChoiceGroup is the radio group of the kit: role radiogroup with one role radio per option.",
      },
    ],
    examples: {
      catches: [
        '<input type="radio" name="x" />',
        '<div role="radiogroup">',
        "<button role={'radio'}>",
        '{ role: "radio" }',
        "{ role: 'radiogroup' }",
        '{ type: "radio" }',
      ],
      ignores: ['<DropdownMenuRadioItem value="a">', '{ role: "radioactive" }', `querySelector('[role="radio"][tabindex="0"]')`],
    },
  },
  // Task A7: one checkbox for the whole app (spec 10.3, 10.7). Base UI draws role checkbox and
  // its hidden input inside ui/checkbox.tsx, so no source file writes them by hand and the list
  // of exceptions stays empty. The `role` prop of <CheckboxField> picks the kit's own control
  // and is no own build (only within that same tag, so put `role` before any arrow handler).
  {
    id: "no role checkbox or type checkbox outside ui/checkbox.tsx",
    pattern: ownRole("role|type", "checkbox"),
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: [
        '<input type="checkbox" checked={on} />',
        '<button type="button" role="checkbox" aria-checked={on}>',
        "<span role={'checkbox'}>",
        '{ type: "checkbox" }',
        '<span role={isTask ? "checkbox" : undefined}>',
        '<span role={isTask ? undefined : "checkbox"}>',
        'element.setAttribute("role", "checkbox")',
        "element.setAttribute('type','checkbox')",
        '{ role: on ? "checkbox" : "button" }',
        // The CheckboxField exemption ends with its own tag: a later element is caught again.
        '<CheckboxField label="A" /><span role="checkbox" />',
      ],
      ignores: [
        `querySelector('[role="checkbox"]')`,
        '<CheckboxField label="Aktiv" role="checkbox" checked={on} />',
        'role?: "checkbox" | "switch"',
        'role === "checkbox"',
      ],
    },
  },
  // Task A7: a yes/no setting is <CheckboxField role="switch"> on Base UI Switch (ui/switch.tsx).
  {
    id: "no role switch outside ui/checkbox.tsx and ui/switch.tsx",
    pattern: ownRole("role", "switch"),
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: [
        '<input type="checkbox" role="switch" />',
        '{ role: "switch" }',
        '<button role={on ? "switch" : "button"}>',
        'node.setAttribute("role", "switch")',
        '<CheckboxField label="A" />\n<input role="switch" />',
      ],
      ignores: ['<CheckboxField\n  role="switch"\n  label="Mit Details"\n/>', 'role === "switch"'],
    },
  },
  // Task A6: a toggle button sets aria-pressed through Button `pressed` (spec 10.2, 10.7).
  {
    id: "aria-pressed only through Button pressed",
    // JSX attribute or object/spread key ("aria-pressed": x); not the Tailwind variant aria-pressed:.
    pattern: /aria-pressed\s*=|["'`]aria-pressed["'`]\s*:/,
    scope: "src/**/*.{ts,tsx}",
    allow: [
      {
        file: "src/components/ui/button.tsx",
        reason: "Button turns its `pressed` prop into aria-pressed (toolbar toggles, not a radio group).",
      },
      {
        file: "src/app/(app)/calendar/page.tsx",
        reason:
          "The month grid is a grid of day buttons; the chosen day is pressed. It keeps the global focus and the selection ring (spec 10.2).",
      },
    ],
    examples: {
      catches: ["<button aria-pressed={on}>", '{ "aria-pressed": on }', "{ 'aria-pressed': on }"],
      ignores: ['"aria-pressed:bg-holo-edge/25"', "<Button pressed={on}>"],
    },
  },
  // Task A8: one tabs kit for the whole app (spec 10.4, 10.7). Base UI draws role tablist, tab
  // and tabpanel inside ui/tabs.tsx, so no source file writes them by hand and the list of
  // exceptions stays empty.
  {
    id: "no role tablist, tab or tabpanel outside ui/tabs.tsx",
    pattern: ownRole("role", "tab(?:list|panel)?"),
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: [
        '<div role="tablist" className="flex">',
        '<button type="button" role="tab" aria-selected={on}>',
        "<section role={'tabpanel'}>",
        '{ role: "tab" }',
        '<div role={wide ? "tablist" : undefined}>',
        'node.setAttribute("role", "tab")',
      ],
      ignores: ['<Table role="table">', `querySelector('[role="tab"]')`, 'getAllByRole("tab")'],
    },
  },
  // Task A11: motion language (spec 17.2, 17.6, 17.7). motion-safe: only asks the system and
  // skips the level chosen in the app, so movement sits behind motion-full:.
  {
    id: "no motion-safe: on translate, scale, rotate, slide, zoom or animate classes",
    pattern: /(?<![\w-])motion-safe:(?:[^\s"'`:]+:)*-?(?:translate|scale|rotate|slide-|zoom-|animate-|transition-transform)/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: [
        '"motion-safe:transition-transform"',
        '"motion-safe:data-open:zoom-in-95"',
        '"motion-safe:-translate-y-0.5"',
        '"motion-safe:animate-pulse"',
      ],
      ignores: ['"motion-full:animate-pulse"', '"motion-safe:transition-colors"'],
    },
  },
  {
    id: "pulse and spin only behind motion-full:",
    pattern: /(?<!motion-full:)(?<![\w-])animate-(?:pulse|spin)\b/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"size-4 animate-spin"', '"motion-safe:animate-pulse"'],
      ignores: ['"motion-full:animate-spin"', '"animate-page-in"'],
    },
  },
  {
    id: "no transition-all",
    pattern: /(?<![\w-])transition-all\b|transition:\s*all\b/,
    scope: "src/**/*.{ts,tsx,css}",
    allow: [],
    examples: {
      catches: ['"transition-all duration-150"', "transition: all 200ms;"],
      ignores: ['"transition-colors"', "transition: opacity var(--motion-fade);"],
    },
  },
  {
    id: "no transition-[width|height] and no duration above 420 ms",
    pattern: new RegExp(
      String.raw`transition-\[[^\]]*(?:width|height)|(?<![\w-])duration-(?:${OVER_MOMENT_MS}(?!\d)|\[${OVER_MOMENT_MS}ms\]|\[[1-9][\d.]*s\])`,
    ),
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: [
        '"motion-full:transition-[width] motion-full:duration-700"',
        '"duration-500"',
        '"duration-[600ms]"',
        '"duration-[1s]"',
      ],
      ignores: ['"duration-420 duration-300 duration-[0.2s] duration-(--motion-enter)"'],
    },
  },
  {
    id: "no hover translate or scale",
    pattern: /(?<![\w-])(?:group-|peer-)?hover:(?:[^\s"'`:]+:)*-?(?:translate|scale)-/,
    scope: "src/**/*.{ts,tsx}",
    allow: [],
    examples: {
      catches: ['"motion-full:group-hover:scale-110"', '"motion-safe:hover:-translate-y-0.5"'],
      ignores: ['"hover:bg-muted"', '"motion-full:active:scale-[0.97]"'],
    },
  },
  {
    id: "motion transitions come from the tokens (transitionFor), not inline",
    pattern: /\btransition=\{\{/,
    scope: "src/**/*.tsx",
    allow: [],
    examples: {
      catches: ["<m.li transition={{ duration: 0.3 }} />"],
      ignores: ['<m.li transition={transitionFor(level, "exit")} />'],
    },
  },
];

const SCOPE_FILE: Record<GuardScope, RegExp> = {
  "src/**/*.tsx": /\.tsx$/,
  "src/**/*.{ts,tsx}": /\.tsx?$/,
  "src/**/*.{ts,tsx,css}": /\.(tsx?|css)$/,
};

function offenders(rule: GuardRule): string[] {
  const isOutside = (file: string) => (rule.outside ?? []).some(({ prefix }) => file.startsWith(prefix));
  return FILES.filter(
    ({ file, text }) => SCOPE_FILE[rule.scope].test(file) && !isOutside(file) && rule.pattern.test(text),
  ).map(({ file }) => file);
}

function violations(rule: GuardRule): string[] {
  const allowed = new Set(rule.allow.map((entry) => entry.file));
  return offenders(rule).filter((file) => !allowed.has(file));
}

const GLOBALS = readFileSync(join(SRC, "app", "globals.css"), "utf8");

describe("baukasten guard (spec 10.7)", () => {
  it("scans the source tree", () => {
    expect(FILES.filter(({ file }) => file.endsWith(".tsx")).length).toBeGreaterThan(200);
  });

  it("baukasten guard passes with the documented exceptions only", () => {
    const failing = RULES.flatMap((rule) => violations(rule).map((file) => `${rule.id}: ${file}`));
    expect(failing).toEqual([]);
  });

  it.each(RULES.map((rule) => [rule.id, rule] as const))("%s", (_id, rule) => {
    expect(violations(rule)).toEqual([]);
  });

  it("every guard exception has a reason", () => {
    for (const rule of RULES) {
      for (const entry of [...rule.allow, ...(rule.outside ?? [])]) {
        const name = "file" in entry ? entry.file : entry.prefix;
        expect(entry.reason.trim().length, `${rule.id}: ${name}`).toBeGreaterThan(20);
      }
    }
  });

  it("every exception names an existing file that still needs it", () => {
    for (const rule of RULES) {
      const hits = new Set(offenders(rule));
      for (const entry of rule.allow) {
        expect(existsSync(join(FRONTEND, entry.file)), `${rule.id}: ${entry.file} exists`).toBe(true);
        expect(hits.has(entry.file), `${rule.id}: ${entry.file} still needs the exception`).toBe(true);
      }
    }
  });

  it("every directory a rule leaves out exists and still holds a hit (else the exception is stale)", () => {
    for (const rule of RULES) {
      for (const { prefix } of rule.outside ?? []) {
        expect(existsSync(join(FRONTEND, prefix)), `${rule.id}: ${prefix} exists`).toBe(true);
        const hits = FILES.filter(
          ({ file, text }) => file.startsWith(prefix) && SCOPE_FILE[rule.scope].test(file) && rule.pattern.test(text),
        );
        expect(hits.length, `${rule.id}: ${prefix} still needs to be left out`).toBeGreaterThan(0);
      }
    }
  });

  it("every rule has positive and negative self-tests", () => {
    for (const rule of RULES) {
      expect(rule.examples.catches.length, `${rule.id}: catches`).toBeGreaterThan(0);
      expect(rule.examples.ignores.length, `${rule.id}: ignores`).toBeGreaterThan(0);
    }
  });

  it.each(RULES.map((rule) => [rule.id, rule] as const))("self-test: %s", (_id, rule) => {
    const missed = rule.examples.catches.filter((snippet) => !rule.pattern.test(snippet));
    const wronglyCaught = rule.examples.ignores.filter((snippet) => rule.pattern.test(snippet));
    expect({ missed, wronglyCaught }).toEqual({ missed: [], wronglyCaught: [] });
  });

  it("ToggleChip and SwitchRow are gone (CheckboxField tile and switch replace them)", () => {
    for (const name of ["toggle-chip", "switch-row"]) {
      expect(existsSync(join(SRC, "components", "form", `${name}.tsx`)), name).toBe(false);
    }
    const users = FILES.filter(({ text }) => /\b(?:ToggleChip|SwitchRow)\b|form\/(?:toggle-chip|switch-row)/.test(text));
    expect(users.map(({ file }) => file)).toEqual([]);
  });

  it("TabSwitcher is gone (the settings pages use Tabs directly, spec 10.4)", () => {
    expect(existsSync(join(SRC, "components", "tab-switcher.tsx"))).toBe(false);
    const users = FILES.filter(({ text }) => /\bTabSwitcher\b|components\/tab-switcher/.test(text));
    expect(users.map(({ file }) => file)).toEqual([]);
  });

  it("the tabs kit has one variant, segment (the line variant is gone)", () => {
    const tabs = FILES.find(({ file }) => file === "src/components/ui/tabs.tsx")?.text ?? "";
    expect(tabs).toMatch(/segment/);
    expect(tabs).not.toMatch(/variant=line|\bline:/);
    const lineUsers = FILES.filter(({ text }) => /<TabsList\b[^>]*variant=["'{]/.test(text));
    expect(lineUsers.map(({ file }) => file)).toEqual([]);
  });

  it("a list of CheckboxFields keeps neighbouring targets at least 4 px apart (spec 4.5)", () => {
    // `.map(… => <CheckboxField` (optionally inside an <li>) and the container opened before it.
    const lists = FILES.filter(({ file }) => file.endsWith(".tsx")).flatMap(({ file, text }) =>
      [...text.matchAll(/\.map\(\s*\([^)]*\)\s*=>\s*\(?\s*(?:<li\b[^>]*>\s*)?<CheckboxField\b/g)].map((match) => {
        const before = text.slice(0, match.index);
        const containers = [...before.matchAll(/<(?:div|ul|fieldset)\b[^>]*?className="([^"]*)"/g)];
        const classes = containers.at(-1)?.[1] ?? "";
        const gap = /(?:^|\s)gap-(?:y-)?(\d+(?:\.5)?)(?=\s|$)/.exec(classes)?.[1];
        const line = before.split("\n").length;
        return { where: `${file}:${line}`, gapPx: gap === undefined ? 0 : Number(gap) * 4 };
      }),
    );
    expect(lists.length).toBeGreaterThanOrEqual(8);
    expect(lists.filter(({ gapPx }) => gapPx < 4).map(({ where, gapPx }) => `${where}: ${gapPx} px`)).toEqual([]);
  });

  it("no component removes the outline without the global rule", () => {
    expect(GLOBALS).toMatch(/:where\(:focus-visible\)\s*\{[^}]*outline:\s*var\(--focus-width\)\s+solid\s+var\(--ring\)/);
    for (const id of ["no ring-ring/50", "no outline-none"]) {
      const rule = RULES.find((entry) => entry.id === id);
      expect(rule, id).toBeDefined();
      expect(violations(rule as GuardRule), id).toEqual([]);
    }
    // .honey-check took its own shadow ring and `outline: none`; it now takes the global rule.
    expect(GLOBALS).not.toMatch(/outline:\s*none/);
    expect(GLOBALS).not.toMatch(/outline-ring\/50/);
  });
});

/**
 * Motion language (spec 17.6, 17.7). `motion` reaches the DOM only through LazyMotion (strict) with
 * `m.*` elements, so the feature bundle loads once and asynchronously in the (app) layout.
 */
const MOTION_REACT_ALLOWED = new Set(["LazyMotion", "MotionConfig", "AnimatePresence", "LayoutGroup"]);
/** Hooks of motion/react in use, by name: a new one is a decision, not a side effect. */
const MOTION_REACT_HOOKS = new Set(["useIsPresent", "usePresence"]);
/** Properties that never move (spec 17.6): they lay out or repaint on every frame. */
const FORBIDDEN_ANIMATED = [
  "width",
  "height",
  "top",
  "left",
  "margin",
  "padding",
  "grid-template-rows",
  "box-shadow",
  "filter",
  "backdrop-filter",
];
/** Components that show data values the beekeeper reads (spec 17.5): nothing grows or counts. */
const DATA_VALUE_FILES = [
  "src/components/stat-bar-list.tsx",
  "src/app/(app)/colonies/[id]/colony-varroa.tsx",
  "src/components/honeycomb-pattern.tsx",
  "src/components/brand-mark.tsx",
];
/** Overlays of the kit (spec 17.4): enter with --motion-enter, leave with --motion-fade and --ease-in. */
const OVERLAY_FILES = ["sheet", "dialog", "dropdown-menu", "select"].map((name) => `src/components/ui/${name}.tsx`);

function source(file: string): string {
  const found = FILES.find((entry) => entry.file === file);
  if (!found) throw new Error(`${file} missing`);
  return found.text;
}

/** Named imports of a value import from `module` (type-only imports and specifiers are skipped). */
function namedImports(text: string, module: string): string[] {
  const from = module.replaceAll("/", "\\/");
  const pattern = new RegExp(String.raw`import\s+(?!type\b)\{([^}]*)\}\s+from\s+["']${from}["']`, "g");
  return [...text.matchAll(pattern)].flatMap((match) =>
    match[1]
      .split(",")
      .map((name) => name.trim())
      .filter((name) => name !== "" && !name.startsWith("type "))
      .map((name) => name.split(/\s+as\s+/)[0]),
  );
}

/** Animated properties of the @keyframes blocks and the transition declarations in a stylesheet. */
function animatedProperties(css: string): { where: string; property: string }[] {
  const found: { where: string; property: string }[] = [];
  for (const block of css.matchAll(/@keyframes\s+([\w-]+)\s*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g)) {
    for (const declaration of block[2].matchAll(/([\w-]+)\s*:/g)) {
      found.push({ where: `@keyframes ${block[1]}`, property: declaration[1] });
    }
  }
  for (const declaration of css.matchAll(/transition(?:-property)?\s*:\s*([^;]+);/g)) {
    for (const part of declaration[1].split(",")) {
      const property = part.trim().split(/\s+/)[0];
      if (property) found.push({ where: `transition: ${declaration[1].trim()}`, property });
    }
  }
  return found;
}

describe("motion language (spec 17.7)", () => {
  it("motion/react is used only for LazyMotion, MotionConfig, AnimatePresence and hooks; elements come from motion/react-m", () => {
    const misuse = FILES.flatMap(({ file, text }) => {
      const wrong = namedImports(text, "motion/react").filter(
        (name) =>
          !MOTION_REACT_ALLOWED.has(name) &&
          !MOTION_REACT_HOOKS.has(name) &&
          // The feature bundle itself, inside the one runtime module (only ever imported dynamically).
          !(file === "src/components/motion/motion-runtime.tsx" && name === "domAnimation"),
      );
      const otherEntry =
        /from\s+["'](?:framer-motion|motion|motion\/react-client|motion\/mini)["']|import\s+\*\s+as\s+\w+\s+from\s+["']motion\/react["']/.test(
          text,
        ) || /export\s[^;]*from\s+["']motion\/react["']/.test(text);
      const ownMImport =
        /from\s+["']motion\/react-m["']/.test(text) && !/import\s+\*\s+as\s+m\s+from\s+["']motion\/react-m["']/.test(text);
      return [
        ...wrong.map((name) => `${file}: ${name}`),
        ...(otherEntry ? [`${file}: other motion entry`] : []),
        ...(ownMImport ? [`${file}: m elements not imported as * as m`] : []),
      ];
    });
    expect(misuse).toEqual([]);
    // The feature bundle (domAnimation) is only ever loaded with a dynamic import.
    const features = FILES.filter(({ text }) => /\bdomMax\b|\bdomAnimation\b/.test(text)).map(({ file }) => file);
    expect(features).toEqual(["src/components/motion/motion-runtime.tsx"]);
    const staticFeatureImports = FILES.filter(({ text }) =>
      /import\s[^;]*from\s+["'][^"']*motion-runtime["']/.test(text),
    );
    expect(staticFeatureImports.map(({ file }) => file)).toEqual([]);
    // One async chunk: only the runtime imports motion; AppMotion only preloads it.
    const motionUsers = FILES.filter(({ text }) =>
      /^import\s+(?!type\b)[^;]*from\s+["']motion\/react(?:-m)?["']/m.test(text),
    );
    expect(motionUsers.map(({ file }) => file)).toEqual(["src/components/motion/motion-runtime.tsx"]);
    // The three.js scene keeps its own springs (spec 17.6).
    const sceneUsers = FILES.filter(
      ({ file, text }) => file.startsWith("src/components/hive/hive-scene/") && /["']motion\//.test(text),
    );
    expect(sceneUsers.map(({ file }) => file)).toEqual([]);
    expect(source("src/app/(app)/layout.tsx")).toMatch(/<AppMotion>/);
    expect(source("src/components/app-motion.tsx")).toMatch(/loadMotionRuntime\(\)/);
    expect(source("src/components/motion/motion-runtime.tsx")).toMatch(/<LazyMotion[^>]*\bstrict\b/);
  });

  it("at Dezent and with the system's reduce motion the overlays fade with --motion-fade (spec 17.2)", () => {
    const slots = [
      "sheet-content",
      "sheet-overlay",
      "dialog-content",
      "dialog-overlay",
      "dropdown-menu-content",
      "select-content",
    ];
    // Innermost rules: selector list and body.
    const rules = [...GLOBALS.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map(([, selector, body]) => ({ selector, body }));
    const fadeRules = rules.filter(({ body }) => /transition-duration:\s*var\(--motion-fade\)/.test(body));
    const subtle = fadeRules.find(({ selector }) => selector.includes(':root[data-motion="subtle"] [data-slot="sheet-content"]'));
    const reduce = fadeRules.find(
      ({ selector }) => !selector.includes("data-motion") && selector.includes('[data-slot="sheet-content"]'),
    );
    for (const slot of slots) {
      expect(subtle?.selector, slot).toContain(`:root[data-motion="subtle"] [data-slot="${slot}"]`);
      expect(reduce?.selector, slot).toContain(`[data-slot="${slot}"]`);
    }
    const reduceAt = GLOBALS.indexOf(reduce?.selector ?? "\u0000");
    expect(GLOBALS.lastIndexOf("@media (prefers-reduced-motion: reduce)", reduceAt)).toBeGreaterThan(-1);
  });

  it("globals.css keyframes and transitions do not animate width, height, grid-template-rows, filter or box-shadow", () => {
    const animated = animatedProperties(GLOBALS);
    expect(animated.length).toBeGreaterThan(4);
    const wrong = animated.filter(({ property }) => FORBIDDEN_ANIMATED.includes(property) || property === "all");
    expect(wrong).toEqual([]);
  });

  it("stat bars and other data values have no transition", () => {
    for (const file of DATA_VALUE_FILES) {
      expect(source(file), file).not.toMatch(/(?<![\w-])(?:[^\s"'`:]+:)*(?:transition|animate-|duration-)/);
    }
  });

  it("sheet, dialog, menu and select take their timing from the motion tokens", () => {
    for (const file of OVERLAY_FILES) {
      const text = source(file);
      expect(text, file).toMatch(/--motion-enter/);
      expect(text, file).toMatch(/--motion-fade/);
      expect(text, file).toMatch(/--ease-in\b/);
      expect(text, file).toMatch(/--ease-out-expo/);
      expect(text, file).not.toMatch(/(?<![\w-])duration-\d|ease-in-out/);
      // tw-animate-css keyframes animate `filter` too; overlays use Base UI's starting/ending style.
      expect(text, file).not.toMatch(/(?<![\w-])(?:[^\s"'`:]+:)*animate-(?:in|out)\b/);
      // Movement of an overlay (slide, zoom, translate) belongs to full motion.
      expect(text, file).not.toMatch(/(?<![\w:-])(?:data-[\w-]+:|data-\[[^\]]+\]:)*(?:slide-in|slide-out|zoom-in|zoom-out)-/);
    }
  });

  it("the button gives way on press at full motion only, and cards do not lift on hover", () => {
    const button = source("src/components/ui/button.tsx");
    expect(button).toMatch(/motion-full:active:(?:[^\s"'`:]+:)*scale-\[0\.97\]/);
    expect(button).not.toMatch(/translate-y-px/);
    expect(source("src/components/ui/card.tsx")).not.toMatch(/hover:-?translate|hover:shadow/);
    expect(source("src/app/(app)/sidebar.tsx")).not.toMatch(/scale-110/);
  });

  // The rule patterns test themselves (rule.examples); here only the scan helpers.
  it("the motion scan helpers read imports and animated properties", () => {
    expect(namedImports('import { AnimatePresence, motion } from "motion/react";', "motion/react")).toEqual([
      "AnimatePresence",
      "motion",
    ]);
    expect(namedImports('import type { Transition } from "motion/react";', "motion/react")).toEqual([]);
    expect(MOTION_REACT_HOOKS.has("useScroll")).toBe(false);
    expect(
      animatedProperties(".a { transition: grid-template-rows 1s, opacity 1s; }").map(({ property }) => property),
    ).toEqual(["grid-template-rows", "opacity"]);
    expect(
      animatedProperties("@keyframes x { from { filter: blur(1px); } to { opacity: 1; } }").map(({ property }) => property),
    ).toEqual(["filter", "opacity"]);
  });
});