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,
} 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`)
        ]);
        console.log('API Response:', eventResponse.data);
        
        // 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 {
            const rsvpItems = typeof rsvp.items_bringing === 'string'
              ? JSON.parse(rsvp.items_bringing)
              : Array.isArray(rsvp.items_bringing)
                ? rsvp.items_bringing
                : [];
            rsvpItems.forEach((item: string) => claimed.add(item));
          } catch (e) {
            console.error('Error parsing RSVP items:', e);
          }
        });
        
        // Filter out claimed items
        const availableItems = items.filter(item => !claimed.has(item));
        
        console.log('Available items:', availableItems);
        setNeededItems(availableItems);
        setClaimedItems(Array.from(claimed));
      } catch (error) {
        console.error('Error fetching event details:', error);
        setError('Failed to load event details');
        setNeededItems([]);
      }
    };
    fetchEventDetails();
  }, [slug]);

  useEffect(() => {
    console.log('Current neededItems state:', neededItems);
  }, [neededItems]);

  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.value;
    console.log('Select onChange value:', value);
    const itemsArray = Array.isArray(value) 
      ? value 
      : typeof value === 'string' 
        ? value.split(',').map((item: string): string => item.trim()) 
        : [];
    console.log('Processed items array:', itemsArray);
    setFormData(prev => ({
      ...prev,
      items_bringing: itemsArray
    }));
  };

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

    try {
      await axios.post(`/api/events/${slug}/rsvp`, formData);
      setSuccess(true);
    } catch (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={Array.isArray(formData.items_bringing) ? formData.items_bringing : []}
                    onChange={handleItemsChange}
                    input={<OutlinedInput label="What items are you bringing?" />}
                    renderValue={(selected) => {
                      if (!Array.isArray(selected) || selected.length === 0) return '';
                      return selected.join(', ');
                    }}
                  >
                    {neededItems.map((item) => (
                      <MenuItem key={item} value={item}>
                        <Checkbox checked={Array.isArray(formData.items_bringing) && 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;