import React from 'react';
import { X, Filter, Check, ChevronDown } from 'lucide-react';
import * as DialogPrimitive from '@radix-ui/react-dialog';

const AdvancedFiltersModal = ({ isOpen, onClose, onApply, options = {}, initialFilters = {}, config = [] }) => {
  const [filters, setFilters] = React.useState(initialFilters);

  React.useEffect(() => {
    if (isOpen) {
        setFilters(initialFilters);
    }
  }, [isOpen, initialFilters]);

  const handleChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  const handleApply = () => {
    onApply(filters);
  };

  const handleClear = () => {
    setFilters({});
  };

  const activeCount = Object.values(filters).filter(Boolean).length;

  return (
    <DialogPrimitive.Root open={isOpen} onOpenChange={onClose}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/60 z-50 backdrop-blur-md" />
        <DialogPrimitive.Content className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] gap-0 bg-gradient-to-br from-white via-slate-50/50 to-white dark:from-zinc-900 dark:via-zinc-900/80 dark:to-zinc-900 shadow-2xl shadow-black/20 duration-300 sm:rounded-2xl border border-slate-200/60 dark:border-zinc-800/60 overflow-hidden">
          {/* Premium Header */}
          <div className="relative flex items-center justify-between px-6 py-5 border-b border-slate-200/60 dark:border-zinc-800/60 bg-gradient-to-r from-emerald-50/30 via-transparent to-emerald-50/30 dark:from-emerald-900/10 dark:via-transparent dark:to-emerald-900/10">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg shadow-emerald-500/30">
                <Filter className="w-5 h-5 text-white" />
              </div>
              <DialogPrimitive.Title asChild>
                <h2 className="text-xl font-bold text-slate-800 dark:text-slate-100">Filtros Avançados</h2>
              </DialogPrimitive.Title>
              {activeCount > 0 && (
                <span className="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg shadow-emerald-500/30">
                    {activeCount} {activeCount === 1 ? 'filtro ativo' : 'filtros ativos'}
                </span>
              )}
            </div>
            <div className="flex items-center gap-3">
                <button 
                  onClick={handleClear} 
                  className="text-rose-500 hover:text-rose-600 dark:text-rose-400 dark:hover:text-rose-300 font-semibold text-sm transition-all duration-200 hover:scale-105 px-3 py-1.5 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/20"
                >
                    Limpar
                </button>
                <DialogPrimitive.Close className="rounded-xl p-2 hover:bg-slate-100 dark:hover:bg-zinc-800 transition-all duration-200 hover:scale-110 active:scale-95">
                    <X className="w-5 h-5 text-slate-500 dark:text-slate-400" />
                </DialogPrimitive.Close>
            </div>
          </div>

          {/* Enhanced Content */}
          <div className="px-6 py-6 max-h-[60vh] overflow-y-auto custom-scrollbar space-y-4 bg-white/50 dark:bg-zinc-900/50">
             {config.map((filter) => {
                if (filter.type === 'select') {
                    return (
                        <div key={filter.field} className="relative group">
                             <label className="block text-[11px] font-bold uppercase text-slate-500 dark:text-slate-400 tracking-wider mb-2 ml-1">
                                {filter.label}
                             </label>
                             <div className="relative w-full">
                                 <select
                                    className="w-full appearance-none border border-slate-200/60 dark:border-zinc-800/60 rounded-xl py-3.5 pl-4 pr-10 bg-gradient-to-br from-slate-50 to-white dark:from-zinc-950 dark:to-zinc-900 hover:border-emerald-400/50 dark:hover:border-emerald-600/50 transition-all duration-200 text-sm text-slate-700 dark:text-slate-300 font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500 dark:focus:border-emerald-600 shadow-sm hover:shadow-md"
                                    value={filters[filter.field] || ''}
                                    onChange={(e) => handleChange(filter.field, e.target.value)}
                                 >
                                    <option value="">-- Selecione uma opção --</option>
                                    {options[filter.field]?.map(opt => (
                                        <option key={opt} value={opt}>{opt}</option>
                                    ))}
                                 </select>
                                 <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
                                    <ChevronDown className="w-5 h-5 text-slate-400 dark:text-slate-500" />
                                 </div>
                             </div>
                        </div>
                    );
                }
                if (filter.type === 'text') {
                    return (
                        <div key={filter.field} className="relative group">
                            <label className="block text-[11px] font-bold uppercase text-slate-500 dark:text-slate-400 tracking-wider mb-2 ml-1">
                                {filter.label}
                            </label>
                            <input 
                                type="text" 
                                placeholder={filter.placeholder || filter.label}
                                className="w-full border border-slate-200/60 dark:border-zinc-800/60 rounded-xl py-3.5 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500 dark:focus:border-emerald-600 bg-gradient-to-br from-slate-50 to-white dark:from-zinc-950 dark:to-zinc-900 text-slate-700 dark:text-slate-300 placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-all duration-200 shadow-sm hover:shadow-md font-semibold"
                                value={filters[filter.field] || ''}
                                onChange={(e) => handleChange(filter.field, e.target.value)}
                            />
                         </div>
                    );
                }
                return null;
             })}
          </div>

          {/* Enhanced Footer */}
          <div className="flex items-center justify-end gap-3 px-6 py-5 border-t border-slate-200/60 dark:border-zinc-800/60 bg-gradient-to-r from-slate-50/50 via-white/30 to-slate-50/50 dark:from-zinc-900/50 dark:via-zinc-900/30 dark:to-zinc-900/50">
            <button 
              onClick={onClose} 
              className="px-5 py-2.5 text-sm font-semibold text-slate-600 dark:text-slate-400 bg-white dark:bg-zinc-900 border border-slate-200/60 dark:border-zinc-800/60 rounded-xl hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all duration-200 shadow-sm hover:shadow-md"
            >
                Cancelar
            </button>
            <button 
              onClick={handleApply} 
              className="px-5 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-[#1b4332] to-[#2d6a4f] hover:from-[#2d6a4f] hover:to-[#40916c] rounded-xl flex items-center gap-2 transition-all duration-200 shadow-lg shadow-emerald-900/25 hover:shadow-xl hover:shadow-emerald-900/40 hover:scale-[1.02] active:scale-[0.98]"
            >
                <Check className="w-4 h-4" />
                Aplicar Filtros
            </button>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
};

export default AdvancedFiltersModal;
