import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import {
  Box,
  Paper,
  Typography,
  TextField,
  Button,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  SelectChangeEvent,
  Container,
  Checkbox,
  ListItemText,
  OutlinedInput,
  Chip,
} from '@mui/material';

interface RSVPFormData {
  name: string;
  attending: string;
  bringing_guests: string;
  guest_count: number;
  guest_names: string;
  items_bringing: string[];
}

const RSVPForm: React.FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const [formData, setFormData] = useState<RSVPFormData>({
    name: '',
    attending: '',
    bringing_guests: '',
    guest_count: 0,
    guest_names: '',
    items_bringing: []
  });
  const [neededItems, setNeededItems] = useState<string[]>([]);
  const [claimedItems, setClaimedItems] = useState<string[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchEventDetails = async () => {
      try {
        const [eventResponse, rsvpsResponse] = await Promise.all([
          axios.get(`/api/events/${slug}`),
          axios.get(`/api/events/${slug}/rsvps`)
        ]);
        
        // Process needed items
        let items: string[] = [];
        if (eventResponse.data.needed_items) {
          try {
            items = typeof eventResponse.data.needed_items === 'string'
              ? JSON.parse(eventResponse.data.needed_items)
              : Array.isArray(eventResponse.data.needed_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>();
        rsvpsResponse.data.forEach((rsvp: any) => {
          try {
            let rsvpItems: string[] = [];
            if (typeof rsvp.items_bringing === 'string') {
              try {
                const parsed = JSON.parse(rsvp.items_bringing);
                rsvpItems = Array.isArray(parsed) ? parsed : [];
              } catch (e) {
                console.error('Error parsing items_bringing JSON:', e);
                rsvpItems = [];
              }
            } else if (Array.isArray(rsvp.items_bringing)) {
              rsvpItems = rsvp.items_bringing;
            }
            
            if (Array.isArray(rsvpItems)) {
              rsvpItems.forEach((item: string) => claimed.add(item));
            }
          } catch (e) {
            console.error('Error processing RSVP items:', e);
          }
        });
        
        // Filter out claimed items
        const availableItems = items.filter(item => !claimed.has(item));
        
        setNeededItems(availableItems);
        setClaimedItems(Array.from(claimed));
      } catch (error) {
        console.error('Error fetching event details:', error);
        setError('Failed to load event details');
        setNeededItems([]);
      }
    };
    fetchEventDetails();
  }, [slug]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSelectChange = (e: SelectChangeEvent) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
      const submissionData = {
        ...formData,
        items_bringing: formData.items_bringing
      };
      const response = await axios.post(`/api/events/${slug}/rsvp`, submissionData);
      
      // Update the needed and claimed items
      const [eventResponse, rsvpsResponse] = await Promise.all([
        axios.get(`/api/events/${slug}`),
        axios.get(`/api/events/${slug}/rsvps`)
      ]);
      
      // 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 including the new submission
      const claimed = new Set<string>();
      
      // First add items from the new submission
      if (Array.isArray(response.data.items_bringing)) {
        response.data.items_bringing.forEach(item => claimed.add(item));
      }
      
      // Then add items from existing RSVPs
      rsvpsResponse.data.forEach((rsvp: any) => {
        try {
          let rsvpItems: string[] = [];
          if (typeof rsvp.items_bringing === 'string') {
            try {
              const parsed = JSON.parse(rsvp.items_bringing);
              rsvpItems = Array.isArray(parsed) ? parsed : [];
            } catch (e) {
              console.error('Error parsing items_bringing JSON:', e);
            }
          } else if (Array.isArray(rsvp.items_bringing)) {
            rsvpItems = rsvp.items_bringing;
          }
          
          if (rsvpItems.length > 0) {
            rsvpItems.forEach(item => claimed.add(item));
          }
        } catch (e) {
          console.error('Error processing RSVP items:', e);
        }
      });
      
      // Filter out claimed items
      const availableItems = items.filter(item => !claimed.has(item));
      
      setNeededItems(availableItems);
      setClaimedItems(Array.from(claimed));
      setSuccess(true);
    } catch (err) {
      console.error('Error submitting RSVP:', err);
      setError('Failed to submit RSVP. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  if (success) {
    return (
      <Container maxWidth="sm">
        <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
          <Typography variant="h4" component="h2" gutterBottom color="primary">
            Thank You!
          </Typography>
          <Typography variant="body1" sx={{ mb: 3 }}>
            Your RSVP has been submitted successfully.
          </Typography>
          <Button
            variant="contained"
            color="primary"
            onClick={() => navigate('/')}
          >
            Back to Events
          </Button>
        </Paper>
      </Container>
    );
  }

  return (
    <Container maxWidth="sm">
      <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
        <Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
          RSVP Form
        </Typography>
        
        {error && (
          <Typography color="error" align="center" sx={{ mb: 2 }}>
            {error}
          </Typography>
        )}

        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            fullWidth
            variant="outlined"
          />

          <FormControl fullWidth>
            <InputLabel>Are you attending?</InputLabel>
            <Select
              name="attending"
              value={formData.attending}
              onChange={handleSelectChange}
              label="Are you attending?"
              required
            >
              <MenuItem value="yes">Yes</MenuItem>
              <MenuItem value="no">No</MenuItem>
            </Select>
          </FormControl>

          {formData.attending === 'yes' && (
            <>
              <FormControl fullWidth>
                <InputLabel>Are you bringing any guests?</InputLabel>
                <Select
                  name="bringing_guests"
                  value={formData.bringing_guests}
                  onChange={handleSelectChange}
                  label="Are you bringing any guests?"
                >
                  <MenuItem value="yes">Yes</MenuItem>
                  <MenuItem value="no">No</MenuItem>
                </Select>
              </FormControl>

              {formData.bringing_guests === 'yes' && (
                <>
                  <TextField
                    label="Number of Guests"
                    name="guest_count"
                    type="number"
                    value={formData.guest_count}
                    onChange={handleChange}
                    fullWidth
                    variant="outlined"
                    inputProps={{ min: 1 }}
                  />

                  <TextField
                    label="Guest Names"
                    name="guest_names"
                    value={formData.guest_names}
                    onChange={handleChange}
                    multiline
                    rows={3}
                    fullWidth
                    variant="outlined"
                    placeholder="Please list the names of your guests"
                  />
                </>
              )}

              {neededItems.length > 0 && (
                <FormControl fullWidth>
                  <InputLabel>What items are you bringing?</InputLabel>
                  <Select
                    multiple
                    name="items_bringing"
                    value={formData.items_bringing}
                    onChange={handleItemsChange}
                    input={<OutlinedInput label="What items are you bringing?" />}
                    renderValue={(selected) => (
                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                        {selected.map((value) => (
                          <Chip key={value} label={value} />
                        ))}
                      </Box>
                    )}
                  >
                    {neededItems.map((item) => (
                      <MenuItem key={item} value={item}>
                        <Checkbox checked={formData.items_bringing.includes(item)} />
                        <ListItemText primary={item} />
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            </>
          )}

          <Button
            type="submit"
            variant="contained"
            color="primary"
            size="large"
            disabled={isSubmitting}
            sx={{ mt: 2 }}
          >
            {isSubmitting ? 'Submitting...' : 'Submit RSVP'}
          </Button>
        </Box>
      </Paper>
    </Container>
  );
};

export default RSVPForm;