'use client'

import * as React from 'react'
import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
import {
  Calendar as CalendarIcon,
  ChevronLeft,
  ChevronRight,
  Plus,
  Search,
  Filter,
  MoreHorizontal,
  Download,
  Upload,
  Settings,
  X,
  Clock,
  MapPin,
  Users,
  Link,
  Tag,
  AlertCircle,
  Check,
  Edit,
  Trash,
  Copy,
  Share2,
  ExternalLink,
  Repeat,
  Bell,
  Video,
  Phone,
  Mail,
  FileText,
  FileSpreadsheet,
  FileCode,
  User,
  Briefcase,
  Home,
  Activity,
  Cake,
  Heart,
  Star,
  Flag,
  Bookmark,
  Archive,
  Send,
  Globe,
  Zap,
  Cpu,
  Cloud,
  Sun,
  Moon,
  Coffee,
  Gift,
  Plane,
  Car,
  Printer,
  Music,
  Camera,
  Book,
  Gamepad2,
  Tv,
  Bike,
  Train,
  Ship,
  Rocket,
  Mountain,
  Trees,
  CloudRain,
  CloudSnow,
  Sunrise,
  Sunset,
  Wind,
  Droplets,
  Thermometer,
  Eye,
  EyeOff,
  Lock,
  Unlock,
  Shield,
  ShieldAlert,
  ShieldCheck,
  CircleCheck,
  CircleX,
  CircleAlert,
  Info,
  HelpCircle,
  FileImage,
  FileVideo,
  FileAudio,
  FolderOpen,
  Database,
  Server,
  Monitor,
  Smartphone,
  Tablet,
  Watch,
  Headphones,
  Speaker,
  Mic,
  MicOff,
  Volume2,
  VolumeX,
  Wifi,
  WifiOff,
  Bluetooth,
  Battery,
  BatteryLow,
  Power,
  Plug,
  Lightbulb,
  Flashlight,
  Sparkles,
  Stars,
  Crown,
  Trophy,
  Medal,
  Award,
  Stamp,
  Ticket,
  Receipt,
  CreditCard,
  Wallet,
  DollarSign,
  Euro,
  IndianRupee,
  Bitcoin,
  Coins,
  PiggyBank,
  Calculator,
  BarChart,
  LineChart,
  PieChart,
  TrendingUp,
  TrendingDown,
  Target,
  Crosshair,
  Compass,
  Map,
  Navigation,
  Milestone,
  Signpost,
  Construction,
  Hammer,
  Wrench,
  Paintbrush,
  Palette as PaletteIcon,
  Layers,
  Layout,
  Grid,
  Columns,
  Rows,
  PanelLeft,
  PanelRight,
  PanelTop,
  PanelBottom,
  Sidebar,
  Terminal,
  Code,
  CodeSquare,
  Binary,
  Braces,
  Brackets,
  Hash,
  Bug,
  GitBranch,
  GitCommit,
  GitMerge,
  GitPullRequest,
  Github,
  Gitlab,
  Package,
  Box,
  Archive as ArchiveIcon,
  SendHorizontal,
  Reply,
  Forward,
  Undo,
  Redo,
  RotateCw,
  RotateCcw,
  Shuffle,
  Play,
  Pause,
  Square,
  Circle,
  Triangle,
  Hexagon,
  Diamond,
  Gem,
  Shapes,
  Brush,
  Eraser,
  Pen,
  PenTool,
  Pencil,
  Highlighter,
  Type,
  Bold,
  Italic,
  Underline,
  Strikethrough,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  Indent,
  Outdent,
  ListOrdered,
  ListTree,
  ListChecks,
  ListX,
  CheckSquare,
  Square as SquareIcon,
  CircleDot,
  CircleDashed,
  CircleEllipsis,
  CirclePlus,
  CircleMinus,
  CircleEqual,
  CircleSlash,
  CircleSlash2,
  CircleOff,
  CircleUser,
  CircleUserRound,
  CircleFadingPlus,
  UserPlus,
  UserMinus,
  UserCheck,
  UserX,
  UsersRound,
  Building,
  Building2,
  Warehouse,
  Factory,
  Store,
  ShoppingBag,
  Package2,
  Truck,
  Ship as ShipIcon,
  Anchor,
  Waves,
  Fish,
  Shell,
  Bug as BugIcon,
  Bird,
  GraduationCap,
  ClipboardList,
  ShoppingCart
} from 'lucide-react'
import { cn } from '../../lib/utils'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { Button } from '../ui/button'
import { Badge } from '../ui/badge'
import { Input } from '../ui/input'
import { Label } from '../ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import { Textarea } from '../ui/textarea'
import { Switch } from '../ui/switch'
import { Checkbox } from '../ui/checkbox'
import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
import { Separator } from '../ui/separator'
import { ScrollArea } from '../ui/scroll-area'
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '../ui/dropdown-menu'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
import { motion, AnimatePresence, LayoutGroup, useMotionValue, useTransform, animate } from 'framer-motion'
import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addWeeks, addMonths, addYears, subMonths, subYears, isSameMonth, isSameDay, isToday, isBefore, isAfter, differenceInDays, differenceInWeeks, differenceInMonths, parseISO, startOfDay, endOfDay, isWithinInterval, eachDayOfInterval, getDay, setHours, setMinutes, startOfYear, endOfYear, eachMonthOfInterval, getDaysInMonth, getWeek, startOfISOWeek, endOfISOWeek, addHours, subHours, isSameHour, differenceInHours, differenceInMinutes, addMinutes, subMinutes, isSameMinute, setSeconds, setMilliseconds, subDays, subWeeks } from 'date-fns'
// Removed react-beautiful-dnd imports - using HTML5 drag & drop instead
import { Calendar as CalendarBase } from '../ui/calendar'
import { HexColorPicker } from 'react-colorful'

// Types
export interface CalendarEvent {
  id: string
  title: string
  description?: string
  start: Date
  end: Date
  allDay?: boolean
  color?: string
  category?: string
  location?: string
  attendees?: Array<{
    id: string
    name: string
    email: string
    avatar?: string
    status?: 'accepted' | 'declined' | 'tentative' | 'pending'
  }>
  reminders?: Array<{
    type: 'email' | 'notification' | 'sms'
    before: number // minutes before event
  }>
  recurring?: {
    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom'
    interval: number
    endDate?: Date
    endAfter?: number // number of occurrences
    daysOfWeek?: number[] // 0-6 for weekly pattern
    dayOfMonth?: number // for monthly pattern
    monthOfYear?: number // for yearly pattern
    exceptions?: Date[] // dates to skip
  }
  status?: 'confirmed' | 'tentative' | 'cancelled'
  visibility?: 'public' | 'private' | 'confidential'
  priority?: 'low' | 'medium' | 'high'
  tags?: string[]
  attachments?: Array<{
    id: string
    name: string
    url: string
    type: string
    size: number
  }>
  meetingUrl?: string
  phoneNumber?: string
  reminder?: boolean
  reminderTime?: number
  notes?: string
  createdAt?: Date
  updatedAt?: Date
  createdBy?: string
  updatedBy?: string
}

export interface CalendarCategory {
  id: string
  name: string
  color: string
  icon?: React.ReactNode
}

export interface CalendarView {
  id: string
  name: string
  type: 'day' | 'week' | 'month' | 'year' | 'agenda' | 'custom'
  default?: boolean
  config?: any
}

export interface CalendarProProps {
  events?: CalendarEvent[]
  categories?: CalendarCategory[]
  views?: CalendarView[]
  defaultView?: string
  height?: string | number
  className?: string
  sidebarCollapsed?: boolean
  onSidebarToggle?: (collapsed: boolean) => void
  onEventClick?: (event: CalendarEvent, e: React.MouseEvent) => void
  onEventCreate?: (event: Partial<CalendarEvent>) => void
  onEventUpdate?: (event: CalendarEvent) => void
  onEventDelete?: (eventId: string) => void
  onEventDrop?: (eventId: string, start: Date, end: Date) => void
  onDateSelect?: (date: Date) => void
  onViewChange?: (viewId: string) => void
  allowEventCreation?: boolean
  allowEventDeletion?: boolean
  allowEventDragging?: boolean
  showWeekNumbers?: boolean
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  timeFormat?: '12h' | '24h'
  locale?: string
  workingHours?: { start: number; end: number }
  nonWorkingDays?: number[]
  holidays?: Array<{ date: Date; name: string }>
  customEventRenderer?: (event: CalendarEvent, view: string) => React.ReactNode
  customHeaderRenderer?: (date: Date, view: string) => React.ReactNode
  customCellRenderer?: (date: Date, events: CalendarEvent[], view: string) => React.ReactNode
  eventColors?: Record<string, string>
  onExport?: (format: 'ics' | 'csv' | 'json', events: CalendarEvent[]) => void
  onImport?: (file: File) => void
  integrations?: {
    google?: boolean
    outlook?: boolean
    apple?: boolean
  }
  theme?: 'light' | 'dark' | 'system'
}

// Default categories
const defaultCategories: CalendarCategory[] = [
  { id: 'personal', name: 'Personal', color: '#3b82f6', icon: <User className="h-4 w-4" /> },
  { id: 'work', name: 'Work', color: '#10b981', icon: <Briefcase className="h-4 w-4" /> },
  { id: 'meeting', name: 'Meeting', color: '#f59e0b', icon: <Users className="h-4 w-4" /> },
  { id: 'task', name: 'Task', color: '#8b5cf6', icon: <ClipboardList className="h-4 w-4" /> },
  { id: 'reminder', name: 'Reminder', color: '#ef4444', icon: <Bell className="h-4 w-4" /> },
  { id: 'holiday', name: 'Holiday', color: '#ec4899', icon: <CalendarIcon className="h-4 w-4" /> },
  { id: 'birthday', name: 'Birthday', color: '#f472b6', icon: <Cake className="h-4 w-4" /> },
  { id: 'other', name: 'Other', color: '#6b7280', icon: <Tag className="h-4 w-4" /> }
]

// Default views
const defaultViews: CalendarView[] = [
  { id: 'day', name: 'Day', type: 'day' },
  { id: 'week', name: 'Week', type: 'week', default: true },
  { id: 'month', name: 'Month', type: 'month' },
  { id: 'year', name: 'Year', type: 'year' },
  { id: 'agenda', name: 'Agenda', type: 'agenda' }
]

export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
  events = [],
  categories = defaultCategories,
  views = defaultViews,
  defaultView,
  height = '100vh',
  className,
  sidebarCollapsed: controlledSidebarCollapsed,
  onSidebarToggle,
  onEventClick,
  onEventCreate,
  onEventUpdate,
  onEventDelete,
  onEventDrop,
  onDateSelect,
  onViewChange,
  allowEventCreation = true,
  allowEventDeletion = true,
  allowEventDragging = true,
  showWeekNumbers = true,
  firstDayOfWeek = 1,
  timeFormat = '24h',
  locale = 'en-US',
  workingHours = { start: 9, end: 17 },
  nonWorkingDays = [0, 6],
  holidays = [],
  customEventRenderer,
  customHeaderRenderer,
  customCellRenderer,
  eventColors = {},
  onExport,
  onImport,
  integrations = {},
  theme = 'system',
  ...props
}, ref) => {
  // Drag state
  const [draggedEventId, setDraggedEventId] = useState<string | null>(null)
  const [dragOverInfo, setDragOverInfo] = useState<{ date: Date; hour?: number } | null>(null)
  const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false)
  const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed
  
  const setSidebarCollapsed = useCallback((collapsed: boolean) => {
    setInternalSidebarCollapsed(collapsed)
    onSidebarToggle?.(collapsed)
  }, [onSidebarToggle])
  
  const [currentDate, setCurrentDate] = useState(new Date())
  const [currentView, setCurrentView] = useState(() => {
    if (defaultView) {
      return defaultView
    }
    const defaultViewObj = views.find(v => v.default)
    return defaultViewObj ? defaultViewObj.id : views[0].id
  })
  
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)
  const [isCreating, setIsCreating] = useState(false)
  const [newEventStart, setNewEventStart] = useState<Date | null>(null)
  const [newEventEnd, setNewEventEnd] = useState<Date | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
  const [editingEvent, setEditingEvent] = useState<Partial<CalendarEvent>>({})
  const [isDragging, setIsDragging] = useState(false)
  const [draggedEvent, setDraggedEvent] = useState<CalendarEvent | null>(null)
  const [dropTarget, setDropTarget] = useState<{ date: Date; time?: string } | null>(null)
  
  const calendarRef = useRef<HTMLDivElement>(null)
  
  // Get current view config
  const currentViewConfig = useMemo(() => {
    return views.find(v => v.id === currentView) || views[0]
  }, [currentView, views])
  
  // Filter events based on search and categories
  const filteredEvents = useMemo(() => {
    return events.filter(event => {
      const matchesSearch = !searchQuery || 
        event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        event.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        event.location?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        event.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
      
      const matchesCategory = selectedCategories.length === 0 || 
        (event.category && selectedCategories.includes(event.category))
      
      return matchesSearch && matchesCategory
    })
  }, [events, searchQuery, selectedCategories])
  
  // Get events for current view
  const eventsInView = useMemo(() => {
    const viewType = currentViewConfig.type
    let start: Date
    let end: Date
    
    switch (viewType) {
      case 'day':
        start = startOfDay(currentDate)
        end = endOfDay(currentDate)
        break
      case 'week':
        start = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
        end = endOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
        break
      case 'month':
        start = startOfMonth(currentDate)
        end = endOfMonth(currentDate)
        break
      case 'year':
        start = startOfYear(currentDate)
        end = endOfYear(currentDate)
        break
      case 'agenda':
        start = startOfDay(currentDate)
        end = addDays(currentDate, 30)
        break
      default:
        start = startOfDay(currentDate)
        end = endOfDay(currentDate)
    }
    
    return filteredEvents.filter(event => {
      const eventStart = new Date(event.start)
      const eventEnd = new Date(event.end)
      return isWithinInterval(eventStart, { start, end }) ||
             isWithinInterval(eventEnd, { start, end }) ||
             (isBefore(eventStart, start) && isAfter(eventEnd, end))
    })
  }, [filteredEvents, currentDate, currentViewConfig, firstDayOfWeek])
  
  // Handle view change
  const handleViewChange = useCallback((viewId: string) => {
    setCurrentView(viewId)
    onViewChange?.(viewId)
  }, [onViewChange])
  
  // Handle date navigation
  const navigateDate = useCallback((direction: 'prev' | 'next') => {
    const viewType = currentViewConfig.type
    let newDate: Date
    
    switch (viewType) {
      case 'day':
        newDate = direction === 'prev' ? subDays(currentDate, 1) : addDays(currentDate, 1)
        break
      case 'week':
        newDate = direction === 'prev' ? subWeeks(currentDate, 1) : addWeeks(currentDate, 1)
        break
      case 'month':
        newDate = direction === 'prev' ? subMonths(currentDate, 1) : addMonths(currentDate, 1)
        break
      case 'year':
        newDate = direction === 'prev' ? subYears(currentDate, 1) : addYears(currentDate, 1)
        break
      default:
        newDate = currentDate
    }
    
    setCurrentDate(newDate)
  }, [currentDate, currentViewConfig])
  
  // Handle date selection
  const handleDateSelect = useCallback((date: Date) => {
    setSelectedDate(date)
    setCurrentDate(date)
    onDateSelect?.(date)
    
    if (allowEventCreation && currentViewConfig.type !== 'year') {
      setNewEventStart(date)
      setNewEventEnd(addHours(date, 1))
      setIsCreating(true)
      setIsEventDialogOpen(true)
    }
  }, [allowEventCreation, currentViewConfig, onDateSelect])
  
  // Handle event click
  const handleEventClick = useCallback((event: CalendarEvent, e: React.MouseEvent) => {
    e.stopPropagation()
    setSelectedEvent(event)
    setEditingEvent(event)
    setIsEventDialogOpen(true)
    setIsCreating(false)
    onEventClick?.(event, e)
  }, [onEventClick])
  
  // Handle event save
  const handleEventSave = useCallback(() => {
    if (isCreating && onEventCreate) {
      onEventCreate(editingEvent)
    } else if (selectedEvent && onEventUpdate) {
      onEventUpdate({ ...selectedEvent, ...editingEvent } as CalendarEvent)
    }
    
    setIsEventDialogOpen(false)
    setSelectedEvent(null)
    setEditingEvent({})
    setIsCreating(false)
    setNewEventStart(null)
    setNewEventEnd(null)
  }, [isCreating, selectedEvent, editingEvent, onEventCreate, onEventUpdate])
  
  // Handle event delete
  const handleEventDelete = useCallback(() => {
    if (selectedEvent && onEventDelete) {
      onEventDelete(selectedEvent.id)
      setIsEventDialogOpen(false)
      setSelectedEvent(null)
      setEditingEvent({})
    }
  }, [selectedEvent, onEventDelete])
  
  // Handle drag start
  const handleDragStart = useCallback((e: React.DragEvent, event: CalendarEvent) => {
    if (!allowEventDragging) return
    
    setDraggedEventId(event.id)
    setIsDragging(true)
    
    // Store event data in dataTransfer
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', event.id)
    
    // Create drag image with preserved dimensions
    const dragImage = e.currentTarget.cloneNode(true) as HTMLElement
    const originalRect = e.currentTarget.getBoundingClientRect()
    dragImage.style.opacity = '0.8'
    dragImage.style.position = 'absolute'
    dragImage.style.top = '-1000px'
    dragImage.style.width = `${originalRect.width}px`
    dragImage.style.height = `${originalRect.height}px`
    dragImage.style.boxSizing = 'border-box'
    document.body.appendChild(dragImage)
    e.dataTransfer.setDragImage(dragImage, e.nativeEvent.offsetX, e.nativeEvent.offsetY)
    setTimeout(() => document.body.removeChild(dragImage), 0)
  }, [allowEventDragging])
  
  // Handle drag over
  const handleDragOver = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
    setDragOverInfo({ date, hour })
  }, [])
  
  // Handle drag leave
  const handleDragLeave = useCallback((e: React.DragEvent) => {
    // Only clear if we're leaving the drop zone entirely
    const rect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX
    const y = e.clientY
    
    if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
      setDragOverInfo(null)
    }
  }, [])
  
  // Handle drop
  const handleDrop = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
    e.preventDefault()
    
    const eventId = e.dataTransfer.getData('text/plain')
    const draggedEvent = events.find(ev => ev.id === eventId)
    
    if (!draggedEvent || !onEventDrop) return
    
    // Calculate new start and end times
    let newStart: Date
    let newEnd: Date
    
    if (hour !== undefined) {
      // Dropped on a specific hour slot
      newStart = setHours(setMinutes(date, 0), hour)
    } else {
      // Dropped on a day (keep original time)
      const originalHours = draggedEvent.start.getHours()
      const originalMinutes = draggedEvent.start.getMinutes()
      newStart = setHours(setMinutes(date, originalMinutes), originalHours)
    }
    
    // Keep the same duration
    const duration = differenceInMinutes(draggedEvent.end, draggedEvent.start)
    newEnd = addMinutes(newStart, duration)
    
    // Update event
    onEventDrop(draggedEvent.id, newStart, newEnd)
    
    // Reset drag state
    setDraggedEventId(null)
    setDragOverInfo(null)
    setIsDragging(false)
  }, [events, onEventDrop])
  
  // Handle drag end (cleanup)
  const handleDragEnd = useCallback(() => {
    setDraggedEventId(null)
    setDragOverInfo(null)
    setIsDragging(false)
  }, [])
  
  // Export calendar
  const exportCalendar = useCallback((format: 'ics' | 'csv' | 'json') => {
    if (onExport) {
      onExport(format, eventsInView)
    } else {
      // Default export implementation
      const data = eventsInView
      let content: string
      let mimeType: string
      let filename: string
      
      switch (format) {
        case 'json':
          content = JSON.stringify(data, null, 2)
          mimeType = 'application/json'
          filename = 'calendar.json'
          break
        case 'csv':
          // Simple CSV export
          const headers = ['Title', 'Start', 'End', 'Location', 'Description']
          const rows = data.map(event => [
            event.title,
            event.start.toISOString(),
            event.end.toISOString(),
            event.location || '',
            event.description || ''
          ])
          content = [headers, ...rows].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n')
          mimeType = 'text/csv'
          filename = 'calendar.csv'
          break
        case 'ics':
          // Simple ICS export
          const icsEvents = data.map(event => {
            const start = event.start.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
            const end = event.end.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
            return `BEGIN:VEVENT
UID:${event.id}@calendar.app
DTSTART:${start}Z
DTEND:${end}Z
SUMMARY:${event.title}
${event.description ? `DESCRIPTION:${event.description}` : ''}
${event.location ? `LOCATION:${event.location}` : ''}
END:VEVENT`
          }).join('\n')
          
          content = `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Calendar App//EN
${icsEvents}
END:VCALENDAR`
          mimeType = 'text/calendar'
          filename = 'calendar.ics'
          break
        default:
          return
      }
      
      const blob = new Blob([content], { type: mimeType })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      link.click()
      URL.revokeObjectURL(url)
    }
  }, [eventsInView, onExport])
  
  // Render day view
  const renderDayView = () => {
    const hours = Array.from({ length: 24 }, (_, i) => i)
    const dayEvents = eventsInView.filter(event => 
      isSameDay(new Date(event.start), currentDate)
    )
    
    return (
      <div className="flex flex-1 overflow-hidden">
        <div className="flex-1 overflow-auto">
          <div className="min-h-full">
            {/* All day events */}
            <div 
              className={cn(
                "border-b p-2",
                dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
              )}
              onDragOver={(e) => handleDragOver(e, currentDate)}
              onDragLeave={handleDragLeave}
              onDrop={(e) => handleDrop(e, currentDate)}
            >
              <div className="text-xs text-muted-foreground mb-1">All Day</div>
              <div className="space-y-1">
                {dayEvents
                  .filter(event => event.allDay)
                  .map(event => (
                    <div
                      key={event.id}
                      draggable={allowEventDragging}
                      onDragStart={(e) => handleDragStart(e, event)}
                      onDragEnd={handleDragEnd}
                      className="p-2 rounded text-xs cursor-pointer hover:opacity-80"
                      style={{ 
                        backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                        color: '#ffffff',
                        opacity: draggedEventId === event.id ? 0.5 : 1
                      }}
                      onClick={(e) => handleEventClick(event, e)}
                    >
                      {event.title}
                    </div>
                  ))}
              </div>
            </div>
            
            {/* Time slots */}
            <div className="relative">
              {hours.map(hour => (
                <div key={hour} className="flex border-b" style={{ height: '60px' }}>
                  <div className="w-16 p-2 text-xs text-muted-foreground text-right">
                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
                  </div>
                  <div 
                    className={cn(
                      "flex-1 relative border-l cursor-pointer hover:bg-muted/20",
                      dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
                    )}
                    onDragOver={(e) => handleDragOver(e, currentDate, hour)}
                    onDragLeave={handleDragLeave}
                    onDrop={(e) => handleDrop(e, currentDate, hour)}
                    onClick={() => {
                      if (allowEventCreation) {
                        const clickedTime = setHours(setMinutes(currentDate, 0), hour)
                        setNewEventStart(clickedTime)
                        setNewEventEnd(addHours(clickedTime, 1))
                        setEditingEvent({
                          title: '',
                          start: clickedTime,
                          end: addHours(clickedTime, 1),
                          allDay: false
                        })
                        setIsCreating(true)
                        setIsEventDialogOpen(true)
                      }
                    }}
                  >
                    {/* Events in this hour */}
                    {dayEvents
                      .filter(event => {
                        if (event.allDay) return false
                        const eventHour = new Date(event.start).getHours()
                        return eventHour === hour
                      })
                      .map(event => {
                        const startMinutes = new Date(event.start).getMinutes()
                        const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
                        const height = (duration / 60) * 60
                        const top = (startMinutes / 60) * 60
                        
                        return (
                          <div
                            key={event.id}
                            draggable={allowEventDragging}
                            onDragStart={(e) => handleDragStart(e, event)}
                            onDragEnd={handleDragEnd}
                            className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                            style={{
                              top: `${top}px`,
                              height: `${height}px`,
                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                              color: '#ffffff',
                              zIndex: 10,
                              opacity: draggedEventId === event.id ? 0.5 : 1,
                              cursor: allowEventDragging ? 'move' : 'pointer'
                            }}
                            onClick={(e) => {
                              e.stopPropagation()
                              handleEventClick(event, e)
                            }}
                          >
                            <div className="font-medium">{event.title}</div>
                            <div className="text-xs opacity-80">
                              {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
                            </div>
                          </div>
                        )
                      })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }
  
  // Render week view
  const renderWeekView = () => {
    const weekStart = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
    const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
    const hours = Array.from({ length: 24 }, (_, i) => i)
    
    return (
      <div className="flex flex-1 overflow-hidden">
        <div className="flex-1 overflow-auto">
          <div className="min-h-full">
            {/* Header */}
            <div className="sticky top-0 z-20 bg-background border-b">
              <div className="flex">
                <div className="w-16" />
                {weekDays.map(day => (
                  <div 
                    key={day.toISOString()} 
                    className={cn(
                      "flex-1 p-2 text-center border-l",
                      isToday(day) && "bg-primary/10"
                    )}
                  >
                    <div className="text-xs text-muted-foreground">
                      {format(day, 'EEE')}
                    </div>
                    <div className={cn(
                      "text-lg font-medium",
                      isToday(day) && "text-primary"
                    )}>
                      {format(day, 'd')}
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            {/* Time grid */}
            <div className="relative">
              {hours.map(hour => (
                <div key={hour} className="flex" style={{ height: '60px' }}>
                  <div className="w-16 p-2 text-xs text-muted-foreground text-right border-b">
                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
                  </div>
                  {weekDays.map(day => {
                    const dayEvents = eventsInView.filter(event => 
                      isSameDay(new Date(event.start), day) && !event.allDay
                    )
                    return (
                      <div 
                        key={day.toISOString()} 
                        className={cn(
                          "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
                          isToday(day) && "bg-primary/5",
                          dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, day) && "bg-primary/10"
                        )}
                        onDragOver={(e) => handleDragOver(e, day, hour)}
                        onDragLeave={handleDragLeave}
                        onDrop={(e) => handleDrop(e, day, hour)}
                        onClick={() => {
                          if (allowEventCreation) {
                            const clickedTime = setHours(setMinutes(day, 0), hour)
                            setNewEventStart(clickedTime)
                            setNewEventEnd(addHours(clickedTime, 1))
                            setEditingEvent({
                              title: '',
                              start: clickedTime,
                              end: addHours(clickedTime, 1),
                              allDay: false
                            })
                            setIsCreating(true)
                            setIsEventDialogOpen(true)
                          }
                        }}
                      >
                        {dayEvents
                          .filter(event => {
                            const eventHour = new Date(event.start).getHours()
                            return eventHour === hour
                          })
                          .map(event => {
                            const startMinutes = new Date(event.start).getMinutes()
                            const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
                            const height = (duration / 60) * 60
                            const top = (startMinutes / 60) * 60
                            
                            return (
                              <div
                                key={event.id}
                                draggable={allowEventDragging}
                                onDragStart={(e) => handleDragStart(e, event)}
                                onDragEnd={handleDragEnd}
                                className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
                                style={{
                                  top: `${top}px`,
                                  height: `${height}px`,
                                  backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                                  color: '#ffffff',
                                  zIndex: 10,
                                  opacity: draggedEventId === event.id ? 0.5 : 1,
                                  cursor: allowEventDragging ? 'move' : 'pointer'
                                }}
                                onClick={(e) => {
                                  e.stopPropagation()
                                  handleEventClick(event, e)
                                }}
                              >
                                {event.title}
                              </div>
                            )
                          })}
                      </div>
                    )
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }
  
  // Render month view
  const renderMonthView = () => {
    const monthStart = startOfMonth(currentDate)
    const monthEnd = endOfMonth(currentDate)
    const startDate = startOfWeek(monthStart, { weekStartsOn: firstDayOfWeek })
    const endDate = endOfWeek(monthEnd, { weekStartsOn: firstDayOfWeek })
    const days = eachDayOfInterval({ start: startDate, end: endDate })
    const weeks = []
    
    for (let i = 0; i < days.length; i += 7) {
      weeks.push(days.slice(i, i + 7))
    }
    
    return (
      <div className="flex-1 p-4 overflow-auto">
        <div className="min-h-full">
          {/* Weekday headers */}
          <div className="grid grid-cols-7 gap-px mb-2">
            {weeks[0].map(day => (
              <div 
                key={day.toISOString()} 
                className="p-2 text-center text-sm font-medium text-muted-foreground"
              >
                {format(day, 'EEE')}
              </div>
            ))}
          </div>
          
          {/* Calendar grid */}
          {weeks.map((week, weekIndex) => (
            <div key={weekIndex} className="grid grid-cols-7 gap-px">
              {week.map(day => {
                const dayEvents = eventsInView.filter(event => 
                  isSameDay(new Date(event.start), day)
                )
                const isCurrentMonth = isSameMonth(day, currentDate)
                
                return (
                  <div
                    key={day.toISOString()}
                    className={cn(
                      "min-h-[100px] p-2 border rounded-lg cursor-pointer transition-colors",
                      !isCurrentMonth && "opacity-50",
                      isToday(day) && "bg-primary/10 border-primary",
                      "hover:bg-muted/50",
                      dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, day) && "bg-primary/20 border-primary"
                    )}
                    onDragOver={(e) => handleDragOver(e, day)}
                    onDragLeave={handleDragLeave}
                    onDrop={(e) => handleDrop(e, day)}
                    onClick={() => handleDateSelect(day)}
                  >
                    <div className={cn(
                      "text-sm font-medium mb-1",
                      isToday(day) && "text-primary"
                    )}>
                      {format(day, 'd')}
                    </div>
                    <div className="space-y-1">
                      {dayEvents.slice(0, 3).map(event => {
                        return (
                          <div
                            key={event.id}
                            draggable={allowEventDragging}
                            onDragStart={(e) => handleDragStart(e, event)}
                            onDragEnd={handleDragEnd}
                            className="text-xs p-1 rounded cursor-pointer truncate"
                            style={{
                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
                              color: '#ffffff',
                              opacity: draggedEventId === event.id ? 0.5 : 1,
                              cursor: allowEventDragging ? 'move' : 'pointer'
                            }}
                            onClick={(e) => {
                              e.stopPropagation()
                              handleEventClick(event, e)
                            }}
                          >
                            {event.allDay ? (
                              event.title
                            ) : (
                              <>
                                {format(new Date(event.start), 'HH:mm')} {event.title}
                              </>
                            )}
                          </div>
                        )
                      })}
                      {dayEvents.length > 3 && (
                        <div className="text-xs text-muted-foreground text-center">
                          +{dayEvents.length - 3} more
                        </div>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>
    )
  }
  
  const renderYearView = () => {
    const yearStart = startOfYear(currentDate)
    const yearEnd = endOfYear(currentDate)
    const months = eachMonthOfInterval({ start: yearStart, end: yearEnd })
    
    return (
      <div className="flex-1 overflow-auto p-4">
        <div className="grid grid-cols-3 gap-4">
          {months.map(month => {
            const monthEvents = eventsInView.filter(event => {
              const eventStart = new Date(event.start)
              return isSameMonth(eventStart, month)
            })
            
            return (
              <Card
                key={month.toISOString()}
                className="cursor-pointer hover:shadow-lg transition-shadow"
                onClick={() => {
                  setCurrentDate(month)
                  handleViewChange('month')
                }}
              >
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">
                    {format(month, 'MMMM')}
                  </CardTitle>
                  <CardDescription>
                    {monthEvents.length} events
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-7 gap-1 text-xs">
                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
                      <div key={`${day}-${index}`} className="text-center text-muted-foreground p-1">
                        {day}
                      </div>
                    ))}
                    {Array.from({ length: getDay(startOfMonth(month)) }, (_, i) => (
                      <div key={`empty-${i}`} />
                    ))}
                    {Array.from({ length: getDaysInMonth(month) }, (_, i) => {
                      const day = new Date(month.getFullYear(), month.getMonth(), i + 1)
                      const hasEvents = monthEvents.some(event => 
                        isSameDay(new Date(event.start), day)
                      )
                      
                      return (
                        <div
                          key={i}
                          className={cn(
                            "text-center p-1 rounded",
                            isToday(day) && "bg-primary text-primary-foreground",
                            hasEvents && !isToday(day) && "bg-primary/20 font-medium"
                          )}
                        >
                          {i + 1}
                        </div>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    )
  }
  
  const renderAgendaView = () => {
    const agendaDays = Array.from({ length: 30 }, (_, i) => addDays(currentDate, i))
    
    return (
      <div className="flex-1 overflow-auto p-4">
        <div className="space-y-4">
          {agendaDays.map(day => {
            const dayEvents = eventsInView.filter(event => 
              isSameDay(new Date(event.start), day)
            ).sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
            
            if (dayEvents.length === 0) return null
            
            return (
              <Card key={day.toISOString()}>
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">
                    {format(day, 'EEEE, MMMM d, yyyy')}
                  </CardTitle>
                  <CardDescription>
                    {dayEvents.length} events
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {dayEvents.map(event => (
                      <div
                        key={event.id}
                        className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 cursor-pointer"
                        onClick={(e) => handleEventClick(event, e)}
                      >
                        <div
                          className="w-1 h-full rounded"
                          style={{
                            backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6'
                          }}
                        />
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-medium">{event.title}</span>
                            {event.priority && (
                              <Badge variant={
                                event.priority === 'high' ? 'destructive' :
                                event.priority === 'medium' ? 'secondary' :
                                'secondary'
                              }>
                                {event.priority}
                              </Badge>
                            )}
                          </div>
                          <div className="text-sm text-muted-foreground">
                            {event.allDay ? (
                              'All day'
                            ) : (
                              <>
                                {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
                              </>
                            )}
                            {event.location && (
                              <span className="ml-2">
                                <MapPin className="inline h-3 w-3 mr-1" />
                                {event.location}
                              </span>
                            )}
                          </div>
                          {event.description && (
                            <p className="text-sm text-muted-foreground mt-1">
                              {event.description}
                            </p>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    )
  }
  
  return (
    <TooltipProvider>
      <div className={cn("flex h-full w-full bg-background", className)} style={{ height }}>
        {/* Sidebar */}
        <motion.div
          className={cn(
            "border-r bg-muted/30 flex flex-col flex-shrink-0",
            sidebarCollapsed ? "w-16" : "w-64"
          )}
          animate={{ width: sidebarCollapsed ? 64 : 256 }}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
        >
          {/* Mini Calendar */}
          {!sidebarCollapsed && (
            <div className="p-4">
              <CalendarBase
                mode="single"
                selected={currentDate}
                onSelect={(date) => {
                  if (date instanceof Date) {
                    handleDateSelect(date);
                  }
                }}
                className="rounded-md border"
              />
            </div>
          )}
          
          {/* Categories */}
          <div className="flex-1 overflow-auto p-4">
            {sidebarCollapsed ? (
              <div className="space-y-2">
                {categories.map(category => (
                  <Tooltip key={category.id}>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="w-full"
                        onClick={() => {
                          setSelectedCategories(prev =>
                            prev.includes(category.id)
                              ? prev.filter(c => c !== category.id)
                              : [...prev, category.id]
                          )
                        }}
                      >
                        <div
                          className="w-4 h-4 rounded"
                          style={{ backgroundColor: category.color }}
                        />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent side="right">
                      {category.name}
                    </TooltipContent>
                  </Tooltip>
                ))}
              </div>
            ) : (
              <div className="space-y-2">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="font-medium">Categories</h3>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setSelectedCategories([])}
                  >
                    Clear
                  </Button>
                </div>
                {categories.map(category => (
                  <div
                    key={category.id}
                    className={cn(
                      "flex items-center gap-2 p-2 rounded-lg cursor-pointer hover:bg-muted",
                      selectedCategories.includes(category.id) && "bg-muted"
                    )}
                    onClick={() => {
                      setSelectedCategories(prev =>
                        prev.includes(category.id)
                          ? prev.filter(c => c !== category.id)
                          : [...prev, category.id]
                      )
                    }}
                  >
                    <Checkbox
                      checked={selectedCategories.includes(category.id)}
                      onCheckedChange={() => {}}
                    />
                    <div
                      className="w-4 h-4 rounded"
                      style={{ backgroundColor: category.color }}
                    />
                    {category.icon}
                    <span className="text-sm">{category.name}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
          
          {/* Sidebar Toggle */}
          <div className="p-2 border-t">
            <Button
              variant="ghost"
              size="icon"
              className="w-full"
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
            >
              {sidebarCollapsed ? <PanelLeft /> : <PanelRight />}
            </Button>
          </div>
        </motion.div>
        
        {/* Main Content */}
        <div className="flex-1 flex flex-col overflow-hidden min-w-0">
          {/* Header */}
          <div className="border-b p-4 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => navigateDate('prev')}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => navigateDate('next')}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setCurrentDate(new Date())}
                >
                  Today
                </Button>
              </div>
              
              <h2 className="text-xl font-semibold">
                {format(currentDate, 
                  currentViewConfig.type === 'day' ? 'EEEE, MMMM d, yyyy' :
                  currentViewConfig.type === 'week' ? "'Week of' MMMM d, yyyy" :
                  currentViewConfig.type === 'month' ? 'MMMM yyyy' :
                  currentViewConfig.type === 'year' ? 'yyyy' :
                  'MMMM yyyy'
                )}
              </h2>
            </div>
            
            <div className="flex items-center gap-2">
              {/* Search */}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                <Input
                  placeholder="Search events..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9 w-64"
                />
              </div>
              
              {/* View Selector */}
              <Tabs value={currentView} onValueChange={handleViewChange}>
                <TabsList>
                  {views.map(view => (
                    <TabsTrigger key={view.id} value={view.id}>
                      {view.name}
                    </TabsTrigger>
                  ))}
                </TabsList>
              </Tabs>
              
              {/* Actions */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" size="icon">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {allowEventCreation && (
                    <DropdownMenuItem
                      onClick={() => {
                        setNewEventStart(new Date())
                        setNewEventEnd(addHours(new Date(), 1))
                        setIsCreating(true)
                        setIsEventDialogOpen(true)
                      }}
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      Create Event
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuSeparator />
                  <DropdownMenuSub>
                    <DropdownMenuSubTrigger>
                      <Download className="h-4 w-4 mr-2" />
                      Export
                    </DropdownMenuSubTrigger>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem onClick={() => exportCalendar('ics')}>
                        <FileText className="h-4 w-4 mr-2" />
                        Export as ICS
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => exportCalendar('csv')}>
                        <FileSpreadsheet className="h-4 w-4 mr-2" />
                        Export as CSV
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => exportCalendar('json')}>
                        <FileCode className="h-4 w-4 mr-2" />
                        Export as JSON
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>
                  <DropdownMenuItem>
                    <Printer className="h-4 w-4 mr-2" />
                    Print
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Share2 className="h-4 w-4 mr-2" />
                    Share
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Settings className="h-4 w-4 mr-2" />
                    Settings
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
          
          {/* Calendar View */}
          <LayoutGroup>
            <AnimatePresence mode="wait">
              <motion.div
                key={currentView}
                className="flex-1 overflow-hidden"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.2 }}
              >
                {currentViewConfig.type === 'day' && renderDayView()}
                {currentViewConfig.type === 'week' && renderWeekView()}
                {currentViewConfig.type === 'month' && renderMonthView()}
                {currentViewConfig.type === 'year' && renderYearView()}
                {currentViewConfig.type === 'agenda' && renderAgendaView()}
              </motion.div>
            </AnimatePresence>
          </LayoutGroup>
        </div>
        
        {/* Event Dialog */}
        <Dialog open={isEventDialogOpen} onOpenChange={setIsEventDialogOpen}>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>
                {isCreating ? 'Create Event' : 'Edit Event'}
              </DialogTitle>
              <DialogDescription>
                {isCreating ? 'Add a new event to your calendar' : 'Update event details'}
              </DialogDescription>
            </DialogHeader>
            
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title</Label>
                <Input
                  id="title"
                  value={editingEvent.title || ''}
                  onChange={(e) => setEditingEvent({ ...editingEvent, title: e.target.value })}
                  placeholder="Event title"
                />
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="start">Start</Label>
                  <Input
                    id="start"
                    type="datetime-local"
                    value={editingEvent.start ? format(editingEvent.start, "yyyy-MM-dd'T'HH:mm") : ''}
                    onChange={(e) => setEditingEvent({ ...editingEvent, start: new Date(e.target.value) })}
                  />
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="end">End</Label>
                  <Input
                    id="end"
                    type="datetime-local"
                    value={editingEvent.end ? format(editingEvent.end, "yyyy-MM-dd'T'HH:mm") : ''}
                    onChange={(e) => setEditingEvent({ ...editingEvent, end: new Date(e.target.value) })}
                  />
                </div>
              </div>
              
              <div className="flex items-center space-x-2">
                <Switch
                  id="allDay"
                  checked={editingEvent.allDay || false}
                  onCheckedChange={(checked) => setEditingEvent({ ...editingEvent, allDay: checked })}
                />
                <Label htmlFor="allDay">All day</Label>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="category">Category</Label>
                <Select
                  value={editingEvent.category || ''}
                  onValueChange={(value) => setEditingEvent({ ...editingEvent, category: value })}
                >
                  <SelectTrigger id="category">
                    <SelectValue placeholder="Select a category" />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map(category => (
                      <SelectItem key={category.id} value={category.id}>
                        <div className="flex items-center gap-2">
                          <div
                            className="w-3 h-3 rounded"
                            style={{ backgroundColor: category.color }}
                          />
                          {category.name}
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="location">Location</Label>
                <Input
                  id="location"
                  value={editingEvent.location || ''}
                  onChange={(e) => setEditingEvent({ ...editingEvent, location: e.target.value })}
                  placeholder="Event location"
                />
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={editingEvent.description || ''}
                  onChange={(e) => setEditingEvent({ ...editingEvent, description: e.target.value })}
                  placeholder="Event description"
                />
              </div>
              
              <div className="space-y-2">
                <Label>Priority</Label>
                <RadioGroup
                  value={editingEvent.priority || 'medium'}
                  onValueChange={(value) => setEditingEvent({ ...editingEvent, priority: value as any })}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="low" id="low" />
                    <Label htmlFor="low">Low</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="medium" id="medium" />
                    <Label htmlFor="medium">Medium</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="high" id="high" />
                    <Label htmlFor="high">High</Label>
                  </div>
                </RadioGroup>
              </div>
            </div>
            
            <DialogFooter>
              {!isCreating && allowEventDeletion && (
                <Button
                  variant="destructive"
                  onClick={handleEventDelete}
                >
                  Delete
                </Button>
              )}
              <Button
                variant="outline"
                onClick={() => {
                  setIsEventDialogOpen(false)
                  setEditingEvent({})
                  setSelectedEvent(null)
                  setIsCreating(false)
                }}
              >
                Cancel
              </Button>
              <Button onClick={handleEventSave}>
                {isCreating ? 'Create' : 'Save'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </TooltipProvider>
  )
})

CalendarPro.displayName = 'CalendarPro'

export default CalendarPro