import { useEffect, useState } from 'react';

import { useTheme } from '@/Components/theme';

// A11Y-011: Colorblind-safe chart palette
// Optimized for protanopia, deuteranopia, and tritanopia visibility.
// Uses distinct brightness and saturation levels in addition to hue differences.
const DEFAULT_COLORS = [
  'hsl(220 90% 45%)',  // Blue - high contrast, visible to all colorblind types
  'hsl(160 60% 45%)',  // Teal/Green - different hue and brightness from blue
  'hsl(30 80% 55%)',   // Orange - very distinct, high saturation
  'hsl(280 65% 60%)',  // Purple - distinct hue, good brightness for contrast
  'hsl(10 80% 55%)',   // Red - high saturation, distinct from others
];

export function useChartColors(): string[] {
  const { resolvedTheme } = useTheme();
  const [colors, setColors] = useState<string[]>(DEFAULT_COLORS);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const root = document.documentElement;
    const style = getComputedStyle(root);
    setColors(
      [1, 2, 3, 4, 5].map((i) => {
        const hsl = style.getPropertyValue(`--chart-${i}`).trim();
        return hsl ? `hsl(${hsl})` : DEFAULT_COLORS[i - 1];
      }),
    );
  }, [resolvedTheme]);

  return colors;
}