export type ComponentType =
  | 'HEADING' | 'TEXT' | 'IMAGE' | 'BUTTON' | 'DIVIDER'
  | 'GALLERY' | 'VIDEO' | 'CONTACT_FORM' | 'MAP' | 'CUSTOM_HTML';

export interface ComponentItem {
  id: string;
  pageId?: string;
  type: ComponentType;
  config: Record<string, unknown>;
  styles: Record<string, unknown>;
  orderIndex: number;
}

export function getDefaultConfig(type: ComponentType): Record<string, unknown> {
  switch (type) {
    case 'HEADING': return { text: 'Heading', level: 'h2' };
    case 'TEXT': return { content: 'Text content here...' };
    case 'IMAGE': return { src: '', alt: 'Image', linkTo: '' };
    case 'BUTTON': return { text: 'Click Me', link: '#', variant: 'filled' };
    case 'DIVIDER': return { style: 'solid' };
    case 'GALLERY': return { images: [] };
    case 'VIDEO': return { src: '', autoplay: false, controls: true };
    case 'CONTACT_FORM': return { fields: ['name', 'email', 'message'], submitText: 'Send', emailTo: '' };
    case 'MAP': return { address: 'New York, NY', zoom: 14 };
    case 'CUSTOM_HTML': return { html: '<p>Custom HTML</p>' };
  }
}

export function getDefaultStyles(type: ComponentType): Record<string, unknown> {
  switch (type) {
    case 'HEADING': return { color: '#1a1a1a', fontSize: '2rem', fontWeight: '700', textAlign: 'left', margin: '0 0 1rem' };
    case 'TEXT': return { color: '#4a4a4a', fontSize: '1rem', lineHeight: '1.6', textAlign: 'left' };
    case 'IMAGE': return { width: '100%', height: 'auto', borderRadius: '0', objectFit: 'cover' };
    case 'BUTTON': return { backgroundColor: '#1976d2', color: '#ffffff', borderRadius: '4px', padding: '0.75rem 1.5rem' };
    case 'DIVIDER': return { color: '#e0e0e0', thickness: '1px', margin: '1.5rem 0' };
    case 'GALLERY': return { columns: '3', gap: '8px', borderRadius: '4px' };
    case 'VIDEO': return { width: '100%', maxWidth: '800px', borderRadius: '4px' };
    case 'CONTACT_FORM': return { backgroundColor: '#f5f5f5', padding: '2rem', borderRadius: '8px' };
    case 'MAP': return { width: '100%', height: '400px', borderRadius: '4px' };
    case 'CUSTOM_HTML': return { padding: '0', margin: '0' };
  }
}

const LABELS: Record<string, string> = {
  HEADING: 'Heading',
  TEXT: 'Text',
  IMAGE: 'Image',
  BUTTON: 'Button',
  DIVIDER: 'Divider',
  GALLERY: 'Gallery',
  VIDEO: 'Video',
  CONTACT_FORM: 'Contact Form',
  MAP: 'Map',
  CUSTOM_HTML: 'Custom HTML',
};

const ICONS: Record<string, string> = {
  HEADING: 'title',
  TEXT: 'text_fields',
  IMAGE: 'image',
  BUTTON: 'smart_button',
  DIVIDER: 'horizontal_rule',
  GALLERY: 'photo_library',
  VIDEO: 'videocam',
  CONTACT_FORM: 'contact_mail',
  MAP: 'map',
  CUSTOM_HTML: 'code',
};

export function getComponentLabel(type: string): string {
  return LABELS[type] || LABELS[type.toUpperCase()] || type;
}

export function getComponentIcon(type: string): string {
  return ICONS[type] || ICONS[type.toUpperCase()] || 'code';
}