'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Clock, MapPin } from 'lucide-react'

interface Event {
  id: number
  title: string
  description: string
  date: string
  time: string
  location: string
  category: 'Community' | 'Public Hearing' | 'Cultural' | 'Workshop' | 'Council Meeting'
  attendees?: number
  isUrgent?: boolean
}

interface EventCalendarProps {
  events: Event[]
  view: 'year' | 'month' | 'week'
  onViewChange: (view: 'year' | 'month' | 'week') => void
}

const categoryColors = {
  Community: 'bg-blue-500',
  'Public Hearing': 'bg-red-500',
  Cultural: 'bg-purple-500',
  Workshop: 'bg-green-500',
  'Council Meeting': 'bg-orange-500',
}

const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const monthNamesShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const dayNamesFull = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

export default function EventCalendar({ events, view, onViewChange }: EventCalendarProps) {
  const [currentDate, setCurrentDate] = useState(new Date())
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)

  const getEventsForDate = (date: Date): Event[] => {
    const dateStr = date.toISOString().split('T')[0]
    return events.filter(event => event.date === dateStr)
  }

  const hasEvents = (date: Date): boolean => {
    return getEventsForDate(date).length > 0
  }

  const navigateDate = (direction: 'prev' | 'next') => {
    const newDate = new Date(currentDate)
    if (view === 'year') {
      newDate.setFullYear(newDate.getFullYear() + (direction === 'next' ? 1 : -1))
    } else if (view === 'month') {
      newDate.setMonth(newDate.getMonth() + (direction === 'next' ? 1 : -1))
    } else if (view === 'week') {
      newDate.setDate(newDate.getDate() + (direction === 'next' ? 7 : -7))
    }
    setCurrentDate(newDate)
  }

  const goToToday = () => {
    setCurrentDate(new Date())
    setSelectedDate(null)
  }

  // Year View
  const renderYearView = () => {
    const year = currentDate.getFullYear()
    const months = Array.from({ length: 12 }, (_, i) => {
      const monthDate = new Date(year, i, 1)
      return {
        month: i,
        name: monthNamesShort[i],
        days: new Date(year, i + 1, 0).getDate(),
        firstDay: new Date(year, i, 1).getDay(),
      }
    })

    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {months.map((month) => {
          const days = Array.from({ length: month.days }, (_, i) => {
            const day = i + 1
            const date = new Date(year, month.month, day)
            return { day, date, hasEvent: hasEvents(date) }
          })

          return (
            <div key={month.month} className="glass rounded-lg p-4">
              <h3 className="text-lg font-bold text-white mb-3 text-center">{monthNames[month.month]}</h3>
              <div className="grid grid-cols-7 gap-1 mb-2">
                {dayNames.map(day => (
                  <div key={day} className="text-xs text-white/60 text-center font-semibold py-1">
                    {day}
                  </div>
                ))}
              </div>
              <div className="grid grid-cols-7 gap-1">
                {Array.from({ length: month.firstDay }).map((_, i) => (
                  <div key={`empty-${i}`} className="aspect-square" />
                ))}
                {days.map(({ day, date, hasEvent }) => (
                  <motion.button
                    key={day}
                    onClick={() => setSelectedDate(date)}
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.95 }}
                    className={`aspect-square rounded text-sm font-medium transition-all relative ${
                      selectedDate?.toDateString() === date.toDateString()
                        ? 'bg-primary text-white'
                        : hasEvent
                        ? 'bg-primary/30 text-white hover:bg-primary/50'
                        : 'text-white/70 hover:bg-white/10'
                    }`}
                  >
                    {day}
                    {hasEvent && (
                      <motion.div
                        initial={{ scale: 0 }}
                        animate={{ scale: 1 }}
                        className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-primary-light rounded-full shadow-sm"
                      />
                    )}
                  </motion.button>
                ))}
              </div>
            </div>
          )
        })}
      </div>
    )
  }

  // Month View
  const renderMonthView = () => {
    const year = currentDate.getFullYear()
    const month = currentDate.getMonth()
    const firstDay = new Date(year, month, 1).getDay()
    const daysInMonth = new Date(year, month + 1, 0).getDate()
    const daysInPrevMonth = new Date(year, month, 0).getDate()

    const days = []
    // Previous month days
    for (let i = firstDay - 1; i >= 0; i--) {
      const date = new Date(year, month - 1, daysInPrevMonth - i)
      days.push({ date, isCurrentMonth: false, day: daysInPrevMonth - i })
    }
    // Current month days
    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(year, month, i)
      days.push({ date, isCurrentMonth: true, day: i })
    }
    // Next month days to fill the grid
    const remainingDays = 42 - days.length
    for (let i = 1; i <= remainingDays; i++) {
      const date = new Date(year, month + 1, i)
      days.push({ date, isCurrentMonth: false, day: i })
    }

    return (
      <div className="glass rounded-lg p-6">
        <div className="grid grid-cols-7 gap-2 mb-4">
          {dayNamesFull.map(day => (
            <div key={day} className="text-center text-white/80 font-semibold text-sm py-2">
              {day}
            </div>
          ))}
        </div>
        <div className="grid grid-cols-7 gap-2">
          {days.map(({ date, isCurrentMonth, day }, index) => {
            const dayEvents = getEventsForDate(date)
            const isToday = date.toDateString() === new Date().toDateString()
            const isSelected = selectedDate?.toDateString() === date.toDateString()

            return (
              <motion.div
                key={index}
                onClick={() => setSelectedDate(date)}
                className={`min-h-[100px] rounded-lg p-2 border-2 transition-all cursor-pointer ${
                  isSelected
                    ? 'border-primary bg-primary/20'
                    : isToday
                    ? 'border-primary/50 bg-primary/10'
                    : 'border-white/10 hover:border-white/20'
                } ${!isCurrentMonth ? 'opacity-40' : ''}`}
                whileHover={{ scale: 1.02 }}
              >
                <div className={`text-sm font-semibold mb-1 ${isToday ? 'text-primary-light' : 'text-white'}`}>
                  {day}
                </div>
                <div className="space-y-1">
                  {dayEvents.slice(0, 2).map(event => (
                    <motion.div
                      key={event.id}
                      initial={{ opacity: 0, scale: 0.9 }}
                      animate={{ opacity: 1, scale: 1 }}
                      className={`text-xs p-1 rounded ${categoryColors[event.category]} text-white truncate`}
                      title={event.title}
                    >
                      {event.title}
                    </motion.div>
                  ))}
                  {dayEvents.length > 2 && (
                    <div className="text-xs text-white/60">
                      +{dayEvents.length - 2} more
                    </div>
                  )}
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    )
  }

  // Week View
  const renderWeekView = () => {
    const startOfWeek = new Date(currentDate)
    const day = startOfWeek.getDay()
    startOfWeek.setDate(startOfWeek.getDate() - day)

    const weekDays = Array.from({ length: 7 }, (_, i) => {
      const date = new Date(startOfWeek)
      date.setDate(startOfWeek.getDate() + i)
      return date
    })

    return (
      <div className="glass rounded-lg p-6">
        <div className="grid grid-cols-7 gap-4">
          {weekDays.map((date, index) => {
            const dayEvents = getEventsForDate(date)
            const isToday = date.toDateString() === new Date().toDateString()
            const isSelected = selectedDate?.toDateString() === date.toDateString()

            return (
              <motion.div
                key={index}
                onClick={() => setSelectedDate(date)}
                className={`min-h-[400px] rounded-lg p-4 border-2 transition-all cursor-pointer ${
                  isSelected
                    ? 'border-primary bg-primary/20'
                    : isToday
                    ? 'border-primary/50 bg-primary/10'
                    : 'border-white/10 hover:border-white/20'
                }`}
                whileHover={{ scale: 1.02 }}
              >
                <div className="mb-4">
                  <div className="text-xs text-white/60 mb-1">{dayNamesFull[date.getDay()]}</div>
                  <div className={`text-2xl font-bold ${isToday ? 'text-primary-light' : 'text-white'}`}>
                    {date.getDate()}
                  </div>
                  <div className="text-xs text-white/60">{monthNames[date.getMonth()]}</div>
                </div>
                <div className="space-y-2">
                  {dayEvents.map(event => (
                    <motion.div
                      key={event.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className={`rounded-lg p-3 ${categoryColors[event.category]} text-white`}
                    >
                      <div className="font-semibold text-sm mb-1">{event.title}</div>
                      <div className="text-xs space-y-1">
                        <div className="flex items-center gap-1">
                          <Clock className="w-3 h-3" />
                          {event.time}
                        </div>
                        <div className="flex items-center gap-1">
                          <MapPin className="w-3 h-3" />
                          <span className="truncate">{event.location}</span>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                  {dayEvents.length === 0 && (
                    <div className="text-xs text-white/40 text-center py-8">No events</div>
                  )}
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Controls */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigateDate('prev')}
            className="p-2 glass rounded-lg text-white hover:bg-white/20 transition-colors"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button
            onClick={goToToday}
            className="px-4 py-2 glass rounded-lg text-white hover:bg-white/20 transition-colors text-sm font-semibold"
          >
            Today
          </button>
          <button
            onClick={() => navigateDate('next')}
            className="p-2 glass rounded-lg text-white hover:bg-white/20 transition-colors"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
          <div className="text-white font-bold text-lg">
            {view === 'year' && currentDate.getFullYear()}
            {view === 'month' && `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`}
            {view === 'week' && (() => {
              const startOfWeek = new Date(currentDate)
              startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay())
              const endOfWeek = new Date(startOfWeek)
              endOfWeek.setDate(endOfWeek.getDate() + 6)
              return `${startOfWeek.getDate()} ${monthNamesShort[startOfWeek.getMonth()]} - ${endOfWeek.getDate()} ${monthNamesShort[endOfWeek.getMonth()]} ${endOfWeek.getFullYear()}`
            })()}
          </div>
        </div>

        {/* View Toggle */}
        <div className="flex items-center gap-2 glass rounded-lg p-1">
          {(['year', 'month', 'week'] as const).map((v) => (
            <button
              key={v}
              onClick={() => onViewChange(v)}
              className={`px-4 py-2 rounded-md text-sm font-semibold transition-all capitalize ${
                view === v
                  ? 'bg-primary text-white'
                  : 'text-white/70 hover:text-white hover:bg-white/10'
              }`}
            >
              {v}
            </button>
          ))}
        </div>
      </div>

      {/* Calendar View */}
      <AnimatePresence mode="wait">
        <motion.div
          key={view}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3 }}
        >
          {view === 'year' && renderYearView()}
          {view === 'month' && renderMonthView()}
          {view === 'week' && renderWeekView()}
        </motion.div>
      </AnimatePresence>

      {/* Selected Date Events Detail */}
      {selectedDate && (
        <AnimatePresence>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            className="glass rounded-lg p-6"
          >
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold text-white">
                Events on {selectedDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
              </h3>
              <button
                onClick={() => setSelectedDate(null)}
                className="text-white/70 hover:text-white"
              >
                ×
              </button>
            </div>
            <div className="space-y-3">
              {getEventsForDate(selectedDate).length > 0 ? (
                getEventsForDate(selectedDate).map(event => (
                  <motion.div
                    key={event.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    className={`rounded-lg p-4 ${categoryColors[event.category]} text-white`}
                  >
                    <div className="flex items-start justify-between mb-2">
                      <h4 className="font-bold text-lg">{event.title}</h4>
                      {event.isUrgent && (
                        <span className="bg-red-600 px-2 py-1 rounded text-xs font-bold">URGENT</span>
                      )}
                    </div>
                    <p className="text-sm mb-3 opacity-90">{event.description}</p>
                    <div className="flex flex-wrap gap-4 text-xs">
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        {event.time}
                      </div>
                      <div className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" />
                        {event.location}
                      </div>
                      {event.attendees && (
                        <div className="flex items-center gap-1">
                          <CalendarIcon className="w-4 h-4" />
                          {event.attendees}+ expected
                        </div>
                      )}
                    </div>
                  </motion.div>
                ))
              ) : (
                <div className="text-white/60 text-center py-8">No events scheduled for this date</div>
              )}
            </div>
          </motion.div>
        </AnimatePresence>
      )}
    </div>
  )
}