// @vitest-environment node
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";

const stylesheet = readFileSync(`${process.cwd()}/src/styles/base.css`, "utf8");
const tokensStylesheet = readFileSync(`${process.cwd()}/src/styles/tokens.css`, "utf8");

function getRuleBlock(selector: string) {
  const blocks: string[] = [];
  const matcher = /([^{}]+)\{([^}]*)\}/g;
  let match: RegExpExecArray | null = null;
  const normalizedSelector = selector.replace(/\s+/g, " ").trim();

  while ((match = matcher.exec(stylesheet)) !== null) {
    const selectors = match[1]
      .replace(/\/\*[\s\S]*?\*\//g, "")
      .split(",")
      .map((entry) => entry.replace(/\s+/g, " ").trim());

    if (selectors.includes(normalizedSelector)) {
      blocks.push(match[2]);
    }
  }

  if (blocks.length === 0) {
    throw new Error(`expected CSS rule for ${selector}`);
  }

  return blocks.at(-1) ?? "";
}

describe("base.css theme-sensitive shells", () => {
  it("keeps the app loading shell on semantic material tokens", () => {
    const shell = getRuleBlock(".app-loading-shell");
    const card = getRuleBlock(".app-loading-card");

    expect(shell).toContain("background: var(--material-shell-page)");
    expect(shell).toContain("backdrop-filter: var(--material-backdrop-filter)");
    expect(card).toContain("background: var(--material-overlay)");
    expect(card).toContain("backdrop-filter: var(--material-backdrop-filter)");
    expect(card).toContain("box-shadow: var(--surface-overlay-shadow)");
    expect(card).toContain("border-radius: var(--radius-overlay)");
    expect(shell).not.toContain("--app-surface-opacity");
    expect(card).not.toContain("--app-surface-backdrop-filter");
  });

  it("maps links and themed icons onto semantic/domain tokens", () => {
    expect(getRuleBlock("a")).toContain("color: var(--text-link)");
    expect(getRuleBlock("a:hover")).toContain("color: var(--text-link-hover)");
    expect(getRuleBlock(".themed-icon--tone-warning")).toContain("color: var(--icon-warning)");
    expect(getRuleBlock(".themed-icon--surface-info")).toContain(
      "background: var(--icon-surface-info)"
    );
  });

  it("defines shared icon tone and surface utilities", () => {
    const tone = getRuleBlock(".icon-tone-secondary");
    const surface = getRuleBlock(".icon-surface-warning");
    const chip = getRuleBlock(".icon-chip");
    const themedIcon = getRuleBlock(".themed-icon");

    expect(tone).toContain("color: var(--icon-secondary)");
    expect(surface).toContain("background: var(--icon-surface-warning)");
    expect(chip).toContain("display: inline-flex");
    expect(chip).toContain("align-items: center");
    expect(chip).toContain("justify-content: center");
    expect(chip).toContain("border-radius: var(--radius-control)");
    expect(themedIcon).toContain("display: inline-flex");
    expect(themedIcon).toContain("line-height: 0");
  });

  it("routes focus and shell chrome through semantic foundation tokens", () => {
    expect(getRuleBlock(":focus-visible")).toContain(
      "outline: var(--state-focus-ring-width) solid var(--state-focus-ring-color)"
    );
    expect(getRuleBlock(".app-loading-shell")).toContain("background: var(--material-shell-page)");
    expect(getRuleBlock(".app-loading-card")).toContain("background: var(--material-overlay)");
    expect(getRuleBlock(".app-loading-card")).toContain(
      "box-shadow: var(--surface-overlay-shadow)"
    );
    expect(getRuleBlock(".app-loading-card")).toContain("border-radius: var(--radius-overlay)");
    expect(getRuleBlock(".icon-chip")).toContain("border-radius: var(--radius-control)");
    expect(getRuleBlock(".icon-surface-warning")).toContain(
      "background: var(--icon-surface-warning)"
    );
  });

  it("defines a single token-driven native scrollbar contract for themed surfaces", () => {
    const scrollbar = getRuleBlock("::-webkit-scrollbar");
    const track = getRuleBlock("::-webkit-scrollbar-track");
    const trackPiece = getRuleBlock("::-webkit-scrollbar-track-piece");
    const thumb = getRuleBlock("::-webkit-scrollbar-thumb");
    const thumbHover = getRuleBlock("::-webkit-scrollbar-thumb:hover");
    const button = getRuleBlock("::-webkit-scrollbar-button");
    const corner = getRuleBlock("::-webkit-scrollbar-corner");
    const firefox = getRuleBlock("*");

    expect(scrollbar).toContain("width: var(--scrollbar-width)");
    expect(scrollbar).toContain("height: var(--scrollbar-width)");
    expect(track).toContain("background: var(--scrollbar-track)");
    expect(trackPiece).toContain("background: var(--scrollbar-track)");
    expect(thumb).toContain("background: var(--scrollbar-thumb)");
    expect(thumb).toContain("border-radius: var(--radius-full)");
    expect(thumbHover).toContain("background: var(--border-focus)");
    expect(button).toContain("background: var(--scrollbar-track)");
    expect(corner).toContain("background: var(--scrollbar-track)");
    expect(firefox).toContain("scrollbar-width: thin");
    expect(firefox).toContain("scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)");
  });

  it("defines app-shell background variables and shared background dim hooks", () => {
    const app = getRuleBlock(".app");
    const appBefore = getRuleBlock(".app::before");
    const appAfter = getRuleBlock(".app::after");

    expect(app).toContain("background: var(--surface-page)");
    expect(app).toContain("isolation: isolate");
    expect(appBefore).toContain("background-image: var(--app-bg-image, none)");
    expect(appBefore).toContain("background-size: var(--app-bg-fit, cover)");
    expect(appBefore).toContain("filter: blur(var(--app-bg-blur, 0px))");
    expect(appAfter).toContain("background: var(--surface-page)");
    expect(appAfter).toContain("var(--app-bg-dim, 0)");
  });
});

describe("base.css viewport sizing", () => {
  it("uses dynamic viewport height for the shared app shell", () => {
    const root = getRuleBlock("#root");
    const app = getRuleBlock(".app");

    expect(root).toContain("height: 100dvh");
    expect(root).not.toContain("height: 100vh");
    expect(app).toContain("height: 100dvh");
    expect(app).not.toContain("height: 100vh");
  });
});

describe("base.css desktop typography foundation", () => {
  it("defines the semantic and desktop layout tokens used by polished PC surfaces", () => {
    expect(tokensStylesheet).toContain("--text-muted:");
    expect(tokensStylesheet).toContain("--surface-panel-bg:");
    expect(tokensStylesheet).toContain("--surface-elevated-bg:");
    expect(tokensStylesheet).toContain("--status-danger-fg:");
    expect(tokensStylesheet).toContain("--workspace-sidebar-surface:");
    expect(tokensStylesheet).toContain("--material-panel:");
    expect(tokensStylesheet).toContain("--desktop-topbar-height:");
    expect(tokensStylesheet).toContain("--desktop-statusbar-height:");
    expect(tokensStylesheet).toContain("--desktop-sidebar-header-height:");
    expect(tokensStylesheet).toContain("--desktop-panel-padding:");
    expect(tokensStylesheet).toContain("--desktop-panel-gap:");
    expect(tokensStylesheet).toContain("--desktop-content-max-width:");
    expect(tokensStylesheet).toContain("--desktop-modal-max-width-md:");
    expect(tokensStylesheet).toContain("--desktop-modal-max-width-lg:");
    expect(tokensStylesheet).not.toContain("--bg-panel: var(");
    expect(tokensStylesheet).not.toContain("--bg-elevated: var(");
    expect(tokensStylesheet).not.toContain("--accent-red: var(");
  });

  it("defines semantic overlay z-index tokens for governed layers", () => {
    expect(tokensStylesheet).toContain("--z-local-overlay:");
    expect(tokensStylesheet).toContain("--z-sheet-backdrop:");
    expect(tokensStylesheet).toContain("--z-sheet:");
    expect(tokensStylesheet).toContain("--z-drawer-backdrop:");
    expect(tokensStylesheet).toContain("--z-drawer:");
    expect(tokensStylesheet).toContain("--z-workbench-backdrop:");
    expect(tokensStylesheet).toContain("--z-workbench:");
    expect(tokensStylesheet).toContain("--z-modal-backdrop:");
    expect(tokensStylesheet).toContain("--z-modal:");
    expect(tokensStylesheet).toContain("--z-popover:");
    expect(tokensStylesheet).toContain("--z-tooltip:");
    expect(tokensStylesheet).toContain("--z-toast:");
  });

  it("maps base text elements onto semantic typography tokens", () => {
    expect(getRuleBlock("body")).toContain("font-size: var(--type-body-3-size)");
    expect(getRuleBlock("body")).toContain("line-height: var(--type-body-3-line-height)");
    expect(getRuleBlock("body")).toContain("font-weight: var(--type-body-3-weight)");
    expect(getRuleBlock("p")).toContain("line-height: var(--type-body-3-line-height)");

    expect(getRuleBlock("button")).toContain("font-size: var(--type-body-3-size)");
    expect(getRuleBlock("button")).toContain("line-height: var(--type-body-3-line-height)");
    expect(getRuleBlock("button")).toContain("font-weight: var(--type-body-3-weight)");
    expect(getRuleBlock("input")).toContain("font-size: var(--type-body-3-size)");
    expect(getRuleBlock("input")).toContain("line-height: var(--type-body-3-line-height)");
    expect(getRuleBlock("input")).toContain("font-weight: var(--type-body-3-weight)");
    expect(getRuleBlock("textarea")).toContain("font-size: var(--type-body-3-size)");
    expect(getRuleBlock("select")).toContain("font-size: var(--type-body-3-size)");
  });

  it("maps foundational surfaces and field chrome onto semantic tokens", () => {
    expect(getRuleBlock("body")).toContain("background-color: var(--surface-page)");
    expect(getRuleBlock("code")).toContain("background-color: var(--surface-hover)");
    expect(getRuleBlock("pre")).toContain("background-color: var(--surface-panel)");
    expect(getRuleBlock("::selection")).toContain("background-color: var(--text-link)");
    expect(getRuleBlock("::selection")).toContain("color: var(--text-inverse)");

    expect(getRuleBlock("input")).toContain("background-color: var(--field-bg)");
    expect(getRuleBlock("input")).toContain("border: 1px solid var(--field-border)");
    expect(getRuleBlock("textarea")).toContain("background-color: var(--field-bg)");
    expect(getRuleBlock("textarea")).toContain("border: 1px solid var(--field-border)");
    expect(getRuleBlock("select")).toContain("background-color: var(--field-bg)");
    expect(getRuleBlock("select")).toContain("border: 1px solid var(--field-border)");
  });

  it("maps headings and helper text onto the new semantic hierarchy", () => {
    expect(getRuleBlock("h1")).toContain("font-size: var(--type-heading-1-size)");
    expect(getRuleBlock("h1")).toContain("font-weight: var(--type-heading-1-weight)");
    expect(getRuleBlock("h2")).toContain("font-size: var(--type-heading-2-size)");
    expect(getRuleBlock("h3")).toContain("font-size: var(--type-heading-3-size)");
    expect(getRuleBlock("h4")).toContain("font-size: var(--type-heading-4-size)");
    expect(getRuleBlock("h5")).toContain("font-size: var(--type-heading-5-size)");
    expect(getRuleBlock("h6")).toContain("font-size: var(--type-heading-6-size)");

    expect(getRuleBlock(".page-kicker")).toContain("font-size: var(--type-body-6-size)");
    expect(getRuleBlock(".page-kicker")).toContain("font-weight: var(--type-body-6-weight)");
    expect(getRuleBlock(".page-title")).toContain("font-size: var(--type-heading-1-size)");
    expect(getRuleBlock(".section-title")).toContain("font-size: var(--type-body-6-size)");
    expect(getRuleBlock(".meta-text")).toContain("font-size: var(--type-body-5-size)");
    expect(getRuleBlock(".hint-text")).toContain("font-size: var(--type-body-5-size)");
    expect(getRuleBlock(".mono-meta")).toContain("font-size: var(--type-body-5-size)");
    expect(getRuleBlock(".mono-meta")).toContain("font-family: var(--font-mono)");
  });

  it("maps app shell copy onto direct role tokens", () => {
    expect(getRuleBlock(".connection-banner")).toContain("font-size: var(--type-body-6-size)");
    expect(getRuleBlock(".connection-banner")).toContain(
      "line-height: var(--type-body-6-line-height)"
    );
    expect(getRuleBlock(".connection-banner")).toContain("background: var(--status-warning-fg)");
    expect(getRuleBlock(".connection-banner--error")).toContain(
      "background: var(--status-danger-fg)"
    );
    expect(getRuleBlock(".app-loading-kicker")).toContain("font-size: var(--type-body-6-size)");
    expect(getRuleBlock(".app-loading-title")).toContain("font-size: var(--type-heading-1-size)");
    expect(getRuleBlock(".app-loading-desc")).toContain("font-size: var(--type-body-3-size)");
  });

  it("maps status text utilities onto semantic status tokens", () => {
    expect(getRuleBlock(".text-success")).toContain("color: var(--status-success-fg)");
    expect(getRuleBlock(".text-warning")).toContain("color: var(--status-warning-fg)");
    expect(getRuleBlock(".text-error")).toContain("color: var(--status-danger-fg)");
  });
});
