import type { ChartColorPalette } from '@/lib/types';

/**
 * Get chart color palette using CSS variables for theming
 * These colors match the existing dark theme in the codebase
 */
export function getChartColors(): ChartColorPalette {
  return {
    primary: 'var(--accent)',
    secondary: 'var(--terminal-muted)',
    positive: '#96f5bf',  // Green - matches existing price-history-card
    negative: '#ff9f9f',  // Red - matches existing price-history-card
    grid: 'var(--line-weak)',
    text: 'var(--terminal-bright)',
    muted: 'var(--terminal-muted)',
    tooltipBg: 'rgba(31, 34, 39, 0.96)',
    tooltipBorder: 'var(--line-strong)',
    volume: 'var(--terminal-muted)'
  };
}

/**
 * Get color for price change (positive/negative)
 */
export function getPriceChangeColor(change: number): string {
  const colors = getChartColors();
  return change >= 0 ? colors.positive : colors.negative;
}

/**
 * Convert CSS variable to computed color value
 * Used for chart export since html-to-image can't render CSS variables
 */
export function cssVarToColor(cssVar: string): string {
  if (typeof window === 'undefined') return cssVar;

  // If it's already a color value, return as-is
  if (!cssVar.startsWith('var(')) return cssVar;

  // Extract variable name from var(--name)
  const varName = cssVar.match(/var\((--[^)]+)\)/)?.[1];
  if (!varName) return cssVar;

  // Get computed color from CSS variable
  const computedColor = getComputedStyle(document.documentElement)
    .getPropertyValue(varName)
    .trim();

  return computedColor || cssVar;
}

/**
 * Convert entire color palette to computed colors for export
 */
export function getComputedColors(palette: Partial<ChartColorPalette>): Partial<ChartColorPalette> {
  const computed: Partial<ChartColorPalette> = {};

  for (const [key, value] of Object.entries(palette)) {
    if (value) {
      computed[key as keyof ChartColorPalette] = cssVarToColor(value);
    }
  }

  return computed;
}