"use client"

import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
import { motion, AnimatePresence, Reorder, useDragControls } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { Button } from '../ui/button'
import { MoonUIBadgePro as Badge } from '../ui/badge'
import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, AvatarGroup as MoonUIAvatarGroupPro } from '../ui/avatar'
import { Input } from '../ui/input'
import { Textarea } from '../ui/textarea'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../ui/dropdown-menu'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
import { ScrollArea } from '../ui/scroll-area'
import { Skeleton } from '../ui/skeleton'
import { Switch } from '../ui/switch'
import { Label } from '../ui/label'
import { Progress } from '../ui/progress'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
import { 
  Plus, 
  MoreHorizontal, 
  User, 
  Calendar, 
  MessageCircle, 
  Paperclip,
  Edit,
  Trash2,
  GripVertical,
  Lock,
  Sparkles,
  Search,
  Filter,
  Download,
  Upload,
  Copy,
  Move,
  Archive,
  Eye,
  EyeOff,
  ChevronDown,
  ChevronRight,
  X,
  Check,
  Clock,
  AlertCircle,
  Tag,
  Users,
  FileText,
  Image,
  Link2,
  Activity,
  Settings,
  Palette,
  Star,
  Flag,
  CheckSquare,
  Square,
  MoreVertical,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  Zap,
  Timer
} from 'lucide-react'
import { cn } from '../../lib/utils'
import { useSubscription } from '../../hooks/use-subscription'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog'
import { ColorPicker } from '../ui/color-picker'
import { CardDetailModal } from './card-detail-modal'
import { AddCardModal } from './add-card-modal'
import { format } from 'date-fns'
import type { 
  KanbanAssignee, 
  KanbanLabel, 
  KanbanChecklist, 
  KanbanActivity, 
  KanbanCard, 
  KanbanColumn, 
  KanbanFilter, 
  KanbanProps 
} from './types'
import { useToast } from '../../hooks/use-toast'


// Constants
const PRIORITY_CONFIG = {
  low: { 
    color: 'bg-green-100 text-green-800 border-green-200', 
    dot: 'bg-green-500',
    icon: ArrowDown 
  },
  medium: { 
    color: 'bg-yellow-100 text-yellow-800 border-yellow-200', 
    dot: 'bg-yellow-500',
    icon: ArrowUp 
  },
  high: { 
    color: 'bg-orange-100 text-orange-800 border-orange-200', 
    dot: 'bg-orange-500',
    icon: Zap 
  },
  urgent: { 
    color: 'bg-red-100 text-red-800 border-red-200', 
    dot: 'bg-red-500',
    icon: AlertCircle 
  }
}

const COLUMN_TEMPLATES = {
  todo: { title: 'To Do', color: '#6B7280' },
  inProgress: { title: 'In Progress', color: '#3B82F6' },
  done: { title: 'Done', color: '#10B981' }
}

// Helper functions
const formatDate = (date: Date) => {
  return date.toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric',
    year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
  })
}

const isOverdue = (dueDate: Date) => {
  return dueDate < new Date()
}

const getInitials = (name: string) => {
  return name.split(' ').map(n => n[0]).join('').toUpperCase()
}

const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// Custom hook for auto-scroll while dragging
const useAutoScroll = () => {
  const scrollRef = useRef<HTMLDivElement>(null)
  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null)

  const startAutoScroll = useCallback((direction: 'left' | 'right') => {
    if (scrollIntervalRef.current) return

    scrollIntervalRef.current = setInterval(() => {
      if (scrollRef.current) {
        const scrollAmount = direction === 'left' ? -10 : 10
        scrollRef.current.scrollLeft += scrollAmount
      }
    }, 20)
  }, [])

  const stopAutoScroll = useCallback(() => {
    if (scrollIntervalRef.current) {
      clearInterval(scrollIntervalRef.current)
      scrollIntervalRef.current = null
    }
  }, [])

  useEffect(() => {
    return () => stopAutoScroll()
  }, [stopAutoScroll])

  return { scrollRef, startAutoScroll, stopAutoScroll }
}

// Card component
const KanbanCardComponent = ({
  card,
  column,
  isDragging,
  onEdit,
  onDelete,
  onClick,
  showDetails,
  disabled,
  renderCard,
  renderCardPreview,
  renderCardBadge,
  renderCardActions,
  cardCompactMode,
  cardShowCoverImage,
  cardShowAssignees,
  cardShowLabels,
  cardShowProgress,
  cardDateFormat,
  cardMaxAssigneesToShow,
  provided,
  enableAnimations,
  animationDuration,
  cardVariant
}: {
  card: KanbanCard
  column: KanbanColumn
  isDragging: boolean
  onEdit?: (e: React.MouseEvent) => void
  onDelete?: (e: React.MouseEvent) => void
  onClick?: () => void
  showDetails: boolean
  disabled: boolean
  renderCard?: (card: KanbanCard, column: KanbanColumn, provided: any) => React.ReactNode
  renderCardPreview?: (card: KanbanCard) => React.ReactNode
  renderCardBadge?: (card: KanbanCard) => React.ReactNode
  renderCardActions?: (card: KanbanCard) => React.ReactNode
  cardCompactMode?: boolean
  cardShowCoverImage?: boolean
  cardShowAssignees?: boolean
  cardShowLabels?: boolean
  cardShowProgress?: boolean
  cardDateFormat?: string
  cardMaxAssigneesToShow?: number
  provided?: any
  enableAnimations?: boolean
  animationDuration?: number
  cardVariant?: 'default' | 'bordered' | 'elevated' | 'flat'
}) => {
  const [isEditingTitle, setIsEditingTitle] = useState(false)
  const [title, setTitle] = useState(card.title)
  const dragControls = useDragControls()
  
  // Default values
  const animationsEnabled = enableAnimations ?? true
  const animDuration = animationDuration ?? 0.2
  const variant = cardVariant ?? 'default'

  const completedChecklistItems = card.checklist?.items.filter(item => item.completed).length || 0
  const totalChecklistItems = card.checklist?.items.length || 0
  const checklistProgress = totalChecklistItems > 0 ? (completedChecklistItems / totalChecklistItems) * 100 : 0

  // If custom render function is provided, use it
  if (renderCard) {
    return renderCard(card, column, provided || {})
  }

  return (
    <motion.div
      layout
      initial={{ opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? 20 : 0 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? -20 : 0 }}
      whileHover={animationsEnabled ? { scale: 1.02 } : {}}
      whileDrag={animationsEnabled ? { scale: 1.05, rotate: 3 } : {}}
      transition={{ duration: animationsEnabled ? animDuration : 0 }}
      className={cn(
        "relative group cursor-pointer select-none",
        isDragging && "z-50"
      )}
    >
      <Card 
        className={cn(
          "border transition-all duration-200",
          variant === 'bordered' && "border-2",
          variant === 'elevated' && "shadow-lg hover:shadow-xl",
          variant === 'flat' && "border-0 bg-muted/30",
          variant === 'default' && "hover:shadow-md",
          isDragging && "shadow-2xl ring-2 ring-primary ring-offset-2",
          disabled && "cursor-not-allowed opacity-50"
        )}
        onClick={onClick}
      >
        {/* Drag handle */}
        <div 
          className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-primary/20 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity cursor-move"
          onPointerDown={(e) => dragControls.start(e)}
        />

        {/* Cover image */}
        {cardShowCoverImage && card.coverImage && (
          <div className="relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden">
            <img 
              src={card.coverImage} 
              alt=""
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
          </div>
        )}

        <CardContent className="p-3">
          {/* Labels */}
          {cardShowLabels && card.labels && card.labels.length > 0 && (
            <div className="flex flex-wrap gap-1 mb-2">
              {card.labels.map((label) => (
                <div
                  key={label.id}
                  className="h-2 w-12 rounded-full"
                  style={{ backgroundColor: label.color }}
                  title={label.name}
                />
              ))}
            </div>
          )}

          {/* Title and actions */}
          <div className="flex items-start justify-between gap-2 mb-2">
            <div className="flex-1">
              {isEditingTitle ? (
                <Input
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  onBlur={() => setIsEditingTitle(false)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      setIsEditingTitle(false)
                      // Call update handler
                    }
                    if (e.key === 'Escape') {
                      setTitle(card.title)
                      setIsEditingTitle(false)
                    }
                  }}
                  className="h-6 px-1 py-0 text-sm font-medium"
                  autoFocus
                  onClick={(e) => e.stopPropagation()}
                />
              ) : (
                <h4 className="font-medium text-sm line-clamp-2">{card.title}</h4>
              )}
            </div>

            {/* Quick actions */}
            {renderCardActions ? (
              <div className="opacity-0 group-hover:opacity-100 transition-opacity">
                {renderCardActions(card)}
              </div>
            ) : (
              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 w-6 p-0"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <MoreVertical className="h-3 w-3" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuItem onClick={onEdit}>
                      <Edit className="mr-2 h-4 w-4" />
                      Edit
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Copy className="mr-2 h-4 w-4" />
                      Duplicate
                    </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Move className="mr-2 h-4 w-4" />
                    Move
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Archive className="mr-2 h-4 w-4" />
                    Archive
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem 
                    onClick={onDelete}
                    className="text-destructive"
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            )}
          </div>

          {/* Description */}
          {!cardCompactMode && card.description && (
            <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
              {card.description}
            </p>
          )}

          {/* Progress bar */}
          {cardShowProgress && (card.progress !== undefined || card.checklist) && (
            <div className="mb-3">
              <div className="flex justify-between text-xs text-muted-foreground mb-1">
                <span>Progress</span>
                <span>{Math.round(card.progress || checklistProgress)}%</span>
              </div>
              <Progress value={card.progress || checklistProgress} className="h-1" />
            </div>
          )}

          {/* Tags */}
          {!cardCompactMode && card.tags && card.tags.length > 0 && (
            <div className="flex flex-wrap gap-1 mb-3">
              {card.tags.map((tag, index) => (
                <Badge key={index} variant="secondary" className="text-xs px-1.5 py-0">
                  {tag}
                </Badge>
              ))}
            </div>
          )}

          {/* Card details */}
          {showDetails && (
            <div className="flex items-center justify-between text-xs">
              <div className="flex items-center gap-2">
                {/* Priority */}
                {card.priority && (
                  <div className="flex items-center gap-1">
                    <div className={cn("w-2 h-2 rounded-full", PRIORITY_CONFIG[card.priority].dot)} />
                    <span className="capitalize">{card.priority}</span>
                  </div>
                )}

                {/* Due date */}
                {card.dueDate && (
                  <div className={cn(
                    "flex items-center gap-1",
                    isOverdue(card.dueDate) && "text-destructive"
                  )}>
                    <Calendar className="h-3 w-3" />
                    <span>{cardDateFormat ? format(card.dueDate, cardDateFormat) : formatDate(card.dueDate)}</span>
                  </div>
                )}

                {/* Checklist */}
                {card.checklist && (
                  <div className="flex items-center gap-1">
                    <CheckSquare className="h-3 w-3" />
                    <span>{completedChecklistItems}/{totalChecklistItems}</span>
                  </div>
                )}
              </div>
              
              <div className="flex items-center gap-2">
                {/* Comments */}
                {card.comments && card.comments > 0 && (
                  <div className="flex items-center gap-1">
                    <MessageCircle className="h-3 w-3" />
                    <span>{card.comments}</span>
                  </div>
                )}

                {/* Attachments */}
                {card.attachments && card.attachments.length > 0 && (
                  <div className="flex items-center gap-1">
                    <Paperclip className="h-3 w-3" />
                    <span>{card.attachments.length}</span>
                  </div>
                )}

                {/* Assignees */}
                {cardShowAssignees && card.assignees && card.assignees.length > 0 && (
                  <MoonUIAvatarGroupPro max={cardMaxAssigneesToShow} size="xs">
                    {card.assignees.map((assignee) => (
                      <MoonUIAvatarPro key={assignee.id} className="h-5 w-5">
                        <MoonUIAvatarImagePro src={assignee.avatar} />
                        <MoonUIAvatarFallbackPro className="text-xs">
                          {getInitials(assignee.name)}
                        </MoonUIAvatarFallbackPro>
                      </MoonUIAvatarPro>
                    ))}
                  </MoonUIAvatarGroupPro>
                )}
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </motion.div>
  )
}

// Main Kanban component
export function Kanban({
  columns: initialColumns,
  onCardMove,
  onCardClick,
  onCardEdit,
  onCardDelete,
  onCardUpdate,
  onAddCard,
  onAddColumn,
  onColumnUpdate,
  onColumnDelete,
  onBulkAction,
  onExport,
  className,
  showAddColumn = true,
  showCardDetails = true,
  showFilters = true,
  showSearch = true,
  enableKeyboardShortcuts = true,
  cardTemplates = [],
  columnTemplates = [],
  filters = [],
  defaultFilter,
  loading = false,
  disabled = false,
  labels = [],
  users = [],
  // Card Render Customization
  renderCard,
  renderCardPreview,
  renderCardBadge,
  renderCardActions,
  cardCompactMode = false,
  cardShowCoverImage = true,
  cardShowAssignees = true,
  cardShowLabels = true,
  cardShowProgress = true,
  cardDateFormat,
  cardMaxAssigneesToShow = 3,
  // Add Card Customization
  renderAddCardButton,
  renderAddCardForm,
  addCardButtonText,
  addCardPosition = 'bottom',
  allowQuickAdd = true,
  quickAddFields = ['title'],
  validateCard,
  onBeforeCardAdd,
  // Column Customization
  renderColumnHeader,
  renderColumnFooter,
  renderEmptyColumn,
  columnMenuActions,
  allowColumnReorder = true,
  columnColorOptions,
  columnDefaultColor = '#6B7280',
  // Drag & Drop Enhancement
  dragDisabled = false,
  dropDisabled = false,
  dragPreview = 'card',
  renderDragPreview,
  canDrop,
  onDragStart,
  onDragEnd,
  // UI/UX Customization
  theme = 'default',
  cardVariant = 'default',
  enableAnimations = true,
  animationDuration = 0.2,
  columnWidth,
  columnGap = 24,
  cardGap = 12,
  showTooltips = true,
  tooltipDelay = 500
}: KanbanProps) {
  // Check pro access
  const { hasProAccess, isLoading } = useSubscription()
  
  if (!isLoading && !hasProAccess) {
    return (
      <Card className={cn("w-full", className)}>
        <CardContent className="py-12 text-center">
          <div className="max-w-md mx-auto space-y-4">
            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
            <div>
              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
              <p className="text-muted-foreground text-sm mb-4">
                Kanban Board is available exclusively to MoonUI Pro subscribers.
              </p>
              <div className="flex gap-3 justify-center">
                <a href="/pricing">
                  <Button size="sm">
                    <Sparkles className="mr-2 h-4 w-4" />
                    Upgrade to Pro
                  </Button>
                </a>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

  // State
  const [columns, setColumns] = useState(initialColumns)
  const [searchQuery, setSearchQuery] = useState('')
  const [activeFilter, setActiveFilter] = useState(defaultFilter)
  const [selectedCards, setSelectedCards] = useState<string[]>([])
  const [draggedCard, setDraggedCard] = useState<string | null>(null)
  const [draggedOverColumn, setDraggedOverColumn] = useState<string | null>(null)
  const [isCreatingColumn, setIsCreatingColumn] = useState(false)
  const [newColumnTitle, setNewColumnTitle] = useState('')
  
  // Modal states
  const [selectedCard, setSelectedCard] = useState<KanbanCard | null>(null)
  const [addCardColumnId, setAddCardColumnId] = useState<string | null>(null)
  const [editingColumnId, setEditingColumnId] = useState<string | null>(null)
  const [editingColumnTitle, setEditingColumnTitle] = useState('')
  const [wipLimitModalOpen, setWipLimitModalOpen] = useState(false)
  const [wipLimitColumnId, setWipLimitColumnId] = useState<string | null>(null)
  const [wipLimit, setWipLimit] = useState<number | undefined>()
  const [colorPickerOpen, setColorPickerOpen] = useState(false)
  const [colorPickerColumnId, setColorPickerColumnId] = useState<string | null>(null)
  const [selectedColor, setSelectedColor] = useState('#6B7280')

  const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
  const { toast } = useToast()

  // Update state when props change
  useEffect(() => {
    setColumns(initialColumns)
  }, [initialColumns])

  // Filter cards based on search and filters
  const filteredColumns = useMemo(() => {
    if (!searchQuery && !activeFilter) return columns

    return columns.map(column => ({
      ...column,
      cards: column.cards.filter(card => {
        // Search filter
        if (searchQuery) {
          const query = searchQuery.toLowerCase()
          const matchesSearch = 
            card.title.toLowerCase().includes(query) ||
            card.description?.toLowerCase().includes(query) ||
            card.tags?.some(tag => tag.toLowerCase().includes(query)) ||
            card.assignees?.some(a => a.name.toLowerCase().includes(query))

          if (!matchesSearch) return false
        }

        // Active filter
        if (activeFilter) {
          const filter = filters.find(f => f.id === activeFilter)
          if (filter) {
            // Apply filter logic here
            // This is a simplified example
            if (filter.assignees?.length && !card.assignees?.some(a => filter.assignees!.includes(a.id))) {
              return false
            }
            if (filter.priority?.length && !filter.priority.includes(card.priority || '')) {
              return false
            }
            if (filter.labels?.length && !card.labels?.some(l => filter.labels!.includes(l.id))) {
              return false
            }
          }
        }

        return true
      })
    }))
  }, [columns, searchQuery, activeFilter, filters])

  // Keyboard shortcuts
  useEffect(() => {
    if (!enableKeyboardShortcuts) return

    const handleKeyDown = (e: KeyboardEvent) => {
      // Cmd/Ctrl + F: Focus search
      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
        e.preventDefault()
        document.getElementById('kanban-search')?.focus()
      }

      // Cmd/Ctrl + N: Add new card
      if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
        e.preventDefault()
        // Add to first column by default
        const firstColumn = columns[0]
        if (firstColumn && onAddCard) {
          onAddCard(firstColumn.id)
        }
      }

      // Escape: Clear selection
      if (e.key === 'Escape') {
        setSelectedCards([])
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [enableKeyboardShortcuts, columns, onAddCard])

  // Drag handlers
  const handleDragStart = (card: KanbanCard, columnId: string) => {
    if (disabled) return
    if (typeof dragDisabled === 'function' && dragDisabled(card)) return
    if (dragDisabled === true) return
    
    setDraggedCard(card.id)
    const column = columns.find(col => col.id === columnId)
    if (column && onDragStart) {
      onDragStart(card, column)
    }
  }

  const handleDragOver = (e: React.DragEvent, columnId: string) => {
    if (disabled) return
    const column = columns.find(col => col.id === columnId)
    if (column && typeof dropDisabled === 'function' && dropDisabled(column)) return
    if (dropDisabled === true) return
    
    e.preventDefault()
    setDraggedOverColumn(columnId)

    // Auto-scroll logic
    const container = scrollRef.current
    if (!container) return

    const rect = container.getBoundingClientRect()
    const x = e.clientX

    if (x < rect.left + 100) {
      startAutoScroll('left')
    } else if (x > rect.right - 100) {
      startAutoScroll('right')
    } else {
      stopAutoScroll()
    }
  }

  const handleDragEnd = () => {
    if (draggedCard) {
      const card = columns.flatMap(col => col.cards).find(c => c.id === draggedCard)
      const column = columns.find(col => col.cards.some(c => c.id === draggedCard))
      if (card && column && onDragEnd) {
        onDragEnd(card, column)
      }
    }
    setDraggedCard(null)
    setDraggedOverColumn(null)
    stopAutoScroll()
  }

  const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
    if (disabled || !draggedCard) return
    e.preventDefault()
    
    const targetColumn = columns.find(col => col.id === targetColumnId)
    const draggedCardObj = columns.flatMap(col => col.cards).find(card => card.id === draggedCard)
    
    if (targetColumn && draggedCardObj && canDrop && !canDrop(draggedCardObj, targetColumn, targetIndex)) {
      return
    }

    // Find source column and card
    let sourceColumnId: string | null = null
    let sourceCard: KanbanCard | null = null

    for (const column of columns) {
      const card = column.cards.find(c => c.id === draggedCard)
      if (card) {
        sourceColumnId = column.id
        sourceCard = card
        break
      }
    }

    if (sourceColumnId && sourceCard) {
      // Update local state immediately for better UX
      const newColumns = columns.map(col => {
        if (col.id === sourceColumnId) {
          return {
            ...col,
            cards: col.cards.filter(c => c.id !== draggedCard)
          }
        }
        if (col.id === targetColumnId) {
          const newCards = [...col.cards]
          newCards.splice(targetIndex, 0, sourceCard!)
          return {
            ...col,
            cards: newCards
          }
        }
        return col
      })
      setColumns(newColumns)
      
      // Call the callback if provided
      if (onCardMove) {
        onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
      }
    }

    handleDragEnd()
  }

  // Bulk actions
  const handleBulkAction = (action: string) => {
    if (onBulkAction && selectedCards.length > 0) {
      onBulkAction(action, selectedCards)
      setSelectedCards([])
    }
  }

  // Column actions
  const handleColumnAction = (column: KanbanColumn, action: string) => {
    switch (action) {
      case 'rename':
        setEditingColumnId(column.id)
        setEditingColumnTitle(column.title)
        break
      case 'delete':
        onColumnDelete?.(column.id)
        toast({
          title: "Column deleted",
          description: `"${column.title}" has been deleted`
        })
        break
      case 'collapse':
        const updatedColumn = { ...column, collapsed: !column.collapsed }
        onColumnUpdate?.(updatedColumn)
        setColumns(columns.map(col => col.id === column.id ? updatedColumn : col))
        break
      case 'setLimit':
        setWipLimitColumnId(column.id)
        setWipLimit(column.limit)
        setWipLimitModalOpen(true)
        break
      case 'changeColor':
        setColorPickerColumnId(column.id)
        setSelectedColor(column.color || '#6B7280')
        setColorPickerOpen(true)
        break
      case 'sortByPriority':
        const sortedCards = [...column.cards].sort((a, b) => {
          const priorityOrder = { urgent: 4, high: 3, medium: 2, low: 1 }
          return (priorityOrder[b.priority || 'medium'] || 2) - (priorityOrder[a.priority || 'medium'] || 2)
        })
        const sortedColumn = { ...column, cards: sortedCards }
        onColumnUpdate?.(sortedColumn)
        setColumns(columns.map(col => col.id === column.id ? sortedColumn : col))
        toast({
          title: "Cards sorted",
          description: "Cards sorted by priority"
        })
        break
      case 'sortByDueDate':
        const dateCards = [...column.cards].sort((a, b) => {
          if (!a.dueDate && !b.dueDate) return 0
          if (!a.dueDate) return 1
          if (!b.dueDate) return -1
          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
        })
        const dateColumn = { ...column, cards: dateCards }
        onColumnUpdate?.(dateColumn)
        setColumns(columns.map(col => col.id === column.id ? dateColumn : col))
        toast({
          title: "Cards sorted",
          description: "Cards sorted by due date"
        })
        break
      case 'sortAlphabetically':
        const alphaCards = [...column.cards].sort((a, b) => a.title.localeCompare(b.title))
        const alphaColumn = { ...column, cards: alphaCards }
        onColumnUpdate?.(alphaColumn)
        setColumns(columns.map(col => col.id === column.id ? alphaColumn : col))
        toast({
          title: "Cards sorted",
          description: "Cards sorted alphabetically"
        })
        break
    }
  }

  // Card handlers
  const handleCardClick = (card: KanbanCard) => {
    setSelectedCard(card)
    if (onCardClick) {
      onCardClick(card)
    }
  }

  const handleCardUpdate = (updatedCard: KanbanCard) => {
    onCardUpdate?.(updatedCard)
    setColumns(columns.map(col => ({
      ...col,
      cards: col.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
    })))
  }

  const handleAddCard = (columnId: string, newCard?: Partial<KanbanCard>) => {
    setAddCardColumnId(columnId)
  }

  const handleAddNewCard = (card: Partial<KanbanCard>) => {
    if (!addCardColumnId) return
    
    const newCard: KanbanCard = {
      id: Date.now().toString(),
      title: card.title || 'New Card',
      position: Date.now(),
      ...card
    }
    
    // Update local state
    setColumns(columns.map(col => {
      if (col.id === addCardColumnId) {
        return {
          ...col,
          cards: [...col.cards, newCard]
        }
      }
      return col
    }))
    
    // Call the callback if provided
    if (onAddCard) {
      onAddCard(addCardColumnId, newCard)
    }
    
    toast({
      title: "Card added",
      description: `"${newCard.title}" has been added`
    })
  }

  // Column updates
  const handleColumnRename = (columnId: string) => {
    const column = columns.find(col => col.id === columnId)
    if (!column || !editingColumnTitle.trim()) return
    
    const updatedColumn = { ...column, title: editingColumnTitle.trim() }
    onColumnUpdate?.(updatedColumn)
    setColumns(columns.map(col => col.id === columnId ? updatedColumn : col))
    setEditingColumnId(null)
    setEditingColumnTitle('')
    
    toast({
      title: "Column renamed",
      description: `Column renamed to "${editingColumnTitle.trim()}"`
    })
  }

  const handleWipLimitUpdate = () => {
    const column = columns.find(col => col.id === wipLimitColumnId)
    if (!column) return
    
    const updatedColumn = { ...column, limit: wipLimit }
    onColumnUpdate?.(updatedColumn)
    setColumns(columns.map(col => col.id === wipLimitColumnId ? updatedColumn : col))
    setWipLimitModalOpen(false)
    
    toast({
      title: "WIP limit updated",
      description: wipLimit ? `WIP limit set to ${wipLimit}` : "WIP limit removed"
    })
  }

  const handleColorUpdate = () => {
    const column = columns.find(col => col.id === colorPickerColumnId)
    if (!column) return
    
    const updatedColumn = { ...column, color: selectedColor }
    onColumnUpdate?.(updatedColumn)
    setColumns(columns.map(col => col.id === colorPickerColumnId ? updatedColumn : col))
    setColorPickerOpen(false)
    
    toast({
      title: "Column color updated",
      description: "Column color has been changed"
    })
  }

  // Export functionality
  const handleExport = (format: 'json' | 'csv') => {
    if (onExport) {
      onExport(format)
    } else {
      if (format === 'json') {
        const data = JSON.stringify(columns, null, 2)
        const blob = new Blob([data], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'kanban-board.json'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
        
        toast({
          title: "Board exported",
          description: "Board exported as JSON file"
        })
      } else if (format === 'csv') {
        let csv = 'Column,Card Title,Description,Priority,Assignees,Due Date,Tags\n'
        columns.forEach(column => {
          column.cards.forEach(card => {
            csv += `"${column.title}",`
            csv += `"${card.title}",`
            csv += `"${card.description || ''}",`
            csv += `"${card.priority || ''}",`
            csv += `"${card.assignees?.map(a => a.name).join(', ') || ''}",`
            csv += `"${card.dueDate ? new Date(card.dueDate).toLocaleDateString() : ''}",`
            csv += `"${card.tags?.join(', ') || ''}"\n`
          })
        })
        
        const blob = new Blob([csv], { type: 'text/csv' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'kanban-board.csv'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
        
        toast({
          title: "Board exported",
          description: "Board exported as CSV file"
        })
      }
    }
  }

  // Loading state
  if (loading) {
    return (
      <div className={cn("w-full", className)}>
        <div className="flex gap-6 overflow-x-auto pb-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex-shrink-0 w-80">
              <Card>
                <CardHeader>
                  <Skeleton className="h-4 w-24" />
                </CardHeader>
                <CardContent className="space-y-3">
                  {[1, 2, 3].map((j) => (
                    <Skeleton key={j} className="h-24 w-full" />
                  ))}
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className={cn("w-full", className)}>
      {/* Header with search and filters */}
      {(showSearch || showFilters) && (
        <div className="mb-6 space-y-4">
          <div className="flex items-center justify-between gap-4">
            {/* Search */}
            {showSearch && (
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="kanban-search"
                  placeholder="Search cards..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            )}

            {/* Actions */}
            <div className="flex items-center gap-2">
              {/* Filters */}
              {showFilters && filters.length > 0 && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Filter className="mr-2 h-4 w-4" />
                      Filter
                      {activeFilter && (
                        <Badge variant="secondary" className="ml-2">
                          {filters.find(f => f.id === activeFilter)?.name}
                        </Badge>
                      )}
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuLabel>Quick Filters</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={() => setActiveFilter(undefined)}>
                      <X className="mr-2 h-4 w-4" />
                      Clear filter
                    </DropdownMenuItem>
                    {filters.map((filter) => (
                      <DropdownMenuItem
                        key={filter.id}
                        onClick={() => setActiveFilter(filter.id)}
                      >
                        <Check 
                          className={cn(
                            "mr-2 h-4 w-4",
                            activeFilter === filter.id ? "opacity-100" : "opacity-0"
                          )}
                        />
                        {filter.name}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              )}

              {/* Bulk actions */}
              {selectedCards.length > 0 && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm">
                      <span className="mr-2">{selectedCards.length} selected</span>
                      <ChevronDown className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => handleBulkAction('move')}>
                      <Move className="mr-2 h-4 w-4" />
                      Move cards
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleBulkAction('archive')}>
                      <Archive className="mr-2 h-4 w-4" />
                      Archive cards
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleBulkAction('delete')}>
                      <Trash2 className="mr-2 h-4 w-4" />
                      Delete cards
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              )}

              {/* Export */}
              <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Download className="mr-2 h-4 w-4" />
                      Export
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => handleExport('json')}>
                      Export as JSON
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => handleExport('csv')}>
                      Export as CSV
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
            </div>
          </div>

          {/* Active filters display */}
          {activeFilter && (
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Active filters:</span>
              <Badge variant="secondary">
                {filters.find(f => f.id === activeFilter)?.name}
                <Button
                  variant="ghost"
                  size="sm"
                  className="ml-1 h-auto p-0"
                  onClick={() => setActiveFilter(undefined)}
                >
                  <X className="h-3 w-3" />
                </Button>
              </Badge>
            </div>
          )}
        </div>
      )}

      {/* Kanban board */}
      <div 
        ref={scrollRef}
        className="flex overflow-x-auto pb-4"
        style={{ gap: `${columnGap}px` }}
        onDragOver={(e) => e.preventDefault()}
      >
        <AnimatePresence mode="sync">
          {filteredColumns.map((column) => {
            const isOverLimit = column.limit && column.cards.length >= column.limit
            const isDraggedOver = draggedOverColumn === column.id
            
            return (
              <motion.div
                key={column.id}
                layout={enableAnimations}
                initial={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? -20 : 0 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? 20 : 0 }}
                className={cn(
                  "flex-shrink-0 transition-all",
                  isDraggedOver && "scale-105"
                )}
                style={{ 
                  width: columnWidth === 'auto' ? 'auto' : (columnWidth || 320) + 'px',
                  minWidth: columnWidth === 'auto' ? '300px' : undefined,
                  transitionDuration: enableAnimations ? `${animationDuration}s` : '0s'
                }}
                onDragOver={(e) => handleDragOver(e, column.id)}
                onDragLeave={() => setDraggedOverColumn(null)}
                onDrop={(e) => handleDrop(e, column.id, column.cards.length)}
              >
                <Card className={cn(
                  "h-full transition-all duration-200",
                  isDraggedOver && "ring-2 ring-primary ring-offset-2 bg-primary/5",
                  column.collapsed && "opacity-60"
                )}>
                  <CardHeader className="pb-3">
                    {renderColumnHeader ? (
                      renderColumnHeader(column)
                    ) : (
                      <>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            {/* Column color indicator */}
                            {column.color && (
                              <div 
                                className="w-3 h-3 rounded-full" 
                                style={{ backgroundColor: column.color }}
                              />
                            )}
                            
                            {/* Column title */}
                            <CardTitle className="text-sm font-medium flex items-center gap-2">
                              {editingColumnId === column.id ? (
                                <Input
                                  value={editingColumnTitle}
                                  onChange={(e) => setEditingColumnTitle(e.target.value)}
                                  onBlur={() => handleColumnRename(column.id)}
                                  onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                      handleColumnRename(column.id)
                                    }
                                    if (e.key === 'Escape') {
                                      setEditingColumnId(null)
                                      setEditingColumnTitle('')
                                    }
                                  }}
                                  className="h-6 w-32 text-sm"
                                  autoFocus
                                  onClick={(e) => e.stopPropagation()}
                                />
                              ) : (
                                <>
                                  {column.title}
                                  {column.locked && <Lock className="h-3 w-3" />}
                                </>
                              )}
                            </CardTitle>
                            
                            {/* Card count */}
                            <Badge variant="secondary" className="text-xs">
                              {column.cards.length}
                            </Badge>
                          </div>

                          {/* Column actions */}
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              {columnMenuActions ? (
                                columnMenuActions.map((action, index) => {
                                  if (action.visible && !action.visible(column)) return null
                                  return (
                                    <DropdownMenuItem
                                      key={index}
                                      onClick={() => action.action(column)}
                                    >
                                      {action.icon || null}
                                      {action.label}
                                    </DropdownMenuItem>
                                  )
                                })
                              ) : (
                                <>
                                  <DropdownMenuItem onClick={() => handleColumnAction(column, 'rename')}>
                                    <Edit className="mr-2 h-4 w-4" />
                                    Rename
                                  </DropdownMenuItem>
                                  <DropdownMenuItem onClick={() => handleColumnAction(column, 'collapse')}>
                                    {column.collapsed ? (
                                      <>
                                        <Eye className="mr-2 h-4 w-4" />
                                        Expand
                                      </>
                                    ) : (
                                      <>
                                        <EyeOff className="mr-2 h-4 w-4" />
                                        Collapse
                                      </>
                                    )}
                                  </DropdownMenuItem>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuSub>
                                    <DropdownMenuSubTrigger>
                                      <Settings className="mr-2 h-4 w-4" />
                                      Settings
                                    </DropdownMenuSubTrigger>
                                    <DropdownMenuSubContent>
                                      <DropdownMenuItem onClick={() => handleColumnAction(column, 'setLimit')}>
                                        <Timer className="mr-2 h-4 w-4" />
                                        Set WIP limit
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleColumnAction(column, 'changeColor')}>
                                        <Palette className="mr-2 h-4 w-4" />
                                        Change color
                                      </DropdownMenuItem>
                                      <DropdownMenuSub>
                                        <DropdownMenuSubTrigger>
                                          <ArrowUpDown className="mr-2 h-4 w-4" />
                                          Sort cards
                                        </DropdownMenuSubTrigger>
                                        <DropdownMenuSubContent>
                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortByPriority')}>
                                            By Priority
                                          </DropdownMenuItem>
                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortByDueDate')}>
                                            By Due Date
                                          </DropdownMenuItem>
                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortAlphabetically')}>
                                            Alphabetically
                                          </DropdownMenuItem>
                                        </DropdownMenuSubContent>
                                      </DropdownMenuSub>
                                    </DropdownMenuSubContent>
                                  </DropdownMenuSub>
                                  <DropdownMenuSeparator />
                                  <DropdownMenuItem 
                                    onClick={() => handleColumnAction(column, 'delete')}
                                    className="text-destructive"
                                  >
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Delete column
                                  </DropdownMenuItem>
                                </>
                              )}
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>

                        {/* WIP limit warning */}
                        {column.limit && (
                          <CardDescription className={cn(
                            "text-xs flex items-center gap-1 mt-1",
                            isOverLimit && "text-destructive"
                          )}>
                            {isOverLimit ? (
                              <>
                                <AlertCircle className="h-3 w-3" />
                                Over WIP limit ({column.cards.length}/{column.limit})
                              </>
                            ) : (
                              `WIP limit: ${column.cards.length}/${column.limit}`
                            )}
                          </CardDescription>
                        )}
                      </>
                    )}
                  </CardHeader>
                  
                  {!column.collapsed && (
                    <CardContent className="space-y-3" style={{ gap: `${cardGap}px` }}>
                      <ScrollArea className="h-[calc(100vh-300px)]">
                        {column.cards.length === 0 && renderEmptyColumn ? (
                          renderEmptyColumn(column)
                        ) : (
                          <AnimatePresence mode={enableAnimations ? "popLayout" : undefined}>
                            {column.cards
                              .sort((a, b) => a.position - b.position)
                              .map((card, index) => (
                              <div
                                key={card.id}
                                draggable={
                                  !disabled && 
                                  (typeof dragDisabled === 'function' ? !dragDisabled(card) : !dragDisabled)
                                }
                                onDragStart={() => handleDragStart(card, column.id)}
                                onDragEnd={handleDragEnd}
                                onDrop={(e) => {
                                  e.preventDefault()
                                  e.stopPropagation()
                                  handleDrop(e, column.id, index)
                                }}
                                className="mb-3"
                              >
                                <KanbanCardComponent
                                  card={card}
                                  column={column}
                                  isDragging={draggedCard === card.id}
                                  onEdit={(e) => {
                                    e.stopPropagation()
                                    onCardEdit?.(card)
                                  }}
                                  onDelete={(e) => {
                                    e.stopPropagation()
                                    onCardDelete?.(card)
                                  }}
                                  onClick={() => handleCardClick(card)}
                                  showDetails={showCardDetails}
                                  disabled={disabled}
                                  renderCard={renderCard}
                                  renderCardPreview={renderCardPreview}
                                  renderCardBadge={renderCardBadge}
                                  renderCardActions={renderCardActions}
                                  cardCompactMode={cardCompactMode}
                                  cardShowCoverImage={cardShowCoverImage}
                                  cardShowAssignees={cardShowAssignees}
                                  cardShowLabels={cardShowLabels}
                                  cardShowProgress={cardShowProgress}
                                  cardDateFormat={cardDateFormat}
                                  cardMaxAssigneesToShow={cardMaxAssigneesToShow}
                                  enableAnimations={enableAnimations}
                                  animationDuration={animationDuration}
                                  cardVariant={cardVariant}
                                />
                              </div>
                            ))}
                          </AnimatePresence>
                        )}
                      </ScrollArea>

                      {/* Add card button */}
                      {onAddCard && !column.locked && !isOverLimit && (
                        renderAddCardButton ? (
                          renderAddCardButton(column.id)
                        ) : (
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="w-full justify-start text-muted-foreground hover:text-foreground"
                                disabled={disabled}
                              >
                                <Plus className="h-4 w-4 mr-2" />
                                {typeof addCardButtonText === 'function' ? addCardButtonText(column.id) : (addCardButtonText || 'Add card')}
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="start" className="w-48">
                              <DropdownMenuLabel>Card Templates</DropdownMenuLabel>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem onClick={() => handleAddCard(column.id)}>
                                <FileText className="mr-2 h-4 w-4" />
                                Blank card
                              </DropdownMenuItem>
                              {cardTemplates.map((template, index) => (
                                <DropdownMenuItem 
                                  key={index}
                                  onClick={() => handleAddCard(column.id, template)}
                                >
                                  <Star className="mr-2 h-4 w-4" />
                                  {template.title || `Template ${index + 1}`}
                                </DropdownMenuItem>
                              ))}
                            </DropdownMenuContent>
                          </DropdownMenu>
                        )
                      )}
                      {/* Column footer */}
                      {renderColumnFooter && renderColumnFooter(column)}
                    </CardContent>
                  )}
                </Card>
              </motion.div>
            )
          })}
        </AnimatePresence>

        {/* Add column */}
        {showAddColumn && onAddColumn && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="flex-shrink-0 w-80"
          >
            {isCreatingColumn ? (
              <Card>
                <CardHeader>
                  <Input
                    placeholder="Enter column title..."
                    value={newColumnTitle}
                    onChange={(e) => setNewColumnTitle(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && newColumnTitle) {
                        onAddColumn({ title: newColumnTitle })
                        setNewColumnTitle('')
                        setIsCreatingColumn(false)
                      }
                      if (e.key === 'Escape') {
                        setNewColumnTitle('')
                        setIsCreatingColumn(false)
                      }
                    }}
                    autoFocus
                  />
                </CardHeader>
                <CardContent>
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      onClick={() => {
                        if (newColumnTitle) {
                          onAddColumn({ title: newColumnTitle })
                          setNewColumnTitle('')
                          setIsCreatingColumn(false)
                        }
                      }}
                    >
                      Add column
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => {
                        setNewColumnTitle('')
                        setIsCreatingColumn(false)
                      }}
                    >
                      Cancel
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="outline"
                    className="w-full h-full min-h-[200px] border-dashed justify-center items-center"
                    disabled={disabled}
                  >
                    <Plus className="h-6 w-6 mr-2" />
                    Add column
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-48">
                  <DropdownMenuLabel>Column Templates</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => setIsCreatingColumn(true)}>
                    <Plus className="mr-2 h-4 w-4" />
                    Blank column
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.todo)}>
                    <Square className="mr-2 h-4 w-4" />
                    To Do
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.inProgress)}>
                    <Clock className="mr-2 h-4 w-4" />
                    In Progress
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.done)}>
                    <CheckSquare className="mr-2 h-4 w-4" />
                    Done
                  </DropdownMenuItem>
                  {columnTemplates.map((template, index) => (
                    <DropdownMenuItem 
                      key={index}
                      onClick={() => onAddColumn(template)}
                    >
                      <Star className="mr-2 h-4 w-4" />
                      {template.title || `Template ${index + 1}`}
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </motion.div>
        )}
      </div>

      {/* Modals */}
      {/* Card Detail Modal */}
      {selectedCard && (
        <CardDetailModal
          card={selectedCard}
          isOpen={!!selectedCard}
          onClose={() => setSelectedCard(null)}
          onUpdate={handleCardUpdate}
          onDelete={(card) => {
            onCardDelete?.(card)
            toast({
              title: "Card deleted",
              description: `"${card.title}" has been deleted`
            })
          }}
          availableAssignees={users}
          availableLabels={labels}
          currentColumn={columns.find(col => col.cards.some(c => c.id === selectedCard.id))?.title}
          availableColumns={columns.map(col => ({ id: col.id, title: col.title }))}
        />
      )}

      {/* Add Card Modal */}
      {addCardColumnId && (
        <AddCardModal
          isOpen={!!addCardColumnId}
          onClose={() => setAddCardColumnId(null)}
          onAdd={handleAddNewCard}
          columnId={addCardColumnId}
          columnTitle={columns.find(col => col.id === addCardColumnId)?.title || ''}
          availableAssignees={users}
          availableLabels={labels}
          templates={cardTemplates}
        />
      )}

      {/* WIP Limit Modal */}
      <Dialog open={wipLimitModalOpen} onOpenChange={setWipLimitModalOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Set WIP Limit</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="wip-limit">Work In Progress Limit</Label>
              <Input
                id="wip-limit"
                type="number"
                min="0"
                value={wipLimit || ''}
                onChange={(e) => setWipLimit(e.target.value ? parseInt(e.target.value) : undefined)}
                placeholder="Enter a number (leave empty to remove limit)"
              />
              <p className="text-sm text-muted-foreground">
                Set a maximum number of cards allowed in this column. Leave empty to remove the limit.
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setWipLimitModalOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleWipLimitUpdate}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Color Picker Modal */}
      <Dialog open={colorPickerOpen} onOpenChange={setColorPickerOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Change Column Color</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Select a color</Label>
              <div className="grid grid-cols-8 gap-2">
                {[
                  '#6B7280', '#EF4444', '#F59E0B', '#10B981', 
                  '#3B82F6', '#8B5CF6', '#EC4899', '#06B6D4',
                  '#F43F5E', '#84CC16', '#14B8A6', '#6366F1',
                  '#A855F7', '#F472B6', '#0EA5E9', '#22D3EE'
                ].map(color => (
                  <button
                    key={color}
                    className={cn(
                      "w-10 h-10 rounded-md border-2 transition-all",
                      selectedColor === color ? "border-primary scale-110" : "border-transparent"
                    )}
                    style={{ backgroundColor: color }}
                    onClick={() => setSelectedColor(color)}
                  />
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setColorPickerOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleColorUpdate}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}