export interface TableTheme {
  name: string
  container: string
  header: string
  headerCell: string
  body: string
  row: string
  rowHover: string
  rowSelected: string
  cell: string
  pagination: string
  emptyState: string
  mobileCard: string
  mobileCardHeader: string
  mobileCardContent: string
}

export const defaultTheme: TableTheme = {
  name: 'default',
  container: 'w-full',
  header: 'bg-muted/50',
  headerCell: 'px-4 py-3 text-left text-sm font-medium text-muted-foreground',
  body: '',
  row: 'border-b transition-colors',
  rowHover: 'hover:bg-muted/50',
  rowSelected: 'bg-primary/10 border-primary',
  cell: 'px-4 py-3 text-sm',
  pagination: 'flex items-center justify-between px-4 py-3 border-t',
  emptyState: 'flex items-center justify-center py-12 text-muted-foreground',
  mobileCard: 'rounded-lg border bg-card shadow-sm',
  mobileCardHeader: 'p-4 pb-2',
  mobileCardContent: 'p-4 pt-2',
}

export const compactTheme: TableTheme = {
  ...defaultTheme,
  name: 'compact',
  headerCell: 'px-2 py-2 text-left text-xs font-medium text-muted-foreground',
  cell: 'px-2 py-2 text-xs',
  pagination: 'flex items-center justify-between px-2 py-2 border-t',
  mobileCardHeader: 'p-3 pb-1',
  mobileCardContent: 'p-3 pt-1',
}

export const spaciousTheme: TableTheme = {
  ...defaultTheme,
  name: 'spacious',
  headerCell: 'px-6 py-4 text-left text-sm font-medium text-muted-foreground',
  cell: 'px-6 py-4 text-sm',
  pagination: 'flex items-center justify-between px-6 py-4 border-t',
  mobileCardHeader: 'p-6 pb-3',
  mobileCardContent: 'p-6 pt-3',
}

export const minimalTheme: TableTheme = {
  ...defaultTheme,
  name: 'minimal',
  header: '',
  headerCell: 'px-4 py-3 text-left text-sm font-semibold',
  row: 'border-b border-border/50',
  rowHover: 'hover:bg-muted/30',
  mobileCard: 'rounded-lg border border-border/50 bg-card',
}

export const themes = {
  default: defaultTheme,
  compact: compactTheme,
  spacious: spaciousTheme,
  minimal: minimalTheme,
}

export type ThemeName = keyof typeof themes

export function getTheme(themeName: ThemeName = 'default'): TableTheme {
  return themes[themeName] || defaultTheme
}

export function createCustomTheme(
  baseTheme: ThemeName = 'default',
  overrides: Partial<TableTheme>
): TableTheme {
  return {
    ...themes[baseTheme],
    ...overrides,
    name: overrides.name || `custom-${baseTheme}`,
  }
}