import { Layout } from 'react-grid-layout';

export type WidgetType =
  | 'appointments-metric'
  | 'customers-metric'
  | 'services-metric'
  | 'resources-metric'
  | 'revenue-chart'
  | 'appointments-chart'
  | 'open-tickets'
  | 'recent-activity'
  | 'capacity-utilization'
  | 'no-show-rate'
  | 'customer-breakdown';

export interface WidgetConfig {
  id: string;
  type: WidgetType;
  title: string;
  description: string;
  defaultSize: { w: number; h: number };
  minSize?: { w: number; h: number };
}

export interface DashboardLayout {
  widgets: string[]; // Widget IDs that are visible
  layout: Layout[];
}

// Widget definitions with metadata
export const WIDGET_DEFINITIONS: Record<WidgetType, WidgetConfig> = {
  'appointments-metric': {
    id: 'appointments-metric',
    type: 'appointments-metric',
    title: 'Total Appointments',
    description: 'Shows appointment count with weekly and monthly growth',
    defaultSize: { w: 3, h: 2 },
    minSize: { w: 2, h: 2 },
  },
  'customers-metric': {
    id: 'customers-metric',
    type: 'customers-metric',
    title: 'Active Customers',
    description: 'Shows customer count with weekly and monthly growth',
    defaultSize: { w: 3, h: 2 },
    minSize: { w: 2, h: 2 },
  },
  'services-metric': {
    id: 'services-metric',
    type: 'services-metric',
    title: 'Services',
    description: 'Shows number of services offered',
    defaultSize: { w: 3, h: 2 },
    minSize: { w: 2, h: 2 },
  },
  'resources-metric': {
    id: 'resources-metric',
    type: 'resources-metric',
    title: 'Resources',
    description: 'Shows number of resources available',
    defaultSize: { w: 3, h: 2 },
    minSize: { w: 2, h: 2 },
  },
  'revenue-chart': {
    id: 'revenue-chart',
    type: 'revenue-chart',
    title: 'Revenue',
    description: 'Weekly revenue bar chart',
    defaultSize: { w: 6, h: 4 },
    minSize: { w: 4, h: 3 },
  },
  'appointments-chart': {
    id: 'appointments-chart',
    type: 'appointments-chart',
    title: 'Appointments Trend',
    description: 'Weekly appointments line chart',
    defaultSize: { w: 6, h: 4 },
    minSize: { w: 4, h: 3 },
  },
  'open-tickets': {
    id: 'open-tickets',
    type: 'open-tickets',
    title: 'Open Tickets',
    description: 'Shows open support tickets requiring attention',
    defaultSize: { w: 4, h: 4 },
    minSize: { w: 3, h: 3 },
  },
  'recent-activity': {
    id: 'recent-activity',
    type: 'recent-activity',
    title: 'Recent Activity',
    description: 'Timeline of recent business events',
    defaultSize: { w: 4, h: 5 },
    minSize: { w: 3, h: 3 },
  },
  'capacity-utilization': {
    id: 'capacity-utilization',
    type: 'capacity-utilization',
    title: 'Capacity Utilization',
    description: 'Shows how booked your resources are this week',
    defaultSize: { w: 4, h: 4 },
    minSize: { w: 3, h: 3 },
  },
  'no-show-rate': {
    id: 'no-show-rate',
    type: 'no-show-rate',
    title: 'No-Show Rate',
    description: 'Percentage of appointments marked as no-show',
    defaultSize: { w: 3, h: 2 },
    minSize: { w: 2, h: 2 },
  },
  'customer-breakdown': {
    id: 'customer-breakdown',
    type: 'customer-breakdown',
    title: 'New vs Returning',
    description: 'Customer breakdown this month',
    defaultSize: { w: 4, h: 4 },
    minSize: { w: 3, h: 3 },
  },
};

// Default layout for new users
export const DEFAULT_LAYOUT: DashboardLayout = {
  widgets: [
    'appointments-metric',
    'customers-metric',
    'no-show-rate',
    'revenue-chart',
    'appointments-chart',
    'open-tickets',
    'recent-activity',
    'capacity-utilization',
    'customer-breakdown',
  ],
  layout: [
    { i: 'appointments-metric', x: 0, y: 0, w: 4, h: 2 },
    { i: 'customers-metric', x: 4, y: 0, w: 4, h: 2 },
    { i: 'no-show-rate', x: 8, y: 0, w: 4, h: 2 },
    { i: 'revenue-chart', x: 0, y: 2, w: 6, h: 4 },
    { i: 'appointments-chart', x: 6, y: 2, w: 6, h: 4 },
    { i: 'open-tickets', x: 0, y: 6, w: 4, h: 4 },
    { i: 'recent-activity', x: 4, y: 6, w: 4, h: 4 },
    { i: 'capacity-utilization', x: 8, y: 6, w: 4, h: 4 },
    { i: 'customer-breakdown', x: 0, y: 10, w: 4, h: 4 },
  ],
};
