import * as React from 'react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { createEvent } from '@/services/events.service';
import { createVolunteerSlot } from '@/services/volunteerSlot.service';
import { zodResolver } from '@hookform/resolvers/zod';
import { Close, DeleteOutline, Remove } from '@mui/icons-material';
import { Autocomplete, FormHelperText, IconButton, OutlinedInput, Stack, TextField, useTheme } from '@mui/material';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import ListSubheader from '@mui/material/ListSubheader';
import MenuItem from '@mui/material/MenuItem';
import Modal from '@mui/material/Modal';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import { TimePicker } from '@mui/x-date-pickers';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Upload } from '@phosphor-icons/react';
import { Minus, MinusCircle, Plus } from '@phosphor-icons/react/dist/ssr';
import { AxiosError } from 'axios';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
import { enqueueSnackbar } from 'notistack';
import { Controller, useFieldArray, useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
import { z as zod } from 'zod';
import GooglePlacesAutocomplete from '@/components/GooglePlacesAutocomplete';

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '100%',
  maxWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
  minWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
  maxHeight: '90vh',
  minHeight: '90vh',
  bgcolor: 'background.paper',
  border: (theme: any) => theme.palette.mode === 'dark' 
    ? '1px solid rgba(255, 255, 255, 0.12)' 
    : '1px solid rgba(0, 0, 0, 0.12)',
  borderRadius: 4,
  boxShadow: (theme: any) => theme.palette.mode === 'dark' 
    ? '0 24px 48px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2)' 
    : '0 24px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1)',
  background: (theme: any) => theme.palette.mode === 'dark' 
    ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
    : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  p: { lg: 4, md: 4, sm: 2, xs: 2 },
  overflowY: 'scroll',
  backdropFilter: 'blur(20px)',
  '&::-webkit-scrollbar': {
    width: '8px',
  },
  '&::-webkit-scrollbar-track': {
    background: (theme: any) => theme.palette.mode === 'dark' ? '#2d3748' : '#f1f5f9',
    borderRadius: '4px',
  },
  '&::-webkit-scrollbar-thumb': {
    background: (theme: any) => theme.palette.mode === 'dark' ? '#4a5568' : '#cbd5e0',
    borderRadius: '4px',
    '&:hover': {
      background: (theme: any) => theme.palette.mode === 'dark' ? '#718096' : '#a0aec0',
    },
  },
};

interface IAddSlot {
  open: boolean;
  handleClose: () => void;
  refetchEvent: () => void;
}
type TimeSlot = {
  startTime: string;
  endTime: string;
  location: string;
};

const dummyData = [
  { label: 'The Shawshank Redemption', value: 1994 },
  { label: 'The Godfather', value: 1972 },
  { label: 'The Godfather: Part II', value: 1974 },
  { label: 'The Dark Knight', value: 2008 },
];

const schema = zod.object({
  eventName: zod.string().min(1, 'Event name is required'),
  eventSummary: zod.string().min(1, 'Event Summary is required'),
  price: zod.string().min(1, 'Price is required'),
  numberOfSeats: zod.string().min(1, 'Number of seats is required'),
  organizerName: zod.string().min(1, 'Organizer name is required'),
  address: zod.string().min(1, 'Address is required'),
  country: zod.string().min(1, 'Country is required'),
  state: zod.string().min(1, 'State is required'),
  city: zod.string().min(1, 'City is required'),
  eventDate: zod.string().min(1, 'Event Date is required'),
  startTime: zod.string().min(1, 'Start Time is required'),
  endTime: zod.string().min(1, 'End Time is required'),
  latitude: zod.string().optional(),
  longitude: zod.string().optional(),
  organizerImage: zod.instanceof(File).optional(),
  images: zod.array(zod.instanceof(File)),
});

export type CreateSlotValues = zod.infer<typeof schema>;

export default function AddEventModal({ open, handleClose, refetchEvent }: IAddSlot) {
  const [isLoading, setIsLoading] = React.useState(false);
  const [organizerImage, setOrganizerImage] = React.useState<File | null>(null);
  const [images, setImages] = React.useState<File[]>([]);
  const [selectedPlace, setSelectedPlace] = React.useState<any | null>(null);
  const pathname = usePathname();
  const theme = useTheme();
  const {
    control,
    handleSubmit,
    setError,
    reset,
    setValue,
    watch,
    formState: { errors },
  } = useForm<CreateSlotValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      eventName: '',
      eventSummary: '',
      price: '',
      numberOfSeats: '',
      organizerName: '',
      address: '',
      country: '',
      state: '',
      city: '',
      eventDate: dayjs(new Date()).utc().toISOString(),
      startTime: '',
      endTime: '',
      latitude: undefined,
      longitude: undefined,
      images: [],
      organizerImage: undefined,
    },
  });

  const router = useRouter();
  const searchParams = useSearchParams();

  const closeSlotModal = () => {
    // Remove the `modal` query param while preserving dynamic path
    router.replace(`?modal=1`); // Remove the `modal` query param from the route
  };

  // Handle place selection from Google Places
  const handlePlaceSelect = (place: any) => {
    setSelectedPlace(place);
    
    // Extract coordinates
    if (place.geometry?.location) {
      const lat = place.geometry.location.lat();
      const lng = place.geometry.location.lng();
      setValue('latitude', lat.toString());
      setValue('longitude', lng.toString());
    }

    // Extract address components
    if (place.address_components) {
      let country = '';
      let state = '';
      let city = '';

      place.address_components.forEach((component: any) => {
        const types = component.types;
        if (types.includes('country')) {
          country = component.long_name;
        }
        if (types.includes('administrative_area_level_1')) {
          state = component.long_name;
        }
        if (types.includes('locality') || types.includes('administrative_area_level_2')) {
          city = component.long_name;
        }
      });

      if (country) setValue('country', country);
      if (state) setValue('state', state);
      if (city) setValue('city', city);
    }

    console.log('Selected place:', place);
    console.log('Coordinates:', place.geometry?.location?.lat(), place.geometry?.location?.lng());
  };

  const onSubmit = React.useCallback(async (values: CreateSlotValues) => {
    if (!values.organizerImage) {
      enqueueSnackbar('Please upload an organizer image', { variant: 'error' });
      return;
    }
    if (values.images.length === 0) {
      enqueueSnackbar('Please upload images', { variant: 'error' });
      return;
    }
    const payload = {
      eventName: values.eventName,
      eventSummary: values.eventSummary,
      organizerImage: values.organizerImage as File,
      media: values.images,
      price: values.price,
      numberOfSeats: values.numberOfSeats,
      organizerName: values.organizerName,
      address: values.address,
      country: values.country,
      state: values.state,
      city: values.city,
      eventDate: values.startTime, // Use explicitly formatted UTC date
      startTime: values.startTime,
      endTime: values.endTime,
      latitude: values.latitude || '0',
      longitude: values.longitude || '0',
    };
    console.log('Payload:', payload);
  
    try {
      setIsLoading(true);
      const response = await createEvent(payload);
      console.log('Response:', response);
      enqueueSnackbar('Event added successfully', { variant: 'success' });
      setIsLoading(false);
      reset();
      refetchEvent();
      closeSlotModal();
    } catch (error) {
      console.error('Error in creating event:', error);
      enqueueSnackbar('Error in creating event', { variant: 'error' });
      setIsLoading(false);
    }
  }, [reset, refetchEvent, closeSlotModal]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log('event.target.files', event.target.files);
    if (event.target.files && event.target.files[0]) {
      setOrganizerImage(event.target.files[0]);
      setValue('organizerImage', event.target.files[0]);
      const previewUrl = URL.createObjectURL(event.target.files[0]);
      console.log('Image Preview: ', previewUrl);
      event.target.value = '';
    }
  };

  const handleRemoveImage = () => {
    setOrganizerImage(null);
    setValue('organizerImage', undefined);
  };

  const handleFileChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(event.target.files || []);

    if (images.length + selectedFiles.length > 3) {
      toast.error('You can only upload up to 3 images.');
      return;
    }

    const newFiles = [...images, ...selectedFiles];
    setValue('images', newFiles);
    setImages(newFiles);

    // const previews = newFiles.map((file) => URL.createObjectURL(file));
    // setImagePreviews(previews);
  };

  const handleRemoveImage1 = (index: number) => {
    const updatedFiles = images.filter((_, i) => i !== index);
    // const updatedPreviews = imagePreviews.filter((_, i) => i !== index);
    setValue('images', updatedFiles);
    setImages(updatedFiles);
    // setImagePreviews(updatedPreviews);
  };

  const selectedDate = watch('eventDate');
  const selectedStartTime = watch('startTime');
  const selectedEndTime = watch('endTime');

  const updateStartDateTime = (newTime: dayjs.Dayjs | null) => {
    if (newTime && selectedDate) {
      const date = dayjs(selectedDate).startOf('day'); // Use dayjs to parse selectedDate
      const combinedDateTime = date
        .set('hour', newTime.hour())
        .set('minute', newTime.minute())
        .set('second', newTime.second());
      const utcDateTime = combinedDateTime.utc().toISOString();
      console.log('Start Time UTC:', utcDateTime); // Debug log
      setValue('startTime', utcDateTime, { shouldValidate: true });
    }
  };
  
  const updateEndDateTime = (newTime: dayjs.Dayjs | null) => {
    if (newTime && selectedDate) {
      const date = dayjs(selectedDate).startOf('day'); // Use dayjs to parse selectedDate
      const combinedDateTime = date
        .set('hour', newTime.hour())
        .set('minute', newTime.minute())
        .set('second', newTime.second());
      const utcDateTime = combinedDateTime.utc().toISOString();
      console.log('End Time UTC:', utcDateTime); // Debug log
      setValue('endTime', utcDateTime, { shouldValidate: true });
    }
  };

  React.useEffect(() => {
    if (selectedDate) {
      if (dayjs.isDayjs(selectedStartTime)) {
        updateStartDateTime(selectedStartTime);
      }
      if (dayjs.isDayjs(selectedEndTime)) {
        updateEndDateTime(selectedEndTime);
      }
    }
  }, [selectedDate]);

  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        slots={{ backdrop: Backdrop }}
        slotProps={{
          backdrop: {
            timeout: 200,
          },
        }}
        style={{ 
          backdropFilter: 'blur(12px)', 
          backgroundColor: theme.palette.mode === 'dark' 
            ? 'rgba(0, 0, 0, 0.7)' 
            : 'rgba(0, 0, 0, 0.5)', 
          outline: 0 
        }}
      >
        <Fade in={open}>
          <Box
            sx={{
              position: 'absolute' as 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '100%',
              maxWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
              minWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
              minHeight: '100vh',
              maxHeight: '100vh',
            }}
          >
            <Box sx={style}>
              <IconButton
                onClick={handleClose}
                sx={{
                  position: 'absolute',
                  right: 16,
                  top: 16,
                  backgroundColor: theme.palette.mode === 'dark' 
                    ? 'rgba(255, 255, 255, 0.08)' 
                    : 'rgba(0, 0, 0, 0.04)',
                  color: theme.palette.mode === 'dark' ? '#e2e8f0' : '#64748b',
                  width: 40,
                  height: 40,
                  '&:hover': {
                    backgroundColor: theme.palette.mode === 'dark' 
                      ? 'rgba(239, 68, 68, 0.2)' 
                      : 'rgba(239, 68, 68, 0.1)',
                    color: theme.palette.mode === 'dark' ? '#f87171' : '#dc2626',
                    transform: 'scale(1.05)',
                  },
                  transition: 'all 0.2s ease-in-out',
                  backdropFilter: 'blur(8px)',
                  border: theme.palette.mode === 'dark' 
                    ? '1px solid rgba(255, 255, 255, 0.08)' 
                    : '1px solid rgba(0, 0, 0, 0.08)',
                }}
              >
                <Close />
              </IconButton>
              <Stack direction={'row'} justifyContent={'space-between'} sx={{ mb: 3 }}>
                <Typography 
                  id="transition-modal-title" 
                  variant="h4" 
                  component="h2"
                  sx={{
                    fontWeight: 700,
                    background: theme.palette.mode === 'dark' 
                      ? 'linear-gradient(135deg, #ffd700 0%, #ffed4a 100%)' 
                      : 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                    letterSpacing: '-0.025em',
                  }}
                >
                  ✨ Add New Event
                </Typography>
              </Stack>
              <Box>
                <form onSubmit={handleSubmit(onSubmit)}>
                  <Stack spacing={2} mt={2}>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'eventName'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.eventName)} fullWidth>
                              <InputLabel>Event Name</InputLabel>
                              <OutlinedInput {...field} label="Event Name" />
                              {errors.eventName && <FormHelperText>{errors.eventName.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                      <Controller
  name={'eventDate'}
  control={control}
  render={({ field }) => (
    <DatePicker
      label="Date"
      value={field.value ? dayjs(field.value) : null}
      onChange={(newValue) => {
        if (newValue) {
          // Create UTC date string directly from the selected date
          const utcDate = dayjs.utc(newValue.format('YYYY-MM-DD')).toISOString();
          console.log('Selected Date (UTC):', utcDate);
          field.onChange(utcDate);
        } else {
          field.onChange(null);
        }
      }}
      minDate={dayjs()}
      slotProps={{
        textField: {
          error: Boolean(errors.eventDate),
          helperText: errors.eventDate?.message,
        },
      }}
    />
  )}
/>
                      </Stack>
                    </Stack>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'startTime'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors?.startTime)} fullWidth>
                              <TimePicker
                                label="Start Time"
                                value={field.value ? dayjs(field.value) : null}
                                // onChange={(newValue) => field.onChange(newValue?.format('HH:mm:ss'))}
                                onChange={(newTime) => {
                                  updateStartDateTime(newTime);
                                }}
                              />
                              {errors?.startTime && <FormHelperText>{errors?.startTime.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'endTime'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors?.endTime)} fullWidth>
                              <TimePicker
                                label="End Time"
                                value={field.value ? dayjs(field.value) : null}
                                onChange={(newTime) => {
                                  updateEndDateTime(newTime);
                                }}
                              />
                              {errors?.endTime && <FormHelperText>{errors?.endTime.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                    </Stack>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'eventSummary'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.eventSummary)} fullWidth>
                              <InputLabel>Event Summary</InputLabel>
                              <OutlinedInput {...field} label="Event Summary" minRows={4} rows={4} multiline />
                              {errors.eventSummary && <FormHelperText>{errors.eventSummary.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'address'}
                          control={control}
                          render={({ field }) => (
                            <GooglePlacesAutocomplete
                              value={field.value}
                              onChange={field.onChange}
                              onPlaceSelect={handlePlaceSelect}
                              error={Boolean(errors.address)}
                              helperText={errors.address?.message}
                              label=""
                              placeholder="Address"
                            />
                          )}
                        />
                      </Stack>
                    </Stack>

                    {/* Hidden fields for latitude and longitude */}
                    <Stack direction="row" spacing={2} mb={2} sx={{ display: 'none' }}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'latitude'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.latitude)} fullWidth>
                              <InputLabel>Latitude</InputLabel>
                              <OutlinedInput {...field} label="Latitude" />
                              {errors.latitude && <FormHelperText>{errors.latitude.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'longitude'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.longitude)} fullWidth>
                              <InputLabel>Longitude</InputLabel>
                              <OutlinedInput {...field} label="Longitude" />
                              {errors.longitude && <FormHelperText>{errors.longitude.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                    </Stack>

                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'country'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.country)} fullWidth>
                              <InputLabel>Country</InputLabel>
                              <OutlinedInput {...field} label="Country" />
                              {errors.country && <FormHelperText>{errors.country.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'city'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.city)} fullWidth>
                              <InputLabel>City</InputLabel>
                              <OutlinedInput {...field} label="City" />
                              {errors.city && <FormHelperText>{errors.city.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'state'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.state)} fullWidth>
                              <InputLabel>State</InputLabel>
                              <OutlinedInput {...field} label="State" />
                              {errors.state && <FormHelperText>{errors.state.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                    </Stack>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        <Controller
                          name={'numberOfSeats'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.numberOfSeats)} fullWidth>
                              <InputLabel>Number Of Seats</InputLabel>
                              <OutlinedInput {...field} label="Number Of Seats" />
                              {errors.numberOfSeats && <FormHelperText>{errors.numberOfSeats.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'price'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.price)} fullWidth>
                              <InputLabel>Price</InputLabel>
                              <OutlinedInput {...field} label="Price" />
                              {errors.price && <FormHelperText>{errors.price.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                      <Stack width={'100%'}>
                        <Controller
                          name={'organizerName'}
                          control={control}
                          render={({ field }) => (
                            <FormControl error={Boolean(errors.organizerName)} fullWidth>
                              <InputLabel>Organizer Name</InputLabel>
                              <OutlinedInput {...field} label="Organizer Name" />
                              {errors.organizerName && <FormHelperText>{errors.organizerName.message}</FormHelperText>}
                            </FormControl>
                          )}
                        />
                      </Stack>
                    </Stack>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack width={'100%'}>
                        {organizerImage ? (
                          <>
                            <InputLabel>Organizer Image</InputLabel>
                            <Box
                              sx={{
                                position: 'relative',
                                mt: 2,
                                display: 'flex',
                                justifyContent: 'center', // Centering the image preview
                                alignItems: 'center',
                                maxWidth: '100px',
                                height: '100px',
                              }}
                            >
                              <img
                                src={URL.createObjectURL(organizerImage)}
                                alt="Uploaded Preview"
                                style={{
                                  maxWidth: '100px',
                                  height: '100px',
                                  borderRadius: '10px',
                                  objectFit: 'cover',
                                }}
                              />
                              <Button
                                onClick={handleRemoveImage}
                                sx={{
                                  position: 'absolute',
                                  top: '3px',
                                  right: '0px',
                                  minWidth: 'unset',
                                  color: theme.palette.mode === 'dark' ? '#fff' : 'black',
                                  backgroundColor: theme.palette.mode === 'dark' 
                                    ? 'rgba(0, 0, 0, 0.6)' 
                                    : 'rgba(255, 255, 255, 0.6)',
                                  backdropFilter: 'blur(2px)',
                                  '&:hover': {
                                    color: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                    backgroundColor: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                                  },
                                  borderRadius: '50%',
                                  padding: '0',
                                  fontSize: '20px',
                                  width: '24px',
                                  height: '24px',
                                }}
                              >
                                &times;
                              </Button>
                            </Box>
                          </>
                        ) : (
                          <Button
                            variant="contained"
                            component="label"
                            sx={{
                              backgroundColor: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                              color: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                              fontWeight: 'bold',
                              borderRadius: '25px',
                              '&:hover': {
                                backgroundColor: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                borderColor: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                color: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                              },
                            }}
                            startIcon={<Upload size={32} weight="fill" />}
                            size="large"
                          >
                            Upload Organizer Image
                            <input type="file" hidden accept="image/*" onChange={handleFileChange} />
                          </Button>
                        )}
                      </Stack>
                      <Stack sx={{ width: '100%' }}>
                        <Box sx={{ display: 'flex', gap: '5px' }}>
                          <Button
                            variant="contained"
                            component="label"
                            sx={{
                              backgroundColor: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                              color: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                              fontWeight: 'bold',
                              borderRadius: '25px',
                              '&:hover': {
                                backgroundColor: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                borderColor: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                color: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                              },
                            }}
                            startIcon={<Upload size={32} weight="fill" />}
                            size="large"
                          >
                            Upload Files
                            <input type="file" multiple hidden accept="image/*" onChange={handleFileChange1} />
                          </Button>
                        </Box>
                        <Box
                          sx={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 2,
                            mt: 2,
                          }}
                        >
                          {images.map((preview, index) => (
                            <Box
                              key={index}
                              sx={{
                                position: 'relative',
                                display: 'flex',
                                justifyContent: 'center', // Centering the image preview
                                alignItems: 'center',
                                maxWidth: '100px',
                                height: '100px',
                              }}
                            >
                              <img
                                src={URL.createObjectURL(preview)}
                                alt="Uploaded Preview"
                                style={{
                                  maxWidth: '100px',
                                  height: '100px',
                                  borderRadius: '10px',
                                  objectFit: 'cover',
                                }}
                              />
                              <Button
                                onClick={() => handleRemoveImage1(index)}
                                sx={{
                                  position: 'absolute',
                                  top: '3px',
                                  right: '0px',
                                  minWidth: 'unset',
                                  color: theme.palette.mode === 'dark' ? '#fff' : 'black',
                                  backgroundColor: theme.palette.mode === 'dark' 
                                    ? 'rgba(0, 0, 0, 0.6)' 
                                    : 'rgba(255, 255, 255, 0.6)',
                                  backdropFilter: 'blur(2px)',
                                  '&:hover': {
                                    color: theme.palette.mode === 'dark' ? '#ffd700' : '#FFDD31',
                                    backgroundColor: theme.palette.mode === 'dark' ? '#1a202c' : 'black',
                                  },
                                  borderRadius: '50%',
                                  padding: '0',
                                  fontSize: '20px',
                                  width: '24px',
                                  height: '24px',
                                }}
                              >
                                &times;
                              </Button>
                            </Box>
                          ))}
                        </Box>
                      </Stack>
                    </Stack>

                    <Stack direction={'row'} gap={2} sx={{ mt: 4, pt: 3, borderTop: theme.palette.mode === 'dark' ? '1px solid #4a5568' : '1px solid #e2e8f0' }}>
                      <Button 
                        variant="contained" 
                        type="submit" 
                        disabled={isLoading}
                        size="large"
                        sx={{
                          minWidth: 120,
                          height: 48,
                          borderRadius: 3,
                          background: theme.palette.mode === 'dark' 
                            ? 'linear-gradient(135deg, #ffd700 0%, #ffed4a 100%)' 
                            : 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)',
                          color: theme.palette.mode === 'dark' ? '#1a202c' : '#ffffff',
                          fontWeight: 600,
                          textTransform: 'none',
                          fontSize: '1rem',
                          '&:hover': {
                            background: theme.palette.mode === 'dark' 
                              ? 'linear-gradient(135deg, #ffed4a 0%, #ffd700 100%)' 
                              : 'linear-gradient(135deg, #2d3748 0%, #4a5568 100%)',
                            transform: 'translateY(-2px)',
                            boxShadow: theme.palette.mode === 'dark' 
                              ? '0 8px 25px rgba(255, 215, 0, 0.3)' 
                              : '0 8px 25px rgba(26, 32, 44, 0.3)',
                          },
                          '&:disabled': {
                            background: theme.palette.mode === 'dark' ? '#4a5568' : '#e2e8f0',
                            color: theme.palette.mode === 'dark' ? '#a0aec0' : '#9ca3af',
                          },
                          transition: 'all 0.2s ease-in-out',
                          boxShadow: theme.palette.mode === 'dark' 
                            ? '0 4px 12px rgba(255, 215, 0, 0.2)' 
                            : '0 4px 12px rgba(26, 32, 44, 0.2)',
                        }}
                      >
                        {isLoading ? 'Creating...' : '🎉 Create Event'}
                      </Button>
                      <Button 
                        variant="outlined" 
                        onClick={handleClose}
                        size="large"
                        sx={{
                          minWidth: 100,
                          height: 48,
                          borderRadius: 3,
                          border: theme.palette.mode === 'dark' ? '2px solid #4a5568' : '2px solid #e2e8f0',
                          color: theme.palette.mode === 'dark' ? '#a0aec0' : '#64748b',
                          fontWeight: 500,
                          textTransform: 'none',
                          fontSize: '1rem',
                          '&:hover': {
                            border: theme.palette.mode === 'dark' ? '2px solid #718096' : '2px solid #cbd5e0',
                            backgroundColor: theme.palette.mode === 'dark' 
                              ? 'rgba(113, 128, 150, 0.1)' 
                              : 'rgba(203, 213, 224, 0.1)',
                            transform: 'translateY(-1px)',
                          },
                          transition: 'all 0.2s ease-in-out',
                        }}
                      >
                        Cancel
                      </Button>
                    </Stack>
                  </Stack>
                </form>
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </div>
  );
}