import { COLORS } from './constants';

export const brandColors = [COLORS.brandPrimary, COLORS.brandSecondary, COLORS.brandAccent, COLORS.success, COLORS.warning, '#6366F1', '#EC4899', '#8B5CF6'];

export const defaultChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: true,
      position: 'bottom' as const,
      labels: {
        usePointStyle: true,
        padding: 16,
        font: { family: 'Inter', size: 11 },
        color: COLORS.textSecondary,
      },
    },
    tooltip: {
      backgroundColor: COLORS.textPrimary,
      titleFont: { family: 'Inter', size: 12 },
      bodyFont: { family: 'Inter', size: 12 },
      padding: 12,
      cornerRadius: 8,
      displayColors: true,
    },
  },
  scales: {
    x: {
      grid: { display: false },
      ticks: {
        font: { family: 'Inter', size: 10 },
        color: COLORS.textSecondary,
      },
      border: { display: false },
    },
    y: {
      grid: { color: '#F3F4F6' },
      ticks: {
        font: { family: 'Inter', size: 10 },
        color: COLORS.textSecondary,
      },
      border: { display: false },
    },
  },
  animation: {
    duration: 800,
    easing: 'easeOutQuart' as const,
  },
};

// Timing chart: LOWER = BETTER (reversed y-axis)
export const timingChartOptions = {
  ...defaultChartOptions,
  plugins: {
    ...defaultChartOptions.plugins,
    tooltip: {
      ...defaultChartOptions.plugins.tooltip,
      callbacks: {
        label: function(context: { parsed: { y: number | null }; dataset: { label?: string } }) {
          const val = context.parsed.y ?? 0;
          const mins = Math.floor(val / 60);
          const secs = (val % 60).toFixed(2);
          return `${context.dataset.label || ''}: ${mins > 0 ? mins + ':' : ''}${secs}s`;
        },
      },
    },
  },
  scales: {
    ...defaultChartOptions.scales,
    y: {
      ...defaultChartOptions.scales.y,
      reverse: true, // Lower values at top = better performance
      title: {
        display: true,
        text: 'Time (lower is better)',
        font: { family: 'Inter', size: 10 },
        color: COLORS.textSecondary,
      },
    },
  },
};

export const barChartOptions = {
  ...defaultChartOptions,
  plugins: {
    ...defaultChartOptions.plugins,
    legend: { display: false },
  },
};

export const doughnutOptions = {
  responsive: true,
  maintainAspectRatio: false,
  cutout: '65%',
  plugins: {
    legend: {
      display: true,
      position: 'bottom' as const,
      labels: {
        usePointStyle: true,
        padding: 12,
        font: { family: 'Inter', size: 11 },
        color: COLORS.textSecondary,
      },
    },
  },
  animation: {
    duration: 800,
    easing: 'easeOutQuart' as const,
  },
};

export const sparklineOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: { legend: { display: false }, tooltip: { enabled: false } },
  scales: { x: { display: false }, y: { display: false } },
  elements: {
    point: { radius: 0 },
    line: { tension: 0.4, borderWidth: 2 },
  },
  animation: { duration: 0 },
};
