import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { describe, expect, it } from "vitest";

const sharedCss = readFileSync(
  resolve("src/frontend/swatch-motion.css"),
  "utf8",
);
const storefrontCss = readFileSync(resolve("src/frontend/index.css"), "utf8");
const adminCss = readFileSync(resolve("src/admin/index.css"), "utf8");

const HOVER_SELECTORS = [
  ".b3-wvs-swatch-scale:hover",
  ".b3-wvs-swatch-lift-visual:hover",
  ".b3-wvs-swatch-bounce:hover",
  ".b3-wvs-swatch-jiggle:hover",
  ".b3-wvs-swatch-wobble:hover",
  ".b3-wvs-swatch-flip:hover",
];

const JS_APPLIED_CLASSES = [
  ".b3-wvs-animate-swatch-bounce",
  ".b3-wvs-animate-swatch-jiggle",
  ".b3-wvs-animate-swatch-wobble",
  ".b3-wvs-animate-swatch-flip",
];

describe("shared swatch motion stylesheet", () => {
  it("is imported by both the storefront and the admin settings stylesheet", () => {
    // The Live Preview renders the real swatch components, so the admin bundle
    // must ship the same hover/pop/shape motion rules as the storefront.
    expect(storefrontCss).toMatch(/@import "\.\/swatch-motion\.css";/);
    expect(adminCss).toMatch(/@import "\.\.\/frontend\/swatch-motion\.css";/);
    // The Free preview tooltip reuses the storefront tooltip animation classes.
    expect(adminCss).toMatch(/@import "\.\.\/frontend\/tooltip-motion\.css";/);
    expect(adminCss.indexOf("tooltip-motion.css")).toBeLessThan(
      adminCss.indexOf('@import "../tailwind.css"'),
    );

    // Motion retains its original position before generated utility rules.
    expect(adminCss.indexOf("swatch-motion.css")).toBeLessThan(
      adminCss.indexOf('@import "../tailwind.css"'),
    );
  });

  it("defines every hover animation, the select pop and the shape transition once", () => {
    for (const selector of [
      ...HOVER_SELECTORS,
      ...JS_APPLIED_CLASSES,
      ".b3-wvs-swatch-pop",
      ".b3-wvs-shape-transition",
      ".b3-wvs-clippath-outline-transition",
    ]) {
      expect(sharedCss).toContain(selector);
      // No drift: the storefront sheet must not keep a second copy.
      expect(storefrontCss).not.toContain(`${selector} {`);
    }
  });

  it("outranks the later Tailwind transition-all utility for shape/outline transitions", () => {
    // The shared sheet is @imported before the Tailwind directives, so the
    // generated `[class~='bwvs:transition-all']` (0,1,0) lands later in the bundle.
    // Swatches carry both classes: the shape/outline rules must win by
    // specificity (doubled class selector, 0,2,0), never by source order.
    const firstReducedMotionBlock = sharedCss.indexOf(
      "@media (prefers-reduced-motion: reduce)",
    );
    const normalMotionCss = sharedCss.slice(0, firstReducedMotionBlock);

    for (const selector of [
      ".b3-wvs-shape-transition",
      ".b3-wvs-clippath-outline-transition",
    ]) {
      const doubled = `${selector}${selector} {`;
      expect(normalMotionCss).toContain(doubled);
      // The normal-motion rule must not use the unboosted single-class
      // selector (it would lose). The reduced-motion reset below intentionally
      // uses the single classes with !important.
      expect(normalMotionCss).not.toMatch(
        new RegExp(`(^|[^.\\w-])${selector.replace(".", "\\.")} \\{`, "m"),
      );
    }

    // Explicit property list + 300ms timing survive on the boosted rule.
    const shapeRule =
      sharedCss.match(
        /\.b3-wvs-shape-transition\.b3-wvs-shape-transition \{([\s\S]*?)\n\}/,
      )?.[1] ?? "";
    expect(shapeRule).toContain("transform 0.3s");
    expect(shapeRule).toContain("border-radius 0.3s");
    expect(shapeRule).not.toContain("!important");

    // Reduced motion must still win: it uses !important against the same
    // (unboosted) class names, which beats the doubled selector's specificity.
    const reducedMotionCss = (
      sharedCss.match(
        /@media \(prefers-reduced-motion: reduce\) \{[\s\S]*?\n\}/g,
      ) ?? []
    ).join("\n");
    expect(reducedMotionCss).toMatch(
      /\.b3-wvs-shape-transition,\s*\.b3-wvs-clippath-outline-transition \{\s*transition: none !important;/,
    );
  });

  it("keeps the reduced-motion and hover-capability guards", () => {
    const reducedMotionBlocks =
      sharedCss.match(
        /@media \(prefers-reduced-motion: reduce\) \{[\s\S]*?\n\}/g,
      ) ?? [];
    const reducedMotionCss = reducedMotionBlocks.join("\n");

    for (const selector of [...HOVER_SELECTORS, ...JS_APPLIED_CLASSES]) {
      expect(reducedMotionCss).toContain(selector);
    }
    expect(reducedMotionCss).toContain(".b3-wvs-swatch-pop");
    expect(reducedMotionCss).toContain(".b3-wvs-shape-transition");
    expect(reducedMotionCss).toMatch(
      /\.b3-wvs-swatch-hover-target:hover \.b3-wvs-swatch-lift-visual,[\s\S]*?transform: none !important;/,
    );
    expect(reducedMotionCss).toMatch(
      /\.b3-wvs-swatch-hover-target:hover \.b3-wvs-swatch-lift-visual,[\s\S]*?box-shadow: none;/,
    );

    for (const selector of HOVER_SELECTORS) {
      const index = sharedCss.indexOf(selector);
      const precedingMediaQuery = sharedCss
        .slice(0, index)
        .lastIndexOf("@media (hover: hover) and (pointer: fine)");
      expect(precedingMediaQuery).toBeGreaterThan(-1);
    }
  });

  it("keeps a stable pointer footprint beneath the lifted swatch", () => {
    expect(sharedCss).toContain(
      ".b3-wvs-swatch-hover-target:hover .b3-wvs-swatch-lift-visual",
    );
    expect(sharedCss).toContain(".b3-wvs-swatch-lift-visual::after");
    expect(sharedCss).toMatch(
      /\.b3-wvs-swatch-lift-visual::after \{[\s\S]*?inset: 0;[\s\S]*?transform: translateY\(4px\);/,
    );
  });
});