'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Search, Plus, Edit, Trash2, Eye, EyeOff, Filter, Calendar as CalendarIcon, LayoutGrid, List, CheckSquare, Square, X, Star } from 'lucide-react'
import { isAuthenticated } from '@/lib/auth'
import { apiGet, apiDelete, apiPut } from '@/lib/apiClient'
import { eventsApi } from '@/lib/api'
import LoadingSpinner from '@/components/LoadingSpinner'

interface Event {
  _id: string
  title: string
  description: string
  startDate: string
  endDate?: string
  location: string
  imageUrl?: string
  category: string
  isPublished: boolean
  isFeatured: boolean
  createdAt: string
}

export default function EventsPage() {
  const router = useRouter()
  const [events, setEvents] = useState<Event[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [filterCategory, setFilterCategory] = useState('all')
  const [filterStatus, setFilterStatus] = useState('all')
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list')
  const [bulkMode, setBulkMode] = useState(false)
  const [selectedEvents, setSelectedEvents] = useState<Set<string>>(new Set())

  useEffect(() => {
    // Check authentication
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    fetchEvents()
  }, [router])

  const fetchEvents = async () => {
    try {
      const result = await apiGet<Event[]>('/events/all')
      if (result.success && result.data) {
        setEvents(result.data)
      }
    } catch (error: any) {
      console.error('Error fetching events:', error)
      if (error.message?.includes('Authentication required')) {
        router.push('/admin')
      }
    } finally {
      setLoading(false)
    }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this event?')) return

    try {
      const result = await apiDelete(`/events/${id}`)
      if (result.success) {
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error deleting event:', error)
      alert(error.message || 'Failed to delete event')
    }
  }

  const togglePublish = async (id: string, currentStatus: boolean) => {
    try {
      const result = await apiPut(`/events/${id}`, {
        isPublished: !currentStatus
      })
      if (result.success) {
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error toggling publish status:', error)
      alert(error.message || 'Failed to update publish status')
    }
  }

  const toggleSelection = (id: string) => {
    const newSelection = new Set(selectedEvents)
    if (newSelection.has(id)) {
      newSelection.delete(id)
    } else {
      newSelection.add(id)
    }
    setSelectedEvents(newSelection)
  }

  const selectAll = () => {
    if (selectedEvents.size === filteredEvents.length) {
      setSelectedEvents(new Set())
    } else {
      setSelectedEvents(new Set(filteredEvents.map(e => e._id)))
    }
  }

  const handleBulkDelete = async () => {
    if (selectedEvents.size === 0) {
      alert('Please select at least one event to delete')
      return
    }

    if (!confirm(`Are you sure you want to delete ${selectedEvents.size} event(s)?`)) return

    try {
      const result = await eventsApi.bulkDelete(Array.from(selectedEvents))
      if (result.success) {
        alert(result.message || `Successfully deleted ${result.deletedCount} event(s)`)
        setSelectedEvents(new Set())
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error deleting events:', error)
      alert(error.message || 'Failed to delete events')
    }
  }

  const handleBulkPublish = async () => {
    if (selectedEvents.size === 0) {
      alert('Please select at least one event')
      return
    }

    try {
      const result = await eventsApi.bulkPublish(Array.from(selectedEvents))
      if (result.success) {
        alert(result.message || `Successfully published ${result.modifiedCount} event(s)`)
        setSelectedEvents(new Set())
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error publishing events:', error)
      alert(error.message || 'Failed to publish events')
    }
  }

  const handleBulkUnpublish = async () => {
    if (selectedEvents.size === 0) {
      alert('Please select at least one event')
      return
    }

    try {
      const result = await eventsApi.bulkUnpublish(Array.from(selectedEvents))
      if (result.success) {
        alert(result.message || `Successfully unpublished ${result.modifiedCount} event(s)`)
        setSelectedEvents(new Set())
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error unpublishing events:', error)
      alert(error.message || 'Failed to unpublish events')
    }
  }

  const handleBulkToggleFeatured = async () => {
    if (selectedEvents.size === 0) {
      alert('Please select at least one event')
      return
    }

    // Get current featured status of selected events
    const selectedEventsData = events.filter(e => selectedEvents.has(e._id))
    const allFeatured = selectedEventsData.every(e => e.isFeatured)
    const newFeaturedStatus = !allFeatured

    try {
      const result = await eventsApi.bulkUpdate(Array.from(selectedEvents), { isFeatured: newFeaturedStatus })
      if (result.success) {
        alert(result.message || `Successfully ${newFeaturedStatus ? 'featured' : 'unfeatured'} ${result.modifiedCount} event(s)`)
        setSelectedEvents(new Set())
        fetchEvents()
      }
    } catch (error: any) {
      console.error('Error updating featured status:', error)
      alert(error.message || 'Failed to update featured status')
    }
  }

  const filteredEvents = events.filter(event => {
    const matchesSearch = event.title.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = filterCategory === 'all' || event.category === filterCategory
    const matchesStatus = filterStatus === 'all' || 
      (filterStatus === 'published' ? event.isPublished : !event.isPublished)

    return matchesSearch && matchesCategory && matchesStatus
  })

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    })
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <LoadingSpinner />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-white mb-2">Events</h1>
          <p className="text-white/70">Manage municipality events and calendar</p>
        </div>
        <div className="flex items-center gap-3">
          {/* View Toggle */}
          <div className="flex items-center bg-white/10 rounded-lg p-1">
            <button
              onClick={() => setViewMode('list')}
              className={`p-2 rounded transition-all ${
                viewMode === 'list' ? 'bg-primary text-white' : 'text-white/50 hover:text-white'
              }`}
              title="List View"
            >
              <List className="w-5 h-5" />
            </button>
            <button
              onClick={() => setViewMode('grid')}
              className={`p-2 rounded transition-all ${
                viewMode === 'grid' ? 'bg-primary text-white' : 'text-white/50 hover:text-white'
              }`}
              title="Grid View"
            >
              <LayoutGrid className="w-5 h-5" />
            </button>
          </div>
          <button
            onClick={() => {
              setBulkMode(!bulkMode)
              setSelectedEvents(new Set())
            }}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
              bulkMode ? 'bg-orange-500 hover:bg-orange-600' : 'bg-white/10 hover:bg-white/20'
            } text-white`}
          >
            {bulkMode ? <X className="w-5 h-5" /> : <CheckSquare className="w-5 h-5" />}
            {bulkMode ? 'Exit Bulk Mode' : 'Bulk Operations'}
          </button>
          <button
            onClick={() => router.push('/admin/events/new')}
            className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all"
          >
            <Plus className="w-5 h-5" />
            New Event
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
        <div className={`grid grid-cols-1 gap-4 ${bulkMode ? 'md:grid-cols-4' : 'md:grid-cols-3'}`}>
          {bulkMode && (
            <div>
              <button
                onClick={selectAll}
                className="w-full px-4 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg text-white transition-all"
              >
                {selectedEvents.size === filteredEvents.length ? 'Deselect All' : 'Select All'}
              </button>
            </div>
          )}
          
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
            <input
              type="text"
              placeholder="Search events..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          <div className="relative">
            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary appearance-none"
            >
              <option value="all">All Categories</option>
              <option value="general">General</option>
              <option value="meeting">Meeting</option>
              <option value="workshop">Workshop</option>
              <option value="community">Community</option>
            </select>
          </div>

          <div>
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary appearance-none"
            >
              <option value="all">All Status</option>
              <option value="published">Published</option>
              <option value="draft">Draft</option>
            </select>
          </div>
        </div>

        {/* Bulk Actions Bar */}
        {bulkMode && selectedEvents.size > 0 && (
          <div className="mt-4 pt-4 border-t border-white/20 flex items-center gap-3 flex-wrap">
            <span className="text-white/70 text-sm">
              {selectedEvents.size} event(s) selected
            </span>
            <div className="flex gap-2 flex-wrap">
              <button
                onClick={handleBulkPublish}
                className="flex items-center gap-2 px-4 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-lg transition-all text-sm"
              >
                <Eye className="w-4 h-4" />
                Publish Selected
              </button>
              <button
                onClick={handleBulkUnpublish}
                className="flex items-center gap-2 px-4 py-2 bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 rounded-lg transition-all text-sm"
              >
                <EyeOff className="w-4 h-4" />
                Unpublish Selected
              </button>
              <button
                onClick={handleBulkToggleFeatured}
                className="flex items-center gap-2 px-4 py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 rounded-lg transition-all text-sm"
              >
                <Star className="w-4 h-4" />
                Toggle Featured
              </button>
              <button
                onClick={handleBulkDelete}
                className="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-all text-sm"
              >
                <Trash2 className="w-4 h-4" />
                Delete Selected
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Events Display */}
      {viewMode === 'grid' ? (
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        {filteredEvents.map((event) => (
          <div
            key={event._id}
            className={`relative bg-white/10 backdrop-blur-xl rounded-xl border overflow-hidden hover:border-white/40 transition-all group ${
              selectedEvents.has(event._id) ? 'border-primary ring-2 ring-primary' : 'border-white/20'
            }`}
          >
            {/* Bulk Selection Checkbox */}
            {bulkMode && (
              <button
                onClick={() => toggleSelection(event._id)}
                className="absolute top-3 left-3 p-2 bg-black/50 backdrop-blur-sm rounded-lg hover:bg-black/70 transition-all z-10"
              >
                {selectedEvents.has(event._id) ? (
                  <CheckSquare className="w-6 h-6 text-primary" />
                ) : (
                  <Square className="w-6 h-6 text-white" />
                )}
              </button>
            )}

            {/* Event Date Badge */}
            <div className="relative h-48 bg-white/5">
              {event.imageUrl ? (
                <img
                  src={event.imageUrl}
                  alt={event.title}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center text-white/30">
                  <CalendarIcon className="w-16 h-16" />
                </div>
              )}
              {!bulkMode && (
                <div className="absolute top-3 left-3 bg-primary/90 backdrop-blur-sm px-3 py-2 rounded-lg">
                  <div className="text-white text-center">
                    <div className="text-2xl font-bold">
                      {new Date(event.startDate).getDate()}
                    </div>
                    <div className="text-xs uppercase">
                      {new Date(event.startDate).toLocaleDateString('en-US', { month: 'short' })}
                    </div>
                  </div>
                </div>
              )}
              <div className="absolute top-3 right-3 flex gap-2">
                {event.isFeatured && (
                  <span className="px-2 py-1 bg-yellow-500 text-white text-xs font-medium rounded">
                    Featured
                  </span>
                )}
                <span className={`px-2 py-1 text-white text-xs font-medium rounded ${
                  event.isPublished ? 'bg-green-500' : 'bg-gray-500'
                }`}>
                  {event.isPublished ? 'Published' : 'Draft'}
                </span>
              </div>
            </div>

            {/* Event Content */}
            <div className="p-4">
              <h3 className="text-white font-semibold text-lg mb-2 line-clamp-2">
                {event.title}
              </h3>
              <p className="text-white/70 text-sm mb-3 line-clamp-2">
                {event.description}
              </p>
              <div className="flex items-center gap-2 text-xs text-white/50 mb-4">
                <CalendarIcon className="w-4 h-4" />
                <span>{formatDate(event.startDate)}</span>
                {event.endDate && (
                  <>
                    <span>-</span>
                    <span>{formatDate(event.endDate)}</span>
                  </>
                )}
              </div>
              {event.location && (
                <p className="text-white/60 text-xs mb-4">📍 {event.location}</p>
              )}

              {/* Actions */}
              {!bulkMode && (
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => router.push(`/admin/events/${event._id}`)}
                    className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 rounded-lg transition-all"
                  >
                    <Edit className="w-4 h-4" />
                    Edit
                  </button>
                  <button
                    onClick={() => togglePublish(event._id, event.isPublished)}
                    className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-green-500/20 text-green-400 hover:bg-green-500/30 rounded-lg transition-all"
                  >
                    {event.isPublished ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    {event.isPublished ? 'Unpublish' : 'Publish'}
                  </button>
                  <button
                    onClick={() => handleDelete(event._id)}
                    className="p-2 bg-red-500/20 text-red-400 hover:bg-red-500/30 rounded-lg transition-all"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
      ) : (
        <div className="bg-white/10 backdrop-blur-xl rounded-xl border border-white/20 overflow-hidden">
          <div className="divide-y divide-white/10">
            {filteredEvents.map((event) => (
              <div
                key={event._id}
                className={`p-4 hover:bg-white/5 transition-colors ${
                  selectedEvents.has(event._id) ? 'bg-primary/10 border-l-4 border-l-primary' : ''
                }`}
              >
                <div className="flex items-center gap-4">
                  {/* Bulk Selection Checkbox */}
                  {bulkMode && (
                    <button
                      onClick={() => toggleSelection(event._id)}
                      className="flex-shrink-0 p-2 hover:bg-white/10 rounded-lg transition-all"
                    >
                      {selectedEvents.has(event._id) ? (
                        <CheckSquare className="w-5 h-5 text-primary" />
                      ) : (
                        <Square className="w-5 h-5 text-white/50" />
                      )}
                    </button>
                  )}

                  {/* Date Badge */}
                  {!bulkMode && (
                    <div className="flex-shrink-0 bg-primary/90 px-3 py-2 rounded-lg text-center min-w-[60px]">
                      <div className="text-white">
                        <div className="text-2xl font-bold">
                          {new Date(event.startDate).getDate()}
                        </div>
                        <div className="text-xs uppercase">
                          {new Date(event.startDate).toLocaleDateString('en-US', { month: 'short' })}
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Content */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-white font-semibold text-lg truncate">
                        {event.title}
                      </h3>
                      {event.isFeatured && (
                        <span className="px-2 py-1 bg-yellow-500 text-white text-xs font-medium rounded flex-shrink-0">
                          Featured
                        </span>
                      )}
                      <span className={`px-2 py-1 text-white text-xs font-medium rounded flex-shrink-0 ${
                        event.isPublished ? 'bg-green-500' : 'bg-gray-500'
                      }`}>
                        {event.isPublished ? 'Published' : 'Draft'}
                      </span>
                    </div>
                    <p className="text-white/70 text-sm mb-2 line-clamp-1">
                      {event.description}
                    </p>
                    <div className="flex items-center gap-4 text-xs text-white/50">
                      <span className="flex items-center gap-1">
                        <CalendarIcon className="w-4 h-4" />
                        {formatDate(event.startDate)}
                        {event.endDate && ` - ${formatDate(event.endDate)}`}
                      </span>
                      {event.location && (
                        <span>📍 {event.location}</span>
                      )}
                      <span className="capitalize">{event.category}</span>
                    </div>
                  </div>

                  {/* Actions */}
                  {!bulkMode && (
                    <div className="flex items-center gap-2 flex-shrink-0">
                      <button
                        onClick={() => router.push(`/admin/events/${event._id}`)}
                        className="p-2 text-blue-400 hover:bg-blue-500/20 rounded-lg transition-all"
                        title="Edit"
                      >
                        <Edit className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => togglePublish(event._id, event.isPublished)}
                        className="p-2 text-green-400 hover:bg-green-500/20 rounded-lg transition-all"
                        title={event.isPublished ? 'Unpublish' : 'Publish'}
                      >
                        {event.isPublished ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                      </button>
                      <button
                        onClick={() => handleDelete(event._id)}
                        className="p-2 text-red-400 hover:bg-red-500/20 rounded-lg transition-all"
                        title="Delete"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {filteredEvents.length === 0 && (
        <div className="bg-white/10 backdrop-blur-xl rounded-xl p-12 text-center border border-white/20">
          <p className="text-white/50">No events found</p>
        </div>
      )}
    </div>
  )
}