"use client"

import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react'
import { motion, AnimatePresence, Reorder } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { MoonUIBadgePro as Badge } from '../ui/badge'
import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro } from '../ui/avatar'
import { Button } from '../ui/button'
import { Input } from '../ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select'
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu'
import { 
  Clock, 
  CheckCircle2, 
  AlertCircle, 
  XCircle,
  Circle,
  Calendar,
  User,
  MessageCircle,
  Paperclip,
  ExternalLink,
  Lock,
  Sparkles,
  Filter,
  Search,
  Download,
  Printer,
  ChevronRight,
  ChevronDown,
  MoreVertical,
  Edit,
  Trash,
  Copy,
  Share,
  Flag,
  Zap,
  Target,
  TrendingUp,
  Repeat,
  GitBranch,
  Layers,
  ArrowRight,
  ArrowLeft,
  Maximize2,
  Minimize2
} from 'lucide-react'
import { cn } from '../../lib/utils'
import { VariantProps, cva } from 'class-variance-authority'

// Enhanced Event Types
export type TimelineEventType = 'success' | 'warning' | 'error' | 'info' | 'pending' | 'milestone' | 'custom'
export type TimelineLayout = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'alternating' | 'grouped'
export type TimelineTheme = 'default' | 'minimal' | 'detailed' | 'compact'
export type TimelineAnimation = 'fade' | 'slide' | 'scale' | 'none'
export type TimelineGroupBy = 'none' | 'date' | 'week' | 'month' | 'year'

// Event interfaces
export interface TimelineEventBase {
  id: string
  title: string
  description?: string
  date: Date
  type: TimelineEventType
  icon?: React.ReactNode
  color?: string
  metadata?: TimelineEventMetadata
  user?: TimelineUser
}

export interface TimelineEventMetadata {
  location?: string
  duration?: string
  tags?: string[]
  attachments?: number
  comments?: number
  externalLink?: string
  priority?: 'low' | 'medium' | 'high'
  progress?: number
  custom?: Record<string, any>
}

export interface TimelineUser {
  name: string
  avatar?: string
  email?: string
  role?: string
}

// Extended event types
export interface MilestoneEvent extends TimelineEventBase {
  type: 'milestone'
  milestone: {
    target?: string
    achievement?: string
    impact?: string
  }
}

export interface RangeEvent extends TimelineEventBase {
  endDate: Date
  isActive?: boolean
}

export interface RecurringEvent extends TimelineEventBase {
  recurrence: {
    frequency: 'daily' | 'weekly' | 'monthly' | 'yearly'
    interval?: number
    endDate?: Date
    occurrences?: number
  }
}

export interface NestedEvent extends TimelineEventBase {
  subEvents?: TimelineEvent[]
  expanded?: boolean
}

export type TimelineEvent = TimelineEventBase | MilestoneEvent | RangeEvent | RecurringEvent | NestedEvent

// Render function types
export type EventRenderer = (event: TimelineEvent, index: number) => React.ReactNode
export type ConnectorRenderer = (fromEvent: TimelineEvent, toEvent: TimelineEvent) => React.ReactNode
export type IconRenderer = (event: TimelineEvent) => React.ReactNode

// Timeline Props
export interface TimelineProps extends VariantProps<typeof timelineVariants> {
  events: TimelineEvent[]
  onEventClick?: (event: TimelineEvent) => void
  onEventEdit?: (event: TimelineEvent) => void
  onEventDelete?: (event: TimelineEvent) => void
  onEventsReorder?: (events: TimelineEvent[]) => void
  className?: string
  
  // Layout options
  layout?: TimelineLayout
  theme?: TimelineTheme
  animation?: TimelineAnimation
  groupBy?: TimelineGroupBy
  
  // Display options
  showUserInfo?: boolean
  showMetadata?: boolean
  showRelativeTime?: boolean
  showSearch?: boolean
  showFilter?: boolean
  showExport?: boolean
  
  // Customization
  eventRenderer?: EventRenderer
  connectorRenderer?: ConnectorRenderer
  iconRenderer?: IconRenderer
  colorScheme?: Record<TimelineEventType, string>
  
  // Interactive features
  draggable?: boolean
  expandable?: boolean
  editable?: boolean
  selectable?: boolean
  virtualScroll?: boolean
  
  // Advanced features
  maxEventsPerGroup?: number
  printMode?: boolean
  compactMode?: boolean
  parallaxEffect?: boolean
  gradientConnectors?: boolean
  animatedProgress?: boolean
  
  // Accessibility
  ariaLabel?: string
  keyboardNavigation?: boolean
}

// Timeline variants
const timelineVariants = cva("w-full", {
  variants: {
    theme: {
      default: "",
      minimal: "border-0 shadow-none",
      detailed: "border-2",
      compact: "p-0"
    }
  },
  defaultVariants: {
    theme: "default"
  }
})

// Default color schemes
const DEFAULT_COLORS: Record<TimelineEventType, string> = {
  success: 'bg-green-500 border-green-500',
  warning: 'bg-yellow-500 border-yellow-500',
  error: 'bg-red-500 border-red-500',
  info: 'bg-blue-500 border-blue-500',
  pending: 'bg-muted-foreground/40 border-muted-foreground/40',
  milestone: 'bg-purple-500 border-purple-500',
  custom: 'bg-slate-500 border-slate-500'
}

const DEFAULT_ICONS: Record<TimelineEventType, React.ReactNode> = {
  success: <CheckCircle2 className="h-4 w-4 text-white" />,
  warning: <AlertCircle className="h-4 w-4 text-white" />,
  error: <XCircle className="h-4 w-4 text-white" />,
  info: <Circle className="h-4 w-4 text-white" />,
  pending: <Clock className="h-4 w-4 text-white" />,
  milestone: <Flag className="h-4 w-4 text-white" />,
  custom: <Sparkles className="h-4 w-4 text-white" />
}

const TEXT_COLORS: Record<TimelineEventType, string> = {
  success: 'text-green-700 dark:text-green-400',
  warning: 'text-yellow-700 dark:text-yellow-400',
  error: 'text-red-700 dark:text-red-400',
  info: 'text-blue-700 dark:text-blue-400',
  pending: 'text-muted-foreground',
  milestone: 'text-purple-700 dark:text-purple-400',
  custom: 'text-slate-700 dark:text-slate-400'
}

// Animation variants
const animationVariants = {
  fade: {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 }
  },
  slide: {
    initial: { opacity: 0, x: -20 },
    animate: { opacity: 1, x: 0 },
    exit: { opacity: 0, x: 20 }
  },
  scale: {
    initial: { opacity: 0, scale: 0.8 },
    animate: { opacity: 1, scale: 1 },
    exit: { opacity: 0, scale: 0.8 }
  }
}

export function Timeline({
  events: initialEvents,
  onEventClick,
  onEventEdit,
  onEventDelete,
  onEventsReorder,
  className,
  layout = 'vertical',
  theme = 'default',
  animation = 'fade',
  groupBy = 'none',
  showUserInfo = true,
  showMetadata = true,
  showRelativeTime = true,
  showSearch = true,
  showFilter = true,
  showExport = true,
  eventRenderer,
  connectorRenderer,
  iconRenderer,
  colorScheme = DEFAULT_COLORS,
  draggable = false,
  expandable = true,
  editable = false,
  selectable = false,
  virtualScroll = false,
  maxEventsPerGroup = 20,
  printMode = false,
  compactMode = false,
  parallaxEffect = false,
  gradientConnectors = false,
  animatedProgress = false,
  ariaLabel = "Timeline of events",
  keyboardNavigation = true,
  ...props
}: TimelineProps) {
  const [events, setEvents] = useState<TimelineEvent[]>(initialEvents)
  const [searchQuery, setSearchQuery] = useState('')
  const [filterType, setFilterType] = useState<TimelineEventType | 'all'>('all')
  const [selectedEvents, setSelectedEvents] = useState<Set<string>>(new Set())
  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())
  const [focusedEventId, setFocusedEventId] = useState<string | null>(null)
  
  const timelineRef = useRef<HTMLDivElement>(null)
  const eventRefs = useRef<Map<string, HTMLDivElement>>(new Map())

  // Update events when prop changes
  useEffect(() => {
    setEvents(initialEvents)
  }, [initialEvents])

  // Keyboard navigation
  useEffect(() => {
    if (!keyboardNavigation) return

    const handleKeyDown = (e: KeyboardEvent) => {
      const currentIndex = events.findIndex(event => event.id === focusedEventId)
      
      switch (e.key) {
        case 'ArrowDown':
        case 'ArrowRight':
          e.preventDefault()
          if (currentIndex < events.length - 1) {
            const nextEvent = events[currentIndex + 1]
            setFocusedEventId(nextEvent.id)
            eventRefs.current.get(nextEvent.id)?.focus()
          }
          break
        case 'ArrowUp':
        case 'ArrowLeft':
          e.preventDefault()
          if (currentIndex > 0) {
            const prevEvent = events[currentIndex - 1]
            setFocusedEventId(prevEvent.id)
            eventRefs.current.get(prevEvent.id)?.focus()
          }
          break
        case 'Enter':
        case ' ':
          e.preventDefault()
          if (focusedEventId) {
            const event = events.find(e => e.id === focusedEventId)
            if (event && onEventClick) {
              onEventClick(event)
            }
          }
          break
        case 'Delete':
          if (editable && focusedEventId && onEventDelete) {
            const event = events.find(e => e.id === focusedEventId)
            if (event) {
              onEventDelete(event)
            }
          }
          break
      }
    }

    timelineRef.current?.addEventListener('keydown', handleKeyDown)
    return () => timelineRef.current?.removeEventListener('keydown', handleKeyDown)
  }, [keyboardNavigation, events, focusedEventId, onEventClick, onEventDelete, editable])

  // Utility functions
  const formatDate = useCallback((date: Date) => {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }, [])

  const formatTime = useCallback((date: Date) => {
    return date.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: true
    })
  }, [])

  const getRelativeTime = useCallback((date: Date) => {
    const now = new Date()
    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
    
    if (diffInSeconds < 0) {
      const futureDiff = Math.abs(diffInSeconds)
      if (futureDiff < 3600) {
        const minutes = Math.floor(futureDiff / 60)
        return `In ${minutes} minute${minutes !== 1 ? 's' : ''}`
      } else if (futureDiff < 86400) {
        const hours = Math.floor(futureDiff / 3600)
        return `In ${hours} hour${hours !== 1 ? 's' : ''}`
      } else {
        const days = Math.floor(futureDiff / 86400)
        return `In ${days} day${days !== 1 ? 's' : ''}`
      }
    }
    
    if (diffInSeconds < 60) {
      return 'Just now'
    } else if (diffInSeconds < 3600) {
      const minutes = Math.floor(diffInSeconds / 60)
      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
    } else if (diffInSeconds < 86400) {
      const hours = Math.floor(diffInSeconds / 3600)
      return `${hours} hour${hours > 1 ? 's' : ''} ago`
    } else if (diffInSeconds < 604800) {
      const days = Math.floor(diffInSeconds / 86400)
      return `${days} day${days > 1 ? 's' : ''} ago`
    } else {
      return formatDate(date)
    }
  }, [formatDate])

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

  // Grouping functions
  const groupEventsByDate = useCallback((events: TimelineEvent[]) => {
    const groups: { [key: string]: TimelineEvent[] } = {}
    
    events.forEach(event => {
      let dateKey: string
      
      switch (groupBy) {
        case 'week':
          const weekStart = new Date(event.date)
          weekStart.setDate(weekStart.getDate() - weekStart.getDay())
          dateKey = `Week of ${formatDate(weekStart)}`
          break
        case 'month':
          dateKey = event.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long' })
          break
        case 'year':
          dateKey = event.date.getFullYear().toString()
          break
        case 'date':
        default:
          dateKey = formatDate(event.date)
      }
      
      if (!groups[dateKey]) {
        groups[dateKey] = []
      }
      groups[dateKey].push(event)
    })
    
    return groups
  }, [groupBy, formatDate])

  // Filtering and sorting
  const filteredAndSortedEvents = useMemo(() => {
    let filtered = [...events]
    
    // Apply search filter
    if (searchQuery) {
      filtered = filtered.filter(event => 
        event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        event.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        event.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
      )
    }
    
    // Apply type filter
    if (filterType !== 'all') {
      filtered = filtered.filter(event => event.type === filterType)
    }
    
    // Sort by date
    return filtered.sort((a, b) => b.date.getTime() - a.date.getTime())
  }, [events, searchQuery, filterType])

  // Event handlers
  const handleEventClick = useCallback((event: TimelineEvent) => {
    if (selectable) {
      setSelectedEvents(prev => {
        const newSet = new Set(prev)
        if (newSet.has(event.id)) {
          newSet.delete(event.id)
        } else {
          newSet.add(event.id)
        }
        return newSet
      })
    }
    
    if (expandable && 'subEvents' in event) {
      setExpandedEvents(prev => {
        const newSet = new Set(prev)
        if (newSet.has(event.id)) {
          newSet.delete(event.id)
        } else {
          newSet.add(event.id)
        }
        return newSet
      })
    }
    
    onEventClick?.(event)
  }, [selectable, expandable, onEventClick])

  const handleExport = useCallback(() => {
    const dataStr = JSON.stringify(filteredAndSortedEvents, null, 2)
    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr)
    
    const exportFileDefaultName = `timeline-export-${new Date().toISOString()}.json`
    
    const linkElement = document.createElement('a')
    linkElement.setAttribute('href', dataUri)
    linkElement.setAttribute('download', exportFileDefaultName)
    linkElement.click()
  }, [filteredAndSortedEvents])

  const handlePrint = useCallback(() => {
    window.print()
  }, [])

  // Render helpers
  const renderEventIcon = useCallback((event: TimelineEvent) => {
    if (iconRenderer) {
      return iconRenderer(event)
    }
    
    if (event.icon) {
      return event.icon
    }
    
    if ('milestone' in event) {
      return <Target className="h-4 w-4 text-white" />
    }
    
    if ('recurrence' in event) {
      return <Repeat className="h-4 w-4 text-white" />
    }
    
    if ('subEvents' in event) {
      return <GitBranch className="h-4 w-4 text-white" />
    }
    
    return DEFAULT_ICONS[event.type] || DEFAULT_ICONS.custom
  }, [iconRenderer])

  const renderConnector = useCallback((fromEvent: TimelineEvent, toEvent: TimelineEvent, isLast: boolean) => {
    if (connectorRenderer) {
      return connectorRenderer(fromEvent, toEvent)
    }
    
    if (isLast) return null
    
    const baseClasses = cn(
      "absolute",
      layout === 'horizontal' ? "h-0.5 top-4" : "w-0.5 left-1/2 -ml-px transform -translate-x-1/2",
      gradientConnectors && "bg-gradient-to-b from-border to-transparent"
    )
    
    if (layout === 'horizontal') {
      return <div className={cn(baseClasses, "bg-border")} style={{ width: '100px' }} />
    }
    
    return (
      <div className={cn(
        baseClasses,
        "bg-border",
        layout === 'alternating' && "hidden"
      )} 
      style={{ 
        height: 'calc(100% + 2rem)',
        top: '2rem'
      }} />
    )
  }, [connectorRenderer, layout, gradientConnectors])

  const renderEvent = useCallback((event: TimelineEvent, index: number, isLast: boolean = false) => {
    const eventColor = event.color || colorScheme[event.type] || DEFAULT_COLORS[event.type]
    const textColor = TEXT_COLORS[event.type] || TEXT_COLORS.custom
    const isSelected = selectedEvents.has(event.id)
    const isExpanded = expandedEvents.has(event.id)
    const isFocused = focusedEventId === event.id
    
    // Custom renderer
    if (eventRenderer) {
      return eventRenderer(event, index)
    }
    
    // Check if event is a range event
    const isRangeEvent = 'endDate' in event
    const isNestedEvent = 'subEvents' in event
    const isMilestoneEvent = 'milestone' in event
    
    const eventContent = (
      <div
        ref={(el) => {
          if (el) eventRefs.current.set(event.id, el)
        }}
        tabIndex={keyboardNavigation ? 0 : -1}
        className={cn(
          "relative flex gap-4",
          compactMode ? "pb-2" : "pb-8",
          layout === 'alternating' && index % 2 === 0 && "flex-row-reverse",
          layout === 'horizontal' && "flex-col items-center",
          "cursor-pointer rounded-lg p-3 -m-1 transition-all duration-200",
          "hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring",
          isSelected && "bg-muted/70",
          isFocused && "ring-2 ring-ring",
          printMode && "print:break-inside-avoid"
        )}
        onClick={() => handleEventClick(event)}
        onFocus={() => setFocusedEventId(event.id)}
        role="button"
        aria-label={`Event: ${event.title}`}
        aria-expanded={isNestedEvent ? isExpanded : undefined}
      >
        {/* Timeline Node */}
        <div className={cn(
          "flex flex-col items-center relative",
          layout === 'horizontal' && "flex-row"
        )}>
          <motion.div
            className={cn(
              "flex items-center justify-center rounded-full border-2 bg-background z-10",
              isMilestoneEvent ? "w-10 h-10" : "w-8 h-8",
              eventColor,
              isSelected && "ring-2 ring-ring ring-offset-2"
            )}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.95 }}
          >
            {renderEventIcon(event)}
          </motion.div>
          
          {/* Connector */}
          {!isLast && renderConnector(event, events[index + 1], isLast)}
        </div>

        {/* Event Content */}
        <div className={cn(
          "flex-1 min-w-0",
          layout === 'alternating' && index % 2 === 0 && "text-right"
        )}>
          {/* Header */}
          <div className="flex items-start justify-between gap-2 mb-2">
            <div className="flex-1">
              <h4 className={cn(
                "font-semibold",
                compactMode ? "text-sm" : "text-base",
                isMilestoneEvent && "text-lg"
              )}>
                {event.title}
                {isMilestoneEvent && (
                  <Badge variant="secondary" className="ml-2 bg-purple-500">
                    Milestone
                  </Badge>
                )}
              </h4>
              
              {/* Date/Time display */}
              <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
                <Clock className="h-3 w-3" />
                {showRelativeTime ? (
                  <span>{getRelativeTime(event.date)}</span>
                ) : (
                  <span>{formatTime(event.date)}</span>
                )}
                {isRangeEvent && (
                  <>
                    <ArrowRight className="h-3 w-3" />
                    <span>{formatTime((event as RangeEvent).endDate)}</span>
                  </>
                )}
              </div>
            </div>

            {/* Actions */}
            {(editable || event.metadata?.externalLink) && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  {editable && (
                    <>
                      <DropdownMenuItem onClick={() => onEventEdit?.(event)}>
                        <Edit className="mr-2 h-4 w-4" />
                        Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onEventDelete?.(event)}>
                        <Trash className="mr-2 h-4 w-4" />
                        Delete
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                    </>
                  )}
                  <DropdownMenuItem onClick={() => navigator.clipboard.writeText(event.title)}>
                    <Copy className="mr-2 h-4 w-4" />
                    Copy
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Share className="mr-2 h-4 w-4" />
                    Share
                  </DropdownMenuItem>
                  {event.metadata?.externalLink && (
                    <DropdownMenuItem onClick={() => window.open(event.metadata?.externalLink, '_blank')}>
                      <ExternalLink className="mr-2 h-4 w-4" />
                      View Details
                    </DropdownMenuItem>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>

          {/* Description */}
          {event.description && (
            <p className={cn(
              "text-muted-foreground mb-2",
              compactMode ? "text-xs" : "text-sm"
            )}>
              {event.description}
            </p>
          )}

          {/* Milestone details */}
          {isMilestoneEvent && (event as MilestoneEvent).milestone && (
            <div className="bg-purple-50 dark:bg-purple-950/20 rounded-md p-3 mb-2">
              {(event as MilestoneEvent).milestone.target && (
                <div className="flex items-center gap-2 text-sm">
                  <Target className="h-4 w-4 text-purple-600" />
                  <span className="font-medium">Target:</span>
                  <span>{(event as MilestoneEvent).milestone.target}</span>
                </div>
              )}
              {(event as MilestoneEvent).milestone.achievement && (
                <div className="flex items-center gap-2 text-sm mt-1">
                  <TrendingUp className="h-4 w-4 text-purple-600" />
                  <span className="font-medium">Achievement:</span>
                  <span>{(event as MilestoneEvent).milestone.achievement}</span>
                </div>
              )}
            </div>
          )}

          {/* Progress bar for events with progress */}
          {event.metadata?.progress !== undefined && (
            <div className="mb-2">
              <div className="flex justify-between text-xs mb-1">
                <span>Progress</span>
                <span>{event.metadata.progress}%</span>
              </div>
              <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
                <motion.div
                  className="h-full bg-primary"
                  initial={{ width: 0 }}
                  animate={{ width: `${event.metadata.progress}%` }}
                  transition={{ duration: 0.5, ease: "easeOut" }}
                />
              </div>
            </div>
          )}

          {/* User info */}
          {showUserInfo && event.user && (
            <div className="flex items-center gap-2 mb-2">
              <MoonUIAvatarPro className="h-6 w-6">
                <MoonUIAvatarImagePro src={event.user.avatar} />
                <MoonUIAvatarFallbackPro className="text-xs">
                  {getInitials(event.user.name)}
                </MoonUIAvatarFallbackPro>
              </MoonUIAvatarPro>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{event.user.name}</span>
                {event.user.role && (
                  <span className="text-xs text-muted-foreground">{event.user.role}</span>
                )}
              </div>
            </div>
          )}

          {/* Metadata */}
          {showMetadata && event.metadata && (
            <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
              {event.metadata.duration && (
                <div className="flex items-center gap-1">
                  <Clock className="h-3 w-3" />
                  <span>{event.metadata.duration}</span>
                </div>
              )}
              {event.metadata.location && (
                <div className="flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  <span>{event.metadata.location}</span>
                </div>
              )}
              {event.metadata.comments !== undefined && event.metadata.comments > 0 && (
                <div className="flex items-center gap-1">
                  <MessageCircle className="h-3 w-3" />
                  <span>{event.metadata.comments}</span>
                </div>
              )}
              {event.metadata.attachments !== undefined && event.metadata.attachments > 0 && (
                <div className="flex items-center gap-1">
                  <Paperclip className="h-3 w-3" />
                  <span>{event.metadata.attachments}</span>
                </div>
              )}
              {event.metadata.priority && (
                <Badge 
                  variant={
                    event.metadata.priority === 'high' ? 'destructive' : 
                    event.metadata.priority === 'medium' ? 'outline' : 
                    'secondary'
                  }
                  className="text-xs"
                >
                  {event.metadata.priority}
                </Badge>
              )}
            </div>
          )}

          {/* Tags */}
          {event.metadata?.tags && event.metadata.tags.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-2">
              {event.metadata.tags.map((tag, tagIndex) => (
                <Badge key={tagIndex} variant="outline" className="text-xs">
                  {tag}
                </Badge>
              ))}
            </div>
          )}

          {/* Nested events */}
          {isNestedEvent && isExpanded && (event as NestedEvent).subEvents && (
            <div className="mt-3 ml-4 pl-4 border-l-2 border-muted">
              {(event as NestedEvent).subEvents!.map((subEvent, subIndex) => (
                <div key={subEvent.id} className="mb-2 last:mb-0">
                  <div className="flex items-start gap-2">
                    <div className={cn(
                      "w-2 h-2 rounded-full mt-1.5",
                      colorScheme[subEvent.type] || DEFAULT_COLORS[subEvent.type]
                    )} />
                    <div className="flex-1">
                      <h5 className="text-sm font-medium">{subEvent.title}</h5>
                      {subEvent.description && (
                        <p className="text-xs text-muted-foreground">{subEvent.description}</p>
                      )}
                      <span className="text-xs text-muted-foreground">
                        {getRelativeTime(subEvent.date)}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Expand/Collapse button for nested events */}
          {isNestedEvent && (event as NestedEvent).subEvents && (event as NestedEvent).subEvents!.length > 0 && (
            <Button
              variant="ghost"
              size="sm"
              className="mt-2 h-6 text-xs"
              onClick={(e) => {
                e.stopPropagation()
                setExpandedEvents(prev => {
                  const newSet = new Set(prev)
                  if (newSet.has(event.id)) {
                    newSet.delete(event.id)
                  } else {
                    newSet.add(event.id)
                  }
                  return newSet
                })
              }}
            >
              {isExpanded ? (
                <>
                  <ChevronDown className="mr-1 h-3 w-3" />
                  Hide {(event as NestedEvent).subEvents!.length} sub-events
                </>
              ) : (
                <>
                  <ChevronRight className="mr-1 h-3 w-3" />
                  Show {(event as NestedEvent).subEvents!.length} sub-events
                </>
              )}
            </Button>
          )}
        </div>
      </div>
    )

    if (draggable && onEventsReorder) {
      return (
        <Reorder.Item
          key={event.id}
          value={event}
          dragListener={false}
          dragControls={undefined}
        >
          {eventContent}
        </Reorder.Item>
      )
    }

    const variants = animation !== 'none' ? animationVariants[animation] : undefined

    return (
      <motion.div
        key={event.id}
        variants={variants}
        initial={variants?.initial}
        animate={variants?.animate}
        exit={variants?.exit}
        transition={{ duration: 0.3, delay: index * 0.05 }}
      >
        {eventContent}
      </motion.div>
    )
  }, [
    eventRenderer,
    colorScheme,
    selectedEvents,
    expandedEvents,
    focusedEventId,
    keyboardNavigation,
    layout,
    compactMode,
    printMode,
    handleEventClick,
    renderEventIcon,
    renderConnector,
    events,
    showRelativeTime,
    getRelativeTime,
    formatTime,
    editable,
    onEventEdit,
    onEventDelete,
    showUserInfo,
    getInitials,
    showMetadata,
    draggable,
    onEventsReorder,
    animation
  ])

  const renderGroupedEvents = useCallback(() => {
    const groups = groupEventsByDate(filteredAndSortedEvents)
    
    return Object.entries(groups).map(([dateGroup, groupEvents], groupIndex) => {
      const displayEvents = maxEventsPerGroup 
        ? groupEvents.slice(0, maxEventsPerGroup)
        : groupEvents
      const remainingCount = groupEvents.length - displayEvents.length

      return (
        <div key={dateGroup} className="mb-8">
          <div className={cn(
            "sticky top-0 z-20 bg-background/80 backdrop-blur-sm border-b p-3 mb-4 -mx-6 px-6",
            printMode && "print:relative print:bg-transparent"
          )}>
            <h3 className="font-semibold text-sm text-muted-foreground flex items-center justify-between">
              <span>{dateGroup}</span>
              <Badge variant="secondary" className="text-xs">
                {groupEvents.length} event{groupEvents.length !== 1 ? 's' : ''}
              </Badge>
            </h3>
          </div>
          
          <AnimatePresence mode="popLayout">
            {displayEvents.map((event, index) => 
              renderEvent(event, index, index === displayEvents.length - 1)
            )}
          </AnimatePresence>
          
          {remainingCount > 0 && (
            <Button
              variant="ghost"
              size="sm"
              className="w-full mt-2"
              onClick={() => {
                // In a real implementation, this would expand the group
                console.log(`Show ${remainingCount} more events`)
              }}
            >
              Show {remainingCount} more event{remainingCount !== 1 ? 's' : ''}
            </Button>
          )}
        </div>
      )
    })
  }, [groupEventsByDate, filteredAndSortedEvents, maxEventsPerGroup, printMode, renderEvent])

  const renderTimeline = () => {
    const content = groupBy !== 'none' 
      ? renderGroupedEvents()
      : (
        <AnimatePresence mode="popLayout">
          {draggable && onEventsReorder ? (
            <Reorder.Group
              axis={layout === 'horizontal' ? 'x' : 'y'}
              values={filteredAndSortedEvents}
              onReorder={(newOrder) => {
                setEvents(newOrder)
                onEventsReorder(newOrder)
              }}
              className={cn(
                "space-y-0",
                layout === 'horizontal' && "flex overflow-x-auto gap-6 pb-4"
              )}
            >
              {filteredAndSortedEvents.map((event, index) => 
                renderEvent(event, index, index === filteredAndSortedEvents.length - 1)
              )}
            </Reorder.Group>
          ) : (
            <div className={cn(
              "space-y-0",
              layout === 'horizontal' && "flex overflow-x-auto gap-6 pb-4",
              layout === 'alternating' && "relative"
            )}>
              {filteredAndSortedEvents.map((event, index) => 
                renderEvent(event, index, index === filteredAndSortedEvents.length - 1)
              )}
            </div>
          )}
        </AnimatePresence>
      )

    if (virtualScroll && filteredAndSortedEvents.length > 50) {
      // In a real implementation, use a virtual scrolling library
      return (
        <div className="h-[600px] overflow-y-auto">
          {content}
        </div>
      )
    }

    return content
  }

  return (
    <Card 
      className={cn(
        timelineVariants({ theme }),
        "relative",
        printMode && "print:shadow-none print:border-0",
        className
      )}
      ref={timelineRef}
      role="region"
      aria-label={ariaLabel}
      {...props}
    >
        <CardHeader className={cn(
          compactMode && "pb-3",
          printMode && "print:pb-2"
        )}>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Clock className="h-5 w-5" />
                Timeline
              </CardTitle>
              <CardDescription>
                {filteredAndSortedEvents.length} event{filteredAndSortedEvents.length !== 1 ? 's' : ''} 
                {searchQuery && ` matching "${searchQuery}"`}
                {filterType !== 'all' && ` of type ${filterType}`}
              </CardDescription>
            </div>
            
            {/* Actions */}
            <div className="flex items-center gap-2">
              {showExport && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleExport}
                  className="print:hidden"
                >
                  <Download className="h-4 w-4" />
                </Button>
              )}
              <Button
                variant="ghost"
                size="sm"
                onClick={handlePrint}
                className="print:hidden"
              >
                <Printer className="h-4 w-4" />
              </Button>
            </div>
          </div>
          
          {/* Search and Filter */}
          {(showSearch || showFilter) && (
            <div className="flex gap-2 mt-4 print:hidden">
              {showSearch && (
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search events..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-9"
                  />
                </div>
              )}
              
              {showFilter && (
                <Select value={filterType} onValueChange={(value: any) => setFilterType(value)}>
                  <SelectTrigger className="w-[150px]">
                    <Filter className="mr-2 h-4 w-4" />
                    <SelectValue placeholder="Filter by type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="success">Success</SelectItem>
                    <SelectItem value="warning">Warning</SelectItem>
                    <SelectItem value="error">Error</SelectItem>
                    <SelectItem value="info">Info</SelectItem>
                    <SelectItem value="pending">Pending</SelectItem>
                    <SelectItem value="milestone">Milestone</SelectItem>
                  </SelectContent>
                </Select>
              )}
            </div>
          )}
        </CardHeader>
        
        <CardContent className={cn(
          compactMode ? "pt-2" : "pt-6",
          "relative"
        )}>
          {filteredAndSortedEvents.length > 0 ? (
            renderTimeline()
          ) : (
            <div className="text-center py-12">
              <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <p className="text-muted-foreground">
                {searchQuery || filterType !== 'all' 
                  ? "No events match your filters" 
                  : "No events to display"}
              </p>
            </div>
          )}
        </CardContent>
      </Card>
  )
}

export default Timeline