import type { BlockDataMap, BlockType } from '@/lib/blocks/types'
import type { CourseTheme } from '@/lib/theme'
import {
  HeadingBlock, TextBlock, QuoteBlock, CalloutBlock, ButtonBlock, DividerBlock,
} from './text-blocks'
import { ImageBlock, VideoBlock, PodcastBlock } from './media-blocks'
import {
  NumericCardsBlock, IconCardsBlock, ImageCardsBlock, StatsBlock,
} from './card-blocks'
import {
  AccordionBlock, TabsBlock, TimelineBlock, QuizBlock,
} from './interactive-blocks'
import { FlipcardsBlock, CarouselBlock } from './extra-blocks'

interface BlockRendererProps {
  type: BlockType
  data: BlockDataMap[BlockType]
  theme: CourseTheme
  mode: 'edit' | 'view'
}

export function BlockRenderer({ type, data, theme, mode }: BlockRendererProps) {
  const props = { data, theme, mode }
  switch (type) {
    case 'heading':
      return <HeadingBlock {...(props as { data: BlockDataMap['heading']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'text':
      return <TextBlock {...(props as { data: BlockDataMap['text']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'image':
      return <ImageBlock {...(props as { data: BlockDataMap['image']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'video':
      return <VideoBlock {...(props as { data: BlockDataMap['video']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'podcast':
      return <PodcastBlock {...(props as { data: BlockDataMap['podcast']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'callout':
      return <CalloutBlock {...(props as { data: BlockDataMap['callout']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'quote':
      return <QuoteBlock {...(props as { data: BlockDataMap['quote']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'button':
      return <ButtonBlock {...(props as { data: BlockDataMap['button']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'divider':
      return <DividerBlock {...(props as { data: BlockDataMap['divider']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'cards-numeric':
      return <NumericCardsBlock {...(props as { data: BlockDataMap['cards-numeric']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'cards-icon':
      return <IconCardsBlock {...(props as { data: BlockDataMap['cards-icon']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'cards-image':
      return <ImageCardsBlock {...(props as { data: BlockDataMap['cards-image']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'stats':
      return <StatsBlock {...(props as { data: BlockDataMap['stats']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'accordion':
      return <AccordionBlock {...(props as { data: BlockDataMap['accordion']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'tabs':
      return <TabsBlock {...(props as { data: BlockDataMap['tabs']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'timeline':
      return <TimelineBlock {...(props as { data: BlockDataMap['timeline']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'quiz':
      return <QuizBlock {...(props as { data: BlockDataMap['quiz']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'flipcards':
      return <FlipcardsBlock {...(props as { data: BlockDataMap['flipcards']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    case 'carousel':
      return <CarouselBlock {...(props as { data: BlockDataMap['carousel']; theme: CourseTheme; mode: 'edit' | 'view' })} />
    default:
      return <p className="text-sm italic text-slate-400">Bloco desconhecido: {type}</p>
  }
}