import { useState } from 'react';
import { X, Search, Plus } from 'lucide-react';
import { motion } from 'framer-motion';
import type { Product } from '../../types/Product';

interface Props {
  catalog: Product[];
  onClose: () => void;
  onAdd: (productId: number) => void;
  existingIds: number[];
}

export default function ShortcutAddModal({ catalog, onClose, onAdd, existingIds }: Props) {
  const [searchTerm, setSearchTerm] = useState('');

  // Filtrar productos que no estén ya anclados
  const filtered = catalog.filter(p =>
    !existingIds.includes(p.id) &&
    p.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const getProductTypeLabel = (typeCode?: string) => {
    switch (typeCode) {
      case 'BUNDLE': return 'Combo / Paquete';
      case 'CLASSIFIED_AD': return 'Aviso Clasificado';
      case 'PHYSICAL': return 'Producto Físico';
      case 'SERVICE': return 'Servicio';
      case 'GRAPHIC': return 'Publicidad Gráfica';
      case 'RADIO': return 'Publicidad Radial';
      default: return 'Producto';
    }
  };

  return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[250] flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        className="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[80vh] border border-slate-200"
      >
        <div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50">
          <div>
            <h3 className="text-xl font-black text-slate-800 uppercase tracking-tight">Anclar Producto</h3>
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Añadir a accesos rápidos</p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-white rounded-xl text-slate-400 transition-colors">
            <X size={20} />
          </button>
        </div>

        <div className="p-8 space-y-6 flex-1 flex flex-col min-h-0">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
            <input
              type="text"
              autoFocus
              className="w-full pl-12 pr-4 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-500 font-bold text-sm transition-all"
              placeholder="Buscar producto o combo..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

          <div className="flex-1 overflow-y-auto custom-scrollbar space-y-2 pr-2">
            {filtered.length === 0 ? (
              <div className="text-center py-12 text-slate-400">
                <p className="text-sm font-bold italic">No se encontraron productos disponibles</p>
              </div>
            ) : (
              filtered.map(p => (
                <button
                  key={p.id}
                  onClick={() => onAdd(p.id)}
                  className="w-full p-4 rounded-2xl border border-slate-100 hover:border-blue-400 hover:bg-blue-50/30 transition-all flex justify-between items-center group"
                >
                  <div className="text-left">
                    <div className="text-sm font-black text-slate-700 group-hover:text-blue-700">{p.name}</div>
                    <div className="text-[10px] font-bold text-slate-400 uppercase tracking-tight">
                      {getProductTypeLabel(p.typeCode)}
                    </div>
                  </div>
                  <div className="bg-white p-2 rounded-xl text-blue-500 shadow-sm group-hover:bg-blue-600 group-hover:text-white transition-all">
                    <Plus size={16} />
                  </div>
                </button>
              ))
            )}
          </div>
        </div>

        <div className="p-6 bg-slate-50 border-t border-slate-100 text-center">
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
            Selecciona un producto para anclarlo a tu grilla
          </p>
        </div>
      </motion.div>
    </div>
  );
}