export function getChartTheme() {
  const style = getComputedStyle(document.documentElement)
  return {
    accent: style.getPropertyValue('--color-accent').trim(),
    accentMuted: style.getPropertyValue('--color-accent-muted').trim(),
    textPrimary: style.getPropertyValue('--color-text-primary').trim(),
    textSecondary: style.getPropertyValue('--color-text-secondary').trim(),
    textTertiary: style.getPropertyValue('--color-text-tertiary').trim(),
    gridColor: style.getPropertyValue('--color-border-subtle').trim(),
    bgSurface: style.getPropertyValue('--color-bg-surface').trim(),
  }
}

export type ChartTheme = ReturnType<typeof getChartTheme>

export function buildBarChartOptions(theme: ChartTheme) {
  return {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
      tooltip: {
        backgroundColor: theme.bgSurface,
        titleColor: theme.textPrimary,
        bodyColor: theme.textSecondary,
        borderColor: theme.gridColor,
        borderWidth: 1,
      },
    },
    scales: {
      x: {
        ticks: { color: theme.textTertiary, font: { size: 11 } },
        grid: { display: false },
        border: { display: false },
      },
      y: {
        ticks: { color: theme.textTertiary, font: { size: 11 } },
        grid: { color: theme.gridColor },
        border: { display: false },
      },
    },
  }
}
