
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { getWithAuth, postWithAuth } from '../fetchWithAuth';
const API_URL = import.meta.env.VITE_EFC_API_URL;

function Auditor() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [pedimentos, setPedimentos] = useState([]);
  const [showInstructions, setShowInstructions] = useState(false);
  const [count, setCount] = useState(0);
  const [page, setPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [auditando, setAuditando] = useState(false);
  const [auditandoPartidas, setAuditandoPartidas] = useState(false);
  const [auditandoRemesas, setAuditandoRemesas] = useState(false);
  const [procesandoPedimento, setProcesandoPedimento] = useState(null);
  const [procesandoRemesa, setProcesandoRemesa] = useState(null);
  const [procesandoAcuse, setProcesandoAcuse] = useState(null);
  const [procesandoCove, setProcesandoCove] = useState(null);
  const [auditandoAcusesCove, setAuditandoAcusesCove] = useState(false);
  const [pedimentoFilter, setPedimentoFilter] = useState('');
  const [auditandoEDocuments, setAuditandoEDocuments] = useState(false);
  const [auditandoAcuses, setAuditandoAcuses] = useState(false);

  // Handler para auditar acuses (general)
  const handleAuditarAcuses = async () => {
    if (auditandoAcuses) return;
    try {
      setAuditandoAcuses(true);
      const organizacionId = pedimentos[0]?.organizacion;
      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }
      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/`, {
        organizacion_id: organizacionId
      });
      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría de acuses');
      }
      alert('La auditoría de acuses se ha iniciado correctamente');
    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditandoAcuses(false);
    }
  };

  // Handler para auditar EDocuments (general)
  const handleAuditarEDocuments = async () => {
    if (auditandoEDocuments) return;
    try {
      setAuditandoEDocuments(true);
      const organizacionId = pedimentos[0]?.organizacion;
      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }
      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-edocuments/`, {
        organizacion_id: organizacionId
      });
      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría de EDocuments');
      }
      alert('La auditoría de EDocuments se ha iniciado correctamente');
    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditandoEDocuments(false);
    }
  };

  // Handler para auditar acuses cove (general)
  const handleAuditarAcusesCove = async () => {
    if (auditandoAcusesCove) return;
    try {
      setAuditandoAcusesCove(true);
      // Obtener el organizacion_id del primer pedimento
      const organizacionId = pedimentos[0]?.organizacion;
      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }
      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse-cove/`, {
        organizacion_id: organizacionId
      });
      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría de acuses cove');
      }
      alert('La auditoría de acuses cove se ha iniciado correctamente');
    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditandoAcusesCove(false);
    }
  };

  const handleAuditarRemesaPedimento = async (pedimentoId) => {
    if (procesandoRemesa) return;

    try {
      setProcesandoRemesa(pedimentoId);

      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-procesamiento-remesa/pedimento/`, {
        pedimento_id: pedimentoId
      });

      if (!response.ok) {
        throw new Error('Error al procesar las remesas del pedimento');
      }

      // Mostrar mensaje de éxito
      alert('Las remesas del pedimento se están procesando');

    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setProcesandoRemesa(null);
    }
  };

  const handleAuditarRemesas = async () => {
    if (auditandoRemesas) return;

    try {
      setAuditandoRemesas(true);
      // Obtener el organizacion_id del primer pedimento
      const organizacionId = pedimentos[0]?.organizacion;

      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }

      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-procesamiento-remesas/`, {
        organizacion_id: organizacionId
      });

      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría de remesas');
      }

      // Mostrar mensaje de éxito
      alert('La auditoría de remesas se ha iniciado correctamente');

    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditandoRemesas(false);
    }
  };

  const handleAuditarPartidasPedimento = async (pedimentoId) => {
    if (procesandoPedimento) return;

    try {
      setProcesandoPedimento(pedimentoId);

      const response = await postWithAuth(`${API_URL}/customs/auditor/crear-partidas/pedimento/`, {
        pedimento_id: pedimentoId
      });

      if (!response.ok) {
        throw new Error('Error al procesar las partidas del pedimento');
      }

      // Mostrar mensaje de éxito
      alert('Las partidas del pedimento se están procesando');

    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setProcesandoPedimento(null);
    }
  };

  const handleAuditarPartidas = async () => {
    if (auditandoPartidas) return;

    try {
      setAuditandoPartidas(true);
      // Obtener el organizacion_id del primer pedimento
      const organizacionId = pedimentos[0]?.organizacion;

      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }

      const response = await postWithAuth(`${API_URL}/customs/auditor/crear-partidas/organizacion/`, {
        organizacion_id: organizacionId
      });

      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría de partidas');
      }

      // Mostrar mensaje de éxito
      alert('La auditoría de partidas se ha iniciado correctamente');

    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditandoPartidas(false);
    }
  };

  const handleAuditarTodos = async () => {
    if (auditando) return;

    try {
      setAuditando(true);
      // Obtener el organizacion_id del primer pedimento
      const organizacionId = pedimentos[0]?.organizacion;

      if (!organizacionId) {
        throw new Error('No hay organización disponible para auditar');
      }

      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-pedimentos/`, {
        organizacion_id: organizacionId
      });

      if (!response.ok) {
        throw new Error('Error al iniciar la auditoría');
      }

      // Mostrar mensaje de éxito
      alert('La auditoría se ha iniciado correctamente');

    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setAuditando(false);
    }
  };

  const handleAuditarAcusePedimento = async (pedimentoId) => {
    if (procesandoAcuse) return;
    try {
      setProcesandoAcuse(pedimentoId);
      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/pedimento/`, {
        pedimento_id: pedimentoId
      });
      if (!response.ok) {
        throw new Error('Error al auditar acuse del pedimento');
      }
      alert('El acuse del pedimento se está auditando');
    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setProcesandoAcuse(null);
    }
  };

  const handleAuditarCovePedimento = async (pedimentoId) => {
    if (procesandoCove) return;
    try {
      setProcesandoCove(pedimentoId);
      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-cove/pedimento/`, {
        pedimento_id: pedimentoId
      });
      if (!response.ok) {
        throw new Error('Error al auditar COVE del pedimento');
      }
      alert('El COVE del pedimento se está auditando');
    } catch (error) {
      console.error('Error:', error);
      alert(error.message);
    } finally {
      setProcesandoCove(null);
    }
  };

  useEffect(() => {
    const fetchPedimentos = async () => {
      setLoading(true);
      try {
        const queryParams = new URLSearchParams({
          page: page.toString(),
          page_size: itemsPerPage.toString(),
          ...(pedimentoFilter && { pedimento_app: pedimentoFilter })
        });
        const response = await getWithAuth(`${API_URL}/customs/pedimentos/?${queryParams}`);
        if (!response.ok) throw new Error('Error al cargar los pedimentos');
        const data = await response.json();
        setPedimentos(data.results);
        setCount(data.count);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    // Aplicar debounce al fetchPedimentos
    const timeoutId = setTimeout(() => {
      fetchPedimentos();
    }, 300);

    return () => clearTimeout(timeoutId);
  }, [page, itemsPerPage, pedimentoFilter]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header mejorado y responsivo */}
        <div className="mb-6 sm:mb-8 relative overflow-hidden rounded-3xl shadow-2xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 p-6 sm:p-8 flex items-center gap-4 sm:gap-6 animate-fadein-slideup opacity-0"
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
          <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-3 sm:p-4 shadow-lg animate-bounce-slow">
            <svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
            </svg>
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1">
              Panel de Auditoría
            </h1>
            <div className="flex items-center gap-4">
              <p className="text-sm sm:text-lg text-blue-100 font-medium leading-relaxed">
                Monitoreo y control de operaciones
              </p>
              <button
                onClick={() => setShowInstructions(true)}
                className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
              >
                <svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Instrucciones
              </button>
            </div>
          </div>
          {/* Efectos decorativos de fondo */}
          <div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
            <div className="w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
          </div>
          <div className="absolute -bottom-6 -left-6 opacity-15 pointer-events-none select-none">
            <div className="w-24 h-24 bg-white/10 rounded-full blur-lg"></div>
          </div>
          {/* Partículas flotantes */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-ping"></div>
            <div className="absolute top-3/4 right-1/3 w-1 h-1 bg-white/40 rounded-full animate-pulse"></div>
            <div className="absolute top-1/2 right-1/4 w-3 h-3 bg-white/20 rounded-full animate-bounce"></div>
          </div>
        </div>

        {/* Contenido principal */}
        <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 lg:p-8 animate-fadein-slideup opacity-0"
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>

          {loading ? (
            <div className="flex flex-col items-center justify-center py-12">
              <div className="relative">
                <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600"></div>
                <div className="absolute inset-0 bg-blue-500/10 rounded-full blur-xl animate-pulse"></div>
              </div>
              <p className="mt-4 text-gray-600 font-medium">Cargando datos...</p>
            </div>
          ) : error ? (
            <div className="bg-red-50 border border-red-200 rounded-2xl p-6 text-center">
              <div className="bg-red-100 rounded-full p-3 w-12 h-12 mx-auto mb-4 flex items-center justify-center">
                <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="text-lg font-semibold text-red-800 mb-2">Error al cargar</h3>
              <p className="text-red-600">{error}</p>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="bg-white rounded-2xl p-4 sm:p-6 border border-gray-200 shadow-sm">

                <div className="flex justify-between items-center mb-6">
                  <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
                    <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                    Servicios de Auditoría
                  </h3>
                  <div className="flex gap-4">
                    <button
                      onClick={handleAuditarAcusesCove}
                      disabled={auditandoAcusesCove || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditandoAcusesCove
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-pink-600 hover:bg-pink-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditandoAcusesCove ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando Acuses Cove...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                          Auditar Acuses Cove
                        </>
                      )}
                    </button>

                    <button
                      onClick={handleAuditarEDocuments}
                      disabled={auditandoEDocuments || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditandoEDocuments
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-yellow-600 hover:bg-yellow-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditandoEDocuments ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando EDocuments...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                          Auditar EDocuments
                        </>
                      )}
                    </button>

                    <button
                      onClick={handleAuditarAcuses}
                      disabled={auditandoAcuses || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditandoAcuses
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-blue-600 hover:bg-blue-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditandoAcuses ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando Acuses...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                          Auditar Acuses
                        </>
                      )}
                    </button>

                    <button
                      onClick={handleAuditarTodos}
                      disabled={auditando || auditandoPartidas || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditando || auditandoPartidas
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-emerald-600 hover:bg-emerald-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditando ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                          </svg>
                          Auditar Todos los Pedimentos
                        </>
                      )}
                    </button>

                    <button
                      onClick={handleAuditarPartidas}
                      disabled={auditando || auditandoPartidas || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditando || auditandoPartidas
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-indigo-600 hover:bg-indigo-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditandoPartidas ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando Partidas...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                          Auditar Partidas
                        </>
                      )}
                    </button>

                    <button
                      onClick={handleAuditarRemesas}
                      disabled={auditando || auditandoRemesas || pedimentos.length === 0}
                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
                        ${auditando || auditandoRemesas
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-purple-600 hover:bg-purple-700 hover:shadow-md transform hover:scale-105'
                        }
                      `}
                    >
                      {auditandoRemesas ? (
                        <>
                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          Auditando Remesas...
                        </>
                      ) : (
                        <>
                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                          </svg>
                          Auditar Remesas
                        </>
                      )}
                    </button>
                  </div>
                </div>

                {/* Sección de Filtros */}
                <div className="mt-6 bg-white rounded-lg border border-gray-200 p-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {/* Contenedor para los filtros - esperando instrucciones */}
                    <div className="col-span-full">
                      <h3 className="text-lg font-medium text-gray-900 mb-4">
                        Filtros de Búsqueda
                      </h3>
                    </div>
                    <div className="col-span-1">
                      <label htmlFor="pedimento" className="block text-sm font-medium text-gray-700 mb-2">
                        Número de Pedimento
                      </label>
                      <div className="relative rounded-md shadow-sm">
                        <input
                          type="text"
                          name="pedimento"
                          id="pedimento"
                          value={pedimentoFilter}
                          onChange={(e) => setPedimentoFilter(e.target.value)}
                          className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"
                          placeholder="Buscar por pedimento..."
                        />
                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                          <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Tabla de pedimentos */}
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-300">
                    <thead>
                      <tr>
                        <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                          Pedimento
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 group">
                          PC
                          <span className="block text-xs text-gray-500">Pedimento Completo</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          RM
                          <span className="block text-xs text-gray-500">Remesas</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          PT
                          <span className="block text-xs text-gray-500">Partidas</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          AC
                          <span className="block text-xs text-gray-500">Acuse</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          COVE
                          <span className="block text-xs text-gray-500">Cove</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          AC_COVE
                          <span className="block text-xs text-gray-500">Acuse de Cove</span>
                        </th>
                        <th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
                          EDoc
                          <span className="block text-xs text-gray-500">EDocument</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 bg-white">
                      {pedimentos.map((pedimento) => (
                        <tr key={pedimento.id} className="hover:bg-gray-50">
                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">
                            <Link to={`/expedientes/pedimento/${pedimento.id}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>{pedimento.pedimento_app}</Link>
                          </td>
                          {/* PC - Pedimento Completo */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                              <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z" />
                              </svg>
                            </button>
                          </td>
                          {/* RM - Remesas */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button
                              onClick={() => handleAuditarRemesaPedimento(pedimento.id)}
                              disabled={procesandoRemesa === pedimento.id}
                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 
                                ${procesandoRemesa === pedimento.id
                                  ? 'opacity-50 cursor-not-allowed'
                                  : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
                                }
                              `}
                            >
                              {procesandoRemesa === pedimento.id ? (
                                <svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
                                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                              ) : (
                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M8 5v14l11-7z" />
                                </svg>
                              )}
                            </button>
                          </td>
                          {/* PT - Partidas */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button
                              onClick={() => handleAuditarPartidasPedimento(pedimento.id)}
                              disabled={procesandoPedimento === pedimento.id}
                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 
                                ${procesandoPedimento === pedimento.id
                                  ? 'opacity-50 cursor-not-allowed'
                                  : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
                                }
                              `}
                            >
                              {procesandoPedimento === pedimento.id ? (
                                <svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
                                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                              ) : (
                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M8 5v14l11-7z" />
                                </svg>
                              )}
                            </button>
                          </td>
                          {/* AC - Acuse */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button
                              onClick={() => handleAuditarAcusePedimento(pedimento.id)}
                              disabled={procesandoAcuse === pedimento.id}
                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoAcuse === pedimento.id
                                ? 'opacity-50 cursor-not-allowed'
                                : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
                                }`}
                            >
                              {procesandoAcuse === pedimento.id ? (
                                <svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
                                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                              ) : (
                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M8 5v14l11-7z" />
                                </svg>
                              )}
                            </button>
                          </td>
                          {/* COVE */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button
                              onClick={() => handleAuditarCovePedimento(pedimento.id)}
                              disabled={procesandoCove === pedimento.id}
                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoCove === pedimento.id
                                ? 'opacity-50 cursor-not-allowed'
                                : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
                                }`}
                            >
                              {procesandoCove === pedimento.id ? (
                                <svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
                                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                              ) : (
                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M8 5v14l11-7z" />
                                </svg>
                              )}
                            </button>
                          </td>
                          {/* AC_COVE */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                              <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z" />
                              </svg>
                            </button>
                          </td>
                          {/* EDoc */}
                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                            <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                              <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z" />
                              </svg>
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* Paginación */}
                {count > 0 && (
                  <div className="mt-4 flex items-center justify-between">
                    <div className="flex-1 flex justify-between sm:hidden">
                      <button
                        onClick={() => setPage(page => Math.max(1, page - 1))}
                        disabled={page === 1}
                        className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                      >
                        Anterior
                      </button>
                      <button
                        onClick={() => setPage(page => page + 1)}
                        disabled={page >= Math.ceil(count / itemsPerPage)}
                        className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                      >
                        Siguiente
                      </button>
                    </div>
                    <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                      <div>
                        <p className="text-sm text-gray-700">
                          Mostrando <span className="font-medium">{((page - 1) * itemsPerPage) + 1}</span> a{' '}
                          <span className="font-medium">{Math.min(page * itemsPerPage, count)}</span> de{' '}
                          <span className="font-medium">{count}</span> resultados
                        </p>
                      </div>
                      <div>
                        <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                          <button
                            onClick={() => setPage(1)}
                            disabled={page === 1}
                            className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                          >
                            <span className="sr-only">Primera</span>
                            ««
                          </button>
                          <button
                            onClick={() => setPage(page => Math.max(1, page - 1))}
                            disabled={page === 1}
                            className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                          >
                            <span className="sr-only">Anterior</span>
                            «
                          </button>
                          <span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            Página {page}
                          </span>
                          <button
                            onClick={() => setPage(page => page + 1)}
                            disabled={page >= Math.ceil(count / itemsPerPage)}
                            className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                          >
                            <span className="sr-only">Siguiente</span>
                            »
                          </button>
                          <button
                            onClick={() => setPage(Math.ceil(count / itemsPerPage))}
                            disabled={page >= Math.ceil(count / itemsPerPage)}
                            className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                          >
                            <span className="sr-only">Última</span>
                            »»
                          </button>
                        </nav>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Modal de Instrucciones */}
      {showInstructions && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg max-w-2xl w-full shadow-xl transform transition-all">
            <div className="border-b px-6 py-4 flex items-center justify-between">
              <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Instrucciones de Auditoría
              </h3>
              <button
                onClick={() => setShowInstructions(false)}
                className="text-gray-400 hover:text-gray-500 focus:outline-none"
              >
                <svg className="h-6 w-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="px-6 py-4 space-y-6">
              <div className="space-y-4">
                <div>
                  <h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
                    <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                    Auditar Todos los Pedimentos
                  </h4>
                  <p className="text-gray-600 ml-7">Este proceso revisará uno a uno cada XML del pedimento completo y agregará los campos restantes en nuestra tabla de pedimentos. Si el documento tiene COVEs y E-Docs, también los subirá a nuestra base de datos.</p>
                </div>
                <div>
                  <h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
                    <svg className="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                    Auditar Partidas
                  </h4>
                  <p className="text-gray-600 ml-7">Creará todas las partidas de cada uno de los pedimentos, extrayendo la información detallada de cada una.</p>
                </div>
                <div>
                  <h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
                    <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    Auditar Remesas
                  </h4>
                  <p className="text-gray-600 ml-7">Obtendrá y agregará todos los COVEs existentes en el documento a nuestra base de datos.</p>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-6 py-4 rounded-b-lg">
              <button
                onClick={() => setShowInstructions(false)}
                className="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Entendido
              </button>
            </div>
          </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>
  );
}

export default Auditor;
