// /src/interfaces/events/index.tsx
'use client';

import React, { useCallback, useEffect, useState } from 'react';
import dayjs, { Dayjs } from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { View } from 'react-big-calendar';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { fetchEvents } from '@/services/events.service';
import { AppLoader } from '@/components/core/app-loader';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import ReorderIcon from '@mui/icons-material/Reorder';
import SearchIcon from '@mui/icons-material/Search';
import TuneIcon from '@mui/icons-material/Tune';
import AddIcon from '@mui/icons-material/Add';
import EventIcon from '@mui/icons-material/Event';
import PeopleIcon from '@mui/icons-material/People';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import StarIcon from '@mui/icons-material/Star';
import CollectionsIcon from '@mui/icons-material/Collections';
import {
  Box,
  Drawer,
  FormControl,
  IconButton,
  InputAdornment,
  OutlinedInput,
  Stack,
  Typography,
  useTheme,
  Paper,
  Card,
  CardContent,
  Chip,
  Avatar,
  Fab,
  Tabs,
  Tab,
  Tooltip,
  Button,
  Select,
  MenuItem,
  InputLabel,
  Pagination,
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers';
import { enqueueSnackbar } from 'notistack';

import CalendarComponent from '@/components/dashboard/events/calendar';
import EventParticipantsModal from '@/components/dashboard/events/EventParticipantsModal';
import EventReviewsModal from '@/components/dashboard/events/EventReviewsModal';
import EventGalleryModal from '@/components/dashboard/events/EventGalleryModal';
import EventDetailsModal from '@/components/dashboard/events/EventDetailsModal';

// Import the AddEventModal
import AddEventModal from '@/interfaces/events/addEventModal';

dayjs.extend(utc);
dayjs.extend(timezone);

type Event = {
  _id: string;
  id: number;
  title: string;
  start: Date;
  end: Date;
  eventUsersCount: number;
  eventName: string;
  eventSummary?: string;
  eventDate: string;
  startTime: string;
  endTime: string;
  organizerName?: string;
  address?: string;
  price?: number;
  numberOfSeats?: number;
  remainingSeats?: number;
  status?: 'pending' | 'in_progress' | 'completed';
};

const Events: React.FC = () => {
  const [myEvents, setEvents] = useState<Event[]>([]);
  const [currentDate, setCurrentDate] = useState<Date>(new Date());
  const [currentView, setCurrentView] = useState<View>('month');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [view, setView] = useState<'list' | 'calendar'>('calendar');
  const [eventType, setEventType] = useState<'pending' | 'in_progress' | 'completed' | 'all'>('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);
  const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
  const itemsPerPage = 10;
  
  const [participantsModal, setParticipantsModal] = useState<{
    open: boolean;
    eventId: string;
    eventName: string;
  }>({
    open: false,
    eventId: '',
    eventName: '',
  });

  const [reviewsModal, setReviewsModal] = useState<{
    open: boolean;
    eventId: string;
    eventName: string;
  }>({
    open: false,
    eventId: '',
    eventName: '',
  });

  const [galleryModal, setGalleryModal] = useState<{
    open: boolean;
    eventId: string;
    eventName: string;
  }>({
    open: false,
    eventId: '',
    eventName: '',
  });

  const [detailsModal, setDetailsModal] = useState<{
    open: boolean;
    eventId: string;
    eventName: string;
  }>({
    open: false,
    eventId: '',
    eventName: '',
  });

  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs(new Date()));

  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;

  // Handle participants modal
  const handleViewParticipants = (eventId: string, eventName: string) => {
    setParticipantsModal({
      open: true,
      eventId,
      eventName,
    });
  };

  const closeParticipantsModal = () => {
    setParticipantsModal({
      open: false,
      eventId: '',
      eventName: '',
    });
  };

  // Handle reviews modal
  const handleViewReviews = (eventId: string, eventName: string) => {
    setReviewsModal({
      open: true,
      eventId,
      eventName,
    });
  };

  const closeReviewsModal = () => {
    setReviewsModal({
      open: false,
      eventId: '',
      eventName: '',
    });
  };

  // Handle gallery modal
  const handleViewGallery = (eventId: string, eventName: string) => {
    setGalleryModal({
      open: true,
      eventId,
      eventName,
    });
  };

  const closeGalleryModal = () => {
    setGalleryModal({
      open: false,
      eventId: '',
      eventName: '',
    });
  };

  // Handle details modal
  const handleViewDetails = (eventId: string, eventName: string) => {
    setDetailsModal({
      open: true,
      eventId,
      eventName,
    });
  };

  const closeDetailsModal = () => {
    setDetailsModal({
      open: false,
      eventId: '',
      eventName: '',
    });
  };

  // Modal handling and URL sync for eventType
  useEffect(() => {
    const param = searchParams.get('event_modal');
    if (param) {
      setIsModalOpen(true);
    } else {
      setIsModalOpen(false);
    }

    // Sync eventType from URL params
    const eventTypeParam = searchParams.get('eventType') as 'pending' | 'in_progress' | 'completed' | 'all' | null;
    if (eventTypeParam && ['pending', 'in_progress', 'completed', 'all'].includes(eventTypeParam)) {
      setEventType(eventTypeParam);
    }
  }, [searchParams]);

  const openModal = () => {
    router.replace(`?event_modal=1`);
  };

  const closeSlotModal = () => {
    setIsModalOpen(false);
    const currentParams = new URLSearchParams(searchParams);
    currentParams.delete('event_modal');
    const newUrl = `${pathname}${currentParams.toString() ? `?${currentParams}` : ''}`;
    router.replace(newUrl);
  };

  // Calendar handlers
  const handleDateChange = (date: Dayjs | null) => {
    setSelectedDate(date);
    if (date) {
      setCurrentDate(date.toDate());
    }
  };

  const handleNavigate = useCallback((date: Date) => {
    setCurrentDate(date);
  }, []);

  const handleViewChange = useCallback((view: View) => {
    setCurrentView(view);
    if (view === 'month') {
      setCurrentDate(new Date());
    }
  }, []);

  const handleSelectSlot = useCallback(({ start, end }: { start: Date; end: Date }) => {
    // Handle slot selection - you can implement this based on your needs
    console.log('Slot selected:', { start, end });
  }, []);

  // Helper function to calculate event status based on current time
  const calculateEventStatus = (startTime: string, endTime: string): 'pending' | 'in_progress' | 'completed' => {
    const now = dayjs();
    const start = dayjs(startTime);
    const end = dayjs(endTime);
    
    if (now.isBefore(start)) {
      return 'pending';
    } else if (now.isAfter(end)) {
      return 'completed';
    } else {
      return 'in_progress';
    }
  };

  // Fetch events function with proper backend pagination
  const getEvents = async (page: number = 1) => {
    try {
      setIsLoading(true);
      
      console.log(`Fetching events: eventType=${eventType}, page=${page}`);
      
      // For in_progress, we need to fetch 'all' and filter client-side since backend may not handle it
      // For other types, we can rely on backend filtering
      const apiEventType = eventType === 'in_progress' ? 'all' : eventType;
      
      // For in_progress, fetch more events to filter client-side
      // For other types, use normal pagination
      const fetchLimit = eventType === 'in_progress' ? 100 : itemsPerPage;
      const fetchPage = eventType === 'in_progress' ? 1 : page; // Always page 1 for in_progress to get all events
      
      // Call API with pagination parameters
      const response = await fetchEvents(apiEventType, { 
        page: fetchPage,
        limit: fetchLimit,
        sortBy: 'startTime',
        sortOrder: 'desc'
      });
      
      console.log('API Response:', response);
      
      // Handle the API response structure from your backend
      let fetchedEvents = [];
      let paginationData = null;
      
      if (response?.data?.data?.events && response?.data?.data?.pagination) {
        // This matches your API response structure exactly
        fetchedEvents = response.data.data.events;
        paginationData = response.data.data.pagination;
        
        console.log('Events fetched:', fetchedEvents.length);
        console.log('Pagination info:', paginationData);
      } else {
        console.warn('Unexpected response structure:', response);
        fetchedEvents = [];
      }

      // Map the events for display and calculate status
      let mappedEvents = fetchedEvents.map((el: any, index: number) => {
        const calculatedStatus = calculateEventStatus(el.startTime, el.endTime);
        return {
          _id: el._id,
          id: index + 1,
          title: el.eventName,
          eventName: el.eventName,
          eventSummary: el.eventSummary,
          start: new Date(el.startTime),
          end: new Date(el.endTime),
          eventDate: el.eventDate,
          startTime: el.startTime,
          endTime: el.endTime,
          eventUsersCount: el.eventUsersCount || 0,
          organizerName: el.organizerName,
          address: el.address,
          price: el.price,
          numberOfSeats: el.numberOfSeats,
          remainingSeats: el.remainingSeats,
          status: calculatedStatus, // Use calculated status instead of backend status
        };
      });

      // Filter for in_progress events if needed (client-side filtering)
      if (eventType === 'in_progress') {
        mappedEvents = mappedEvents.filter((event: Event) => event.status === 'in_progress');
        
        // Client-side pagination for in_progress events
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const paginatedEvents = mappedEvents.slice(startIndex, endIndex);
        
        // Update pagination info for client-side pagination
        paginationData = {
          currentPage: page,
          totalPages: Math.ceil(mappedEvents.length / itemsPerPage),
          totalCount: mappedEvents.length,
          limit: itemsPerPage,
          skip: startIndex,
        };
        
        mappedEvents = paginatedEvents;
      }

      // Set pagination info from backend response
      if (paginationData) {
        setCurrentPage(paginationData.currentPage);
        setTotalPages(paginationData.totalPages);
        setTotalCount(paginationData.totalCount);
        
        console.log(`Updated pagination: page ${paginationData.currentPage}/${paginationData.totalPages}, total: ${paginationData.totalCount}`);
      }

      // Set events
      setEvents(mappedEvents);
      setFilteredEvents(mappedEvents); // No search filtering when fetching from backend
      
      setIsLoading(false);
    } catch (error) {
      console.error('Error in fetching events:', error);
      enqueueSnackbar('Error in fetching events', { variant: 'error' });
      setIsLoading(false);
    }
  };

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  // Effect to fetch events when eventType changes
  useEffect(() => {
    console.log('EventType changed to:', eventType);
    setCurrentPage(1);
    setSearchTerm(''); // Clear search when changing event type
    getEvents(1);
  }, [eventType]);

  // Effect for search filtering (separate from pagination)
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (searchTerm.trim()) {
        console.log('Applying search filter:', searchTerm);
        // When searching, filter the current page results
        const searchFilteredEvents = myEvents.filter((event: Event) =>
          event.eventName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          event.eventSummary?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          event.organizerName?.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        setFilteredEvents(searchFilteredEvents);
        
        // For search results, calculate local pagination
        const searchTotalPages = Math.ceil(searchFilteredEvents.length / itemsPerPage);
        setTotalPages(searchTotalPages);
        setTotalCount(searchFilteredEvents.length);
        setCurrentPage(1);
        
        console.log(`Search results: ${searchFilteredEvents.length} events, ${searchTotalPages} pages`);
      } else {
        console.log('No search term, showing all events from current page');
        // When not searching, show the backend results as-is
        setFilteredEvents(myEvents);
        // Note: pagination info is already set by getEvents()
      }
    }, 300);

    return () => clearTimeout(timeoutId);
  }, [searchTerm, myEvents]);

  // Handle pagination - FIXED: Now makes API calls for new pages
  const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
    console.log(`Page changed to: ${value}`);
    if (!searchTerm.trim()) {
      // If no search term, fetch new page from backend
      console.log('Fetching new page from backend...');
      getEvents(value);
    } else {
      // If searching, handle pagination locally (frontend pagination)
      console.log('Handling search pagination locally...');
      setCurrentPage(value);
    }
  };

  const getEventStatusChip = (event: Event) => {
    const isUpcoming = dayjs(event.start).isAfter(dayjs());
    const status = event.status || (isUpcoming ? 'pending' : 'completed');
    
    const statusConfig = {
      pending: { color: 'warning' as const, label: 'Pending' },
      in_progress: { color: 'info' as const, label: 'In Progress' },
      completed: { color: 'success' as const, label: 'Completed' },
    };

    const config = statusConfig[status] || { color: 'default' as const, label: 'Unknown' };
    
    return (
      <Chip
        label={config.label}
        color={config.color}
        size="small"
        sx={{ fontWeight: 600 }}
      />
    );
  };

  return (
    <Box sx={{ bgcolor: 'background.default', minHeight: '100vh', p: 3 }}>
      {/* Modern Header Section */}
      <Paper
  elevation={4} // Adds subtle shadow for depth
  sx={{
    p: 4,               // Increased padding for better spacing
    mb: 4,              // Larger margin-bottom for separation
    borderRadius: 6,    // Slightly more rounded corners for modern feel
    background: '#FFDD31',
    color: '#0B0504',
    fontWeight: '700',   // Bold text for impact
    boxShadow: theme.shadows[6], // Stronger shadow effect for prominence
  }}
>

        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Box>
            <Typography variant="h4" fontWeight={700} gutterBottom>
              Events Management
            </Typography>
            <Box>
              <Typography variant="body1" sx={{ opacity: 0.9 }}>
                Organize and manage community events and volunteer activities
              </Typography>
              {totalCount > 0 && (
                <Typography variant="body2" sx={{ opacity: 0.8, mt: 1 }}>
                  Showing {Math.min(itemsPerPage, filteredEvents.length)} of {totalCount} {
                    eventType === 'all' ? '' : 
                    eventType === 'in_progress' ? 'in progress' : 
                    eventType
                  } events
                  {currentPage > 1 && ` (Page ${currentPage} of ${totalPages})`}
                </Typography>
              )}
            </Box>
          </Box>
          <Stack direction="row" spacing={2} alignItems="center">
            <FormControl sx={{ minWidth: 200 }}>
              <InputLabel 
                sx={{ 
                  color: 'rgba(11, 5, 4, 0.7)',
                  '&.Mui-focused': { color: 'rgba(11, 5, 4, 0.9)' }
                }}
              >
                Event Status
              </InputLabel>
              <Select
                value={eventType}
                onChange={(e) => {
                  const newEventType = e.target.value as 'pending' | 'in_progress' | 'completed' | 'all';
                  setEventType(newEventType);
                  // Update URL to reflect the filter
                  const currentParams = new URLSearchParams(searchParams);
                  if (newEventType === 'all') {
                    currentParams.delete('eventType');
                  } else {
                    currentParams.set('eventType', newEventType);
                  }
                  const newUrl = `${pathname}${currentParams.toString() ? `?${currentParams}` : ''}`;
                  router.replace(newUrl);
                }}
                label="Event Status"
                sx={{
                  color: '#0B0504',
                  '& .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.3)',
                  },
                  '&:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.5)',
                  },
                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.8)',
                  },
                  '& .MuiSvgIcon-root': {
                    color: 'rgba(11, 5, 4, 0.7)',
                  },
                }}
                MenuProps={{
                  PaperProps: {
                    sx: {
                      bgcolor: theme.palette.mode === 'dark' ? '#2d3748' : '#ffffff',
                      '& .MuiMenuItem-root': {
                        color: theme.palette.mode === 'dark' ? 'white' : 'black',
                        '&:hover': {
                          bgcolor: theme.palette.mode === 'dark' ? '#4a5568' : '#f5f5f5',
                        },
                        '&.Mui-selected': {
                          bgcolor: theme.palette.mode === 'dark' ? '#667eea' : '#667eea',
                          color: 'white',
                          '&:hover': {
                            bgcolor: theme.palette.mode === 'dark' ? '#5a6fd8' : '#5a6fd8',
                          },
                        },
                      },
                    },
                  },
                }}
              >
                <MenuItem value="all">All Events</MenuItem>
                <MenuItem value="pending">Pending</MenuItem>
                <MenuItem value="in_progress">In Progress</MenuItem>
                <MenuItem value="completed">Completed</MenuItem>
              </Select>
            </FormControl>
            
            <FormControl sx={{ minWidth: 300 }}>
              <OutlinedInput
                placeholder="Search events..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                sx={{
                  bgcolor: 'rgba(11, 5, 4, 0.1)',
                  color: '#0B0504',
                  '& .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.3)',
                  },
                  '&:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.5)',
                  },
                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: 'rgba(11, 5, 4, 0.8)',
                  },
                  '& input::placeholder': {
                    color: 'rgba(11, 5, 4, 0.7)',
                    opacity: 1,
                  },
                }}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton edge="end" sx={{ color: 'rgba(11, 5, 4, 0.8)' }}>
                      <SearchIcon />
                    </IconButton>
                  </InputAdornment>
                }
              />
            </FormControl>
            
            {/* <IconButton
              onClick={toggleDrawer(true)}
              sx={{
                bgcolor: 'rgba(255, 255, 255, 0.15)',
                color: 'white',
                '&:hover': {
                  bgcolor: 'rgba(255, 255, 255, 0.25)',
                },
              }}
            >
              <TuneIcon />
            </IconButton> */}
          </Stack>
        </Stack>
      </Paper>

      {/* View Toggle and Create Button */}
      <Stack direction="row" justifyContent="space-between" alignItems="center" mb={3}>
        <Paper
          elevation={0}
          sx={{
            borderRadius: 3,
            border: theme.palette.mode === 'dark' ? '1px solid #4a5568' : '1px solid #e2e8f0',
            overflow: 'hidden',
          }}
        >
          <Tabs
            value={view}
            onChange={(e, newValue) => setView(newValue)}
            sx={{
              minHeight: 48,
              '& .MuiTabs-indicator': {
                display: 'none',
              },
              '& .MuiTab-root': {
                textTransform: 'none',
                minHeight: 48,
                fontWeight: 600,
                paddingX: 1.5,
                color: 'text.secondary',
                '&.Mui-selected': {
                  color: 'white',
                  bgcolor: theme.palette.mode === 'dark' ? '#4a5568' : '#667eea',
                },
              },
            }}
          >
            <Tab 
              label="Calendar View" 
              value="calendar" 
              icon={<CalendarMonthIcon />} 
              iconPosition="start"
            />
            <Tab 
              label="List View" 
              value="list" 
              icon={<ReorderIcon />} 
              iconPosition="start"
            />
          </Tabs>
        </Paper>

        <Fab
          variant="extended"
          onClick={openModal}
          sx={{
            background: theme.palette.mode === 'dark' 
              ? 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)' 
              : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
            '&:hover': {
              background: theme.palette.mode === 'dark' 
                ? 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)' 
                : 'linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%)',
              transform: 'translateY(-2px)',
              boxShadow: '0 12px 32px rgba(102, 126, 234, 0.5)',
            },
            transition: 'all 0.3s ease',
          }}
        >
          <AddIcon sx={{ mr: 1 }} />
          Create Event
        </Fab>
      </Stack>

      {/* Events Content */}
      {isLoading ? (
        <AppLoader size="lg" viewport="content" label="Loading events..." />
      ) : filteredEvents.length > 0 ? (
        <>
          {/* Calendar View */}
          <Paper
            elevation={0}
            sx={{
              display: view === 'calendar' ? 'block' : 'none',
              borderRadius: 4,
              background: theme.palette.mode === 'dark' 
                ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
                : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
              border: theme.palette.mode === 'dark' ? '1px solid #4a5568' : '1px solid rgba(255, 255, 255, 0.2)',
              boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
              overflow: 'hidden',
              p: 3,
            }}
          >
            <CalendarComponent
              date={currentDate}
              events={filteredEvents}
              handleSelectSlot={handleSelectSlot}
              handleNavigate={handleNavigate}
              handleViewChange={handleViewChange}
              currentView={currentView}
            />
          </Paper>

          {/* List View */}
          <Box sx={{ display: view === 'list' ? 'block' : 'none' }}>
            <Stack spacing={3}>
              {(searchTerm.trim() 
                ? filteredEvents.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
                : filteredEvents // Backend already returns the correct page data
              ).map((event, index) => (
                <Card
                  key={event._id || index}
                  elevation={0}
                  sx={{
                    borderRadius: 4,
                    background: theme.palette.mode === 'dark' 
                      ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
                      : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
                    border: theme.palette.mode === 'dark' ? '1px solid #4a5568' : '1px solid rgba(255, 255, 255, 0.2)',
                    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
                    transition: 'all 0.3s ease',
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      boxShadow: '0 16px 48px rgba(0, 0, 0, 0.12)',
                    },
                  }}
                >
                  <CardContent sx={{ p: 3 }}>
                    <Stack direction="row" justifyContent="space-between" alignItems="start" mb={2}>
                      <Stack direction="row" alignItems="center" spacing={2}>
                        <Avatar
                          sx={{
                            background: theme.palette.mode === 'dark' 
                              ? 'linear-gradient(135deg, #2d5a3d 0%, #1e3a3b 100%)' 
                              : 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
                            width: 56,
                            height: 56,
                          }}
                        >
                          <EventIcon sx={{ fontSize: 28 }} />
                        </Avatar>
                        <Box>
                          <Typography variant="h6" fontWeight={700} color="text.primary" gutterBottom>
                            {event.eventName || event.title}
                          </Typography>
                          <Stack direction="row" spacing={1}>
                            <Chip
                              label={dayjs(event.start).isAfter(dayjs()) ? 'Upcoming' : 'Past'}
                              color={dayjs(event.start).isAfter(dayjs()) ? 'success' : 'default'}
                              size="small"
                              sx={{ fontWeight: 600 }}
                            />
                            {/* {getEventStatusChip(event)} */}
                          </Stack>
                        </Box>
                      </Stack>
                      <Typography variant="h6" fontWeight={700} color="primary.main">
                        {dayjs(event.start).format('MMM DD')}
                      </Typography>
                    </Stack>

                    {event.eventSummary && (
                      <Typography 
                        variant="body2" 
                        color="text.secondary" 
                        sx={{ mb: 2, maxHeight: '3em', overflow: 'hidden' }}
                      >
                        {event.eventSummary}
                      </Typography>
                    )}

                    <Stack direction="row" spacing={4} alignItems="center" flexWrap="wrap">
                      <Stack direction="row" alignItems="center" spacing={1}>
                        <AccessTimeIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
                        <Typography variant="body2" color="text.secondary">
                          {dayjs(event.start).format('hh:mm A')} - {dayjs(event.end).format('hh:mm A')}
                        </Typography>
                      </Stack>
                      
                      <Stack direction="row" alignItems="center" spacing={1}>
                        <PeopleIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
                        <Typography variant="body2" color="text.secondary">
                          {event.eventUsersCount || 0} participants
                        </Typography>
                      </Stack>

                      {event.price !== undefined && (
                        <Stack direction="row" alignItems="center" spacing={1}>
                          <Typography variant="body2" color="text.secondary">
                            {event.price === 0 ? 'Free' : `$${event.price}`}
                          </Typography>
                        </Stack>
                      )}

                      <Tooltip title="View Participants">
                        <Button
                          variant="outlined"
                          size="small"
                          startIcon={<PeopleIcon />}
                          onClick={() => handleViewParticipants(event._id, event.eventName || event.title)}
                          sx={{
                            borderColor: theme.palette.mode === 'dark' ? '#4a5568' : '#667eea',
                            color: theme.palette.mode === 'dark' ? '#a5d6a7' : '#667eea',
                            '&:hover': {
                              borderColor: theme.palette.mode === 'dark' ? '#2d3748' : '#5a6fd8',
                              backgroundColor: theme.palette.mode === 'dark' 
                                ? 'rgba(74, 85, 104, 0.1)' 
                                : 'rgba(102, 126, 234, 0.1)',
                              color: theme.palette.mode === 'dark' ? '#ffffff' : '#5a6fd8',
                              transform: 'translateY(-1px)',
                            },
                            transition: 'all 0.2s ease',
                            minWidth: 'auto',
                            fontWeight: 600,
                          }}
                        >
                          Participants
                        </Button>
                      </Tooltip>

                      <Tooltip title="View Reviews">
                        <Button
                          variant="outlined"
                          size="small"
                          startIcon={<StarIcon />}
                          onClick={() => handleViewReviews(event._id, event.eventName || event.title)}
                          sx={{
                            borderColor: theme.palette.mode === 'dark' ? '#4a5568' : '#f59e0b',
                            color: theme.palette.mode === 'dark' ? '#fbbf24' : '#f59e0b',
                            '&:hover': {
                              borderColor: theme.palette.mode === 'dark' ? '#2d3748' : '#d97706',
                              backgroundColor: theme.palette.mode === 'dark' 
                                ? 'rgba(74, 85, 104, 0.1)' 
                                : 'rgba(245, 158, 11, 0.1)',
                              color: theme.palette.mode === 'dark' ? '#ffffff' : '#d97706',
                              transform: 'translateY(-1px)',
                            },
                            transition: 'all 0.2s ease',
                            minWidth: 'auto',
                            fontWeight: 600,
                          }}
                        >
                          Reviews
                        </Button>
                      </Tooltip>

                      <Tooltip title="View Event Gallery">
                        <Button
                          variant="outlined"
                          size="small"
                          startIcon={<CollectionsIcon />}
                          onClick={() => handleViewGallery(event._id, event.eventName || event.title)}
                          sx={{
                            borderColor: theme.palette.mode === 'dark' ? '#4a5568' : '#8b5cf6',
                            color: theme.palette.mode === 'dark' ? '#c084fc' : '#8b5cf6',
                            '&:hover': {
                              borderColor: theme.palette.mode === 'dark' ? '#2d3748' : '#7c3aed',
                              backgroundColor: theme.palette.mode === 'dark' 
                                ? 'rgba(74, 85, 104, 0.1)' 
                                : 'rgba(139, 92, 246, 0.1)',
                              color: theme.palette.mode === 'dark' ? '#ffffff' : '#7c3aed',
                              transform: 'translateY(-1px)',
                            },
                            transition: 'all 0.2s ease',
                            minWidth: 'auto',
                            fontWeight: 600,
                          }}
                        >
                          Gallery
                        </Button>
                      </Tooltip>

                      <Tooltip title="View Event Details">
                        <Button
                          variant="outlined"
                          size="small"
                          startIcon={<EventIcon />}
                          onClick={() => handleViewDetails(event._id, event.eventName || event.title)}
                          sx={{
                            borderColor: theme.palette.mode === 'dark' ? '#4a5568' : '#10b981',
                            color: theme.palette.mode === 'dark' ? '#6ee7b7' : '#10b981',
                            '&:hover': {
                              borderColor: theme.palette.mode === 'dark' ? '#2d3748' : '#059669',
                              backgroundColor: theme.palette.mode === 'dark' 
                                ? 'rgba(74, 85, 104, 0.1)' 
                                : 'rgba(16, 185, 129, 0.1)',
                              color: theme.palette.mode === 'dark' ? '#ffffff' : '#059669',
                              transform: 'translateY(-1px)',
                            },
                            transition: 'all 0.2s ease',
                            minWidth: 'auto',
                            fontWeight: 600,
                          }}
                        >
                          Details
                        </Button>
                      </Tooltip>
                    </Stack>
                  </CardContent>
                </Card>
                                ))}
            </Stack>

            {/* Pagination for List View */}
            {totalPages > 1 && (
              <Box display="flex" justifyContent="center" mt={4}>
                <Pagination
                  count={totalPages}
                  page={currentPage}
                  onChange={handlePageChange}
                  color="primary"
                  size="large"
                  sx={{
                    '& .MuiPaginationItem-root': {
                      '&.Mui-selected': {
                        background: theme.palette.mode === 'dark' 
                          ? 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)' 
                          : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        color: 'white',
                      },
                    },
                  }}
                />
              </Box>
            )}

            {/* Results Summary */}
            {totalCount > 0 && (
              <Box textAlign="center" mt={3}>
                <Typography variant="body2" color="text.secondary">
                  {searchTerm.trim() ? (
                    `Showing ${((currentPage - 1) * itemsPerPage) + 1}-${Math.min(currentPage * itemsPerPage, filteredEvents.length)} of ${filteredEvents.length} search results`
                  ) : (
                    `Showing ${((currentPage - 1) * itemsPerPage) + 1}-${Math.min(currentPage * itemsPerPage, totalCount)} of ${totalCount} events (Page ${currentPage} of ${totalPages})`
                  )}
                </Typography>
              </Box>
            )}
          </Box>
        </>
      ) : (
        <Paper
          elevation={0}
          sx={{
            borderRadius: 4,
            background: theme.palette.mode === 'dark' 
              ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
              : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
            border: theme.palette.mode === 'dark' 
              ? '1px solid rgba(255, 255, 255, 0.1)' 
              : '1px solid rgba(255, 255, 255, 0.2)',
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
            p: 8,
            textAlign: 'center',
          }}
        >
          <Stack alignItems="center" spacing={3}>
            <Box
              sx={{
                width: 80,
                height: 80,
                borderRadius: '50%',
                backgroundColor: theme.palette.mode === 'dark' ? 'grey.800' : '#f3f4f6',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <EventIcon sx={{ fontSize: 40, color: 'text.secondary' }} />
            </Box>
            <Box>
              <Typography variant="h5" fontWeight={600} color="text.secondary" gutterBottom>
                No Events Found
              </Typography>
              <Typography variant="body1" color="text.secondary" mb={3}>
                {searchTerm ? `No events match "${searchTerm}".` : 'Create your first event to get started with community engagement'}
              </Typography>
              <Button
                variant="contained"
                onClick={openModal}
                sx={{
                  background: theme.palette.mode === 'dark' 
                    ? 'linear-gradient(135deg, #4a5568 0%, #2d3748 100%)' 
                    : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
                  '&:hover': {
                    background: theme.palette.mode === 'dark' 
                      ? 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)' 
                      : 'linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%)',
                  },
                }}
              >
                <AddIcon sx={{ mr: 1 }} />
                Create First Event
              </Button>
            </Box>
          </Stack>
        </Paper>
      )}

      {/* AddEventModal */}
      <AddEventModal 
        handleClose={closeSlotModal} 
        open={isModalOpen} 
        refetchEvent={getEvents}
      />
      
      {/* Event Participants Modal */}
      <EventParticipantsModal
        open={participantsModal.open}
        onClose={closeParticipantsModal}
        eventId={participantsModal.eventId}
        eventName={participantsModal.eventName}
      />
      
      {/* Event Reviews Modal */}
      <EventReviewsModal
        open={reviewsModal.open}
        onClose={closeReviewsModal}
        eventId={reviewsModal.eventId}
        eventName={reviewsModal.eventName}
      />
      
      {/* Event Gallery Modal */}
      <EventGalleryModal
        open={galleryModal.open}
        onClose={closeGalleryModal}
        eventId={galleryModal.eventId}
        eventName={galleryModal.eventName}
      />
      
      {/* Event Details Modal */}
      <EventDetailsModal
        open={detailsModal.open}
        onClose={closeDetailsModal}
        eventId={detailsModal.eventId}
        eventName={detailsModal.eventName}
      />
  
    </Box>
  );
};

export default Events;