import React, { useEffect, useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import { fetchTasks, ejecutarComando } from '../api/procesos.ts';
import { fetchWithAuth } from '../fetchWithAuth';
import { useNotification } from '../context/NotificationContext';
const API_URL = import.meta.env.VITE_EFC_API_URL;

// Modal para mostrar detalles del task
const TaskDetailsModal = ({ task, onClose }) => {
  if (!task) return null;

  const getStatusColor = (status) => {
    switch (status?.toUpperCase()) {
      case 'SUCCESS':
        return 'bg-green-100 text-green-800 border-green-200';
      case 'PENDING':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'RUNNING':
        return 'bg-blue-100 text-blue-800 border-blue-200';
      case 'FAILED':
      case 'FAILURE':
        return 'bg-red-100 text-red-800 border-red-200';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  // Función para parsear el error si es un string JSON
  const parseError = (errorStr) => {
    try {
      if (typeof errorStr === 'string') {
        // Intentar extraer el objeto detail del error
        const match = errorStr.match(/detail=({.*?})\)/);
        if (match && match[1]) {
          return JSON.parse(match[1].replace(/'/g, '"'));
        }
        return JSON.parse(errorStr);
      }
      return errorStr;
    } catch (e) {
      return { message: errorStr };
    }
  };
  
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white rounded-2xl p-6 max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold text-gray-900">Detalles de la Tarea</h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-500"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        <div className="space-y-6">
          {/* Información básica de la tarea */}
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div className="p-4 bg-gray-50 rounded-xl">
              <h4 className="text-sm font-medium text-gray-500">Task ID</h4>
              <p className="mt-1 font-mono text-sm text-gray-900">{task.task_id}</p>
            </div>
            
            <div className="p-4 bg-gray-50 rounded-xl">
              <h4 className="text-sm font-medium text-gray-500">Estado</h4>
              <span className={`mt-2 inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border ${getStatusColor(task.status)}`}>
                {task.status}
              </span>
            </div>
            
            <div className="p-4 bg-gray-50 rounded-xl">
              <h4 className="text-sm font-medium text-gray-500">Fecha</h4>
              <p className="mt-1 text-sm text-gray-900">
                {new Date(task.timestamp).toLocaleString('es-MX', {
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit',
                  hour12: true
                })}
              </p>
            </div>
            
            <div className="p-4 bg-gray-50 rounded-xl">
              <h4 className="text-sm font-medium text-gray-500">Progreso</h4>
              <p className="mt-1 text-sm text-gray-900">{task.progress || 0}%</p>
            </div>
          </div>

          {/* Mensajes y Errores */}
          <div className="p-4 bg-gray-50 rounded-xl">
            <h4 className="text-sm font-medium text-gray-500">Mensaje de la tarea</h4>
            {(() => {
              // Intentar parsear el mensaje si contiene un error HTTPException
              if (task.message && task.message.includes('HTTPException')) {
                try {
                  const match = task.message.match(/detail=({.*?})\)/);
                  if (match && match[1]) {
                    const detail = JSON.parse(match[1].replace(/'/g, '"'));
                    return (
                      <div className="mt-2 space-y-3">
                        <div className="p-3 rounded-lg bg-red-50">
                          <p className="text-sm font-medium text-red-700">{detail.message}</p>
                        </div>
                        {detail.errors && detail.errors.length > 0 && (
                          <div className="p-3 rounded-lg bg-red-50">
                            <ul className="pl-4 space-y-1 list-disc">
                              {detail.errors.map((error, idx) => (
                                <li key={idx} className="text-sm text-red-600">{error}</li>
                              ))}
                            </ul>
                          </div>
                        )}
                        {detail.data && (
                          <div className="p-3 rounded-lg bg-orange-50">
                            <h5 className="mb-2 text-sm font-medium text-orange-700">Archivo de Error:</h5>
                            <p className="font-mono text-sm text-orange-600">{detail.data.error_file}</p>
                          </div>
                        )}
                        {detail.metadata && (
                          <div className="p-3 rounded-lg bg-blue-50">
                            <h5 className="mb-2 text-sm font-medium text-blue-700">Información Adicional:</h5>
                            <div className="grid grid-cols-2 gap-2">
                              {Object.entries(detail.metadata).map(([key, value]) => (
                                <div key={key} className="flex items-start gap-2">
                                  <span className="text-sm font-medium text-blue-600">{key}:</span>
                                  <span className="text-sm text-blue-700">{value}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    );
                  }
                } catch (e) {
                  console.error('Error parsing message:', e);
                }
              }
              // Si no se puede parsear, mostrar el mensaje original
              return <p className="mt-1 text-sm text-gray-900">{task.message}</p>;
            })()}
            
            {/* Mostrar detalles de error si existe */}
            {(task.status === 'FAILURE' || task.status === 'FAILED') && task.error && (
              <div className="mt-4 space-y-4">
                <div className="pt-4 border-t">
                  <h4 className="text-sm font-medium text-red-600">Detalles del Error</h4>
                  {(() => {
                    const errorDetail = parseError(task.error);
                    if (errorDetail.detail) {
                      return (
                        <div className="mt-3 space-y-4">
                          {/* Mensaje principal del error */}
                          {errorDetail.detail.message && (
                            <div className="p-3 rounded-lg bg-red-50">
                              <p className="text-sm text-red-700">{errorDetail.detail.message}</p>
                            </div>
                          )}
                          
                          {/* Lista de errores específicos */}
                          {errorDetail.detail.errors && errorDetail.detail.errors.length > 0 && (
                            <div className="p-3 rounded-lg bg-red-50">
                              <h5 className="mb-2 text-sm font-medium text-red-700">Errores detectados:</h5>
                              <ul className="pl-4 space-y-1 list-disc">
                                {errorDetail.detail.errors.map((error, idx) => (
                                  <li key={idx} className="text-sm text-red-600">{error}</li>
                                ))}
                              </ul>
                            </div>
                          )}
                          
                          {/* Datos adicionales del error */}
                          {errorDetail.detail.data && (
                            <div className="p-3 rounded-lg bg-orange-50">
                              <h5 className="mb-2 text-sm font-medium text-orange-700">Archivos relacionados:</h5>
                              <div className="grid grid-cols-1 gap-2">
                                {Object.entries(errorDetail.detail.data).map(([key, value]) => (
                                  <div key={key} className="flex items-start gap-2">
                                    <span className="text-sm font-medium text-orange-600">{key}:</span>
                                    <span className="text-sm text-orange-700">{value}</span>
                                  </div>
                                ))}
                              </div>
                            </div>
                          )}
                          
                          {/* Metadata */}
                          {errorDetail.detail.metadata && (
                            <div className="p-3 rounded-lg bg-blue-50">
                              <h5 className="mb-2 text-sm font-medium text-blue-700">Metadata:</h5>
                              <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                                {Object.entries(errorDetail.detail.metadata).map(([key, value]) => (
                                  <div key={key} className="flex items-start gap-2">
                                    <span className="text-sm font-medium text-blue-600">{key}:</span>
                                    <span className="text-sm text-blue-700">{value}</span>
                                  </div>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      );
                    }
                    return (
                      <div className="p-3 mt-2 rounded-lg bg-red-50">
                        <p className="text-sm text-red-700">{task.error}</p>
                      </div>
                    );
                  })()}
                </div>
              </div>
            )}
            
            {/* Mensaje del resultado si existe */}
            {task.result?.message && (
              <>
                <h4 className="mt-3 text-sm font-medium text-gray-500">Mensaje del resultado</h4>
                <p className="mt-1 text-sm text-gray-900">{task.result.message}</p>
              </>
            )}
          </div>

          {/* Detalles del resultado */}
          {task.result?.data && (
            <div className="space-y-4">
              <h4 className="pb-2 text-lg font-medium text-gray-700 border-b">Detalles del Resultado</h4>
              
              {/* Información del documento si existe */}
              {task.result.data.data?.documento && (
                <div className="p-4 bg-blue-50 rounded-xl">
                  <h5 className="mb-3 text-sm font-medium text-blue-700">Información del Documento</h5>
                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                      <p className="text-xs font-medium text-blue-600">Número de Pedimento</p>
                      <p className="text-sm text-blue-900">{task.result.data.data.documento.pedimento_numero}</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-blue-600">Tipo de Documento</p>
                      <p className="text-sm text-blue-900">{task.result.data.data.documento.document_type}</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-blue-600">Tamaño</p>
                      <p className="text-sm text-blue-900">{task.result.data.data.documento.size.toLocaleString()} bytes</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-blue-600">Extensión</p>
                      <p className="text-sm text-blue-900">{task.result.data.data.documento.extension}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Información de la partida si existe */}
              {task.result.data.data?.partida_update_response && (
                <div className="p-4 bg-indigo-50 rounded-xl">
                  <h5 className="mb-3 text-sm font-medium text-indigo-700">Información de la Partida</h5>
                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                      <p className="text-xs font-medium text-indigo-600">Número de Partida</p>
                      <p className="text-sm text-indigo-900">{task.result.data.data.partida_update_response.numero_partida}</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-indigo-600">Estado de Descarga</p>
                      <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold ${task.result.data.data.partida_update_response.descargado ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                        {task.result.data.data.partida_update_response.descargado ? 'Descargado' : 'Pendiente'}
                      </span>
                    </div>
                  </div>
                </div>
              )}

              {/* Metadata si existe */}
              {task.result.data?.metadata && (
                <div className="p-4 bg-gray-50 rounded-xl">
                  <h5 className="mb-3 text-sm font-medium text-gray-700">Metadata</h5>
                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    {Object.entries(task.result.data.metadata).map(([key, value]) => (
                      <div key={key}>
                        <p className="text-xs font-medium text-gray-500">{key}</p>
                        <p className="text-sm text-gray-900">{value}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};




export default function Procesos() {
  const { showMessage } = useNotification();
  const [procesos, setProcesos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(12);
  const [selectedTask, setSelectedTask] = useState(null);
  const [loadingTask, setLoadingTask] = useState(false);

  const handleTaskClick = async (taskId) => {
    try {
      setLoadingTask(true);
      const MICROSERVICE_URL = import.meta.env.VITE_EFC_MICROSERVICE_URL_2;
      const response = await fetchWithAuth(`${MICROSERVICE_URL}/async/task-status/${taskId}`);
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        // Si hay un error, aún queremos mostrar el modal con la información disponible
        setSelectedTask({
          task_id: taskId,
          status: 'FAILURE',
          message: 'Error al obtener detalles del task',
          error: errorData.detail || errorData.message || 'Error en la respuesta del servidor',
          timestamp: new Date().toISOString()
        });
        return; // Salimos pero ya hemos establecido el selectedTask
      }
      
      const data = await response.json();
      setSelectedTask(data);
    } catch (error) {
      console.error('Error al obtener detalles del task:', error);
      // En caso de error, mostramos el modal con la información del error
      setSelectedTask({
        task_id: taskId,
        status: 'FAILURE',
        message: 'Error al obtener detalles del task',
        error: error.message || 'Error desconocido',
        timestamp: new Date().toISOString()
      });
    } finally {
      setLoadingTask(false);
    }
  };

  const [pedimentoPedimentoFilter, setPedimentoPedimentoFilter] = useState('');
  const [servicioFilter, setServicioFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');

  const [organizacionFilter, setOrganizacionFilter] = useState('');
  const [organizaciones, setOrganizaciones] = useState([]);
  const [loadingOrganizaciones, setLoadingOrganizaciones] = useState(false);
  
  // Sorting
  const [sortField, setSortField] = useState('');
  const [sortOrder, setSortOrder] = useState('asc'); // 'asc' | 'desc'

  // Ref para rastrear valores previos de filtros y detectar cambios
  const prevFiltersRef = useRef({
    pedimentoPedimentoFilter: '',
    statusFilter: '',
    servicioFilter: '',
    organizacionFilter: '',  // Añadir esta línea
    sortField: '',
    sortOrder: 'asc'
  });
  
  // No se requieren estados ni funciones de acciones masivas

  useEffect(() => {
    async function fetchData() {
      // Detectar si algún filtro cambió
      const currentFilters = {
        pedimentoPedimentoFilter,
        servicioFilter,
        statusFilter,
        organizacionFilter,  // Añadir esta línea
        sortField,
        sortOrder
      };
      
      const filtersChanged = Object.keys(currentFilters).some(
        key => currentFilters[key] !== prevFiltersRef.current[key]
      );
      
      // Si los filtros cambiaron y no estamos en la página 1, resetear página
      if (filtersChanged && page !== 1) {
        setPage(1);
        // Actualizar ref con valores actuales
        prevFiltersRef.current = { ...currentFilters };
        return; // Salir temprano, el efecto se ejecutará de nuevo con page = 1
      }
      
      // Actualizar ref con valores actuales
      prevFiltersRef.current = { ...currentFilters };
      
      setLoading(true);
      setError('');
      try {
        // Construir filtros
        const filters = {};
        if (pedimentoPedimentoFilter) filters['pedimento_app'] = pedimentoPedimentoFilter;
        if (servicioFilter) filters['servicio'] = servicioFilter;
        if (statusFilter) filters['status'] = statusFilter;
        if (organizacionFilter) filters['organizacion'] = organizacionFilter;  // Añadir esta línea
        if (sortField) {
          // Mapear campos antiguos a nuevos si es necesario
          const fieldMapping = {
            'id': 'task_id',
            'estado': 'status',
            // Agregar más mappings según sea necesario
          };
          const mappedField = fieldMapping[sortField] || sortField;
          filters['ordering'] = (sortOrder === 'desc' ? '-' : '') + mappedField;
        }
        
        const data = await fetchTasks(page, itemsPerPage, filters);
        setProcesos(data.results || []);
        setCount(data.count || 0);
      } catch (err) {
        if (err.message === 'SESSION_EXPIRED') {
          setError('Tu sesión ha expirado. Por favor, inicia sesión nuevamente.');
        } else {
          setError(err instanceof Error ? err.message : String(err));
        }
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [page, itemsPerPage, pedimentoPedimentoFilter, servicioFilter, statusFilter, organizacionFilter, sortField, sortOrder]);

  const [showProcesosDropdown, setShowProcesosDropdown] = useState(false);
  const [ejecutandoProceso, setEjecutandoProceso] = useState(false);

  const handleEjecutarProcesamiento = async (params) => {
    // Verificar si se ha seleccionado una organización
    if (!organizacionFilter) {
      showMessage('Debes seleccionar una organización antes de ejecutar el proceso', 'warning');
      return; // Detener la ejecución
    }
    
    try {
      setEjecutandoProceso(true);
      setShowProcesosDropdown(false);

      // Agregar el ID de la organización a los parámetros
      const paramsConOrganizacion = {
        ...params,
        organizacionid: organizacionFilter // Solo necesitamos el ID
      };
      
       console.log('Ejecutando proceso con parámetros:', paramsConOrganizacion);
      
      const resultado = await ejecutarComando(paramsConOrganizacion);
    
      if (resultado.message) {
        // Mostrar mensaje de éxito
        showMessage(`${resultado.message}`, 'success');
  
        // Recargar los datos después de 2 segundos
        setTimeout(() => {
          // Forzar recarga de datos
          const currentFilters = {
            pedimentoPedimentoFilter,
            servicioFilter,
            statusFilter,
            sortField,
            sortOrder
          };
          prevFiltersRef.current = { ...currentFilters };
          // Esto activará el useEffect para recargar
          setPage(prev => prev);
        }, 2000);
      } else if (resultado.error) {
        showMessage(`Error: ${resultado.error}`, 'error');
      }
    } catch (error) {
      // console.error('Error al ejecutar procesamiento:', error);
      showMessage(`Error: ${error.message}`, 'error');
    } finally {
      setEjecutandoProceso(false);
    }
  };

// Agrega este efecto para cerrar el dropdown
useEffect(() => {
  const handleClickOutside = (event) => {
    if (showProcesosDropdown && !event.target.closest('.relative')) {
      setShowProcesosDropdown(false);
    }
  };
  
  document.addEventListener('click', handleClickOutside);
  return () => {
    document.removeEventListener('click', handleClickOutside);
  };
}, [showProcesosDropdown]);

useEffect(() => {
  async function fetchOrganizaciones() {
    try {
      setLoadingOrganizaciones(true);
      const response = await fetchWithAuth(`${API_URL}/organization/organizaciones/`);
      if (response.ok) {
        const data = await response.json();
        setOrganizaciones(data.results || []);
      }
    } catch (error) {
      console.error('Error al cargar organizaciones:', error);
    } finally {
      setLoadingOrganizaciones(false);
    }
  }
  
  fetchOrganizaciones();
}, []);



  return (
    <div className="min-h-screen p-4 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 sm:p-6 lg:p-8">
      {/* Modal de detalles del task */}
      {selectedTask && (
        <TaskDetailsModal
          task={selectedTask}
          onClose={() => setSelectedTask(null)}
        />
      )}
      
      {loadingTask && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="p-4 bg-white rounded-full">
            <div className="w-8 h-8 border-b-2 border-blue-600 rounded-full animate-spin"></div>
          </div>
        </div>
      )}
      
      <div className="mx-auto max-w-7xl">
        {/* Header mejorado y responsivo */}
        <div className="relative flex items-center gap-4 p-6 mb-6 overflow-hidden shadow-2xl opacity-0 sm:mb-8 rounded-3xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 sm:p-8 sm:gap-6 animate-fadein-slideup" 
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
          <div className="flex-shrink-0 p-3 rounded-full shadow-lg bg-white/20 backdrop-blur-sm sm:p-4 animate-bounce-slow">
            <svg className="w-8 h-8 text-white sm:h-10 sm:w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="flex flex-col gap-2 mb-1 text-2xl font-extrabold tracking-tight text-white sm:text-3xl lg:text-4xl sm:flex-row sm:items-center">
              <span>Procesos del Sistema</span>
              {count > 0 && (
                <span className="inline-block px-3 py-1 text-xs font-semibold text-white rounded-full shadow-lg bg-white/20 backdrop-blur-sm sm:text-sm animate-fade-in">
                  {count} procesos
                </span>
              )}
            </h1>
            <p className="text-sm font-medium leading-relaxed text-blue-100 sm:text-lg">Estado actual de los procesos de la agencia aduanal</p>
          </div>
          {/* Efectos decorativos de fondo modernos */}
          <div className="absolute pointer-events-none select-none -top-10 -right-10 opacity-20">
            <div className="w-32 h-32 rounded-full bg-white/10 blur-xl"></div>
          </div>
          <div className="absolute pointer-events-none select-none -bottom-6 -left-6 opacity-15">
            <div className="w-24 h-24 rounded-full bg-white/10 blur-lg"></div>
          </div>
          {/* Partículas flotantes */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            <div className="absolute w-2 h-2 rounded-full top-1/4 left-1/4 bg-white/30 animate-ping"></div>
            <div className="absolute w-1 h-1 rounded-full top-3/4 right-1/3 bg-white/40 animate-pulse"></div>
            <div className="absolute w-3 h-3 rounded-full top-1/2 right-1/4 bg-white/20 animate-bounce"></div>
          </div>
          {/* Animaciones CSS */}
          <style>{`
            @keyframes bounce-slow {
              0%, 100% { transform: translateY(0) scale(1); }
              50% { transform: translateY(-8px) scale(1.05); }
            }
            .animate-bounce-slow {
              animation: bounce-slow 3s infinite;
            }
            @keyframes fadein-slideup {
              0% { opacity: 0; transform: translateY(40px); }
              100% { opacity: 1; transform: translateY(0); }
            }
            .animate-fadein-slideup {
              animation: fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards;
            }
            @keyframes fade-in {
              from { opacity: 0; transform: scale(0.9) translateY(10px); }
              to { opacity: 1; transform: scale(1) translateY(0); }
            }
            .animate-fade-in {
              animation: fade-in 0.8s ease-out;
            }
          `}</style>
        </div>
        {/* Contenido principal */}
        <div className="p-4 bg-white border border-gray-100 shadow-2xl opacity-0 rounded-3xl sm:p-6 lg:p-8 animate-fadein-slideup" 
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
          <div className="flex flex-col justify-between gap-4 mb-6 sm:flex-row sm:items-center">
            <h2 className="flex items-center gap-3 text-xl font-bold text-gray-900 sm:text-2xl">
              <div className="p-2 shadow-lg bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl">
                <svg className="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              Procesamiento de Pedimentos
            </h2>
            <div className="flex flex-col gap-3 sm:flex-row">
              {count > 0 && (
                <div className="px-4 py-2 border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl">
                  <span className="text-sm font-medium text-blue-700">Total de registros: </span>
                  <span className="text-lg font-bold text-blue-800">{count}</span>
                </div>
              )}
            </div>
          </div>


          
          {/* Filtros responsivos mejorados */}
          <div className="p-4 mb-6 border border-gray-100 bg-gradient-to-r from-gray-50 to-slate-50 rounded-2xl sm:p-6">
            <h3 className="flex items-center gap-2 mb-4 text-lg font-semibold text-gray-800">
              <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
              </svg>
              Filtros de búsqueda
            </h3>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  Pedimento
                </label>
                <input
                  type="text"
                  value={pedimentoPedimentoFilter}
                  onChange={e => {
                    setPedimentoPedimentoFilter(e.target.value);
                    setPage(1);
                  }}
                  placeholder="Buscar por pedimento..."
                  className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
                />
              </div>

              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
                  <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                  Estado
                </label>
                <select
                  value={statusFilter}
                  onChange={e => {
                    setStatusFilter(e.target.value);
                    setPage(1);
                  }}
                  className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
                >
                  <option value="">Todos los estados</option>
                  <option value="submitted">Enviado</option>
                  <option value="processing">Procesando</option>
                  <option value="completed">Completado</option>
                  <option value="failed">Error</option>
                </select>
              </div>

              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
                  <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                  Servicio
                </label>
                <select
                  value={servicioFilter}
                  onChange={e => {
                    setServicioFilter(e.target.value);
                    setPage(1);
                  }}
                  className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
                >
                  <option value="">Todos los servicios</option>
                  <option value="1">Estado de pedimento</option>
                  <option value="2">Listado de pedimentos</option>
                  <option value="3">Pedimento Completo</option>
                  <option value="4">Pedimento Partidas</option>
                  <option value="5">Pedimento Remesas</option>
                  <option value="6">Acuse</option>
                  <option value="7">EDocument</option>
                  <option value="8">Cove</option>
                  <option value="9">Acuse Cove</option>
                </select>
              </div>
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
                  <div className="w-2 h-2 bg-teal-500 rounded-full"></div>
                    Organización
                </label>
                <select
                className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
                disabled={loadingOrganizaciones}
                value={organizacionFilter}
                onChange={e => {
                setOrganizacionFilter(e.target.value);
                setPage(1);
                }}
                >
                  <option value="">Todas las organizaciones</option>
                  {loadingOrganizaciones ? (
                    <option value="" disabled>Cargando organizaciones...</option>
                  ) : (
                      organizaciones.map((org) => (
                      <option key={org.id} value={org.id}>
                        {org.nombre}
                      </option>
                      ))
                  )}

                </select>
              </div>
          </div>
        </div>
        {/* BOTÓN PARA EJECUTAR PROCESAMIENTOS - AGREGAR AQUÍ */}
        <div className="flex justify-end mb-6">
          <div className="relative">
            <button
              type="button"
              className="inline-flex items-center gap-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 px-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
              onClick={() => setShowProcesosDropdown(!showProcesosDropdown)}
              disabled={ejecutandoProceso}
            >
              {ejecutandoProceso ? (
                <>
                  <div className="w-4 h-4 border-b-2 border-white rounded-full animate-spin"></div>
                  Ejecutando...
                </>
              ) : (
                <>
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  Ejecutar Procesamiento
                  <svg 
                    className={`w-4 h-4 transition-transform duration-200 ${showProcesosDropdown ? 'rotate-180' : ''}`} 
                    fill="none" 
                    stroke="currentColor" 
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </>
              )}
            </button>
            
            {/* Dropdown de opciones de procesamiento */}
            {showProcesosDropdown && (
              <div className="absolute right-0 z-50 w-64 mt-2 overflow-hidden bg-white border border-gray-200 shadow-2xl rounded-2xl animate-fade-in">
                <div className="p-2">
                  {/* Encabezado del dropdown */}
                  <div className="px-3 py-2 mb-1 rounded-lg bg-gradient-to-r from-green-50 to-emerald-50">
                    <p className="text-sm font-semibold text-green-800">Selecciona un proceso</p>
                    <p className="text-xs text-green-600">Se ejecutará para tu organización</p>
                  </div>
                  
                  {/* Opción "Todos" */}
                  <button
                    onClick={() => handleEjecutarProcesamiento({ todos: true })}
                    className="flex items-center w-full gap-3 px-4 py-3 mb-1 font-medium text-left text-gray-700 transition-colors duration-200 hover:bg-green-50 rounded-xl hover:text-green-700 group"
                  >
                    <div className="w-3 h-3 transition-transform duration-200 bg-green-500 rounded-full group-hover:scale-125"></div>
                    <div className="flex-1">
                      <span className="font-semibold">Todos</span>
                      <p className="text-xs text-gray-500 group-hover:text-green-600">Ejecutar todos los procesos</p>
                    </div>
                    <span className="text-xs text-gray-400 group-hover:text-green-500"></span>
                  </button>
                  
                  <div className="my-2 border-t border-gray-100"></div>
                  
                  {/* Opciones específicas */}
                  {[
                    { id: 'procesamiento_pedimento', label: 'Procesamiento Inicial', desc: 'Procemiento Inicial de consulta a VU' },
                    { id: 'pedimentos_completos', label: 'Pedimento Completo', desc: 'Procesar pedimentos completos' },
                    { id: 'remesas', label: 'Remesas', desc: 'Procesar remesas' },
                    { id: 'partidas', label: 'Partidas', desc: 'Procesar partidas' },
                    { id: 'coves', label: 'Coves', desc: 'Procesar coves' },
                    { id: 'edocs', label: 'Edocuments', desc: 'Procesar edocuments' },
                    { id: 'acuse_coves', label: 'Acuses COVE', desc: 'Procesar acuses COVE' },
                    { id: 'acuses', label: 'Acuses', desc: 'Procesar acuses' }
                  ].map((proceso) => (
                    <button
                      key={proceso.id}
                      onClick={() => handleEjecutarProcesamiento({ procesamiento: proceso.id })}
                      className="flex items-center w-full gap-3 px-4 py-3 font-medium text-left text-gray-700 transition-colors duration-200 hover:bg-blue-50 rounded-xl hover:text-blue-700 group"
                    >
                      <div className="w-2 h-2 transition-transform duration-200 bg-blue-500 rounded-full group-hover:scale-125"></div>
                      <div className="flex-1">
                        <span>{proceso.label}</span>
                        <p className="text-xs text-gray-500 group-hover:text-blue-600">{proceso.desc}</p>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
        {/* Estados de carga y error mejorados */}
          {loading ? (
            <div className="flex flex-col items-center justify-center py-12">
              <div className="relative">
                <div className="w-16 h-16 border-b-2 border-blue-600 rounded-full animate-spin"></div>
                <div className="absolute inset-0 rounded-full bg-blue-500/10 blur-xl animate-pulse"></div>
              </div>
              <p className="mt-4 font-medium text-gray-600">Cargando procesos...</p>
            </div>
          ) : error ? (
            <div className="p-6 text-center border border-red-200 bg-red-50 rounded-2xl">
              <div className="flex items-center justify-center w-12 h-12 p-3 mx-auto mb-4 bg-red-100 rounded-full">
                <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 className="mb-2 text-lg font-semibold text-red-800">Error al cargar</h3>
              <p className="text-red-600">{error}</p>
            </div>
          ) : (
            <>
              {/* Vista de tabla para pantallas grandes */}
              <div className="relative hidden pb-20 overflow-x-auto bg-white border border-gray-200 shadow-sm lg:block rounded-2xl"
                style={{ 
                  overflowY: 'visible' // Permitir que los dropdowns se muestren fuera del contenedor
                }}>
                <table className="relative min-w-full divide-y divide-gray-300"
                  style={{ position: 'relative', zIndex: 1 }}>
                  <thead className="sticky top-0 z-10 bg-gray-50">
                    <tr>
                      <th className="px-4 py-4 text-xs font-bold tracking-wider text-center text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
                        onClick={() => {
                          setSortField('task_id');
                          setSortOrder(sortField === 'task_id' && sortOrder === 'asc' ? 'desc' : 'asc');
                        }}
                      >
                        <div className="flex items-center justify-center gap-1">
                          Task ID {sortField === 'task_id' && (sortOrder === 'asc' ? '▲' : '▼')}
                        </div>
                      </th>
                      <th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
                        onClick={() => {
                          setSortField('pedimento_app');
                          setSortOrder(sortField === 'pedimento_app' && sortOrder === 'asc' ? 'desc' : 'asc');
                        }}
                      >
                        <div className="flex items-center gap-1">
                          Pedimento {sortField === 'pedimento_app' && (sortOrder === 'asc' ? '▲' : '▼')}
                        </div>
                      </th>
                      <th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
                        onClick={() => {
                          setSortField('status');
                          setSortOrder(sortField === 'status' && sortOrder === 'asc' ? 'desc' : 'asc');
                        }}
                      >
                        <div className="flex items-center gap-1">
                          Estado {sortField === 'status' && (sortOrder === 'asc' ? '▲' : '▼')}
                        </div>
                      </th>
                      <th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100 rounded-tr-2xl"
                        onClick={() => {
                          setSortField('timestamp');
                          setSortOrder(sortField === 'timestamp' && sortOrder === 'asc' ? 'desc' : 'asc');
                        }}
                      >
                        <div className="flex items-center gap-1">
                          Fecha de creación {sortField === 'timestamp' && (sortOrder === 'asc' ? '▲' : '▼')}
                        </div>
                      </th>
                      <th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100 rounded-tr-2xl"
                        onClick={() => {
                          setSortField('servicio');
                          setSortOrder(sortField === 'servicio' && sortOrder === 'asc' ? 'desc' : 'asc');
                        }}
                      >
                        <div className="flex items-center gap-1">
                          Servicio {sortField === 'servicio' && (sortOrder === 'asc' ? '▲' : '▼')}
                        </div>
                      </th>
                    </tr>
                  </thead>
                  <tbody className="relative bg-white divide-y divide-gray-100" style={{ position: 'relative' }}>
                    {procesos.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="py-12 text-center">
                          <div className="flex flex-col items-center">
                            <div className="flex items-center justify-center w-16 h-16 p-4 mx-auto mb-4 bg-gray-100 rounded-full">
                              <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                              </svg>
                            </div>
                            <p className="font-medium text-gray-500">No hay procesos disponibles</p>
                            <p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      procesos.map((proc) => (
                        <tr key={proc.task_id} className="transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:shadow-lg">
                          <td className="px-4 py-4 text-center align-middle whitespace-nowrap">
                            <button
                              onClick={() => handleTaskClick(proc.task_id)}
                              className="px-2 py-1 text-sm font-semibold text-gray-800 transition-colors duration-200 bg-gray-100 rounded-lg cursor-pointer hover:bg-blue-100 hover:text-blue-800"
                            >
                              {proc.task_id}
                            </button>
                          </td>
                          <td className="px-4 py-4 text-sm font-medium text-gray-900 align-middle whitespace-nowrap">
                            <Link to={`/expedientes/pedimento/${proc.pedimento}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>
                              {proc.pedimento_app || '-'}
                            </Link>
                          </td>
                          <td className="px-4 py-4 align-middle whitespace-nowrap">
                            {(() => {
                              const estado = proc.status?.toLowerCase() === 'pending' ? { text: 'En Espera', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' }
                                : proc.status?.toLowerCase() === 'running' ? { text: 'Procesando', color: 'bg-blue-100 text-blue-800 border-blue-200' }
                                : proc.status?.toLowerCase() === 'completed' ? { text: 'Finalizado', color: 'bg-green-100 text-green-800 border-green-200' }
                                : proc.status?.toLowerCase() === 'failed' || proc.status?.toLowerCase() === 'failure' ? { text: 'Error', color: 'bg-red-100 text-red-800 border-red-200' }
                                : { text: String(proc.status), color: 'bg-gray-100 text-gray-800 border-gray-200' };
                              return (
                                <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border ${estado.color}`}>
                                  {estado.text}
                                </span>
                              );
                            })()}
                          </td>
                          <td className="px-4 py-4 text-sm text-gray-600 align-middle whitespace-nowrap">
                            {new Date(proc.timestamp).toLocaleString('es-MX', {
                              day: '2-digit',
                              month: '2-digit',
                              year: 'numeric',
                              hour: '2-digit',
                              minute: '2-digit',
                              hour12: true
                            })}
                          </td>
                          <td className="px-4 py-4 align-middle whitespace-nowrap">
                            {(() => {
                              const services = {
                                '1': 'Estado de pedimento',
                                '2': 'Listado de pedimentos',
                                '3': 'Pedimento Completo',
                                '4': 'Pedimento Partidas',
                                '5': 'Pedimento Remesas',
                                '6': 'Acuse',
                                '7': 'EDocument',
                                '8': 'Cove',
                                '9': 'Acuse Cove'
                              };
                              return (
                                <span className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-indigo-50 text-indigo-700 border border-indigo-200">
                                  {services[proc.servicio] || 'Desconocido'}
                                </span>
                              );
                            })()}
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>

              {/* Vista de tarjetas para pantallas pequeñas y medianas */}
              <div className="space-y-4 lg:hidden">
                {procesos.length === 0 ? (
                  <div className="p-8 text-center bg-gray-50 rounded-2xl">
                    <div className="flex items-center justify-center w-16 h-16 p-4 mx-auto mb-4 bg-gray-100 rounded-full">
                      <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                    </div>
                    <p className="font-medium text-gray-500">No hay procesos disponibles</p>
                    <p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
                  </div>
                ) : (
                  procesos.map((proc) => (
                    <div key={proc.task_id} className="p-4 transition-all duration-300 bg-white border border-gray-200 shadow-lg rounded-2xl hover:shadow-xl">
                      <div className="flex items-start justify-between mb-4">
                        <div className="flex items-center gap-3">

                          <div className="flex-shrink-0 p-2 bg-blue-100 rounded-xl">
                            <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                          </div>
                          <div className="flex-1 min-w-0">
                            <h3 className="text-lg font-semibold text-gray-900">Proceso #{proc.task_id}</h3>
                            <p className="text-sm text-gray-500">{proc.organizacion_name || 'Sin organización'}</p>
                          </div>
                        </div>
                        {(() => {
                          const estado = proc.status === 'pending' ? { text: 'En Espera', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' }
                            : proc.status === 'processing' ? { text: 'Procesando', color: 'bg-blue-100 text-blue-800 border-blue-200' }
                            : proc.status === 'completed' ? { text: 'Finalizado', color: 'bg-green-100 text-green-800 border-green-200' }
                            : proc.status === 'failed' ? { text: 'Error', color: 'bg-red-100 text-red-800 border-red-200' }
                            : { text: String(proc.status), color: 'bg-gray-100 text-gray-800 border-gray-200' };
                          return (
                            <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border ${estado.color}`}>
                              {estado.text}
                            </span>
                          );
                        })()}
                      </div>
                      
                      <div className="mb-4 space-y-3">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-gray-600">Pedimento:</span>
                          <span className="px-2 py-1 font-mono text-sm text-gray-900 bg-gray-100 rounded">
                            {proc.pedimento_app || '-'}
                          </span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-gray-600">Fecha:</span>
                          <span className="text-sm text-gray-600">
                            {new Date(proc.timestamp).toLocaleString('es-MX', {
                              day: '2-digit',
                              month: '2-digit',
                              year: 'numeric',
                              hour: '2-digit',
                              minute: '2-digit',
                              hour12: true
                            })}
                          </span>
                        </div>
                      </div>
                      
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-gray-600">Servicio:</span>
                        {(() => {
                          const services = {
                            '1': 'Estado de pedimento',
                            '2': 'Listado de pedimentos',
                            '3': 'Pedimento Completo',
                            '4': 'Pedimento Partidas',
                            '5': 'Pedimento Remesas',
                            '6': 'Acuse',
                            '7': 'EDocument',
                            '8': 'Cove',
                            '9': 'Acuse Cove'
                          };
                          return (
                            <span className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-indigo-50 text-indigo-700 border border-indigo-200">
                              {services[proc.servicio] || 'Desconocido'}
                            </span>
                          );
                        })()}
                      </div>
                    </div>
                  ))
                )}
              </div>

              {/* Paginación compartida mejorada */}
              {count > 0 && (
                <div className="flex flex-col items-center justify-between gap-4 px-4 py-4 mt-6 border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 sm:px-6 rounded-2xl sm:flex-row">
                  {(() => {
                    const totalPages = Math.max(1, Math.ceil(count / itemsPerPage));
                    const maxPagesToShow = 5;
                    let startPage = Math.max(1, page - Math.floor(maxPagesToShow / 2));
                    let endPage = startPage + maxPagesToShow - 1;
                    if (endPage > totalPages) {
                      endPage = totalPages;
                      startPage = Math.max(1, endPage - maxPagesToShow + 1);
                    }
                    const pageNumbers = [];
                    for (let i = startPage; i <= endPage; i++) {
                      pageNumbers.push(i);
                    }
                    return (
                      <>
                        <div className="flex items-center gap-3">
                          <label htmlFor="itemsPerPage" className="text-sm font-medium text-gray-600">Registros por página:</label>
                          <select
                            id="itemsPerPage"
                            value={itemsPerPage}
                            onChange={e => { setItemsPerPage(Number(e.target.value)); setPage(1); }}
                            className="px-3 py-2 text-sm bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          >
                            {[5, 8, 12, 20, 50, 100].map(size => (
                              <option key={size} value={size}>{size}</option>
                            ))}
                          </select>
                        </div>
                        <div className="flex items-center gap-2">
                          <button
                            type="button"
                            onClick={e => { e.preventDefault(); setPage(1); }}
                            disabled={page === 1}
                            className={`px-3 py-2 rounded-xl border text-sm font-semibold transition-all duration-200 ${page === 1 ? 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-white text-blue-700 border-blue-200 hover:bg-blue-50 hover:text-blue-900 hover:shadow-md'}`}
                          >
                            «
                          </button>
                          <button
                            type="button"
                            onClick={e => { e.preventDefault(); setPage(p => Math.max(1, p - 1)); }}
                            disabled={page === 1}
                            className={`px-3 py-2 rounded-xl border text-sm font-semibold transition-all duration-200 ${page === 1 ? 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-white text-blue-700 border-blue-200 hover:bg-blue-50 hover:text-blue-900 hover:shadow-md'}`}
                          >
                            ‹
                          </button>
                          {pageNumbers.map(num => (
                            <button
                              type="button"
                              key={num}
                              onClick={e => { e.preventDefault(); setPage(num); }}
                              className={`px-3 py-2 rounded-xl border text-sm font-semibold transition-all duration-200 ${num === page ? 'bg-blue-600 text-white border-blue-700 cursor-default shadow-lg' : 'bg-white text-blue-700 border-blue-200 hover:bg-blue-50 hover:text-blue-900 hover:shadow-md'}`}
                              disabled={num === page}
                            >
                              {num}
                            </button>
                          ))}
                          <button
                            type="button"
                            onClick={e => { e.preventDefault(); setPage(p => p + 1); }}
                            disabled={page >= totalPages}
                            className={`px-3 py-2 rounded-xl border text-sm font-semibold transition-all duration-200 ${(page >= totalPages) ? 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-white text-blue-700 border-blue-200 hover:bg-blue-50 hover:text-blue-900 hover:shadow-md'}`}
                          >
                            ›
                          </button>
                          <button
                            type="button"
                            onClick={e => { e.preventDefault(); setPage(totalPages); }}
                            disabled={page >= totalPages}
                            className={`px-3 py-2 rounded-xl border text-sm font-semibold transition-all duration-200 ${(page >= totalPages) ? 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-white text-blue-700 border-blue-200 hover:bg-blue-50 hover:text-blue-900 hover:shadow-md'}`}
                          >
                            »
                          </button>
                        </div>
                        <span className="text-sm text-gray-600">
                          Página <span className="font-bold text-gray-800">{page}</span> de <span className="font-bold text-gray-800">{totalPages}</span>
                        </span>
                      </>
                    );
                  })()}
                </div>
              )}
            </>
          )}
        </div>
      </div>


    </div>
  );
}