import { expect, within } from "storybook/test";
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { ReactNode } from "react";
import type { Accent, ColorModePreference } from "../core/AlouetteConfig";
import { useCurrentMode } from "../core/ThemeContext";
import { tv } from "../core/tv";
import { AccentScope } from "../ui/containers/AccentScope";
import { ScopedTheme } from "../ui/containers/ScopedTheme";
import { Text } from "../ui/primitives/Text";
import { View } from "../ui/primitives/View";
import { Story, accentsWithoutNeutral } from "../ui/story-components/Story";
import { StoryGrid } from "../ui/story-components/StoryGrid";

const tokenSwatchVariants = tv({
  base: "h-3",
  variants: {
    token: {
      screen: "bg-(--color-screen)",
      surface: "bg-(--color-surface)",
      highlight: "bg-(--color-highlight)",
      "highlight-accent": "bg-(--color-highlight-accent)",
      lowered: "bg-(--color-lowered)",
      emphasis: "bg-(--color-emphasis)",
      "screen-gradient-start": "bg-(--color-screen-gradient-start)",
      "screen-gradient-middle": "bg-(--color-screen-gradient-middle)",
      "screen-gradient-end": "bg-(--color-screen-gradient-end)",
      sharp: "bg-(--color-sharp)",
      accent: "bg-(--color-accent)",
      "on-accent": "bg-(--color-on-accent)",
      "on-accent-muted": "bg-(--color-on-accent-muted)",
      "on-emphasis": "bg-(--color-on-emphasis)",
      "on-tonal": "bg-(--color-on-tonal)",
      "border-sharp": "bg-(--color-border-sharp)",
      "border-muted": "bg-(--color-border-muted)",
      selection: "bg-(--color-selection)",
      "interactive-filled-pressable":
        "bg-(--color-interactive-filled-pressable)",
      "interactive-filled-hover": "bg-(--color-interactive-filled-hover)",
      "interactive-filled-active": "bg-(--color-interactive-filled-active)",
      "interactive-tonal-pressable": "bg-(--color-interactive-tonal-pressable)",
      "interactive-tonal-hover": "bg-(--color-interactive-tonal-hover)",
      "interactive-tonal-active": "bg-(--color-interactive-tonal-active)",
      "interactive-soft-hover": "bg-(--color-interactive-soft-hover)",
      "interactive-soft-active": "bg-(--color-interactive-soft-active)",
      "interactive-outlined-pressable":
        "bg-(--color-interactive-outlined-pressable)",
      "interactive-outlined-hover": "bg-(--color-interactive-outlined-hover)",
      "interactive-outlined-focus": "bg-(--color-interactive-outlined-focus)",
      "interactive-outlined-active": "bg-(--color-interactive-outlined-active)",
      "interactive-active": "bg-(--color-interactive-active)",
      "interactive-pressable": "bg-(--color-interactive-pressable)",
      "interactive-hover": "bg-(--color-interactive-hover)",
      translucent: "bg-(--color-translucent)",
      "disabled-sharp": "bg-(--color-disabled-sharp)",
      "disabled-muted": "bg-(--color-disabled-muted)",
      muted: "bg-(--color-muted)",
      "form-border-disabled": "bg-(--color-form-border-disabled)",
      "form-placeholder": "bg-(--color-form-placeholder)",
      "form-disabled-text": "bg-(--color-form-disabled-text)",
      "interactive-link-disabled": "bg-(--color-interactive-link-disabled)",
      "interactive-tonal-disabled": "bg-(--color-interactive-tonal-disabled)",
      "interactive-filled-disabled": "bg-(--color-interactive-filled-disabled)",
      "interactive-outlined-disabled":
        "bg-(--color-interactive-outlined-disabled)",
      "interactive-accent-outlined-border-disabled":
        "bg-(--color-interactive-accent-outlined-border-disabled)",
    },
  },
});

interface TokenSwatchProps {
  token:
    | "accent"
    | "border-muted"
    | "border-sharp"
    | "disabled-muted"
    | "disabled-sharp"
    | "emphasis"
    | "form-border-disabled"
    | "form-disabled-text"
    | "form-placeholder"
    | "highlight-accent"
    | "highlight"
    | "interactive-accent-outlined-border-disabled"
    | "interactive-active"
    | "interactive-filled-active"
    | "interactive-filled-disabled"
    | "interactive-filled-hover"
    | "interactive-filled-pressable"
    | "interactive-hover"
    | "interactive-link-disabled"
    | "interactive-outlined-active"
    | "interactive-outlined-disabled"
    | "interactive-outlined-focus"
    | "interactive-outlined-hover"
    | "interactive-outlined-pressable"
    | "interactive-pressable"
    | "interactive-soft-active"
    | "interactive-soft-hover"
    | "interactive-tonal-active"
    | "interactive-tonal-disabled"
    | "interactive-tonal-hover"
    | "interactive-tonal-pressable"
    | "lowered"
    | "muted"
    | "on-accent-muted"
    | "on-accent"
    | "on-emphasis"
    | "on-tonal"
    | "screen-gradient-end"
    | "screen-gradient-middle"
    | "screen-gradient-start"
    | "screen"
    | "selection"
    | "sharp"
    | "surface"
    | "translucent";
}

function TokenSwatch({ token }: TokenSwatchProps): ReactNode {
  return (
    <View className="min-w-20 gap-0.5">
      <Text className="text-xs text-muted leading-tight">{token}</Text>
      <View className={tokenSwatchVariants({ token })} />
    </View>
  );
}

interface TokenGroupProps {
  group: string;
  children: NonNullable<ReactNode>;
}

function TokenGroup({ group, children }: TokenGroupProps): ReactNode {
  return (
    <View className="gap-xxs">
      <Text className="font-body-bold text-xs text-muted">{group}</Text>
      <StoryGrid.Row flexWrap loose>
        {children}
      </StoryGrid.Row>
    </View>
  );
}

interface AccentTokensProps {
  accent?: Accent;
}

function AccentTokens({ accent }: AccentTokensProps): ReactNode {
  return (
    <Story.SubSection
      withSurface
      title={accent ? `Accent: ${accent}` : "Default"}
      accent={accent}
    >
      <TokenGroup group="Backgrounds">
        <TokenSwatch token="screen" />
        <TokenSwatch token="surface" />
        <TokenSwatch token="highlight" />
        <TokenSwatch token="highlight-accent" />
        <TokenSwatch token="lowered" />
        <TokenSwatch token="emphasis" />
        <TokenSwatch token="screen-gradient-start" />
        <TokenSwatch token="screen-gradient-middle" />
        <TokenSwatch token="screen-gradient-end" />
      </TokenGroup>
      <TokenGroup group="Texts">
        <TokenSwatch token="sharp" />
        <TokenSwatch token="accent" />
        <TokenSwatch token="on-accent" />
        <TokenSwatch token="on-accent-muted" />
        <TokenSwatch token="on-emphasis" />
        <TokenSwatch token="on-tonal" />
      </TokenGroup>
      <TokenGroup group="Borders">
        <TokenSwatch token="border-sharp" />
        <TokenSwatch token="border-muted" />
      </TokenGroup>
      <TokenGroup group="Specials">
        <TokenSwatch token="selection" />
      </TokenGroup>
      <TokenGroup group="Interactive">
        <TokenSwatch token="interactive-filled-pressable" />
        <TokenSwatch token="interactive-filled-hover" />
        <TokenSwatch token="interactive-filled-active" />
        <TokenSwatch token="interactive-tonal-pressable" />
        <TokenSwatch token="interactive-tonal-hover" />
        <TokenSwatch token="interactive-tonal-active" />
        <TokenSwatch token="interactive-soft-hover" />
        <TokenSwatch token="interactive-soft-active" />
        <TokenSwatch token="interactive-outlined-pressable" />
        <TokenSwatch token="interactive-outlined-hover" />
        <TokenSwatch token="interactive-outlined-focus" />
        <TokenSwatch token="interactive-outlined-active" />
        <TokenSwatch token="interactive-active" />
        <TokenSwatch token="interactive-pressable" />
        <TokenSwatch token="interactive-hover" />
      </TokenGroup>
    </Story.SubSection>
  );
}

interface ThemeTokensProps {
  themeMode: "dark" | "light";
}

function ThemeTokens({ themeMode }: ThemeTokensProps): ReactNode {
  return (
    <Story.Section title={themeMode} modeTheme={themeMode}>
      <Story.SubSection withSurface title="Shared tokens">
        <TokenGroup group="Backgrounds">
          <TokenSwatch token="translucent" />
        </TokenGroup>
        <TokenGroup group="Texts">
          <TokenSwatch token="disabled-sharp" />
          <TokenSwatch token="disabled-muted" />
          <TokenSwatch token="muted" />
        </TokenGroup>
        <TokenGroup group="Form">
          <TokenSwatch token="form-border-disabled" />
          <TokenSwatch token="form-placeholder" />
          <TokenSwatch token="form-disabled-text" />
        </TokenGroup>
        <TokenGroup group="Interactive">
          <TokenSwatch token="interactive-link-disabled" />
          <TokenSwatch token="interactive-tonal-disabled" />
          <TokenSwatch token="interactive-filled-disabled" />
          <TokenSwatch token="interactive-outlined-disabled" />
          <TokenSwatch token="interactive-accent-outlined-border-disabled" />
        </TokenGroup>
      </Story.SubSection>
      <AccentTokens />
      {accentsWithoutNeutral.map((accent) => (
        <AccentTokens key={accent} accent={accent} />
      ))}
    </Story.Section>
  );
}

export default {
  title: "alouette/Config/Themes",
  parameters: {
    chromatic: { disableSnapshot: true },
  },
} satisfies Meta;

export const Themes: StoryObj = {
  render: () => (
    <Story noDarkMode>
      <ThemeTokens themeMode="light" />
      <ThemeTokens themeMode="dark" />
    </Story>
  ),
};

interface ThemeProbeProps {
  label: string;
}

function ThemeProbe({ label }: ThemeProbeProps): ReactNode {
  return (
    <View className="min-w-20 gap-0.5">
      <Text className="text-xs text-muted leading-tight">{label}</Text>
      <View aria-label={label} className="h-3 bg-(--color-accent)" />
    </View>
  );
}

/**
 * On web a theme is a className and tokens resolve by CSS custom-property
 * inheritance, so the closest theme class must win whatever the order of the
 * generated blocks. `play` asserts it: a probe nested two accent scopes deep
 * resolves to the inner accent, not the outer one and not the file's last block.
 */
export const NestedThemes: StoryObj = {
  render: () => (
    <Story noDarkMode>
      <Story.Section modeTheme="light" title="Closest theme wins">
        <Story.SubSection withSurface title="Nested accent scopes">
          <StoryGrid.Row flexWrap loose>
            <ThemeProbe label="base" />
            <AccentScope accent="danger">
              <ThemeProbe label="danger" />
              <AccentScope accent="info">
                <ThemeProbe label="danger then info" />
              </AccentScope>
            </AccentScope>
            <AccentScope accent="info">
              <ThemeProbe label="info" />
            </AccentScope>
          </StoryGrid.Row>
        </Story.SubSection>
      </Story.Section>
    </Story>
  ),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const accentOf = (label: string): string =>
      getComputedStyle(canvas.getByLabelText(label)).backgroundColor;

    await expect(accentOf("danger then info")).toBe(accentOf("info"));
    await expect(accentOf("danger")).not.toBe(accentOf("info"));
    await expect(accentOf("danger")).not.toBe(accentOf("base"));
  },
};

interface ColorModeProbesProps {
  colorMode: ColorModePreference;
}

function ColorModeProbes({ colorMode }: ColorModeProbesProps): ReactNode {
  return (
    <ScopedTheme theme={colorMode}>
      <View className="gap-xs">
        <Text className="text-xs">{`${colorMode} reads ${useCurrentMode()}`}</Text>
        <StoryGrid.Row flexWrap loose>
          <ThemeProbe label={`${colorMode} base`} />
          <AccentScope accent="info">
            <ThemeProbe label={`${colorMode} info`} />
          </AccentScope>
        </StoryGrid.Row>
      </View>
    </ScopedTheme>
  );
}

/**
 * A `system` scope is resolved by `prefers-color-scheme` in the palette CSS,
 * so the prerendered HTML already wears the OS mode; its nested accent scope
 * stays a `system_*` theme rather than a mode resolved in JS. `useCurrentMode`
 * reads the same mode once hydrated. The expectations follow the runner's own
 * scheme.
 */
export const SystemColorMode: StoryObj = {
  render: () => (
    <Story noDarkMode>
      <Story.Section title="System follows prefers-color-scheme">
        <Story.SubSection withSurface title="Explicit and system scopes">
          <View className="gap-m">
            <ColorModeProbes colorMode="light" />
            <ColorModeProbes colorMode="dark" />
            <ColorModeProbes colorMode="system" />
          </View>
        </Story.SubSection>
      </Story.Section>
    </Story>
  ),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const systemMode = globalThis.matchMedia("(prefers-color-scheme: dark)")
      .matches
      ? "dark"
      : "light";
    const accentOf = (label: string): string =>
      getComputedStyle(canvas.getByLabelText(label)).backgroundColor;

    await expect(accentOf("light base")).not.toBe(accentOf("dark base"));
    await expect(accentOf("system base")).toBe(accentOf(`${systemMode} base`));
    await expect(accentOf("system info")).toBe(accentOf(`${systemMode} info`));
    await expect(
      canvas.getByLabelText("system info").closest<HTMLElement>("[data-theme]")
        ?.dataset.theme,
    ).toBe("system_info");
    await expect(
      canvas.getByText(`system reads ${systemMode}`),
    ).toBeInTheDocument();
  },
};

function ColorFormatProbes(): ReactNode {
  return (
    <Story noDarkMode>
      <Story.Section modeTheme="light" title="Color format">
        <Story.SubSection withSurface title="Accent in the active palette">
          <StoryGrid.Row flexWrap loose>
            <ThemeProbe label="base accent" />
            <AccentScope accent="info">
              <ThemeProbe label="info accent" />
            </AccentScope>
          </StoryGrid.Row>
        </Story.SubSection>
      </Story.Section>
    </Story>
  );
}

const accentFormatOf = (canvasElement: HTMLElement, label: string): string => {
  const { backgroundColor } = getComputedStyle(
    within(canvasElement).getByLabelText(label),
  );
  return backgroundColor.slice(0, backgroundColor.indexOf("("));
};

/**
 * The `colorFormat` toolbar global drives which palette CSS the web preview
 * loads (`.storybook/preview.tsx` toggles the wide-gamut overlay stylesheet).
 * It defaults to sRGB, so tokens must resolve to hex-derived `rgb()`.
 */
export const ColorFormatSrgb: StoryObj = {
  render: () => <ColorFormatProbes />,
  play: async ({ canvasElement }) => {
    await expect(accentFormatOf(canvasElement, "base accent")).toBe("rgb");
    await expect(accentFormatOf(canvasElement, "info accent")).toBe("rgb");
  },
};

/** Same probes with the toolbar on OKLCH: the overlay stylesheet is enabled. */
export const ColorFormatOklch: StoryObj = {
  globals: { colorFormat: "oklch" },
  render: () => <ColorFormatProbes />,
  play: async ({ canvasElement }) => {
    await expect(accentFormatOf(canvasElement, "base accent")).toBe("oklch");
    await expect(accentFormatOf(canvasElement, "info accent")).toBe("oklch");
  },
};