import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// Register ChartJS components once
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler,
  ChartDataLabels
);

export const chartColors = {
  primary: '#2563eb',
  secondary: '#7c3aed',
  tertiary: '#0891b2',
  success: '#059669',
  danger: '#dc2626',
  muted: '#94a3b8',
  grid: '#f1f5f9'
};

export const createDataLabelConfig = (showDataLabels: boolean): any => ({
  display: showDataLabels,
  color: '#1e293b',
  font: { size: 10, weight: 600 },
  anchor: 'end',
  align: 'end',
  offset: 4,
  padding: 4,
  backgroundColor: 'rgba(255, 255, 255, 0.85)',
  borderRadius: 3,
  textDirection: 'ltr', // Force LTR for numbers - fixes RTL misalignment
  formatter: (value: number | null) => {
    if (value == null) return '';
    if (value >= 1000000) return (value / 1000000).toFixed(2) + 'M';
    if (value >= 1000) return (value / 1000).toFixed(2) + 'K';
    if (value < 100 && value > 0) return value.toFixed(2);
    return Math.round(value).toLocaleString();
  }
});

export const createBaseOptions = (showDataLabels: boolean): any => ({
  responsive: true,
  maintainAspectRatio: false,
  locale: 'en-US', // Force LTR number formatting
  layout: {
    padding: {
      top: showDataLabels ? 25 : 5,
      right: 5,
      bottom: 5,
      left: 5
    }
  },
  plugins: {
    legend: { display: false },
    tooltip: { 
      backgroundColor: '#1e293b', 
      padding: 12, 
      cornerRadius: 8, 
      titleFont: { size: 12 }, 
      bodyFont: { size: 11 },
      rtl: false,
      textDirection: 'ltr'
    },
    datalabels: createDataLabelConfig(showDataLabels)
  },
  scales: {
    x: { 
      grid: { display: false }, 
      ticks: { font: { size: 10 }, color: '#94a3b8' } 
    },
    y: { 
      grid: { color: chartColors.grid }, 
      ticks: { font: { size: 10 }, color: '#94a3b8' }, 
      border: { display: false } 
    }
  }
});

export const lineDatasetDefaults = {
  borderWidth: 2,
  tension: 0.4,
  fill: true,
  pointRadius: 0,
  pointHoverRadius: 4
};

export const barDatasetDefaults = {
  borderRadius: 4
};