import { useState } from 'react';
import { FiSearch, FiSettings } from 'react-icons/fi';

export default function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('');
  const [locationType, setLocationType] = useState('municipio');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [advancedOptions, setAdvancedOptions] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (query.trim()) {
      onSearch({
        query,
        locationType,
        startDate: startDate || null,
        endDate: endDate || null
      });
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6 mb-8">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="locationType" className="block text-sm font-medium text-gray-700 mb-1">
              Tipo de Localização
            </label>
            <select
              id="locationType"
              value={locationType}
              onChange={(e) => setLocationType(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
            >
              <option value="municipio">Município</option>
              <option value="cidade">Cidade</option>
              <option value="estado">Estado</option>
            </select>
          </div>

          <div>
            <label htmlFor="query" className="block text-sm font-medium text-gray-700 mb-1">
              Nome da Localização
            </label>
            <div className="relative">
              <input
                type="text"
                id="query"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={`Digite o nome do ${locationType}`}
                className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                required
              />
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <FiSearch className="h-5 w-5 text-gray-400" />
              </div>
            </div>
          </div>
        </div>

        {advancedOptions && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label htmlFor="startDate" className="block text-sm font-medium text-gray-700 mb-1">
                Data Inicial
              </label>
              <input
                type="date"
                id="startDate"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              />
            </div>
            <div>
              <label htmlFor="endDate" className="block text-sm font-medium text-gray-700 mb-1">
                Data Final
              </label>
              <input
                type="date"
                id="endDate"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              />
            </div>
          </div>
        )}

        <div className="flex flex-col sm:flex-row gap-4">
          <button
            type="button"
            onClick={() => setAdvancedOptions(!advancedOptions)}
            className="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            <FiSettings className="mr-2" />
            {advancedOptions ? 'Ocultar' : 'Opções Avançadas'}
          </button>

          <button
            type="submit"
            className="flex-1 bg-primary hover:bg-secondary text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center"
          >
            <FiSearch className="mr-2" />
            Pesquisar Agentes Públicos
          </button>
        </div>
      </form>
    </div>
  );
}