import { useState, useEffect } from 'react'
import { getGuestOwners, undoImport } from '../api/api'
import './SearchFilter.css'

function SearchFilter({ eventId, onSearch }) {
  const [filters, setFilters] = useState({
    query: '',
    rsvpStatus: '',
    mealPreference: '',
    owner: ''
  })
  const [owners, setOwners] = useState([])

  useEffect(() => {
    loadOwners()
  }, [eventId])

  const loadOwners = async () => {
    try {
      const data = await getGuestOwners(eventId)
      setOwners(data.owners || [])
    } catch (error) {
      console.error('Error loading owners:', error)
    }
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    const newFilters = {
      ...filters,
      [name]: value
    }
    setFilters(newFilters)
    onSearch(newFilters)
  }

  const handleReset = () => {
    const resetFilters = {
      query: '',
      rsvpStatus: '',
      mealPreference: '',
      owner: ''
    }
    setFilters(resetFilters)
    onSearch(resetFilters)
  }

  const handleUndoImport = async () => {
    if (!filters.owner) {
      alert('אנא בחר מייבא כדי לבטל את הייבוא שלו')
      return
    }

    if (window.confirm(`האם אתה בטוח שברצונך למחוק את כל האורחים שיובאו על ידי ${filters.owner}?`)) {
      try {
        const result = await undoImport(filters.owner)
        alert(result.message)
        handleReset()
        loadOwners()
        onSearch({})
      } catch (error) {
        console.error('Error undoing import:', error)
        alert('נכשל בביטול הייבוא')
      }
    }
  }

  return (
    <div className="search-filter">
      <div className="filter-row">
        <div className="search-box">
          <input
            type="text"
            name="query"
            value={filters.query}
            onChange={handleChange}
            placeholder="חיפוש לפי שם, אימייל או טלפון..."
          />
        </div>

        <select
          name="rsvpStatus"
          value={filters.rsvpStatus}
          onChange={handleChange}
        >
          <option value="">כל סטטוסי האישור</option>
          <option value="invited">הוזמן/ה</option>
          <option value="confirmed">אישר/ה</option>
          <option value="declined">סירב/ה</option>
        </select>

        <select
          name="mealPreference"
          value={filters.mealPreference}
          onChange={handleChange}
        >
          <option value="">כל הארוחות</option>
          <option value="vegetarian">צמחוני</option>
          <option value="vegan">טבעוני</option>
          <option value="gluten-free">ללא גלוטן</option>
          <option value="kosher">כשר</option>
          <option value="halal">חלאל</option>
        </select>

        <select
          name="owner"
          value={filters.owner}
          onChange={handleChange}
        >
          <option value="">כל האורחים</option>
          {owners.map(owner => (
            <option key={owner} value={owner}>{owner}</option>
          ))}
        </select>

        {filters.owner && (
          <button className="btn btn-secondary" onClick={handleUndoImport}>
            ביטול ייבוא
          </button>
        )}

        {(filters.query || filters.rsvpStatus || filters.mealPreference || filters.owner) && (
          <button className="btn-reset" onClick={handleReset}>
            ניקוי סינונים
          </button>
        )}
      </div>
    </div>
  )
}

export default SearchFilter
