import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js"

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  Filler
)

export function getChartColors(theme: string | undefined) {
  const isDark = theme === "dark"

  return {
    // Primary colors for chart elements
    primary: isDark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)",      // blue
    secondary: isDark ? "rgb(168, 85, 247)" : "rgb(147, 51, 234)",    // purple
    success: isDark ? "rgb(74, 222, 128)" : "rgb(34, 197, 94)",       // green

    // Additional chart colors
    orange: isDark ? "rgb(237, 152, 95)" : "rgb(237, 152, 95)",
    pink: isDark ? "rgb(236, 72, 153)" : "rgb(236, 72, 153)",
    amber: isDark ? "rgb(251, 191, 36)" : "rgb(251, 191, 36)",
    teal: isDark ? "rgb(94, 234, 212)" : "rgb(94, 234, 212)",
    rose: isDark ? "rgb(244, 114, 182)" : "rgb(244, 114, 182)",
    blue: isDark ? "rgb(96, 123, 143)": "rgb(96, 123, 143)",
    darkBlue: isDark ? "rgb(67, 78, 120)" : "rgb(67, 78, 120)",

    // UI colors
    grid: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
    text: isDark ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)",
  }
}

export const defaultChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: true,
      position: "bottom" as const,
    },
  },
}