import React, { useState, useMemo } from 'react';
import { Check, Search, X } from 'lucide-react';
import { Form, InputGroup } from 'react-bootstrap';

interface ContratoItem {
    id: number;
    NumCon: string;
    label: string;
    tipo: 'LUZ' | 'GAS';
    CodCups: string;
}

interface MultiSelectContratosProps {
    contratos: ContratoItem[];
    onSelectionChange?: (selectedContratos: ContratoItem[]) => void;
}

/**
 * Componente de selección múltiple de contratos
 * Permite al usuario seleccionar uno o más contratos de la lista
 * para asociarlos al documento que se está cargando.
 */
const MultiSelectContratos: React.FC<MultiSelectContratosProps> = ({
    contratos,
    onSelectionChange
}) => {
    // Estado para almacenar los IDs de los elementos seleccionados
    const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
    // Estado para el término de búsqueda
    const [searchTerm, setSearchTerm] = useState<string>('');

    // Filtrar contratos según el término de búsqueda
    const filteredContratos = useMemo(() => {
        if (!searchTerm.trim()) {
            return contratos;
        }

        const term = searchTerm.toLowerCase();
        return contratos.filter(item =>
            (item.NumCon?.toLowerCase() || '').includes(term) ||
            (item.label?.toLowerCase() || '').includes(term) ||
            (item.CodCups?.toLowerCase() || '').includes(term)
        );
    }, [contratos, searchTerm]);

    // Lógica de Selección / Des-selección
    const toggleSelection = (id: number) => {
        const newSelection = new Set(selectedIds);
        if (newSelection.has(id)) {
            newSelection.delete(id); // Si ya está, lo quita
        } else {
            newSelection.add(id);    // Si no está, lo agrega
        }
        setSelectedIds(newSelection);

        // Notificar cambio de selección
        if (onSelectionChange) {
            const selected = contratos.filter(item => newSelection.has(item.id));
            onSelectionChange(selected);
        }
    };

    // Función para seleccionar todo (solo los filtrados)
    const selectAll = () => {
        const idsToSelect = filteredContratos.map(item => item.id);

        // Verificar si todos los filtrados están seleccionados
        const allFilteredSelected = idsToSelect.every(id => selectedIds.has(id));

        const newSelection = new Set(selectedIds);

        if (allFilteredSelected) {
            // Deseleccionar todos los filtrados
            idsToSelect.forEach(id => newSelection.delete(id));
        } else {
            // Seleccionar todos los filtrados
            idsToSelect.forEach(id => newSelection.add(id));
        }

        setSelectedIds(newSelection);
        if (onSelectionChange) {
            const selected = contratos.filter(item => newSelection.has(item.id));
            onSelectionChange(selected);
        }
    };

    // Limpiar búsqueda
    const clearSearch = () => {
        setSearchTerm('');
    };

    // Obtener los objetos completos seleccionados
    const selectedContratos = useMemo(() => {
        return contratos.filter(item => selectedIds.has(item.id));
    }, [contratos, selectedIds]);

    if (contratos.length === 0) {
        return (
            <div className="text-center text-muted py-4">
                <p>No hay contratos asociados a este registro.</p>
            </div>
        );
    }

    return (
        <div className="d-flex flex-column" style={{ height: '400px' }}>
            {/* Header con contador y botón de seleccionar todo */}
            <div className="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                <h6 className="mb-0 text-secondary">
                    Contratos ({filteredContratos.length}{searchTerm ? ` de ${contratos.length}` : ''})
                </h6>
                <button
                    type="button"
                    onClick={selectAll}
                    className="btn btn-sm btn-link text-decoration-none"
                    style={{ fontSize: '0.875rem' }}
                    disabled={filteredContratos.length === 0}
                >
                    {filteredContratos.every(item => selectedIds.has(item.id)) && filteredContratos.length > 0
                        ? 'Deseleccionar todo'
                        : 'Seleccionar todo'}
                </button>
            </div>

            {/* Cuadro de búsqueda */}
            <div className="mb-3">
                <InputGroup size="sm">
                    <InputGroup.Text className="bg-white">
                        <Search size={16} className="text-muted" />
                    </InputGroup.Text>
                    <Form.Control
                        type="text"
                        placeholder="Buscar por contrato o CUPS..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        style={{ fontSize: '0.875rem' }}
                    />
                    {searchTerm && (
                        <InputGroup.Text
                            className="bg-white cursor-pointer"
                            onClick={clearSearch}
                            style={{ cursor: 'pointer' }}
                        >
                            <X size={16} className="text-muted" />
                        </InputGroup.Text>
                    )}
                </InputGroup>
            </div>

            {/* Lista scrollable */}
            <div className="flex-grow-1 overflow-auto pe-2" style={{ maxHeight: '260px' }}>
                {filteredContratos.length > 0 ? (
                    <div className="d-flex flex-column gap-2">
                        {filteredContratos.map((item) => {
                        const isSelected = selectedIds.has(item.id);
                        return (
                            <div
                                key={item.id}
                                onClick={() => toggleSelection(item.id)}
                                className="d-flex align-items-center justify-content-between p-3 border rounded cursor-pointer"
                                style={{
                                    cursor: 'pointer',
                                    backgroundColor: isSelected ? '#e7f3ff' : '#fff',
                                    borderColor: isSelected ? '#0d6efd' : '#dee2e6',
                                    transition: 'all 0.2s',
                                    boxShadow: isSelected ? '0 0 0 0.2rem rgba(13,110,253,.15)' : 'none'
                                }}
                                onMouseEnter={(e) => {
                                    if (!isSelected) {
                                        e.currentTarget.style.borderColor = '#86b7fe';
                                        e.currentTarget.style.backgroundColor = '#f8f9fa';
                                    }
                                }}
                                onMouseLeave={(e) => {
                                    if (!isSelected) {
                                        e.currentTarget.style.borderColor = '#dee2e6';
                                        e.currentTarget.style.backgroundColor = '#fff';
                                    }
                                }}
                            >
                                <div className="flex-grow-1">
                                    <div className="d-flex align-items-center gap-2 mb-1">
                                        <p className={`mb-0 fw-semibold ${isSelected ? 'text-primary' : 'text-dark'}`}>
                                            {item.label}
                                        </p>
                                        <span
                                            className="badge"
                                            style={{
                                                backgroundColor: item.tipo === 'LUZ' ? '#ffc107' : '#17a2b8',
                                                color: '#fff',
                                                fontSize: '0.65rem',
                                                padding: '2px 6px'
                                            }}
                                        >
                                            {item.tipo}
                                        </span>
                                    </div>
                                    <small className="text-muted">
                                        CUPS: <span className="fw-medium">{item.CodCups}</span>
                                    </small>
                                </div>

                                <div
                                    className="rounded-circle border d-flex align-items-center justify-content-center"
                                    style={{
                                        width: '24px',
                                        height: '24px',
                                        borderWidth: '2px',
                                        borderColor: isSelected ? '#0d6efd' : '#dee2e6',
                                        backgroundColor: isSelected ? '#0d6efd' : 'transparent',
                                        transition: 'all 0.2s'
                                    }}
                                >
                                    {isSelected && <Check size={14} color="white" />}
                                </div>
                            </div>
                        );
                    })}
                </div>
                ) : (
                    <div className="text-center text-muted py-4">
                        <Search size={32} className="mb-2 opacity-50" />
                        <p className="mb-0 small">No se encontraron contratos con "{searchTerm}"</p>
                    </div>
                )}
            </div>

            {/* Footer con contador */}
            <div className="pt-3 mt-2 border-top text-center">
                <small className="text-muted">
                    {selectedIds.size} contrato{selectedIds.size !== 1 && 's'} seleccionado{selectedIds.size !== 1 && 's'}
                </small>
            </div>
        </div>
    );
};

export default MultiSelectContratos;