import React from 'react';
import { Filter, Check, ChevronDown, X } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

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 (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px] gap-0 p-0 overflow-hidden rounded-[32px] border-none shadow-2xl">
          
          {/* Header */}
          <div className="flex items-center justify-between px-8 py-6 border-b border-slate-100 bg-white dark:bg-slate-900 dark:border-white/5">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-[var(--gr-primary)]/10 rounded-[18px]">
                <Filter className="w-5 h-5 text-[var(--gr-primary)]" />
              </div>
              <div>
                <DialogTitle className="text-xl font-bold text-slate-800 dark:text-slate-100 tracking-tight">Filtros Avançados</DialogTitle>
                <DialogDescription className="text-xs text-slate-500 font-medium mt-1">
                    Refine sua busca detalhadamente.
                </DialogDescription>
              </div>
            </div>
            {activeCount > 0 && (
                <span className="bg-[var(--gr-primary)] text-white text-[10px] font-bold px-3 py-1 rounded-full shadow-lg shadow-[var(--gr-primary)]/20">
                    {activeCount}
                </span>
            )}
          </div>

          {/* Body */}
          <div className="px-8 py-8 max-h-[60vh] overflow-y-auto space-y-6 bg-slate-50/50 dark:bg-black/20">
             {config.map((filter) => {
                if (filter.type === 'select') {
                    return (
                        <div key={filter.field} className="space-y-2">
                             <label className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.15em] ml-1">{filter.label}</label>
                             <div className="relative w-full group">
                                 <select
                                    className="w-full appearance-none border border-slate-200 dark:border-white/5 rounded-[20px] py-3.5 pl-4 pr-10 bg-white dark:bg-slate-900/50 hover:border-slate-300 dark:hover:border-white/10 transition-all text-sm text-slate-700 dark:text-slate-200 font-bold focus:outline-none focus:ring-4 focus:ring-[var(--gr-primary)]/5 focus:border-[var(--gr-primary)]"
                                    value={filters[filter.field] || ''}
                                    onChange={(e) => handleChange(filter.field, e.target.value)}
                                 >
                                    <option value="" className="text-gray-400">Todos</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 text-slate-400 group-hover:text-[var(--gr-primary)] transition-colors">
                                    <ChevronDown className="w-4 h-4" strokeWidth={3} />
                                 </div>
                             </div>
                        </div>
                    );
                }

                if (filter.type === 'text') {
                    return (
                        <div key={filter.field} className="space-y-2">
                            <label className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-[0.15em] ml-1">{filter.label}</label>
                            <input 
                                type="text" 
                                placeholder={filter.placeholder}
                                className="w-full border border-slate-200 dark:border-white/5 rounded-[20px] py-3.5 px-4 text-sm focus:outline-none focus:ring-4 focus:ring-[var(--gr-primary)]/5 focus:border-[var(--gr-primary)] placeholder:text-slate-300 dark:placeholder:text-slate-700 transition-all bg-white dark:bg-slate-900/50 text-slate-700 dark:text-slate-200 font-bold"
                                value={filters[filter.field] || ''}
                                onChange={(e) => handleChange(filter.field, e.target.value)}
                            />
                         </div>
                    );
                }
                
                return null;
             })}

             {config.length === 0 && (
                 <div className="text-center py-10 text-slate-400 italic text-sm font-medium">
                     Nenhum filtro configurado para esta tabela.
                 </div>
             )}
          </div>

          {/* Footer */}
          <div className="flex items-center justify-between px-8 py-6 border-t border-slate-100 dark:border-white/5 bg-white dark:bg-slate-900">
            <button 
                onClick={handleClear}
                className="text-[10px] font-bold text-red-500 hover:text-red-600 transition-colors uppercase tracking-[0.1em] flex items-center gap-1.5"
            >
                <X size={14} strokeWidth={3} /> Limpar Tudo
            </button>
            <div className="flex items-center gap-4">
                <button 
                    onClick={() => onClose(false)}
                    className="px-6 py-3 rounded-[18px] text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:bg-slate-100 dark:hover:bg-white/5 transition-all"
                >
                    Cancelar
                </button>
                <button 
                    onClick={handleApply}
                    className="px-8 py-3 bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white text-[10px] font-bold uppercase tracking-wider rounded-[18px] flex items-center gap-2 shadow-lg shadow-[var(--gr-primary)]/20 transition-all active:scale-95"
                >
                    <Check className="w-4 h-4" strokeWidth={3} />
                    Aplicar Filtros
                </button>
            </div>
          </div>

      </DialogContent>
    </Dialog>
  );
};

export default AdvancedFiltersModal;
