'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Calendar, Clock, MapPin, Users, Bell, Sparkles, Filter, Grid, CalendarDays } from 'lucide-react'
import EventCalendar from '@/components/EventCalendar'
import { eventsApi, Event } from '@/lib/api'

const categoryColors: Record<string, string> = {
  Community: 'bg-blue-500/20 text-blue-300 border-blue-500/30',
  'Public Hearing': 'bg-red-500/20 text-red-300 border-red-500/30',
  Cultural: 'bg-purple-500/20 text-purple-300 border-purple-500/30',
  Workshop: 'bg-green-500/20 text-green-300 border-green-500/30',
  'Council Meeting': 'bg-orange-500/20 text-orange-300 border-orange-500/30',
  General: 'bg-gray-500/20 text-gray-300 border-gray-500/30',
}

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  
  const dayName = days[date.getDay()]
  const day = date.getDate()
  const month = months[date.getMonth()]
  const year = date.getFullYear()
  
  if (date.toDateString() === today.toDateString()) {
    return { display: `Today, ${day} ${month}`, isToday: true, isTomorrow: false }
  } else if (date.toDateString() === tomorrow.toDateString()) {
    return { display: `Tomorrow, ${day} ${month}`, isToday: false, isTomorrow: true }
  } else {
    return { display: `${dayName}, ${day} ${month} ${year}`, isToday: false, isTomorrow: false }
  }
}

const getTimeFromDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
}

const getDaysUntil = (dateString: string) => {
  const eventDate = new Date(dateString)
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  eventDate.setHours(0, 0, 0, 0)
  
  const diffTime = eventDate.getTime() - today.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  
  return diffDays
}

export default function EventsPage() {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [events, setEvents] = useState<Event[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
  const [viewMode, setViewMode] = useState<'cards' | 'calendar'>('cards')
  const [calendarView, setCalendarView] = useState<'year' | 'month' | 'week'>('month')

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        const result = await eventsApi.getAll({ 
          limit: 100,
          upcoming: true,
          sortBy: 'startDate',
          sortOrder: 'asc'
        })
        setEvents(result.data)
      } catch (error) {
        console.error('Error fetching events:', error)
        setEvents([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchEvents()
  }, [])

  // Filter events
  const filteredEvents = events
    .filter(event => {
      const eventDate = new Date(event.startDate)
      const isFuture = eventDate > currentTime
      const matchesCategory = !selectedCategory || event.category === selectedCategory
      return isFuture && matchesCategory
    })
    .sort((a, b) => {
      const dateA = new Date(a.startDate)
      const dateB = new Date(b.startDate)
      return dateA.getTime() - dateB.getTime()
    })

  const categories = Array.from(new Set(events.map(e => e.category).filter(Boolean)))

  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[1200px] mx-auto">
        <div className="glass-page rounded-2xl p-8 md:p-12 shadow-2xl">
          {/* Header Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <div className="flex items-center justify-center gap-3 mb-4">
              <div className="relative">
                <Calendar className="w-8 h-8 text-primary-light" />
                <motion.div
                  animate={{ scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] }}
                  transition={{ duration: 2, repeat: Infinity }}
                  className="absolute -top-1 -right-1"
                >
                  <Sparkles className="w-4 h-4 text-primary-light" />
                </motion.div>
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-white">Upcoming Events</h1>
            </div>
            <p className="text-white/70 text-lg mb-6">
              Join us for community meetings, public hearings, and cultural celebrations
            </p>
            <div className="w-24 h-1 bg-primary mx-auto"></div>
          </motion.div>

          {/* View Toggle and Filter Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="mb-8 space-y-4"
          >
            {/* View Mode Toggle */}
            <div className="flex items-center justify-between flex-wrap gap-4">
              <div className="flex items-center gap-2 glass rounded-lg p-1">
                <button
                  onClick={() => setViewMode('cards')}
                  className={`px-4 py-2 rounded-md text-sm font-semibold transition-all flex items-center gap-2 ${
                    viewMode === 'cards'
                      ? 'bg-primary text-white'
                      : 'text-white/70 hover:text-white hover:bg-white/10'
                  }`}
                >
                  <Grid className="w-4 h-4" />
                  Cards
                </button>
                <button
                  onClick={() => setViewMode('calendar')}
                  className={`px-4 py-2 rounded-md text-sm font-semibold transition-all flex items-center gap-2 ${
                    viewMode === 'calendar'
                      ? 'bg-primary text-white'
                      : 'text-white/70 hover:text-white hover:bg-white/10'
                  }`}
                >
                  <CalendarDays className="w-4 h-4" />
                  Calendar
                </button>
              </div>
            </div>

            {/* Filter Section - Only show in cards view */}
            {viewMode === 'cards' && (
              <div>
                <div className="flex items-center gap-3 mb-4">
                  <Filter className="w-5 h-5 text-white/70" />
                  <span className="text-white/90 font-semibold">Filter by Category:</span>
                </div>
                <div className="flex flex-wrap gap-3">
                  <button
                    onClick={() => setSelectedCategory(null)}
                    className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                      selectedCategory === null
                        ? 'bg-primary text-white'
                        : 'glass text-white/80 hover:bg-white/10'
                    }`}
                  >
                    All Events
                  </button>
                  {categories.map((category) => {
                    const categoryColor = categoryColors[category] || categoryColors.General
                    return (
                      <button
                        key={category}
                        onClick={() => setSelectedCategory(category)}
                        className={`px-4 py-2 rounded-full text-sm font-semibold border transition-all ${
                          selectedCategory === category
                            ? `${categoryColor} border-opacity-100`
                            : 'glass text-white/80 hover:bg-white/10 border-white/20'
                        }`}
                      >
                        {category}
                      </button>
                    )
                  })}
                </div>
              </div>
            )}
          </motion.div>

          {/* Events Display */}
          {isLoading ? (
            <div className="text-center py-12">
              <div className="text-white/70">Loading events...</div>
            </div>
          ) : viewMode === 'calendar' ? (
            <EventCalendar
              events={events.filter(event => {
                const eventDate = new Date(event.startDate)
                return eventDate > currentTime
              }).map(event => ({
                id: parseInt(event._id.slice(-8), 16),
                title: event.title,
                description: event.description,
                date: event.startDate.split('T')[0],
                time: getTimeFromDate(event.startDate),
                location: event.location,
                category: event.category as any,
              }))}
              view={calendarView}
              onViewChange={setCalendarView}
            />
          ) : filteredEvents.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredEvents.map((event, index) => {
                const dateInfo = formatDate(event.startDate)
                const daysUntil = getDaysUntil(event.startDate)
                const time = getTimeFromDate(event.startDate)
                const categoryColor = categoryColors[event.category] || categoryColors.General
                
                return (
                  <motion.div
                    key={event._id}
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    whileHover={{ y: -8, scale: 1.02 }}
                    className="relative group"
                  >
                    <div className="glass rounded-xl p-6 shadow-xl glass-hover h-full flex flex-col border-2 border-white/10 hover:border-primary/30 transition-all duration-300">
                      {/* Days Until Badge */}
                      {daysUntil >= 0 && daysUntil <= 7 && (
                        <div className="absolute -top-2 -left-2 bg-gradient-primary text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg z-10">
                          {daysUntil === 0 ? 'TODAY' : daysUntil === 1 ? 'TOMORROW' : `${daysUntil} DAYS`}
                        </div>
                      )}

                      {/* Category Badge */}
                      <div className="mb-4">
                        <span className={`inline-block px-3 py-1 rounded-full text-xs font-semibold border ${categoryColor}`}>
                          {event.category}
                        </span>
                      </div>

                      {/* Date & Time */}
                      <div className="mb-4 space-y-2">
                        <div className="flex items-center gap-2 text-white/90">
                          <Calendar className="w-4 h-4 text-primary-light" />
                          <span className={`font-semibold ${dateInfo.isToday ? 'text-primary-light' : dateInfo.isTomorrow ? 'text-secondary-light' : ''}`}>
                            {dateInfo.display}
                          </span>
                        </div>
                        <div className="flex items-center gap-2 text-white/70">
                          <Clock className="w-4 h-4 text-primary-light" />
                          <span>{time}</span>
                        </div>
                        <div className="flex items-center gap-2 text-white/70">
                          <MapPin className="w-4 h-4 text-primary-light" />
                          <span className="text-sm">{event.location}</span>
                        </div>
                      </div>

                      {/* Title */}
                      <h3 className="text-xl font-bold text-white mb-3 group-hover:text-primary-light transition-colors">
                        {event.title}
                      </h3>

                      {/* Description */}
                      <p className="text-white/70 text-sm mb-4 flex-grow">
                        {event.description}
                      </p>

                      {/* Footer */}
                      <div className="flex items-center justify-between pt-4 border-t border-white/10">
                        {event.link && (
                          <a
                            href={event.link}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-primary-light font-semibold text-sm hover:text-primary transition-colors"
                          >
                            Learn More →
                          </a>
                        )}
                      </div>
                    </div>
                  </motion.div>
                )
              })}
            </div>
          ) : (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center py-12"
            >
              <Calendar className="w-16 h-16 text-white/30 mx-auto mb-4" />
              <p className="text-white/60 text-lg">No events found</p>
              <p className="text-white/40 text-sm mt-2">
                {selectedCategory 
                  ? `Try selecting a different category or view all events.`
                  : 'Check back soon for new events'}
              </p>
            </motion.div>
          )}
        </div>
      </div>
    </div>
  )
}