import React from "react";
import { Calendar, Hash, Filter, X, Building2 } from "lucide-react";

export interface EventFilters {
  date: string;
  fotId: string;
  type: string;
  company: string;
  institution: string;
  fotStatus?: string; // New field
}

interface EventFiltersBarProps {
  filters: EventFilters;
  onFilterChange: (filters: EventFilters) => void;
  availableTypes: string[];
  availableCompanies: string[];
  availableInstitutions: string[];
}

export const EventFiltersBar: React.FC<EventFiltersBarProps> = ({
  filters,
  onFilterChange,
  availableTypes,
  availableCompanies,
  availableInstitutions,
}) => {
  const handleReset = () => {
    onFilterChange({
      date: "",
      fotId: "",
      type: "",
      company: "",
      institution: "",
      fotStatus: "",
    });
  };

  const hasActiveFilters = Object.values(filters).some((value) => value !== "");

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Filter size={18} className="text-brand-gold" />
          <h3 className="font-semibold text-gray-800">Filtros Avançados</h3>
        </div>
        {hasActiveFilters && (
          <button
            onClick={handleReset}
            className="flex items-center gap-1 text-sm text-gray-600 hover:text-brand-gold transition-colors"
          >
            <X size={16} />
            Limpar filtros
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
        {/* Filtro por FOT */}
        <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Hash size={14} className="text-brand-gold" />
            FOT
          </label>
          <input
            type="text"
            value={filters.fotId}
            onChange={(e) => {
              const value = e.target.value.replace(/\D/g, '').slice(0, 5);
              onFilterChange({ ...filters, fotId: value });
            }}
            placeholder="Buscar FOT..."
            maxLength={5}
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors"
          />
        </div>

        {/* Filtro por Data */}
        <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Calendar size={14} className="text-brand-gold" />
            Data
          </label>
          <input
            type="date"
            value={filters.date}
            onChange={(e) =>
              onFilterChange({ ...filters, date: e.target.value })
            }
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors"
          />
        </div>

        {/* Filtro por Status da Turma */}
        <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Filter size={14} className="text-brand-gold" />
            Status da Turma
          </label>
          <select
            value={filters.fotStatus || ""}
            onChange={(e) =>
              onFilterChange({ ...filters, fotStatus: e.target.value })
            }
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
          >
            <option value="">Todos</option>
            <option value="normal">Normal</option>
            <option value="pre_venda">Pré-Venda</option>
            <option value="finalizada">Finalizada</option>
          </select>
        </div>

        {/* Filtro por Tipo */}
        <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Filter size={14} className="text-brand-gold" />
            Tipo de Evento
          </label>
          <select
            value={filters.type}
            onChange={(e) =>
              onFilterChange({ ...filters, type: e.target.value })
            }
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
          >
            <option value="">Todos os tipos</option>
            {availableTypes.map((type) => (
              <option key={type} value={type}>
                {type}
              </option>
            ))}
          </select>
        </div>

         {/* Filtro por Empresa */}
         <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Building2 size={14} className="text-brand-gold" />
            Empresa
          </label>
          <select
            value={filters.company}
            onChange={(e) =>
              onFilterChange({ ...filters, company: e.target.value })
            }
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
          >
            <option value="">Todas as empresas</option>
            {availableCompanies.map((comp) => (
              <option key={comp} value={comp}>
                {comp}
              </option>
            ))}
          </select>
        </div>

        {/* Filtro por Instituição */}
        <div className="flex flex-col">
          <label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
            <Building2 size={14} className="text-brand-gold" />
            Instituição
          </label>
          <select
            value={filters.institution}
            onChange={(e) =>
              onFilterChange({ ...filters, institution: e.target.value })
            }
            className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
          >
            <option value="">Todas as instituições</option>
            {availableInstitutions.map((inst) => (
              <option key={inst} value={inst}>
                {inst}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Active Filters Display */}
      {hasActiveFilters && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <div className="flex flex-wrap gap-2">
            <span className="text-xs text-gray-500">Filtros ativos:</span>
            {filters.date && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                Data:{" "}
                {new Date(filters.date + "T00:00:00").toLocaleDateString(
                  "pt-BR"
                )}
                <button
                  onClick={() => onFilterChange({ ...filters, date: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
            {filters.fotId && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                FOT: {filters.fotId}
                <button
                  onClick={() => onFilterChange({ ...filters, fotId: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
            {filters.type && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                Tipo: {filters.type}
                <button
                  onClick={() => onFilterChange({ ...filters, type: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
            {filters.company && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                Empresa: {filters.company}
                <button
                  onClick={() => onFilterChange({ ...filters, company: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
            {filters.institution && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                Inst: {filters.institution}
                <button
                  onClick={() => onFilterChange({ ...filters, institution: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
            {filters.fotStatus && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
                Status: {filters.fotStatus === 'pre_venda' ? 'Pré-Venda' : filters.fotStatus === 'finalizada' ? 'Finalizada' : 'Normal'}
                <button
                  onClick={() => onFilterChange({ ...filters, fotStatus: "" })}
                  className="hover:text-brand-black"
                >
                  <X size={12} />
                </button>
              </span>
            )}
          </div>
        </div>
      )}
    </div>
  );
};