import { useState, useEffect } from 'react'
import { createGuest, updateGuest } from '../api/api'
import './GuestForm.css'

function GuestForm({ eventId, guest, onGuestCreated, onGuestUpdated, onCancel }) {
  const [formData, setFormData] = useState({
    first_name: '',
    last_name: '',
    email: '',
    phone_number: '',
    rsvp_status: 'invited',
    meal_preference: '',
    has_plus_one: false,
    plus_one_name: '',
    companion_count: 0,
    notes: '',
    table_number: ''
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    if (guest) {
      setFormData(guest)
    }
  }, [guest])

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    try {
      if (guest) {
        await onGuestUpdated(guest.id, formData)
      } else {
        await onGuestCreated(formData)
      }
    } catch (err) {
      setError(err.response?.data?.detail || 'Failed to save guest')
      console.error('Error saving guest:', err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{guest ? 'עריכת אורח' : 'הוספת אורח חדש'}</h2>
          <button className="close-btn" onClick={onCancel}>×</button>
        </div>

        {error && <div className="error-message">{error}</div>}

        <form onSubmit={handleSubmit}>
          <div className="form-row">
            <div className="form-group">
              <label>שם פרטי *</label>
              <input
                type="text"
                name="first_name"
                value={formData.first_name}
                onChange={handleChange}
                required
              />
            </div>

            <div className="form-group">
              <label>שם משפחה *</label>
              <input
                type="text"
                name="last_name"
                value={formData.last_name}
                onChange={handleChange}
                required
              />
            </div>
          </div>

          <div className="form-row">
            <div className="form-group">
              <label>דוא״ל</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
              />
            </div>

            <div className="form-group">
              <label>מספר טלפון</label>
              <input
                type="tel"
                name="phone_number"
                value={formData.phone_number}
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="form-row">
            <div className="form-group">
              <label>סטטוס תגובה</label>
              <select
                name="rsvp_status"
                value={formData.rsvp_status}
                onChange={handleChange}
              >
                <option value="invited">הוזמן/ה</option>
                <option value="confirmed">אישר/ה</option>
                <option value="declined">סירב/ה</option>
              </select>
            </div>

            <div className="form-group">
              <label>העדפות ארוחה</label>
              <select
                name="meal_preference"
                value={formData.meal_preference}
                onChange={handleChange}
              >
                <option value="">ללא העדפות</option>
                <option value="vegetarian">צמחוני</option>
                <option value="vegan">טבעוני</option>
                <option value="gluten-free">ללא גלוטן</option>
                <option value="kosher">כשר</option>
              </select>
            </div>
          </div>

          <div className="form-group checkbox-group">
            <label>
              <input
                type="checkbox"
                name="has_plus_one"
                checked={formData.has_plus_one}
                onChange={handleChange}
              />
              בן/ת זוג
            </label>
          </div>

          {formData.has_plus_one && (
            <div className="form-group">
              <label>שם בן/ת הזוג</label>
              <input
                type="text"
                name="plus_one_name"
                value={formData.plus_one_name}
                onChange={handleChange}
              />
            </div>
          )}

          <div className="form-group">
            <label>מספר מלווים נוספים</label>
            <input
              type="number"
              name="companion_count"
              min="0"
              value={formData.companion_count ?? 0}
              onChange={handleChange}
            />
          </div>

          <div className="form-group">
            <label>מספר שולחן</label>
            <input
              type="number"
              name="table_number"
              value={formData.table_number}
              onChange={handleChange}
            />
          </div>

          <div className="form-group">
            <label>הערות</label>
            <textarea
              name="notes"
              value={formData.notes}
              onChange={handleChange}
              rows="3"
            />
          </div>

          <div className="form-actions">
            <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={loading}>
              ביטול
            </button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? 'משמר...' : (guest ? 'עדכן אורח' : 'הוסף אורח')}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default GuestForm