import { describe, expect, it } from "vite-plus/test";

import {
  EMBER_THEME,
  GROVE_THEME,
  IRIS_THEME,
  OCEAN_THEME,
  T3_CHAT_THEME,
  themeColorToHex,
  type ThemeColors,
} from "../../themePalette";
import { clerkAppearance } from "./clerkAppearance";

function contrastRatio(first: string, second: string): number {
  const toRgb = (value: string) => {
    const hex = themeColorToHex(value)?.slice(1, 7);
    if (!hex) throw new Error(`Expected a theme color, received ${value}`);
    return [0, 1, 2].map(
      (channel) => Number.parseInt(hex.slice(channel * 2, channel * 2 + 2), 16) / 255,
    );
  };
  const luminance = (value: string) =>
    toRgb(value)
      .map((channel) => (channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4))
      .reduce((sum, channel, index) => sum + channel * [0.2126, 0.7152, 0.0722][index]!, 0);
  const lighter = Math.max(luminance(first), luminance(second));
  const darker = Math.min(luminance(first), luminance(second));
  return (lighter + 0.05) / (darker + 0.05);
}

function mixThemeColors(first: string, second: string, firstWeight: number): string {
  const channels = [first, second].map((value) => {
    const hex = themeColorToHex(value)?.slice(1, 7);
    if (!hex) throw new Error(`Expected a theme color, received ${value}`);
    return [0, 1, 2].map((channel) => Number.parseInt(hex.slice(channel * 2, channel * 2 + 2), 16));
  });
  const mixed = channels[0]!.map((channel, index) =>
    Math.round(channel * firstWeight + channels[1]![index]! * (1 - firstWeight)),
  );
  return `#${mixed.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
}

const builtInThemeModes = [
  T3_CHAT_THEME,
  GROVE_THEME,
  OCEAN_THEME,
  EMBER_THEME,
  IRIS_THEME,
].flatMap((theme) =>
  [theme.colors, theme.variants?.dark].filter((colors): colors is ThemeColors => !!colors),
);

describe("clerkAppearance", () => {
  it("maps theme colors without overriding Clerk's component structure", () => {
    expect(clerkAppearance).toEqual({
      variables: {
        colorPrimary: "var(--update-foreground)",
        colorPrimaryForeground: "var(--card)",
        colorDanger: "var(--error)",
        colorSuccess: "var(--success)",
        colorWarning: "var(--warning)",
        colorNeutral: "var(--foreground)",
        colorForeground: "var(--foreground)",
        colorMuted: "color-mix(in srgb, var(--card) 98%, var(--foreground))",
        colorMutedForeground: "var(--muted-foreground)",
        colorBackground: "var(--card)",
        colorInputForeground: "var(--foreground)",
        colorInput: "var(--secondary)",
        colorRing: "var(--ring)",
      },
      elements: {
        formFieldErrorText: { color: "var(--error-foreground)" },
        formFieldWarningText: { color: "var(--warning-foreground)" },
        formFieldSuccessText: { color: "var(--success-foreground)" },
        otpCodeFieldErrorText: { color: "var(--error-foreground)" },
        otpCodeFieldSuccessText: { color: "var(--success-foreground)" },
      },
    });
  });

  it.each(builtInThemeModes)("keeps Clerk text readable across a built-in palette", (colors) => {
    const mutedSurface = mixThemeColors(colors.surface, colors.text, 0.98);

    expect(contrastRatio(colors.text, colors.surface)).toBeGreaterThanOrEqual(4.5);
    expect(contrastRatio(colors.mutedForeground, mutedSurface)).toBeGreaterThanOrEqual(4.5);
    expect(contrastRatio(colors.text, colors.secondary)).toBeGreaterThanOrEqual(4.5);
    expect(contrastRatio(colors.updateForeground, colors.surface)).toBeGreaterThanOrEqual(4.5);
    expect(contrastRatio(colors.errorForeground, colors.surface)).toBeGreaterThanOrEqual(4.5);
    expect(contrastRatio(colors.warningForeground, colors.surface)).toBeGreaterThanOrEqual(4.5);
  });
});