import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Box,
  Paper,
  Typography,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  Container,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  FormControlLabel,
  Switch,
  SelectChangeEvent,
  OutlinedInput,
  ListItemText,
  Checkbox,
  Chip,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add';
import axios from 'axios';

interface RSVP {
  id: number;
  name: string;
  attending: string;
  bringing_guests: string;
  guest_count: number;
  guest_names: string;
  items_bringing: string[] | string;
}

interface Event {
  id: number;
  title: string;
  description: string;
  date: string;
  location: string;
  slug: string;
  needed_items?: string[] | string;
  wallpaper?: string;
  rsvp_cutoff_date?: string;
}

const EventAdmin: React.FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const [event, setEvent] = useState<Event | null>(null);
  const [rsvps, setRsvps] = useState<RSVP[]>([]);
  const [neededItems, setNeededItems] = useState<string[]>([]);
  const [claimedItems, setClaimedItems] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [rsvpToDelete, setRsvpToDelete] = useState<RSVP | null>(null);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [rsvpToEdit, setRsvpToEdit] = useState<RSVP | null>(null);
  const [editForm, setEditForm] = useState({
    name: '',
    attending: 'yes',
    bringing_guests: 'no',
    guest_count: 0,
    guest_names: '',
    items_bringing: [] as string[],
  });
  const [deleteEventDialogOpen, setDeleteEventDialogOpen] = useState(false);
  const [manageItemsDialogOpen, setManageItemsDialogOpen] = useState(false);
  const [newItem, setNewItem] = useState('');
  const [itemToDelete, setItemToDelete] = useState<string | null>(null);
  const [updateInfoDialogOpen, setUpdateInfoDialogOpen] = useState(false);
  const [updateForm, setUpdateForm] = useState({
    description: '',
    location: '',
    date: '',
    rsvp_cutoff_date: '',
    wallpaper: null as File | null
  });

  useEffect(() => {
    fetchEventAndRsvps();
  }, [slug]);

  const fetchEventAndRsvps = async () => {
    try {
      const [eventResponse, rsvpsResponse] = await Promise.all([
        axios.get(`/api/events/${slug}`),
        axios.get(`/api/events/${slug}/rsvps`)
      ]);
      setEvent(eventResponse.data);
      
      // Process needed items
      let items: string[] = [];
      if (eventResponse.data.needed_items) {
        try {
          if (typeof eventResponse.data.needed_items === 'string') {
            const parsed = JSON.parse(eventResponse.data.needed_items);
            items = Array.isArray(parsed) ? parsed : [];
          } else if (Array.isArray(eventResponse.data.needed_items)) {
            items = eventResponse.data.needed_items;
          }
        } catch (e) {
          console.error('Error parsing needed_items:', e);
          items = [];
        }
      }
      
      // Get all claimed items from existing RSVPs
      const claimed = new Set<string>();
      const processedRsvps = rsvpsResponse.data.map((rsvp: RSVP) => {
        let itemsBringing: string[] = [];
        try {
          if (typeof rsvp.items_bringing === 'string') {
            try {
              const parsed = JSON.parse(rsvp.items_bringing);
              itemsBringing = Array.isArray(parsed) ? parsed : [];
            } catch (e) {
              console.error('Error parsing items_bringing JSON:', e);
            }
          } else if (Array.isArray(rsvp.items_bringing)) {
            itemsBringing = rsvp.items_bringing;
          }
          
          // Add items to claimed set
          itemsBringing.forEach(item => claimed.add(item));
        } catch (e) {
          console.error('Error processing items for RSVP:', e);
        }
        
        return {
          ...rsvp,
          items_bringing: itemsBringing
        };
      });
      
      // Update state with processed data
      setRsvps(processedRsvps);
      setClaimedItems(Array.from(claimed));
      // Filter needed items to only show unclaimed ones
      setNeededItems(items.filter(item => !claimed.has(item)));
      setLoading(false);
    } catch (error) {
      setError('Failed to load event data');
      setLoading(false);
    }
  };

  const handleDeleteRsvp = async (rsvp: RSVP) => {
    setRsvpToDelete(rsvp);
    setDeleteDialogOpen(true);
  };

  const confirmDelete = async () => {
    if (!rsvpToDelete) return;
    
    try {
      await axios.delete(`/api/events/${slug}/rsvps/${rsvpToDelete.id}`);
      setRsvps(rsvps.filter((r: RSVP) => r.id !== rsvpToDelete.id));
      setDeleteDialogOpen(false);
      setRsvpToDelete(null);
    } catch (error) {
      setError('Failed to delete RSVP');
    }
  };

  const handleEditRsvp = (rsvp: RSVP) => {
    setRsvpToEdit(rsvp);
    setEditForm({
      name: rsvp.name,
      attending: rsvp.attending,
      bringing_guests: rsvp.bringing_guests,
      guest_count: rsvp.guest_count,
      guest_names: rsvp.guest_names,
      items_bringing: Array.isArray(rsvp.items_bringing) ? rsvp.items_bringing : [],
    });
    setEditDialogOpen(true);
  };

  const handleTextInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setEditForm((prev: typeof editForm) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSelectChange = (e: SelectChangeEvent<string>) => {
    const { name, value } = e.target;
    setEditForm((prev: typeof editForm) => ({
      ...prev,
      [name as string]: value,
    }));
  };

  const handleItemsChange = (e: SelectChangeEvent<string[]>) => {
    const { value } = e.target;
    const newItems = Array.isArray(value) ? value : [];
    setEditForm(prev => ({
      ...prev,
      items_bringing: newItems
    }));
  };

  const handleEditSubmit = async () => {
    if (!rsvpToEdit) return;
    
    try {
      const submissionData = {
        ...editForm,
        items_bringing: JSON.stringify(editForm.items_bringing)
      };
      await axios.put(`/api/events/${slug}/rsvps/${rsvpToEdit.id}`, submissionData);
      
      // Update the local state
      const updatedRsvps = rsvps.map((r: RSVP) => {
        if (r.id === rsvpToEdit.id) {
          return {
            ...r,
            ...editForm,
            items_bringing: editForm.items_bringing // Keep as array in local state
          };
        }
        return r;
      });
      
      // Recalculate claimed items
      const claimed = new Set<string>();
      updatedRsvps.forEach((rsvp: RSVP) => {
        let rsvpItems: string[] = [];
        try {
          if (typeof rsvp.items_bringing === 'string') {
            const parsed = JSON.parse(rsvp.items_bringing);
            rsvpItems = Array.isArray(parsed) ? parsed : [];
          } else if (Array.isArray(rsvp.items_bringing)) {
            rsvpItems = rsvp.items_bringing;
          }
          
          rsvpItems.forEach(item => claimed.add(item));
        } catch (e) {
          console.error('Error processing items for RSVP:', e);
        }
      });

      // Get all items from the event
      let allItems: string[] = [];
      if (event?.needed_items) {
        try {
          if (typeof event.needed_items === 'string') {
            const parsed = JSON.parse(event.needed_items);
            allItems = Array.isArray(parsed) ? parsed : [];
          } else if (Array.isArray(event.needed_items)) {
            allItems = event.needed_items;
          }
        } catch (e) {
          console.error('Error parsing event needed_items:', e);
          allItems = [];
        }
      }

      // Update needed and claimed items
      const claimedArray = Array.from(claimed);
      const availableItems = allItems.filter(item => !claimed.has(item));

      setRsvps(updatedRsvps);
      setNeededItems(availableItems);
      setClaimedItems(claimedArray);
      setEditDialogOpen(false);
      setRsvpToEdit(null);
    } catch (error) {
      setError('Failed to update RSVP');
    }
  };

  const handleDeleteEvent = async () => {
    try {
      await axios.delete(`/api/events/${slug}`);
      navigate('/');
    } catch (error) {
      setError('Failed to delete event');
      setDeleteEventDialogOpen(false);
    }
  };

  const handleAddItem = async () => {
    if (!event || !newItem.trim()) return;

    try {
      const updatedItems = [...(Array.isArray(event.needed_items) ? event.needed_items : []), newItem.trim()];
      await axios.put(`/api/events/${slug}`, {
        ...event,
        needed_items: updatedItems
      });
      
      setEvent(prev => prev ? { ...prev, needed_items: updatedItems } : null);
      setNeededItems(prev => [...prev, newItem.trim()]);
      setNewItem('');
    } catch (error) {
      setError('Failed to add item');
    }
  };

  const handleRemoveItem = async (itemToRemove: string) => {
    if (!event) return;

    try {
      // Update event's needed_items
      const updatedItems = Array.isArray(event.needed_items) 
        ? event.needed_items.filter(item => item !== itemToRemove)
        : [];
      
      await axios.put(`/api/events/${slug}`, {
        ...event,
        needed_items: updatedItems
      });

      // Update RSVPs to remove the item from any that had claimed it
      const updatedRsvps = rsvps.map(rsvp => {
        let currentItems: string[] = Array.isArray(rsvp.items_bringing) 
          ? rsvp.items_bringing 
          : typeof rsvp.items_bringing === 'string'
            ? JSON.parse(rsvp.items_bringing)
            : [];
        
        // Remove the item if it exists in this RSVP
        if (currentItems.includes(itemToRemove)) {
          const updatedRsvpItems = currentItems.filter((item: string) => item !== itemToRemove);
          // Update the RSVP in the database
          axios.put(`/api/events/${slug}/rsvps/${rsvp.id}`, {
            ...rsvp,
            items_bringing: JSON.stringify(updatedRsvpItems)
          });
          return {
            ...rsvp,
            items_bringing: updatedRsvpItems
          };
        }
        return rsvp;
      });

      // Recalculate claimed items
      const claimed = new Set<string>();
      updatedRsvps.forEach(rsvp => {
        let rsvpItems: string[] = Array.isArray(rsvp.items_bringing) 
          ? rsvp.items_bringing 
          : typeof rsvp.items_bringing === 'string'
            ? JSON.parse(rsvp.items_bringing)
            : [];
        rsvpItems.forEach((item: string) => claimed.add(item));
      });
      
      // Update all state
      setEvent(prev => prev ? { ...prev, needed_items: updatedItems } : null);
      setNeededItems(prev => prev.filter((item: string) => item !== itemToRemove));
      setRsvps(updatedRsvps);
      setClaimedItems(Array.from(claimed));
    } catch (error) {
      setError('Failed to remove item');
    }
  };

  const handleUpdateInfoClick = () => {
    if (!event) return;
    
    setUpdateForm({
      description: event.description,
      location: event.location,
      date: event.date.slice(0, 16), // Format date for datetime-local input
      rsvp_cutoff_date: event.rsvp_cutoff_date ? event.rsvp_cutoff_date.slice(0, 16) : '',
      wallpaper: null
    });
    setUpdateInfoDialogOpen(true);
  };

  const handleUpdateInfoSubmit = async () => {
    if (!event) return;
    
    try {
      // Create FormData and append all fields
      const formData = new FormData();
      formData.append('description', updateForm.description);
      formData.append('location', updateForm.location);
      formData.append('date', updateForm.date);
      formData.append('rsvp_cutoff_date', updateForm.rsvp_cutoff_date);
      formData.append('title', event.title); // Keep existing title
      formData.append('needed_items', JSON.stringify(event.needed_items)); // Keep existing needed items
      
      // Append wallpaper if a new one was selected
      if (updateForm.wallpaper) {
        formData.append('wallpaper', updateForm.wallpaper);
      }
      
      const response = await axios.put(`/api/events/${slug}`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      
      setEvent(prev => prev ? {
        ...prev,
        description: updateForm.description,
        location: updateForm.location,
        date: updateForm.date,
        rsvp_cutoff_date: updateForm.rsvp_cutoff_date,
        wallpaper: response.data.wallpaper || prev.wallpaper
      } : null);
      
      setUpdateInfoDialogOpen(false);
    } catch (error) {
      console.error('Error updating event:', error);
      setError('Failed to update event information');
    }
  };

  const handleWallpaperChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setUpdateForm(prev => ({
        ...prev,
        wallpaper: e.target.files![0]
      }));
    }
  };

  if (loading) {
    return (
      <Container maxWidth="lg">
        <Typography>Loading...</Typography>
      </Container>
    );
  }

  if (error || !event) {
    return (
      <Container maxWidth="lg">
        <Typography color="error">{error || 'Event not found'}</Typography>
      </Container>
    );
  }

  return (
    <Box
      sx={{
        minHeight: '100vh',
        width: '100%',
        backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundAttachment: 'fixed',
        position: 'relative',
        overflowY: 'auto',
        py: 4,
      }}
    >
      <Container maxWidth="lg">
        <Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
          <Box sx={{ mb: 4 }}>
            <Typography variant="h4" component="h2" color="primary" gutterBottom>
              {event.title} - Admin
            </Typography>
            <Box sx={{ 
              display: 'flex', 
              flexWrap: 'wrap',
              gap: 2, 
              mb: 3 
            }}>
              <Button
                variant="outlined"
                onClick={() => navigate('/')}
                sx={{ 
                  minWidth: 'fit-content',
                  whiteSpace: 'nowrap'
                }}
              >
                Back to Events
              </Button>
              <Button
                variant="outlined"
                onClick={handleUpdateInfoClick}
                startIcon={<EditIcon />}
                sx={{ 
                  minWidth: 'fit-content',
                  whiteSpace: 'nowrap'
                }}
              >
                Update Info
              </Button>
              <Button
                variant="outlined"
                startIcon={<AddIcon />}
                onClick={() => setManageItemsDialogOpen(true)}
                sx={{ 
                  minWidth: 'fit-content',
                  whiteSpace: 'nowrap'
                }}
              >
                Manage Items
              </Button>
              <Button
                variant="contained"
                color="error"
                startIcon={<DeleteIcon />}
                onClick={() => setDeleteEventDialogOpen(true)}
                sx={{ 
                  minWidth: 'fit-content',
                  whiteSpace: 'nowrap'
                }}
              >
                Delete Event
              </Button>
            </Box>
          </Box>

          <Box sx={{ mb: 4 }}>
            <Typography variant="subtitle1" gutterBottom>
              <strong>Info:</strong> {event.description || 'None'}
            </Typography>
            <Typography variant="subtitle1" gutterBottom>
              <strong>Location:</strong> {event.location}
            </Typography>
            <Typography variant="subtitle1" gutterBottom>
              <strong>Date:</strong> {new Date(event.date).toLocaleString()}
            </Typography>
            {event.rsvp_cutoff_date && (
              <Typography variant="subtitle1" gutterBottom>
                <strong>RSVP cut-off date:</strong> {new Date(event.rsvp_cutoff_date).toLocaleString()}
              </Typography>
            )}
          </Box>

          {/* Add items status section */}
          <Box sx={{ mb: 4 }}>
            <Typography variant="h6">
              Items Status
            </Typography>
            <Box sx={{ 
              display: 'flex', 
              flexDirection: 'column', 
              gap: 3, 
              maxWidth: { xs: '100%', sm: '60%' }
            }}>
              <Box>
                <Typography variant="subtitle1" gutterBottom>
                  Still Needed:
                </Typography>
                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                  {neededItems.map((item: string, index: number) => (
                    <Chip
                      key={`${item}-${index}`}
                      label={item}
                      color="primary"
                      variant="outlined"
                    />
                  ))}
                  {neededItems.length === 0 && (
                    <Typography variant="body2" color="text.secondary">
                      All items have been claimed
                    </Typography>
                  )}
                </Box>
              </Box>
              <Box>
                <Typography variant="subtitle1" gutterBottom>
                  Claimed Items:
                </Typography>
                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                  {claimedItems.map((item: string, index: number) => (
                    <Chip
                      key={`${item}-${index}`}
                      label={item}
                      color="success"
                    />
                  ))}
                  {claimedItems.length === 0 && (
                    <Typography variant="body2" color="text.secondary">
                      No items have been claimed yet
                    </Typography>
                  )}
                </Box>
              </Box>
            </Box>
          </Box>

          <Typography variant="h6" gutterBottom>
            RSVPs ({rsvps.length})
          </Typography>

          <TableContainer sx={{ 
            overflowX: 'auto',
            '& .MuiTable-root': {
              minWidth: { xs: '100%', sm: 650 }
            }
          }}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Attending</TableCell>
                  <TableCell>Guests</TableCell>
                  <TableCell>Items Bringing</TableCell>
                  <TableCell>Actions</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rsvps.map((rsvp: RSVP) => (
                  <TableRow key={rsvp.id}>
                    <TableCell>{rsvp.name}</TableCell>
                    <TableCell>{rsvp.attending.charAt(0).toUpperCase() + rsvp.attending.slice(1)}</TableCell>
                    <TableCell>
                      {rsvp.bringing_guests === 'yes' ? 
                        `${rsvp.guest_count} (${rsvp.guest_names.replace(/\s+/g, ', ')})` : 
                        'No'
                      }
                    </TableCell>
                    <TableCell>
                      {(() => {
                        let items: string[] = [];
                        try {
                          if (typeof rsvp.items_bringing === 'string') {
                            try {
                              const parsed = JSON.parse(rsvp.items_bringing);
                              items = Array.isArray(parsed) ? parsed : [];
                            } catch (e) {
                              console.error('Error parsing items_bringing JSON in table:', e);
                            }
                          } else if (Array.isArray(rsvp.items_bringing)) {
                            items = rsvp.items_bringing;
                          }
                        } catch (e) {
                          console.error('Error processing items in table:', e);
                        }
                        
                        return (
                          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                            {items.length > 0 ? items.map((item: string, index: number) => (
                              <Chip
                                key={`${item}-${index}`}
                                label={item}
                                color="success"
                                size="small"
                                variant={claimedItems.includes(item) ? "filled" : "outlined"}
                              />
                            )) : (
                              <Typography variant="body2" color="text.secondary">
                                No items
                              </Typography>
                            )}
                          </Box>
                        );
                      })()}
                    </TableCell>
                    <TableCell>
                      <IconButton
                        color="primary"
                        onClick={() => handleEditRsvp(rsvp)}
                        sx={{ mr: 1 }}
                      >
                        <EditIcon />
                      </IconButton>
                      <IconButton
                        color="error"
                        onClick={() => handleDeleteRsvp(rsvp)}
                      >
                        <DeleteIcon />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Paper>

        <Dialog
          open={deleteDialogOpen}
          onClose={() => setDeleteDialogOpen(false)}
        >
          <DialogTitle>Delete RSVP</DialogTitle>
          <DialogContent>
            <Typography>
              Are you sure you want to delete {rsvpToDelete?.name}'s RSVP?
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
            <Button onClick={confirmDelete} color="error">Delete</Button>
          </DialogActions>
        </Dialog>

        <Dialog
          open={editDialogOpen}
          onClose={() => setEditDialogOpen(false)}
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>Edit RSVP</DialogTitle>
          <DialogContent>
            <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
              <TextField
                label="Name"
                name="name"
                value={editForm.name}
                onChange={handleTextInputChange}
                fullWidth
              />
              <FormControl fullWidth>
                <InputLabel>Attending</InputLabel>
                <Select
                  name="attending"
                  value={editForm.attending}
                  onChange={handleSelectChange}
                  label="Attending"
                >
                  <MenuItem value="yes">Yes</MenuItem>
                  <MenuItem value="no">No</MenuItem>
                  <MenuItem value="maybe">Maybe</MenuItem>
                </Select>
              </FormControl>
              <FormControl fullWidth>
                <InputLabel>Bringing Guests</InputLabel>
                <Select
                  name="bringing_guests"
                  value={editForm.bringing_guests}
                  onChange={handleSelectChange}
                  label="Bringing Guests"
                >
                  <MenuItem value="yes">Yes</MenuItem>
                  <MenuItem value="no">No</MenuItem>
                </Select>
              </FormControl>
              {editForm.bringing_guests === 'yes' && (
                <>
                  <TextField
                    label="Number of Guests"
                    name="guest_count"
                    type="number"
                    value={editForm.guest_count}
                    onChange={handleTextInputChange}
                    fullWidth
                  />
                  <TextField
                    label="Guest Names"
                    name="guest_names"
                    value={editForm.guest_names}
                    onChange={handleTextInputChange}
                    fullWidth
                    multiline
                    rows={2}
                  />
                </>
              )}
              <FormControl fullWidth>
                <InputLabel>What items are you bringing?</InputLabel>
                <Select
                  multiple
                  name="items_bringing"
                  value={editForm.items_bringing}
                  onChange={handleItemsChange}
                  input={<OutlinedInput label="What items are you bringing?" />}
                  renderValue={(selected) => (
                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                      {Array.isArray(selected) ? selected.map((value: string) => (
                        <Chip
                          key={value}
                          label={value}
                          color="primary"
                        />
                      )) : null}
                    </Box>
                  )}
                >
                  {Array.from(new Set([...neededItems, ...editForm.items_bringing])).map((item: string) => (
                    <MenuItem key={item} value={item}>
                      <Checkbox checked={editForm.items_bringing.includes(item)} />
                      <ListItemText 
                        primary={item} 
                        secondary={neededItems.includes(item) ? 'Available' : 'Currently assigned'}
                      />
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Box>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setEditDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleEditSubmit} color="primary">Save Changes</Button>
          </DialogActions>
        </Dialog>

        <Dialog
          open={deleteEventDialogOpen}
          onClose={() => setDeleteEventDialogOpen(false)}
        >
          <DialogTitle>Delete Event</DialogTitle>
          <DialogContent>
            <Typography>
              Are you sure you want to delete "{event.title}"? This action cannot be undone.
            </Typography>
            <Typography color="error" sx={{ mt: 2 }}>
              All RSVPs associated with this event will also be deleted.
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setDeleteEventDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleDeleteEvent} color="error" variant="contained">
              Delete Event
            </Button>
          </DialogActions>
        </Dialog>

        <Dialog
          open={manageItemsDialogOpen}
          onClose={() => setManageItemsDialogOpen(false)}
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>Manage Needed Items</DialogTitle>
          <DialogContent>
            <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
              <Box sx={{ display: 'flex', gap: 1 }}>
                <TextField
                  label="New Item"
                  value={newItem}
                  onChange={(e) => setNewItem(e.target.value)}
                  fullWidth
                />
                <Button
                  variant="contained"
                  onClick={handleAddItem}
                  disabled={!newItem.trim()}
                >
                  Add
                </Button>
              </Box>
              <Typography variant="subtitle1" gutterBottom>
                Current Items:
              </Typography>
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                {event?.needed_items && Array.isArray(event.needed_items) && event.needed_items.map((item, index) => (
                  <Chip
                    key={`${item}-${index}`}
                    label={item}
                    onDelete={() => handleRemoveItem(item)}
                    color={claimedItems.includes(item) ? "success" : "primary"}
                  />
                ))}
              </Box>
            </Box>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setManageItemsDialogOpen(false)}>Close</Button>
          </DialogActions>
        </Dialog>

        <Dialog
          open={updateInfoDialogOpen}
          onClose={() => setUpdateInfoDialogOpen(false)}
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>Update Event Information</DialogTitle>
          <DialogContent>
            <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
              <TextField
                label="Description"
                value={updateForm.description}
                onChange={(e) => setUpdateForm(prev => ({ ...prev, description: e.target.value }))}
                fullWidth
                multiline
                rows={3}
              />
              <TextField
                label="Location"
                value={updateForm.location}
                onChange={(e) => setUpdateForm(prev => ({ ...prev, location: e.target.value }))}
                fullWidth
              />
              <TextField
                label="Date and Time"
                type="datetime-local"
                value={updateForm.date}
                onChange={(e) => setUpdateForm(prev => ({ ...prev, date: e.target.value }))}
                fullWidth
                InputLabelProps={{
                  shrink: true,
                }}
              />
              <TextField
                label="RSVP Cut-off Date"
                type="datetime-local"
                value={updateForm.rsvp_cutoff_date}
                onChange={(e) => setUpdateForm(prev => ({ ...prev, rsvp_cutoff_date: e.target.value }))}
                fullWidth
                InputLabelProps={{
                  shrink: true,
                }}
              />
              <Box sx={{ mt: 1 }}>
                <Typography variant="subtitle1" gutterBottom>
                  Wallpaper
                </Typography>
                {event.wallpaper && (
                  <Box sx={{ mb: 2 }}>
                    <Typography variant="body2" color="text.secondary" gutterBottom>
                      Current wallpaper:
                    </Typography>
                    <Box
                      component="img"
                      src={event.wallpaper}
                      alt="Current wallpaper"
                      sx={{
                        width: '100%',
                        height: 120,
                        objectFit: 'cover',
                        borderRadius: 1,
                      }}
                    />
                  </Box>
                )}
                <Button
                  variant="outlined"
                  component="label"
                  fullWidth
                  sx={{ mt: 1 }}
                >
                  {updateForm.wallpaper ? 'Change Wallpaper' : (event.wallpaper ? 'Replace Wallpaper' : 'Upload Wallpaper')}
                  <input
                    type="file"
                    hidden
                    accept="image/jpeg,image/png,image/gif"
                    onChange={handleWallpaperChange}
                  />
                </Button>
                {updateForm.wallpaper && (
                  <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
                    Selected file: {updateForm.wallpaper.name}
                  </Typography>
                )}
              </Box>
            </Box>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setUpdateInfoDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleUpdateInfoSubmit} color="primary">Save Changes</Button>
          </DialogActions>
        </Dialog>
      </Container>
    </Box>
  );
};

export default EventAdmin;