import type { CSSProperties } from 'react';
import type { Theme } from '@/styles/theme';

export function getChartPalette(theme: Theme): string[] {
  return [
    theme.colors.primary,
    theme.colors.secondary,
    theme.colors.success,
    theme.colors.warning,
    theme.colors.error,
    theme.colors.info,
    '#06B6D4',
    '#EC4899',
  ];
}

export function getSlaStatusColors(theme: Theme): Record<string, string> {
  return {
    Met: theme.colors.success,
    Warning: theme.colors.warning,
    Breached: theme.colors.error,
    Active: theme.colors.primary,
    Paused: theme.colors.gray[400],
  };
}

export function getChartAxisColors(theme: Theme) {
  return {
    tick: theme.colors.text.tertiary,
    grid: theme.mode === 'dark' ? 'rgba(148, 163, 184, 0.12)' : 'rgba(15, 23, 42, 0.06)',
    tooltipBg: theme.colors.surfaceElevated,
    tooltipBorder: theme.colors.borderSoft,
    tooltipText: theme.colors.text.primary,
  };
}

export function getChartTooltipStyle(theme: Theme): CSSProperties {
  const colors = getChartAxisColors(theme);
  return {
    backgroundColor: colors.tooltipBg,
    border: `1px solid ${colors.tooltipBorder}`,
    borderRadius: 12,
    boxShadow: theme.shadows.md,
    color: colors.tooltipText,
    fontSize: '0.8125rem',
    padding: '8px 12px',
  };
}