// Componente de la tabla de referencias function ReferenciasTable({ referencias, loading, activeFilter }) { const [openActions, setOpenActions] = React.useState(null); const [hoveredVehiculo, setHoveredVehiculo] = React.useState(null); const [tooltipPosition, setTooltipPosition] = React.useState({ x: 0, y: 0 }); const [selectedImages, setSelectedImages] = React.useState(null); const [currentImageIndex, setCurrentImageIndex] = React.useState(0); // Función para cerrar todos los menús de acciones const closeAllActions = () => { setOpenActions(null); }; // Función para obtener campos completos del vehículo const getVehiculoCompleto = (categorias) => { if (!categorias || !Array.isArray(categorias) || categorias.length === 0) return []; const vehiculo = categorias[0]; // Tomamos el primer vehículo de las categorías if (!vehiculo) return []; const campos = [ { key: 'marca', label: 'Marca', value: vehiculo.marca }, { key: 'modelo', label: 'Modelo', value: vehiculo.modelo }, { key: 'version', label: 'Versión', value: vehiculo.version }, { key: 'anio', label: 'Año', value: vehiculo.anio }, { key: 'color', label: 'Color', value: vehiculo.color }, { key: 'combustible', label: 'Combustible', value: vehiculo.combustible }, { key: 'kilometraje', label: 'Kilometraje', value: vehiculo.kilometraje }, { key: 'numero_puertas', label: 'Puertas', value: vehiculo.numero_puertas }, { key: 'chasis', label: 'Chasis', value: vehiculo.chasis }, { key: 'codigo_motor', label: 'Código Motor', value: vehiculo.codigo_motor }, { key: 'matricula', label: 'Matrícula', value: vehiculo.matricula }, { key: 'codigo_cambio', label: 'Código Cambio', value: vehiculo.codigo_cambio }, { key: 'observaciones', label: 'Observaciones', value: vehiculo.observaciones } ]; return campos.filter(campo => campo.value && campo.value !== '' && campo.value !== 0 && campo.value !== '0' && campo.value !== null && campo.value !== undefined ); }; // Función para alternar menú de acciones const toggleActions = (id) => { if (openActions === id) { setOpenActions(null); } else { setOpenActions(id); } }; // Función para obtener imágenes de CAT const getCatImages = (categorias) => { if (!categorias || !Array.isArray(categorias) || categorias.length === 0) return []; const firstCategory = categorias[0]; if (!firstCategory || !firstCategory.imagenes) return []; return firstCategory.imagenes.map(img => img.ruta_imagen); }; // Función para abrir modal de imágenes const openImageModal = (images, index = 0) => { setSelectedImages(images); setCurrentImageIndex(index); }; // Función para cerrar modal de imágenes const closeImageModal = () => { setSelectedImages(null); setCurrentImageIndex(0); }; // Función para navegar entre imágenes const navigateImage = (direction) => { if (!selectedImages) return; const newIndex = direction === 'next' ? (currentImageIndex + 1) % selectedImages.length : (currentImageIndex - 1 + selectedImages.length) % selectedImages.length; setCurrentImageIndex(newIndex); }; // Cerrar menús al hacer click fuera React.useEffect(() => { const handleClickOutside = (event) => { if (!event.target.closest('.actions-menu')) { closeAllActions(); } }; document.addEventListener('click', handleClickOutside); return () => document.removeEventListener('click', handleClickOutside); }, []); // Cerrar modal con tecla Escape React.useEffect(() => { const handleKeyDown = (event) => { if (event.key === 'Escape' && selectedImages) { closeImageModal(); } }; document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, [selectedImages]); if (loading) { return (

Cargando referencias...

); } return (
{/* Vista de escritorio - Tabla */}
{(activeFilter === 'cat' || activeFilter === 'all') && ( )} {(activeFilter === 'cat' || activeFilter === 'all') && ( )} {referencias.length > 0 ? ( referencias.map((referencia, index) => ( {(activeFilter === 'cat' || activeFilter === 'all') && ( )} {(activeFilter === 'cat' || activeFilter === 'all') && ( )} )) ) : ( )}
REFERENCIA MARCA DESCRIPCION VEHICULO IMAGENES VENDEDOR PRECIO ACCIONES
{referencia.referencia} {referencia.marca} {referencia.descripcion} { if (referencia.categorias && referencia.categorias.length > 0) { setHoveredVehiculo(referencia.id); setTooltipPosition({ x: e.clientX + 10, y: e.clientY - 10 }); } }} onMouseLeave={() => setHoveredVehiculo(null)} > {referencia.vehiculo} {/* Tooltip del vehículo */} {hoveredVehiculo === referencia.id && referencia.categorias && referencia.categorias.length > 0 && (
Detalles del Vehículo
{getVehiculoCompleto(referencia.categorias).map((campo) => (
{campo.label}: {campo.value}
))}
)} 		{(() => { const images = getCatImages(referencia.categorias); if (images.length > 0) { return (
{images.slice(0, 3).map((imageUrl, index) => ( {`Imagen openImageModal(images, index)} onError={(e) => { e.target.style.display = 'none'; }} /> ))} {images.length > 3 && (
openImageModal(images, 3)} > +{images.length - 3}
)}
); } return ( Sin imágenes ); })()}
{referencia.usuario?.imagen && ( {referencia.vendedor} )} {referencia.vendedor}
{referencia.precio} {parseFloat(referencia.importe_casco) > 0 && ( Casco: €{parseFloat(referencia.importe_casco).toFixed(2)} )}
{/* Menú desplegable */} {openActions === referencia.id && (
{referencia.usuario?.whatsapp && ( WhatsApp )} {referencia.usuario?.telefono && ( Llamar )} {referencia.usuario?.email && ( Email )}
)}

No se encontraron referencias

Intenta con otros criterios de búsqueda
{/* Vista móvil - Cards */}
{referencias.length > 0 ? (
{referencias.map((referencia, index) => (
{/* Header de la card */}
{referencia.referencia} {referencia.marca}
10 ? 'bg-green-100 text-green-800' : referencia.stock > 0 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800' }`}> {referencia.stock} uds
{/* Contenido principal */}
Descripción:

{referencia.descripcion}

{(activeFilter === 'cat' || activeFilter === 'all') && (
{ if (referencia.categorias && referencia.categorias.length > 0) { setHoveredVehiculo(referencia.id); setTooltipPosition({ x: e.clientX + 10, y: e.clientY - 10 }); } }} onMouseLeave={() => setHoveredVehiculo(null)} > Vehículo:

{referencia.vehiculo}

{/* Tooltip del vehículo en móvil */} {hoveredVehiculo === referencia.id && referencia.categorias && referencia.categorias.length > 0 && (
Detalles del Vehículo
{getVehiculoCompleto(referencia.categorias).map((campo) => (
{campo.label}: {campo.value}
))}
)}
)} {(activeFilter === 'cat' || activeFilter === 'all') && (() => { const images = getCatImages(referencia.categorias); if (images.length > 0) { return (
Imágenes:
{images.slice(0, 4).map((imageUrl, index) => ( {`Imagen openImageModal(images, index)} onError={(e) => { e.target.style.display = 'none'; }} /> ))} {images.length > 4 && (
openImageModal(images, 4)} > +{images.length - 4}
)}
); } return null; })()}
Ubicación:

{referencia.poblacion}, {referencia.provincia}

{/* Vendedor y precio */}
{referencia.usuario?.imagen && ( {referencia.vendedor} )} {referencia.vendedor}
{referencia.precio} {parseFloat(referencia.importe_casco) > 0 && ( Casco: €{parseFloat(referencia.importe_casco).toFixed(2)} )}
{/* Acciones */}
{referencia.usuario?.whatsapp && ( WhatsApp )} {referencia.usuario?.telefono && ( Llamar )} {referencia.usuario?.email && ( Email )}
))}
) : (

No se encontraron referencias

Intenta con otros criterios de búsqueda

)}
{/* Modal de imágenes */} {selectedImages && (
e.stopPropagation()}> {/* Botón cerrar */} {/* Imagen principal */}
{`Imagen { e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzZiNzI4MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkVycm9yIGFsIGNhcmdhciBpbWFnZW48L3RleHQ+PC9zdmc+'; }} /> {/* Navegación */} {selectedImages.length > 1 && ( <> {/* Botón anterior */} {/* Botón siguiente */} )} {/* Contador de imágenes - Dentro de la imagen, abajo centrado */} {selectedImages.length > 1 && (
{currentImageIndex + 1} / {selectedImages.length}
)}
{/* Miniaturas */} {selectedImages.length > 1 && (
{selectedImages.map((imageUrl, index) => ( {`Miniatura setCurrentImageIndex(index)} onError={(e) => { e.target.style.display = 'none'; }} /> ))}
)}
)}
); }