import { useState } from 'react'
import { createEvent } from '../api/api'
import './EventForm.css'

const he = {
  createNewEvent: 'צור אירוע חדש',
  eventNameRequired: 'שם האירוע נדרש',
  failedCreate: 'נכשל בהוספת אירוע',
  eventName: 'שם האירוע',
  eventDate: 'תאריך',
  location: 'מיקום',
  create: 'צור',
  cancel: 'ביטול'
}

function EventForm({ onEventCreated, onCancel }) {
  const [formData, setFormData] = useState({
    name: '',
    date: '',
    location: ''
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

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

  const handleSubmit = async (e) => {
    e.preventDefault()
    if (!formData.name.trim()) {
      setError(he.eventNameRequired)
      return
    }

    setLoading(true)
    setError('')

    try {
      const newEvent = await createEvent(formData)
      setFormData({ name: '', date: '', location: '' })
      onEventCreated(newEvent)
    } catch (err) {
      setError(err.response?.data?.detail || he.failedCreate)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="event-form-container">
      <div className="event-form-overlay" onClick={onCancel}></div>
      <div className="event-form">
        <h2>{he.createNewEvent}</h2>
        {error && <div className="error-message">{error}</div>}
        
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">{he.eventName} *</label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="לדוגמה: חתונה, יום הולדת, מפגש"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="date">{he.eventDate}</label>
            <input
              type="datetime-local"
              id="date"
              name="date"
              value={formData.date}
              onChange={handleChange}
            />
          </div>

          <div className="form-group">
            <label htmlFor="location">{he.location}</label>
            <input
              type="text"
              id="location"
              name="location"
              value={formData.location}
              onChange={handleChange}
              placeholder="לדוגמה: תל אביב, ישראל"
            />
          </div>

          <div className="form-actions">
            <button type="button" onClick={onCancel} className="btn-cancel">
              {he.cancel}
            </button>
            <button type="submit" disabled={loading} className="btn-submit">
              {loading ? 'יוצר...' : he.create}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default EventForm