/**
 * Chart theme utility — maps Fluent UI v9 design tokens to Recharts-compatible
 * CSS colour strings.
 *
 * Recharts renders SVG elements and sets colour values as SVG attributes, not
 * CSS properties.  SVG attributes do not support CSS custom-property
 * references (`var(…)`), so token values must be resolved to their actual
 * colour strings at render time via `getComputedStyle`.
 *
 * Call `resolveFluentToken` inside a component (not at module level) so that
 * the resolved value reflects the theme that is active when the component
 * renders.
 */

import { tokens } from "@fluentui/react-components";

// ---------------------------------------------------------------------------
// Runtime resolver
// ---------------------------------------------------------------------------

/**
 * Resolves a Fluent UI v9 token string (e.g. `tokens.colorNeutralForeground2`)
 * to the literal CSS colour value defined in the active theme.
 *
 * @param tokenValue - A Fluent v9 token string such as
 *   `"var(--colorNeutralForeground2)"`.
 * @returns The resolved colour string (e.g. `"#605e5c"`), or the original
 *   token value if resolution fails.
 */
export function resolveFluentToken(tokenValue: string): string {
  const match = /var\((--[^,)]+)/.exec(tokenValue);
  if (match == null || match[1] == null) return tokenValue;

  // FluentProvider injects CSS custom properties on its own wrapper <div>,
  // not on :root. Query that element so we resolve actual colour values.
  const el =
    document.querySelector(".fui-FluentProvider") ?? document.documentElement;
  const resolved = getComputedStyle(el)
    .getPropertyValue(match[1])
    .trim();
  return resolved !== "" ? resolved : tokenValue;
}

// ---------------------------------------------------------------------------
// Categorical palette
// ---------------------------------------------------------------------------

/**
 * Five distinct categorical colours for pie/bar slices and line series,
 * expressed as Fluent UI v9 CSS custom-property references.
 *
 * Resolve at render time with `resolveFluentToken` before passing to
 * Recharts components.
 */
export const CHART_PALETTE: readonly string[] = [
  tokens.colorPaletteBlueBorderActive,
  tokens.colorPaletteRedBorderActive,
  tokens.colorPaletteGreenBorderActive,
  tokens.colorPaletteGoldBorderActive,
  tokens.colorPalettePurpleBorderActive,
] as const;

// ---------------------------------------------------------------------------
// Structural colours
// ---------------------------------------------------------------------------

/** Fluent token for axis labels and tick text — resolves per active theme. */
export const CHART_AXIS_TEXT_TOKEN: string = tokens.colorNeutralForeground2;

/** Fluent token for CartesianGrid lines — resolves per active theme. */
export const CHART_GRID_LINE_TOKEN: string = tokens.colorNeutralStroke2;

/** Fluent token for tooltip background — resolves per active theme. */
export const CHART_TOOLTIP_BG_TOKEN: string = tokens.colorNeutralBackground1;

/** Fluent token for tooltip text — resolves per active theme. */
export const CHART_TOOLTIP_TEXT_TOKEN: string = tokens.colorNeutralForeground1;