import React, { useState, useEffect } from 'react';

interface Props {
  onSearch: (params: { termo: string; filtros: any }) => void;
  autoFocus?: boolean;
}

const CatalogoProdutosSearch: React.FC<Props> = ({ onSearch, autoFocus = false }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filters, setFilters] = useState({
    categoria: '',
    laboratorio: '',
    temPreco: false,
    ordenacao: 'descricao'
  });

  useEffect(() => {
    const handler = setTimeout(() => {
      onSearch({ termo: searchTerm, filtros: filters });
    }, 500);
    return () => clearTimeout(handler);
  }, [searchTerm, filters, onSearch]);

  const handleSearchClick = () => {
    onSearch({ termo: searchTerm, filtros: filters });
  };

  return (
    <div className="bg-white p-4 rounded-lg shadow mb-6">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <div className="md:col-span-2">
          <label className="block text-sm font-medium text-black mb-1" htmlFor="busca">
            Buscar produto
          </label>
          <input
            id="busca"
            type="text"
            value={searchTerm}
            onChange={e => setSearchTerm(e.target.value)}
            onKeyPress={e => e.key === 'Enter' && handleSearchClick()}
            placeholder="Buscar por descrição, código interno ou EAN"
            aria-label="Buscar produto"
            autoFocus={autoFocus}
            className="w-full px-3 py-2 border text-black border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-700"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="categoria">
            Categoria
          </label>
          <select
            id="categoria"
            value={filters.categoria}
            onChange={e => setFilters({ ...filters, categoria: e.target.value })}
            className="w-full px-3 py-2 border text-black border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-700"
          >
            <option value="">Todas</option>
            <option value="OTC">OTC</option>
            <option value="Dermo">Dermo</option>
            <option value="HB">HB</option>
            <option value="RX">RX</option>
            <option value="Genérico">Genérico</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="ordenacao">
            Ordenar por
          </label>
          <select
            id="ordenacao"
            value={filters.ordenacao}
            onChange={e => setFilters({ ...filters, ordenacao: e.target.value })}
            className="w-full px-3 py-2 border text-black border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-700"
          >
            <option value="descricao">Nome do produto</option>
            <option value="codigo-interno">Código interno</option>
            <option value="categoria">Categoria</option>
            <option value="laboratorio">Laboratório</option>
          </select>
        </div>
      </div>
      <div className="flex items-center space-x-4">
        <label className="flex items-center">
          <input
            type="checkbox"
            checked={filters.temPreco}
            onChange={e => setFilters({ ...filters, temPreco: e.target.checked })}
            className="mr-2"
          />
          <span className="text-sm text-gray-700">Apenas com preços</span>
        </label>
        <button
          onClick={handleSearchClick}
          className="bg-gray-900 text-white px-4 py-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700"
        >
          Buscar
        </button>
        <button
          onClick={() => {
            setSearchTerm('');
            setFilters({ categoria: '', laboratorio: '', temPreco: false, ordenacao: 'descricao' });
            onSearch({ termo: '', filtros: {} });
          }}
          className="bg-gray-200 text-gray-900 px-4 py-2 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300"
        >
          Limpar
        </button>
      </div>
    </div>
  );
};

export default CatalogoProdutosSearch;
