// Charts Component Specification
// Framework-agnostic chart component definitions (compatible with Chart.js, D3, etc.)

export type ChartType = 'line' | 'bar' | 'pie' | 'area' | 'scatter' | 'radar' | 'donut';
export type ChartTheme = 'light' | 'dark' | 'auto';

export interface ChartDataPoint {
  label: string;
  value: number;
  color?: string;
  metadata?: Record<string, unknown>;
}

export interface ChartDataset {
  label: string;
  data: number[] | ChartDataPoint[];
  backgroundColor?: string | string[];
  borderColor?: string | string[];
  borderWidth?: number;
  fill?: boolean;
  metadata?: Record<string, unknown>;
}

export interface ChartProps {
  type: ChartType;
  data: {
    labels: string[];
    datasets: ChartDataset[];
  };
  
  // Options
  title?: string;
  subtitle?: string;
  showLegend?: boolean;
  showTooltips?: boolean;
  showGrid?: boolean;
  
  // Axes
  xAxisLabel?: string;
  yAxisLabel?: string;
  xAxisType?: 'category' | 'time' | 'linear';
  yAxisType?: 'linear' | 'logarithmic';
  
  // Styling
  theme?: ChartTheme;
  height?: number | string;
  width?: number | string;
  className?: string;
  
  // Interaction
  onClick?: (data: ChartDataPoint | ChartDataset) => void;
  onHover?: (data: ChartDataPoint | ChartDataset) => void;
  
  // Responsive
  responsive?: boolean;
  maintainAspectRatio?: boolean;
  
  // Loading
  loading?: boolean;
  loadingMessage?: string;
  
  // Empty state
  emptyMessage?: string;
}

export interface LineChartProps extends ChartProps {
  type: 'line';
  smooth?: boolean;
  showPoints?: boolean;
  areaFill?: boolean;
}

export interface BarChartProps extends ChartProps {
  type: 'bar';
  horizontal?: boolean;
  stacked?: boolean;
  groupBy?: string;
}

export interface PieChartProps extends ChartProps {
  type: 'pie' | 'donut';
  showPercentages?: boolean;
  centerLabel?: string;
}

export interface AreaChartProps extends ChartProps {
  type: 'area';
  stacked?: boolean;
  gradient?: boolean;
}

export const chartThemes = {
  light: {
    backgroundColor: '#FFFFFF',
    textColor: '#212121',
    gridColor: '#E0E0E0',
    borderColor: '#BDBDBD',
  },
  dark: {
    backgroundColor: '#121212',
    textColor: '#FFFFFF',
    gridColor: '#424242',
    borderColor: '#616161',
  },
};

/**
 * Chart Component Interface
 * 
 * Usage example (React with Chart.js):
 * ```tsx
 * <LineChart
 *   data={{
 *     labels: ['Jan', 'Feb', 'Mar', 'Apr'],
 *     datasets: [{
 *       label: 'Settlements',
 *       data: [100, 150, 200, 180],
 *       borderColor: '#2196F3'
 *     }]
 *   }}
 *   title="Monthly Settlements"
 *   showLegend
 *   responsive
 * />
 * 
 * <PieChart
 *   data={{
 *     labels: ['DBIS', 'SCB', 'FI'],
 *     datasets: [{
 *       data: [40, 35, 25],
 *       backgroundColor: ['#0D47A1', '#7B1FA2', '#388E3C']
 *     }]
 *   }}
 *   title="Participant Distribution"
 *   showPercentages
 * />
 * ```
 */
export interface ChartComponent {
  props: ChartProps;
  updateData(data: ChartProps['data']): void;
  exportImage(format?: 'png' | 'svg' | 'pdf'): string;
  render(): unknown;
}

