"use client"

import React from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { Button } from '../ui/button'
import { MoonUIBadgePro as Badge } from '../ui/badge'
import { Input } from '../ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
import { 
  ChevronLeft, 
  ChevronRight,
  Calendar as CalendarIcon,
  Plus,
  Edit,
  Trash2,
  Clock,
  MapPin,
  User,
  Lock,
  Sparkles,
  Search,
  Filter,
  Download,
  Upload,
  Grid3X3,
  List,
  CalendarDays,
  Repeat,
  Bell,
  ChevronDown,
  MoreHorizontal,
  Tag,
  Users,
  Video,
  Phone,
  Globe,
  Zap,
  Sun,
  Moon,
  Palette
} from 'lucide-react'
import { cn } from '../../lib/utils'
import { EventDialog } from './event-dialog'
import { motion, AnimatePresence } from 'framer-motion'

export interface CalendarEvent {
  id: string
  title: string
  description?: string
  date: Date
  startTime?: string
  endTime?: string
  location?: string
  attendees?: string[]
  color?: string
  type?: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
  recurring?: {
    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly'
    interval: number
    endDate?: Date
    daysOfWeek?: number[] // For weekly pattern
    dayOfMonth?: number // For monthly pattern
  }
  reminder?: {
    type: 'email' | 'notification' | 'sms'
    before: number // minutes before event
  }
  priority?: 'low' | 'medium' | 'high'
  status?: 'confirmed' | 'tentative' | 'cancelled'
  attachments?: string[]
  tags?: string[]
  isAllDay?: boolean
  isPrivate?: boolean
  meetingLink?: string
  phoneNumber?: string
  timeZone?: string
}

interface CalendarProps {
  events?: CalendarEvent[]
  onEventClick?: (event: CalendarEvent) => void
  onEventAdd?: (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => void
  onEventEdit?: (eventData: Omit<CalendarEvent, 'id'> & { id: string }) => void
  onEventDelete?: (eventId: string) => void
  onDateChange?: (date: Date) => void
  onViewChange?: (view: 'month' | 'week' | 'day' | 'year' | 'agenda') => void
  onEventDrop?: (event: CalendarEvent, newDate: Date) => void
  className?: string
  showWeekends?: boolean
  showEventDetails?: boolean
  disabled?: boolean
  minDate?: Date
  maxDate?: Date
  highlightToday?: boolean
  height?: number
  defaultView?: 'month' | 'week' | 'day' | 'year' | 'agenda'
  enableDragDrop?: boolean
  enableSearch?: boolean
  enableFilters?: boolean
  enableExport?: boolean
  enableImport?: boolean
  enableRecurringEvents?: boolean
  enableReminders?: boolean
  eventCategories?: Array<{ value: string; label: string; color: string }>
  workingHours?: { start: string; end: string }
  holidays?: Array<{ date: Date; name: string }>
  locale?: string
  timeFormat?: '12h' | '24h'
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  theme?: 'light' | 'dark' | 'auto' | 'custom'
  customTheme?: {
    primary: string
    secondary: string
    accent: string
    background: string
    foreground: string
  }
  compactMode?: boolean
  // For NPM package usage - allows external control of pro access
  showProUpgrade?: boolean
}

const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const MONTHS = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
]

const EVENT_COLORS = {
  meeting: 'bg-blue-500',
  task: 'bg-green-500',
  reminder: 'bg-yellow-500',
  event: 'bg-purple-500',
  birthday: 'bg-pink-500',
  holiday: 'bg-orange-500',
  conference: 'bg-indigo-500'
}

const PRIORITY_COLORS = {
  low: 'border-l-4 border-l-muted-foreground',
  medium: 'border-l-4 border-l-yellow-500',
  high: 'border-l-4 border-l-red-500'
}

const STATUS_STYLES = {
  confirmed: '',
  tentative: 'opacity-70 border-dashed',
  cancelled: 'opacity-50 line-through'
}

export function Calendar({
  events = [],
  onEventClick,
  onEventAdd,
  onEventEdit,
  onEventDelete,
  onDateChange,
  onViewChange,
  onEventDrop,
  className,
  showWeekends = true,
  showEventDetails = true,
  disabled = false,
  minDate,
  maxDate,
  highlightToday = true,
  height,
  defaultView = 'month',
  enableDragDrop = true,
  enableSearch = true,
  enableFilters = true,
  enableExport = true,
  enableImport = false,
  enableRecurringEvents = true,
  enableReminders = true,
  eventCategories,
  workingHours = { start: '09:00', end: '18:00' },
  holidays = [],
  locale = 'en-US',
  timeFormat = '12h',
  firstDayOfWeek = 0,
  theme = 'auto',
  customTheme,
  compactMode = false,
  showProUpgrade = false
}: CalendarProps) {
  // For NPM package usage, show upgrade prompt if specified
  if (showProUpgrade) {
    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">
                Calendar 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>
    )
  }

  const [currentDate, setCurrentDate] = React.useState(new Date())
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)
  const [view, setView] = React.useState<'month' | 'week' | 'day' | 'year' | 'agenda'>(defaultView)
  const [eventDialogOpen, setEventDialogOpen] = React.useState(false)
  const [eventDialogMode, setEventDialogMode] = React.useState<'create' | 'edit'>('create')
  const [selectedEvent, setSelectedEvent] = React.useState<CalendarEvent | null>(null)
  const [draggedEvent, setDraggedEvent] = React.useState<CalendarEvent | null>(null)
  const [dragTargetDate, setDragTargetDate] = React.useState<Date | null>(null)
  const [searchQuery, setSearchQuery] = React.useState('')
  const [filterType, setFilterType] = React.useState<string>('all')
  const [filterPriority, setFilterPriority] = React.useState<string>('all')
  const [showFiltersPanel, setShowFiltersPanel] = React.useState(false)
  const [selectedTags, setSelectedTags] = React.useState<string[]>([])
  const [miniCalendarDate, setMiniCalendarDate] = React.useState(new Date())

  const today = new Date()
  const currentMonth = currentDate.getMonth()
  const currentYear = currentDate.getFullYear()

  const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
  const startDate = new Date(firstDayOfMonth)
  
  // Adjust start date based on firstDayOfWeek setting
  const daysToSubtract = (startDate.getDay() - firstDayOfWeek + 7) % 7
  startDate.setDate(startDate.getDate() - daysToSubtract)

  const endDate = new Date(lastDayOfMonth)
  const daysToAdd = (6 - endDate.getDay() + firstDayOfWeek) % 7
  endDate.setDate(endDate.getDate() + daysToAdd)

  const calendarDays = []
  const currentDateIterator = new Date(startDate)

  while (currentDateIterator <= endDate) {
    calendarDays.push(new Date(currentDateIterator))
    currentDateIterator.setDate(currentDateIterator.getDate() + 1)
  }

  // Get all unique tags from events
  const allTags = React.useMemo(() => {
    const tags = new Set<string>()
    events.forEach(event => {
      event.tags?.forEach(tag => tags.add(tag))
    })
    return Array.from(tags)
  }, [events])

  // Filter events based on search and filters
  const filteredEvents = React.useMemo(() => {
    return events.filter(event => {
      // Search filter
      if (searchQuery && !event.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
          !event.description?.toLowerCase().includes(searchQuery.toLowerCase())) {
        return false
      }
      
      // Type filter
      if (filterType !== 'all' && event.type !== filterType) {
        return false
      }
      
      // Priority filter
      if (filterPriority !== 'all' && event.priority !== filterPriority) {
        return false
      }
      
      // Tags filter
      if (selectedTags.length > 0 && (!event.tags || !event.tags.some(tag => selectedTags.includes(tag)))) {
        return false
      }
      
      return true
    })
  }, [events, searchQuery, filterType, filterPriority, selectedTags])

  const getEventsForDate = (date: Date) => {
    return filteredEvents.filter(event => {
      const eventDate = new Date(event.date)
      
      // Check for recurring events
      if (event.recurring) {
        return isDateInRecurringPattern(date, event)
      }
      
      return eventDate.toDateString() === date.toDateString()
    })
  }

  const isDateInRecurringPattern = (date: Date, event: CalendarEvent): boolean => {
    if (!event.recurring) return false
    
    const eventDate = new Date(event.date)
    const daysDiff = Math.floor((date.getTime() - eventDate.getTime()) / (1000 * 60 * 60 * 24))
    
    if (daysDiff < 0) return false
    if (event.recurring.endDate && date > event.recurring.endDate) return false
    
    switch (event.recurring.pattern) {
      case 'daily':
        return daysDiff % event.recurring.interval === 0
      case 'weekly':
        if (daysDiff % (event.recurring.interval * 7) !== 0) return false
        if (event.recurring.daysOfWeek) {
          return event.recurring.daysOfWeek.includes(date.getDay())
        }
        return date.getDay() === eventDate.getDay()
      case 'monthly':
        const monthsDiff = (date.getFullYear() - eventDate.getFullYear()) * 12 + 
                          (date.getMonth() - eventDate.getMonth())
        if (monthsDiff % event.recurring.interval !== 0) return false
        if (event.recurring.dayOfMonth) {
          return date.getDate() === event.recurring.dayOfMonth
        }
        return date.getDate() === eventDate.getDate()
      case 'yearly':
        const yearsDiff = date.getFullYear() - eventDate.getFullYear()
        if (yearsDiff % event.recurring.interval !== 0) return false
        return date.getMonth() === eventDate.getMonth() && 
               date.getDate() === eventDate.getDate()
      default:
        return false
    }
  }

  const isToday = (date: Date) => {
    return date.toDateString() === today.toDateString()
  }

  const isCurrentMonth = (date: Date) => {
    return date.getMonth() === currentMonth
  }

  const isSelected = (date: Date) => {
    return selectedDate && date.toDateString() === selectedDate.toDateString()
  }

  const isDisabled = (date: Date) => {
    if (disabled) return true
    if (minDate && date < minDate) return true
    if (maxDate && date > maxDate) return true
    return false
  }

  const navigateMonth = (direction: 'prev' | 'next') => {
    const newDate = new Date(currentDate)
    if (direction === 'prev') {
      newDate.setMonth(currentMonth - 1)
    } else {
      newDate.setMonth(currentMonth + 1)
    }
    setCurrentDate(newDate)
    onDateChange?.(newDate)
  }

  const changeView = (newView: 'month' | 'week' | 'day' | 'year' | 'agenda') => {
    setView(newView)
    onViewChange?.(newView)
  }

  const exportCalendar = () => {
    // Create iCal format
    const icalContent = generateICalContent(filteredEvents)
    const blob = new Blob([icalContent], { type: 'text/calendar' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'calendar.ics'
    a.click()
    URL.revokeObjectURL(url)
  }

  const generateICalContent = (events: CalendarEvent[]): string => {
    let content = 'BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-//MoonUI//Calendar//EN\r\n'
    
    events.forEach(event => {
      content += 'BEGIN:VEVENT\r\n'
      content += `UID:${event.id}@moonui.com\r\n`
      content += `DTSTART:${formatDateToICS(event.date, event.startTime)}\r\n`
      content += `DTEND:${formatDateToICS(event.date, event.endTime || event.startTime)}\r\n`
      content += `SUMMARY:${event.title}\r\n`
      if (event.description) content += `DESCRIPTION:${event.description}\r\n`
      if (event.location) content += `LOCATION:${event.location}\r\n`
      content += 'END:VEVENT\r\n'
    })
    
    content += 'END:VCALENDAR\r\n'
    return content
  }

  const formatDateToICS = (date: Date, time?: string): string => {
    const d = new Date(date)
    if (time) {
      const [hours, minutes] = time.split(':')
      d.setHours(parseInt(hours), parseInt(minutes))
    }
    return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z'
  }

  const handleDateClick = (date: Date) => {
    if (isDisabled(date)) return
    
    setSelectedDate(date)
    const dateEvents = getEventsForDate(date)
    
    if (dateEvents.length === 0) {
      // Open dialog for creating new event
      setEventDialogMode('create')
      setSelectedEvent(null)
      setEventDialogOpen(true)
    } else if (dateEvents.length === 1) {
      onEventClick?.(dateEvents[0])
    }
  }

  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
    e.stopPropagation()
    onEventClick?.(event)
  }

  const handleEventDragStart = (event: CalendarEvent, e: React.DragEvent) => {
    setDraggedEvent(event)
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', event.id)
    
    // Add visual feedback
    const target = e.target as HTMLElement
    target.style.opacity = '0.5'
  }

  const handleEventDragEnd = (e: React.DragEvent) => {
    setDraggedEvent(null)
    setDragTargetDate(null)
    
    // Remove visual feedback
    const target = e.target as HTMLElement
    target.style.opacity = '1'
  }

  const handleDateDragOver = (date: Date, e: React.DragEvent) => {
    if (isDisabled(date) || !draggedEvent) return
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
    setDragTargetDate(date)
  }

  const handleDateDrop = (date: Date, e: React.DragEvent) => {
    e.preventDefault()
    
    if (!draggedEvent || isDisabled(date)) return
    
    // Only move if it's a different date
    if (draggedEvent.date.toDateString() !== date.toDateString()) {
      const updatedEvent = {
        ...draggedEvent,
        date: date
      }
      
      onEventEdit?.(updatedEvent)
    }
    
    setDraggedEvent(null)
    setDragTargetDate(null)
  }

  const handleEventEdit = (event: CalendarEvent, e: React.MouseEvent) => {
    e.stopPropagation()
    setEventDialogMode('edit')
    setSelectedEvent(event)
    setEventDialogOpen(true)
  }

  const handleEventDelete = (event: CalendarEvent, e: React.MouseEvent) => {
    e.stopPropagation()
    onEventDelete?.(event.id)
  }

  const handleEventSave = (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => {
    if (eventDialogMode === 'create') {
      onEventAdd?.(eventData)
    } else if (eventDialogMode === 'edit' && eventData.id) {
      onEventEdit?.(eventData as Omit<CalendarEvent, 'id'> & { id: string })
    }
  }

  const handleEventDialogDelete = (eventId: string) => {
    onEventDelete?.(eventId)
  }

  const goToToday = () => {
    const today = new Date()
    setCurrentDate(today)
    setSelectedDate(today)
    onDateChange?.(today)
  }

  const isHoliday = (date: Date) => {
    return holidays.some(holiday => {
      const holidayDate = new Date(holiday.date)
      return holidayDate.toDateString() === date.toDateString()
    })
  }

  const getHolidayName = (date: Date) => {
    const holiday = holidays.find(h => {
      const holidayDate = new Date(h.date)
      return holidayDate.toDateString() === date.toDateString()
    })
    return holiday?.name
  }

  const formatTime = (time?: string): string => {
    if (!time) return ''
    if (timeFormat === '24h') return time
    
    const [hours, minutes] = time.split(':')
    const h = parseInt(hours)
    const period = h >= 12 ? 'PM' : 'AM'
    const displayHours = h === 0 ? 12 : h > 12 ? h - 12 : h
    return `${displayHours}:${minutes} ${period}`
  }

  const filteredDays = showWeekends ? calendarDays : calendarDays.filter(day => {
    const dayOfWeek = day.getDay()
    return dayOfWeek !== 0 && dayOfWeek !== 6
  })

  // Reorder days of week based on firstDayOfWeek setting
  const orderedDaysOfWeek = [...DAYS_OF_WEEK.slice(firstDayOfWeek), ...DAYS_OF_WEEK.slice(0, firstDayOfWeek)]
  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_, index) => {
    const actualDay = (index + firstDayOfWeek) % 7
    return actualDay !== 0 && actualDay !== 6
  })

  return (
    <>
      <Card className={cn("w-full max-w-full overflow-hidden", className)} style={{ height: height ? `${height}px` : undefined }}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <CalendarIcon className="h-5 w-5" />
              Calendar
            </CardTitle>
            <CardDescription>
              {MONTHS[currentMonth]} {currentYear}
            </CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={goToToday}>
              Today
            </Button>
            <Button 
              variant="outline" 
              size="sm" 
              onClick={() => navigateMonth('prev')}
              disabled={disabled}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button 
              variant="outline" 
              size="sm" 
              onClick={() => navigateMonth('next')}
              disabled={disabled}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* Calendar View */}
          {view === 'month' && (
            <div className="grid grid-cols-7 gap-1 w-full">
              {/* Day Headers */}
              {visibleDaysOfWeek.map((day) => (
                <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground">
                  {day}
                </div>
              ))}

              {/* Calendar Days */}
              {filteredDays.map((date, index) => {
              const dayEvents = getEventsForDate(date)
              const isCurrentMonthDate = isCurrentMonth(date)
              const isTodayDate = isToday(date)
              const isSelectedDate = isSelected(date)
              const isDisabledDate = isDisabled(date)

              return (
                <div
                  key={index}
                  className={cn(
                    "min-h-[80px] p-1 border border-border/50 cursor-pointer hover:bg-muted/50 transition-colors text-xs flex flex-col",
                    !isCurrentMonthDate && "text-muted-foreground bg-muted/20",
                    isTodayDate && highlightToday && "bg-primary/10 border-primary/50",
                    isSelectedDate && "bg-primary/20 border-primary",
                    isDisabledDate && "cursor-not-allowed opacity-50",
                    dragTargetDate && dragTargetDate.toDateString() === date.toDateString() && "bg-primary/30 border-primary"
                  )}
                  onClick={() => handleDateClick(date)}
                  onDragOver={(e) => handleDateDragOver(date, e)}
                  onDrop={(e) => handleDateDrop(date, e)}
                >
                  <div className="flex items-center justify-between mb-1">
                    <div className="flex flex-col">
                      <span className={cn(
                        "text-sm font-medium",
                        isTodayDate && "text-primary font-bold",
                        isHoliday(date) && "text-orange-600 dark:text-orange-400"
                      )}>
                        {date.getDate()}
                      </span>
                      {isHoliday(date) && (
                        <span className="text-[10px] text-orange-600 dark:text-orange-400 truncate">
                          {getHolidayName(date)}
                        </span>
                      )}
                    </div>
                    {dayEvents.length > 0 && (
                      <Badge variant="secondary" className="text-xs px-1">
                        {dayEvents.length}
                      </Badge>
                    )}
                  </div>

                  {/* Events */}
                  <div className="flex-1 space-y-1 overflow-hidden">
                    {dayEvents.slice(0, 3).map((event) => (
                      <div
                        key={event.id}
                        className={cn(
                          "text-xs p-1 mb-1 rounded text-white cursor-move group relative select-none block w-full truncate",
                          event.color || EVENT_COLORS[event.type || 'event'],
                          event.priority && PRIORITY_COLORS[event.priority],
                          event.status && STATUS_STYLES[event.status]
                        )}
                        draggable={!disabled && enableDragDrop}
                        onClick={(e) => handleEventClick(event, e)}
                        onDragStart={(e) => handleEventDragStart(event, e)}
                        onDragEnd={handleEventDragEnd}
                        style={{
                          backgroundColor: event.color || undefined
                        }}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-1 flex-1 min-w-0">
                            {event.isPrivate && <Lock className="h-3 w-3 flex-shrink-0" />}
                            {event.recurring && <Repeat className="h-3 w-3 flex-shrink-0" />}
                            <span className="truncate">{event.title}</span>
                          </div>
                          {showEventDetails && (
                            <div className="hidden group-hover:flex items-center gap-1 ml-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
                                onClick={(e) => handleEventEdit(event, e)}
                              >
                                <Edit className="h-3 w-3" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
                                onClick={(e) => handleEventDelete(event, e)}
                              >
                                <Trash2 className="h-3 w-3" />
                              </Button>
                            </div>
                          )}
                        </div>
                        {event.startTime && !compactMode && (
                          <div className="flex items-center gap-1 mt-1">
                            <Clock className="h-3 w-3" />
                            <span className="text-[10px]">{formatTime(event.startTime)}</span>
                          </div>
                        )}
                      </div>
                    ))}
                    {dayEvents.length > 3 && (
                      <div className="text-xs text-muted-foreground text-center">
                        +{dayEvents.length - 3} more
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
            </div>
          )}
          
          {/* Week View */}
          {view === 'week' && (
            <div className="space-y-4">
              <div className="grid grid-cols-8 gap-2">
                <div className="text-xs font-medium text-muted-foreground">Time</div>
                {Array.from({ length: 7 }, (_, i) => {
                  const date = new Date(currentDate)
                  date.setDate(date.getDate() - date.getDay() + i)
                  return (
                    <div key={i} className="text-center">
                      <div className="text-xs font-medium text-muted-foreground">
                        {DAYS_OF_WEEK[i]}
                      </div>
                      <div className={cn(
                        "text-sm font-medium",
                        isToday(date) && "text-primary"
                      )}>
                        {date.getDate()}
                      </div>
                    </div>
                  )
                })}
              </div>
              
              {/* Time slots */}
              <div className="border rounded-lg overflow-hidden">
                <div className="max-h-[500px] overflow-y-auto">
                  {Array.from({ length: 24 }, (_, hour) => (
                    <div key={hour} className="grid grid-cols-8 border-b last:border-b-0">
                      <div className="p-2 text-xs text-muted-foreground border-r">
                        {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
                      </div>
                      {Array.from({ length: 7 }, (_, dayIndex) => {
                        const date = new Date(currentDate)
                        date.setDate(date.getDate() - date.getDay() + dayIndex)
                        const hourEvents = getEventsForDate(date).filter(event => {
                          if (!event.startTime) return false
                          const eventHour = parseInt(event.startTime.split(':')[0])
                          return eventHour === hour
                        })
                        
                        return (
                          <div
                            key={dayIndex}
                            className={cn(
                              "p-1 min-h-[60px] border-r last:border-r-0 hover:bg-muted/50 transition-colors",
                              isToday(date) && "bg-primary/5"
                            )}
                            onClick={() => handleDateClick(date)}
                          >
                            {hourEvents.map(event => (
                              <div
                                key={event.id}
                                className={cn(
                                  "text-xs p-1 rounded text-white mb-1 cursor-pointer",
                                  event.color || EVENT_COLORS[event.type || 'event']
                                )}
                                onClick={(e) => handleEventClick(event, e)}
                              >
                                <div className="font-medium truncate">{event.title}</div>
                                {event.location && (
                                  <div className="text-[10px] opacity-80 truncate">{event.location}</div>
                                )}
                              </div>
                            ))}
                          </div>
                        )
                      })}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
          
          {/* Day View */}
          {view === 'day' && (
            <div className="space-y-4">
              <div className="text-center">
                <h3 className="text-lg font-semibold">
                  {currentDate.toLocaleDateString(locale, { 
                    weekday: 'long', 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                  })}
                </h3>
              </div>
              
              <div className="border rounded-lg overflow-hidden">
                <div className="max-h-[500px] overflow-y-auto">
                  {Array.from({ length: 24 }, (_, hour) => {
                    const hourEvents = getEventsForDate(currentDate).filter(event => {
                      if (!event.startTime) return false
                      const eventHour = parseInt(event.startTime.split(':')[0])
                      return eventHour === hour
                    })
                    
                    return (
                      <div key={hour} className="flex border-b last:border-b-0">
                        <div className="w-20 p-3 text-sm text-muted-foreground border-r">
                          {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
                        </div>
                        <div className="flex-1 p-2 min-h-[80px]">
                          {hourEvents.map(event => (
                            <div
                              key={event.id}
                              className={cn(
                                "p-2 rounded text-white mb-2 cursor-pointer",
                                event.color || EVENT_COLORS[event.type || 'event']
                              )}
                              onClick={(e) => handleEventClick(event, e)}
                            >
                              <div className="flex items-center justify-between">
                                <div>
                                  <div className="font-medium">{event.title}</div>
                                  {event.description && (
                                    <div className="text-sm opacity-80">{event.description}</div>
                                  )}
                                  <div className="flex items-center gap-3 text-xs mt-1">
                                    {event.startTime && (
                                      <div className="flex items-center gap-1">
                                        <Clock className="h-3 w-3" />
                                        {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
                                      </div>
                                    )}
                                    {event.location && (
                                      <div className="flex items-center gap-1">
                                        <MapPin className="h-3 w-3" />
                                        {event.location}
                                      </div>
                                    )}
                                  </div>
                                </div>
                                <div className="flex gap-1">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
                                    onClick={(e) => handleEventEdit(event, e)}
                                  >
                                    <Edit className="h-3 w-3" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
                                    onClick={(e) => handleEventDelete(event, e)}
                                  >
                                    <Trash2 className="h-3 w-3" />
                                  </Button>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>
          )}
          
          {/* Agenda View */}
          {view === 'agenda' && (
            <div className="space-y-4">
              <div className="max-h-[500px] overflow-y-auto space-y-4">
                {Array.from({ length: 30 }, (_, i) => {
                  const date = new Date(currentDate)
                  date.setDate(date.getDate() + i)
                  const dayEvents = getEventsForDate(date)
                  
                  if (dayEvents.length === 0) return null
                  
                  return (
                    <div key={i} className="border rounded-lg p-4">
                      <h4 className="font-medium mb-3">
                        {date.toLocaleDateString(locale, { 
                          weekday: 'long', 
                          year: 'numeric', 
                          month: 'long', 
                          day: 'numeric' 
                        })}
                      </h4>
                      <div className="space-y-2">
                        {dayEvents.map(event => (
                          <div
                            key={event.id}
                            className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer"
                            onClick={() => onEventClick?.(event)}
                          >
                            <div className={cn(
                              "w-3 h-3 rounded-full mt-1 flex-shrink-0",
                              event.color || EVENT_COLORS[event.type || 'event']
                            )} />
                            <div className="flex-1">
                              <div className="flex items-center justify-between">
                                <h5 className="font-medium">{event.title}</h5>
                                <div className="flex gap-1">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7 w-7 p-0"
                                    onClick={(e) => handleEventEdit(event, e)}
                                  >
                                    <Edit className="h-3 w-3" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7 w-7 p-0"
                                    onClick={(e) => handleEventDelete(event, e)}
                                  >
                                    <Trash2 className="h-3 w-3" />
                                  </Button>
                                </div>
                              </div>
                              {event.description && (
                                <p className="text-sm text-muted-foreground mt-1">
                                  {event.description}
                                </p>
                              )}
                              <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
                                {event.startTime && (
                                  <div className="flex items-center gap-1">
                                    <Clock className="h-3 w-3" />
                                    {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
                                  </div>
                                )}
                                {event.location && (
                                  <div className="flex items-center gap-1">
                                    <MapPin className="h-3 w-3" />
                                    {event.location}
                                  </div>
                                )}
                                {event.attendees && event.attendees.length > 0 && (
                                  <div className="flex items-center gap-1">
                                    <Users className="h-3 w-3" />
                                    {event.attendees.length} attendees
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )
                }).filter(Boolean)}
              </div>
            </div>
          )}

          {/* Selected Date Details */}
          {selectedDate && view === 'month' && (
            <div className="border rounded-lg p-4 bg-muted/50">
              <h4 className="font-medium mb-2">
                {selectedDate.toLocaleDateString('en-US', { 
                  weekday: 'long', 
                  year: 'numeric', 
                  month: 'long', 
                  day: 'numeric' 
                })}
              </h4>
              
              <div className="space-y-2">
                {getEventsForDate(selectedDate).map((event) => (
                  <div key={event.id} className="flex items-start gap-3 p-2 border rounded">
                    <div className={cn(
                      "w-3 h-3 rounded-full mt-1 flex-shrink-0",
                      event.color || EVENT_COLORS[event.type || 'event']
                    )} />
                    <div className="flex-1">
                      <div className="flex items-center justify-between">
                        <h5 className="font-medium">{event.title}</h5>
                        <div className="flex items-center gap-1">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={(e) => handleEventEdit(event, e)}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={(e) => handleEventDelete(event, e)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                      {event.description && (
                        <p className="text-sm text-muted-foreground mt-1">
                          {event.description}
                        </p>
                      )}
                      <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
                        {event.startTime && (
                          <div className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            <span>{event.startTime} - {event.endTime}</span>
                          </div>
                        )}
                        {event.location && (
                          <div className="flex items-center gap-1">
                            <MapPin className="h-3 w-3" />
                            <span>{event.location}</span>
                          </div>
                        )}
                        {event.attendees && event.attendees.length > 0 && (
                          <div className="flex items-center gap-1">
                            <User className="h-3 w-3" />
                            <span>{event.attendees.length} attendees</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
                
                {getEventsForDate(selectedDate).length === 0 && (
                  <div className="text-center py-4">
                    <p className="text-sm text-muted-foreground mb-2">
                      No events scheduled for this date
                    </p>
                    <Button 
                      variant="outline" 
                      size="sm" 
                      onClick={() => {
                        setEventDialogMode('create')
                        setSelectedEvent(null)
                        setEventDialogOpen(true)
                      }}
                    >
                      <Plus className="h-4 w-4 mr-1" />
                      Add Event
                    </Button>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>

    {/* Event Dialog */}
    <EventDialog
      open={eventDialogOpen}
      onOpenChange={setEventDialogOpen}
      event={selectedEvent}
      selectedDate={selectedDate}
      onSave={handleEventSave}
      onDelete={handleEventDialogDelete}
      mode={eventDialogMode}
    />
  </>
  )
}

export default Calendar