whyrating-engine-legacy/web/components/dashboard/WidgetRegistry.tsx

'use client';

import type { ComponentType } from 'react';
import type { WidgetConfig, WidgetType, WidgetData } from '@/lib/pipeline-types';
import { StatCard } from './widgets/StatCard';
import { LineChartWidget } from './widgets/LineChart';
import { BarChartWidget } from './widgets/BarChart';
import { PieChartWidget } from './widgets/PieChart';
import { DataTableWidget } from './widgets/DataTable';
import { HeatmapWidget } from './widgets/Heatmap';

// Common widget props
export interface WidgetComponentProps {
  config: WidgetConfig;
  data: WidgetData | null;
  loading: boolean;
  error?: string;
  onRefresh?: () => void;
  onPageChange?: (page: number) => void;
  currentPage?: number;
}

// Widget component type
type WidgetComponent = ComponentType<WidgetComponentProps>;

/**
 * Registry mapping widget types to their React components.
 */
const WIDGET_COMPONENTS: Record<WidgetType, WidgetComponent> = {
  stat_card: StatCard as WidgetComponent,
  line_chart: LineChartWidget as WidgetComponent,
  bar_chart: BarChartWidget as WidgetComponent,
  pie_chart: PieChartWidget as WidgetComponent,
  table: DataTableWidget as WidgetComponent,
  heatmap: HeatmapWidget as WidgetComponent,
  // Placeholder for unimplemented types
  area_chart: LineChartWidget as WidgetComponent, // Use line chart as fallback
  gauge: StatCard as WidgetComponent, // Use stat card as fallback
};

/**
 * Get the component for a widget type.
 */
export function getWidgetComponent(type: WidgetType): WidgetComponent | null {
  return WIDGET_COMPONENTS[type] || null;
}

/**
 * Check if a widget type is supported.
 */
export function isWidgetTypeSupported(type: string): type is WidgetType {
  return type in WIDGET_COMPONENTS;
}

/**
 * Render a widget based on its configuration.
 */
export function renderWidget(
  config: WidgetConfig,
  data: WidgetData | null,
  loading: boolean,
  error?: string,
  onRefresh?: () => void,
  onPageChange?: (page: number) => void,
  currentPage?: number
): React.ReactNode {
  const Component = WIDGET_COMPONENTS[config.type];

  if (!Component) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
        <p className="text-red-500">Unknown widget type: {config.type}</p>
      </div>
    );
  }

  return (
    <Component
      config={config}
      data={data}
      loading={loading}
      error={error}
      onRefresh={onRefresh}
      onPageChange={onPageChange}
      currentPage={currentPage}
    />
  );
}

// Export widget components for direct use
export {
  StatCard,
  LineChartWidget,
  BarChartWidget,
  PieChartWidget,
  DataTableWidget,
  HeatmapWidget,
};