import { Box, Typography } from '@mui/material'
import { useDroppable } from '@dnd-kit/core'
import type { PipelineItem, PipelineStage } from '../../domain/pipeline'
import { DraggableCard } from './PipelineCard'

// ── DroppableColumn ───────────────────────────────────────────────────────────

export function DroppableColumn({
  stage,
  items,
  selectedId,
  onSelect,
  onChatClick,
  onCardChatClick,
  isOver,
}: {
  stage: { key: PipelineStage; label: string; color: string; bgColor: string }
  items: PipelineItem[]
  selectedId: string | null
  onSelect: (item: PipelineItem) => void
  onChatClick: (inquiryId: string) => void
  onCardChatClick?: (item: PipelineItem) => void
  isOver: boolean
}) {
  const { setNodeRef } = useDroppable({ id: stage.key })

  return (
    <Box
      ref={setNodeRef}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 1,
        minHeight: 80,
        p: 0.75,
        borderRadius: 2,
        bgcolor: isOver ? `${stage.color}10` : 'transparent',
        border: isOver ? `2px dashed ${stage.color}60` : '2px solid transparent',
        transition: 'background-color 0.15s, border-color 0.15s',
      }}
    >
      {items.map(item => (
        <DraggableCard
          key={item.id}
          item={item}
          isSelected={item.id === selectedId}
          onSelect={onSelect}
          onChatClick={
            item.inquiryId
              ? (e) => { e.stopPropagation(); onChatClick(item.inquiryId!) }
              : onCardChatClick
                ? (e) => { e.stopPropagation(); onCardChatClick(item) }
                : undefined
          }
        />
      ))}
      {items.length === 0 && (
        <Box sx={{ py: 2, textAlign: 'center' }}>
          <Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
            {isOver ? 'Hier ablegen' : 'Leer'}
          </Typography>
        </Box>
      )}
    </Box>
  )
}
