// Importar componentes
// SearchHeader, FilterButtons y ReferenciasTable están definidos en archivos separados

// Componente principal de la aplicación de referencias
function ReferenciasApp() {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [activeFilter, setActiveFilter] = React.useState('all');
    const [referencias, setReferencias] = React.useState([]);
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState(null);
    const [hasSearched, setHasSearched] = React.useState(false);

    // Función para extraer referencia de la URL
    const extractReferenceFromUrl = () => {
        const pathSegments = window.location.pathname.split('/');
        const lastSegment = pathSegments[pathSegments.length - 1];
        
        // Verificar si el último segmento es un número (referencia)
        if (/^\d+$/.test(lastSegment)) {
            return lastSegment;
        }
        return null;
    };

    // Función para buscar referencias a través de PHP
    const searchReferencias = async (reference) => {
        if (!reference) return;

        setLoading(true);
        setError(null);
        setHasSearched(true);

        try {
            const formData = new FormData();
            formData.append('action', 'referencias_action');
            formData.append('action_type', 'search_referencias');
            formData.append('reference', reference);
            formData.append('nonce', referenciasPlugin.nonce);

            const response = await fetch(referenciasPlugin.ajax_url, {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error(`Error HTTP: ${response.status}`);
            }

            const result = await response.json();
            
            if (result.success) {
                setOriginalReferencias(result.data.referencias); // Guardar referencias originales
                setHasSearched(true);
                
                // Actualizar contadores de filtros y obtener el filtro automático
                const counts = updateFilterCounts(result.data.referencias);
                const autoFilter = getAutoFilter(counts);
                
                // Aplicar filtro automático
                setActiveFilter(autoFilter);
                
                // Filtrar referencias según el filtro automático
                if (autoFilter === 'all') {
                    setReferencias(result.data.referencias);
                } else {
                    const filteredReferencias = result.data.referencias.filter(ref => ref.tipo.toLowerCase() === autoFilter);
                    setReferencias(filteredReferencias);
                }
            } else {
                throw new Error(result.data || 'Error desconocido');
            }
            
        } catch (error) {
            console.error('Error al buscar referencias:', error);
            //setError('Error al cargar las referencias: ' + error.message);
            showToast.error("Esta referencia no coincide con ninguna referencia disponible", {
                duration: 4000,
                progress: true,
                position: "top-right",
                transition: "fadeIn",
                icon: '',
                sound: true,
              });
            setReferencias([]);
        } finally {
            setLoading(false);
        }
    };

    // Función para actualizar contadores de filtros y determinar filtro automático
    const updateFilterCounts = (referencias) => {
        const counts = {
            oem: referencias.filter(r => r.tipo === 'OEM').length,
            iam: referencias.filter(r => r.tipo === 'IAM').length,
            cat: referencias.filter(r => r.tipo === 'CAT').length
        };
        
        // Actualizar los datos de filtros con contadores reales
        setFilterData(prev => prev.map(filter => ({
            ...filter,
            count: counts[filter.id] || 0
        })));
        
        return counts;
    };

    // Función para determinar el filtro automático por prioridad
    const getAutoFilter = (counts) => {
        if (counts.oem > 0) return 'oem';
        if (counts.iam > 0) return 'iam';
        if (counts.cat > 0) return 'cat';
        return 'all';
    };

    // Datos de filtros (se actualizarán dinámicamente)
    const [filterData, setFilterData] = React.useState([
        { id: 'oem', label: 'OEM', count: 0 },
        { id: 'iam', label: 'IAM', count: 0 },
        { id: 'cat', label: 'CAT', count: 0 }
    ]);

    // Estado para mantener las referencias originales (sin filtrar)
    const [originalReferencias, setOriginalReferencias] = React.useState([]);

    // Función para obtener referencia desde parámetros URL
    const getReferenceFromUrlParams = () => {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('ref');
    };

    // Efecto para cargar datos iniciales desde la URL
    React.useEffect(() => {
        // Primero intentar obtener la referencia desde parámetros URL (?ref=835035)
        let reference = getReferenceFromUrlParams();
        
        if (!reference) {
            // Fallback: intentar desde la variable global (viene del PHP)
            if (window.referenciasPlugin && window.referenciasPlugin.initialReference) {
                reference = window.referenciasPlugin.initialReference;
            } else {
                // Último fallback: extraer de la URL path
                reference = extractReferenceFromUrl();
            }
        }
        
        if (reference) {
            setSearchTerm(reference);
            searchReferencias(reference);
        }
    }, []);

    // Función para manejar búsqueda manual
    const handleSearch = (e) => {
        e.preventDefault();
        if (searchTerm.trim()) {
            // Construir nueva URL con parámetro
            const newUrl = `${window.location.pathname}?ref=${encodeURIComponent(searchTerm.trim())}`;
            
            // Cambiar URL sin recargar la página
            window.history.pushState({}, '', newUrl);
            
            // Buscar referencias
            searchReferencias(searchTerm.trim());
        }
    };

    // Función para manejar cambio de filtro
    const handleFilterChange = (filterId) => {
        setActiveFilter(filterId);
        
        // Filtrar referencias localmente
        if (filterId === 'all') {
            // Mostrar todas las referencias originales
            setReferencias(originalReferencias);
        } else {
            // Filtrar por tipo desde las referencias originales
            const filteredReferencias = originalReferencias.filter(ref => ref.tipo.toLowerCase() === filterId);
            setReferencias(filteredReferencias);
        }
    };



    return (
        <div className="referencias-app min-h-screen p-6">
            <div className="max-w-7xl mx-auto">
                {/* Header con buscador */}
                <SearchHeader 
                    searchTerm={searchTerm}
                    onSearchChange={setSearchTerm}
                    onSearchSubmit={handleSearch}
                />
                
                {/* Mensaje de error */}
                {error && (
                    <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <p className="text-red-700">{error}</p>
                    </div>
                )}
                
                {/* Mostrar filtros y tabla solo si se ha hecho una búsqueda */}
                {hasSearched && (
                    <>
                        {/* Filtros */}
                        <FilterButtons 
                            filters={filterData}
                            activeFilter={activeFilter}
                            onFilterChange={handleFilterChange}
                        />
                        
                        {/* Tabla de referencias */}
                        <ReferenciasTable 
                            referencias={referencias}
                            loading={loading}
                            activeFilter={activeFilter}
                        />
                        

                    </>
                )}
                
                {/* Mensaje inicial cuando no se ha buscado nada */}
                {!hasSearched && !error && (
                    <div className="text-center py-12">
                        <div className="max-w-md mx-auto">
                            <svg className="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <h3 className="text-lg font-medium text-gray-900 mb-2">
                                Busca una referencia
                            </h3>
                            <p className="text-gray-500">
                                Introduce el número de referencia en el buscador para encontrar recambios disponibles
                            </p>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

// Renderizar la aplicación
function initReactApp() {
    const container = document.getElementById('referencias-plugin-container');
    
    if (container) {
        const root = ReactDOM.createRoot(container);
        root.render(React.createElement(ReferenciasApp));
    }
}

// Inicializar aplicación
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initReactApp);
} else {
    initReactApp();
}