import { describe, it, expect } from "vitest";
import { theme } from "./theme";

/** Minimal palette shape used by the colorSchemes assertions below. */
interface SchemesPalette {
  primary: { main: string };
  background: { default: string; paper: string };
  error: { main: string };
  success: { main: string };
}
interface ColorScheme {
  palette: SchemesPalette;
}
interface ThemeWithColorSchemes {
  colorSchemes: { light: ColorScheme; dark: ColorScheme };
}

/** Single typed assertion so every `colorSchemes.*` access below is checked. */
const themedSchemes = (theme as unknown as ThemeWithColorSchemes).colorSchemes;

describe("MUI theme", () => {
  it("uses the brand fonts", () => {
    expect(theme.typography.fontFamily).toContain("Plus Jakarta Sans");
    expect(String(theme.typography.h1.fontFamily)).toContain("Urbanist");
  });

  it("maps the brand red per color scheme", () => {
    expect(themedSchemes.light.palette.primary.main).toBe("#c73030");
    expect(themedSchemes.dark.palette.primary.main).toBe("#d63031");
  });

  it("maps the refreshed light canvas + paper", () => {
    expect(themedSchemes.light.palette.background.default).toBe("#f4f3f1");
    expect(themedSchemes.light.palette.background.paper).toBe("#ffffff");
  });

  it("maps semantic colors per scheme", () => {
    expect(themedSchemes.light.palette.error.main).toBe("#b91c1c");
    expect(themedSchemes.dark.palette.success.main).toBe("#22c55e");
  });

  it("uses the base radius of 10", () => {
    expect(theme.shape.borderRadius).toBe(10);
  });

  it("makes buttons pill-shaped and cards 16px by default", () => {
    const btn = theme.components?.MuiButton?.styleOverrides?.root as any;
    expect(btn?.borderRadius).toBe(999);
    const card = theme.components?.MuiCard?.styleOverrides?.root as any;
    expect(card?.borderRadius).toBe(16);
  });

  it("adds 200-300ms interaction motion (press + focus ring)", () => {
    const btn = theme.components?.MuiButton?.styleOverrides?.root as any;
    expect(btn?.transition).toContain("transform");
    expect(btn?.["&:active"]?.transform).toBe("scale(0.97)");
    const input = theme.components?.MuiOutlinedInput?.styleOverrides
      ?.root as any;
    expect(input?.["&.Mui-focused"]?.boxShadow).toContain("rgba");
  });
});