import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
import SuccessModal from '../components/SuccessModal.jsx';
import ConfirmModal from '../components/ConfirmModal.jsx';
import {
    fetchDatastages,
    fetchDatastageDetail,
    createDatastage,
    updateDatastage,
    deleteDatastage
} from '../api/datastage';
import { postFormDataWithAuth, patchFormDataWithAuth } from '../fetchWithAuth';
// PATCH para actualizar solo el campo procesado
async function patchProcesadoTrue(item) {
    const url = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${item.id}/`;
    const body = { procesado: true };
    return fetchWithAuth(url, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    });
}
import { fetchWithAuth } from '../fetchWithAuth';

// Modal para mostrar registros cargados
function RegistrosCargadosModal({ open, onClose, registros }) {
    if (!open || !registros) return null;
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
            <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                <h2 className="text-lg font-bold mb-4">Registros cargados</h2>
                <div className="overflow-x-auto max-h-96">
                    <table className="min-w-full border border-gray-300 text-sm">
                        <thead>
                            <tr className="bg-gray-100">
                                <th className="px-2 py-1 border">Registro</th>
                                <th className="px-2 py-1 border">Cantidad</th>
                            </tr>
                        </thead>
                        <tbody>                            {(registros && typeof registros === 'object' ? Object.entries(registros) : []).map(([registro, cantidad]) => (
                                <tr key={registro}>
                                    <td className="px-2 py-1 border">{registro}</td>
                                    <td className="px-2 py-1 border text-right">{cantidad}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
                <button
                    className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                    onClick={onClose}
                >
                    Cerrar
                </button>
            </div>
        </div>
    );
}

// Procesar datastage (adaptado para mostrar registros cargados)
async function procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal) {
    try {
        const url = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${item.id}/procesar/`;
        const body = {
            organizacion: item.organizacion,
            contribuyente: item.contribuyente,
            procesado: item.procesado
        };
        const res = await fetchWithAuth(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body)
        });
        const data = await res.json();
        if (res.status === 200) {
            // PATCH para marcar como procesado en backend
            await patchProcesadoTrue(item);
            setDatastages(prev => ({
                ...prev,
                results: Array.isArray(prev.results)
                    ? prev.results.map(d => d.id === item.id ? { ...d, procesado: true } : d)
                    : []
            }));
            // Mostrar el mensaje con task_id y detail si existen
            if (data && data.task_id && data.detail) {
                setSuccess(`Procesamiento iniciado.\nTask ID: ${data.task_id}\n${data.detail}`);
            } else {
                setSuccess('Procesado correctamente');
            }
            // El modal de éxito se debe mostrar en el componente principal después de setSuccess
            // No se llama aquí
            if (data && data.registros_cargados) {
                setRegistrosCargados(data.registros_cargados);
                setShowRegistrosModal(true);
            }
        } else {
            setError(data && data.detail ? data.detail : 'No se pudo procesar el datastage');
        }
    } catch (e) {
        setError('No se pudo procesar el datastage');
    }
}
// Descarga autenticada de archivos datastage
function downloadDatastageFile(id, filename) {
    const url = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${id}/download-datastage/`;
    fetchWithAuth(url, { method: 'GET' })
        .then(async res => {
            if (!res.ok) throw new Error('Error al descargar archivo');
            const blob = await res.blob();
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename || `datastage_${id}.zip`;
            document.body.appendChild(link);
            link.click();
            link.remove();
        })
        .catch(() => alert('No se pudo descargar el archivo.'));
}

export default function Datastage() {
    const focusKeeperRef = useRef(null);
    // datastages will hold the full API response object (with .results and .count)
    const [datastages, setDatastages] = useState({ results: [], count: 0 });
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const [selected, setSelected] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [form, setForm] = useState({ archivo: null, contribuyente: '' });
    const [importadores, setImportadores] = useState([]);
    const [editingId, setEditingId] = useState(null);
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [showDetailModal, setShowDetailModal] = useState(false);
    const [success, setSuccess] = useState('');
    const [showSuccessModal, setShowSuccessModal] = useState(false);
    // Estado para mostrar registros cargados
    const [showRegistrosModal, setShowRegistrosModal] = useState(false);
    const [registrosCargados, setRegistrosCargados] = useState(null);
    const [deleteId, setDeleteId] = useState(null);
    // Animación header
    const [showAnimation, setShowAnimation] = useState(false);
    const [hasAnimated, setHasAnimated] = useState(false);
    useLayoutEffect(() => { setShowAnimation(true); }, []);
    useEffect(() => { if (showAnimation && !hasAnimated) setTimeout(() => setHasAnimated(true), 800); }, [showAnimation, hasAnimated]);

    // Mostrar modal de éxito cuando cambia el mensaje de success
    useEffect(() => {
        if (success) setShowSuccessModal(true);
    }, [success]);
    // Cargar lista
    const load = async (page = currentPage, pageSize = itemsPerPage) => {
        setLoading(true);
        setError(null);
        try {
            const data = await fetchDatastages(page, pageSize);
            if (data && Array.isArray(data.results)) {
                setDatastages(data);
            } else if (Array.isArray(data)) {
                setDatastages({ results: data, count: data.length });
            } else {
                setDatastages({ results: [], count: 0 });
            }
        } catch (e) {
            setError(e.message);
            setDatastages({ results: [], count: 0 });
        }
        setLoading(false);
    };

    useEffect(() => {
        load(currentPage, itemsPerPage);
    }, [currentPage, itemsPerPage]);

    // Ver detalle
    const handleSelect = async (id) => {
        setLoading(true);
        setError(null);
        try {
            const detail = await fetchDatastageDetail(id);
            setSelected(detail);
            setShowDetailModal(true);
        } catch (e) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Crear
    const handleCreate = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError(null);
        try {
            const fd = new FormData();
            fd.append('contribuyente', form.contribuyente);
            if (form.archivo) fd.append('archivo', form.archivo);
            await postFormDataWithAuth(`${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/`, fd);
            setForm({ archivo: null, contribuyente: '' });
            setShowCreateModal(false);
            setSuccess('Datastage creado exitosamente');
            setShowSuccessModal(true);
            load();
        } catch (e) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Editar
    const handleEdit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError(null);
        try {
            const fd = new FormData();
            fd.append('contribuyente', form.contribuyente);
            if (form.archivo) fd.append('archivo', form.archivo);
            await patchFormDataWithAuth(`${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${editingId}/`, fd);
            setForm({ archivo: null, contribuyente: '' });
            setEditingId(null);
            setShowEditModal(false);
            setSuccess('Datastage actualizado exitosamente');
            setShowSuccessModal(true);
            load();
        } catch (e) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Eliminar
    const handleDelete = async () => {
        if (!deleteId) return;
        setLoading(true);
        setError(null);
        try {
            await deleteDatastage(deleteId);
            if (selected && selected.id === deleteId) setSelected(null);
            setShowDeleteModal(false);
            setSuccess('Datastage eliminado exitosamente');
            setShowSuccessModal(true);
            load();
        } catch (e) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Abrir modal de edición
    const openEditModal = (item) => {
        setForm({ archivo: null, contribuyente: item.contribuyente });
        setEditingId(item.id);
        setShowEditModal(true);
    };

    // Abrir modal de creación
    const openCreateModal = async () => {
        setForm({ archivo: null, contribuyente: '' });
        setEditingId(null);
        // Fetch importadores
        try {
            const res = await fetchWithAuth(`${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`, { method: 'GET' });
            const data = await res.json();
            if (Array.isArray(data)) {
                setImportadores(data);
            } else {
                setImportadores([]);
            }
        } catch {
            setImportadores([]);
        }
        setShowCreateModal(true);
    };

    // Abrir modal de eliminación
    const openDeleteModal = (id) => {
        setDeleteId(id);
        setShowDeleteModal(true);
    };

    // Cancelar edición
    const handleCancelEdit = () => {
        setForm({ archivo: null, contribuyente: '' });
        setEditingId(null);
        setShowEditModal(false);
    };

    return (
        <div className="min-h-screen p-4 sm:p-6 bg-gradient-to-br from-gray-50 to-blue-50">
            <div ref={focusKeeperRef} tabIndex={-1} style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden', outline: 'none' }} aria-hidden="true"></div>
            <div className="max-w-7xl mx-auto">
                {/* Header decorativo */}
                <div className={
                    "mb-8 relative overflow-hidden rounded-2xl shadow bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 border border-blue-200 p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6" +
                    (showAnimation && !hasAnimated ? ' animate-fadein-slideup opacity-0' : '')
                }
                    style={showAnimation && !hasAnimated ? { animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' } : undefined}>
                    <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">
                            <ellipse cx="12" cy="7" rx="8" ry="3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M4 7v10c0 1.657 3.582 3 8 3s8-1.343 8-3V7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M4 17c0 1.657 3.582 3 8 3s8-1.343 8-3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </div>
                    <div className="flex-1">
                        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1 flex flex-col sm:flex-row sm:items-center gap-2">
                            Datastage
                            <span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full animate-fade-in">{datastages.count}</span>
                        </h1>
                        <p className="text-sm sm:text-base lg:text-lg text-blue-100 font-medium">Gestiona y visualiza la información de Datastage.</p>
                    </div>
                    {/* Efecto decorativo de fondo */}
                    <div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
                        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
                            <circle cx="60" cy="60" r="50" fill="url(#grad1)" />
                            <defs>
                                <linearGradient id="grad1" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
                                    <stop stopColor="#1e40af" stopOpacity="0.15" />
                                    <stop offset="1" stopColor="#1e3a8a" stopOpacity="0.10" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                </div>
                {/* Animación personalizada para el icono y contador */}
                <style>{`
          @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
          }
          .animate-bounce-slow {
            animation: bounce-slow 2.2s infinite;
          }
          @keyframes fade-in {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
          }
          .animate-fade-in {
            animation: fade-in 0.7s ease;
          }
          @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; }
        `}</style>

                {/* Botón flotante para crear */}
                <div className="flex justify-end mb-4">
                    <button onClick={openCreateModal} className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg font-semibold shadow hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all">
                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Nuevo Datastage
                    </button>
                </div>

                {/* Lista */}
                {/* Responsive: tabla en desktop, tarjetas en móvil/tablet */}
                <div className="bg-white shadow-lg rounded-xl border border-gray-200">
                    <div className="px-4 sm:px-6 lg:px-8 pt-6 sm:pt-8 pb-2 border-b border-gray-200">
                        <h2 className="text-xl sm:text-2xl font-extrabold text-blue-800 tracking-tight mb-1">Lista de Datastages</h2>
                        <div className="h-1 w-10 bg-blue-400 rounded mb-2"></div>
                    </div>
                    {/* Tabla para pantallas grandes */}
                    <div className="hidden lg:block overflow-x-auto">
                        <table className="min-w-full divide-y divide-gray-300 rounded-lg overflow-hidden text-xs bg-white">
                            <thead className="bg-gray-50">
                                <tr>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Archivo</th>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contribuyente</th>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Procesado</th>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Creado</th>
                                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actualizado</th>
                                    <th scope="col" className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                {(Array.isArray(datastages.results) ? datastages.results : []).map(item => (
                                    <tr key={item.id} className="hover:bg-slate-50 transition-colors">
                                        <td className="border px-2 py-2 text-center">{item.id}</td>
                                        <td className="border px-2 py-2 max-w-xs truncate">
                                            {item.download_url ? (
                                                <span className="flex items-center gap-1 text-xs text-gray-700 truncate font-mono">
                                                    {(() => {
                                                        try {
                                                            const url = new URL(item.download_url);
                                                            return decodeURIComponent(url.pathname.split('/').pop() || '');
                                                        } catch {
                                                            return '';
                                                        }
                                                    })()}
                                                    <button
                                                        type="button"
                                                        className="inline-flex items-center justify-center w-6 h-6 rounded bg-blue-100 border border-blue-200 text-blue-700 hover:bg-blue-200 hover:border-blue-300 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 ml-1"
                                                        title="Descargar archivo"
                                                        onClick={() => downloadDatastageFile(
                                                            item.id,
                                                            (() => {
                                                                try {
                                                                    const url = new URL(item.download_url);
                                                                    return decodeURIComponent(url.pathname.split('/').pop() || '');
                                                                } catch {
                                                                    return '';
                                                                }
                                                            })()
                                                        )}
                                                    >
                                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3" />
                                                        </svg>
                                                    </button>
                                                </span>
                                            ) : (
                                                <span className="text-gray-400">Sin archivo</span>
                                            )}
                                        </td>
                                        <td className="border px-2 py-2">{item.contribuyente}</td>
                                        <td className="border px-2 py-2 text-center">
                                            <span className={item.procesado ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs' : 'bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs'}>
                                                {item.procesado ? 'Sí' : 'No'}
                                            </span>
                                        </td>
                                        <td className="border px-2 py-2 whitespace-nowrap">{item.created_at ? new Date(item.created_at).toLocaleString() : ''}</td>
                                        <td className="border px-2 py-2 whitespace-nowrap">{item.updated_at ? new Date(item.updated_at).toLocaleString() : ''}</td>
                                        <td className="border px-2 py-2 space-x-2 text-center">
                                            <button onClick={() => handleSelect(item.id)}
                                                className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 hover:border-blue-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                                                title="Ver detalle"
                                            >
                                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                                            </button>
                                            <button onClick={() => openEditModal(item)}
                                                className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-yellow-50 border border-yellow-200 text-yellow-700 hover:bg-yellow-100 hover:border-yellow-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
                                                title="Editar"
                                            >
                                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536M9 13l6-6 3.536 3.536a2 2 0 010 2.828l-7.072 7.072a2 2 0 01-2.828 0l-3.536-3.536a2 2 0 010-2.828l7.072-7.072z" /></svg>
                                            </button>
                                            <button onClick={() => openDeleteModal(item.id)}
                                                className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-50 border border-red-200 text-red-700 hover:bg-red-100 hover:border-red-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                                                title="Eliminar"
                                            >
                                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                            </button>
                                            <button
                                                onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal)}
                                                className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
                                                title={item.procesado ? 'Ya procesado' : 'Procesar'}
                                                disabled={item.procesado}
                                            >
                                                <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                                    <path d="M8 5v14l11-7z" />
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        {/* Paginación */}
                        {datastages.count > itemsPerPage && (
                            <div className="flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-4 border-t border-gray-200">
                                <div className="text-xs text-gray-700">
                                    Mostrando <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span> a <span className="font-medium">{Math.min(currentPage * itemsPerPage, datastages.count)}</span> de <span className="font-medium">{datastages.count}</span> registros
                                </div>
                                <div className="flex items-center gap-1">
                                    <button
                                        onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                        disabled={currentPage === 1}
                                        className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
                                    >Anterior</button>
                                    {Array.from({ length: Math.ceil(datastages.count / itemsPerPage) }, (_, i) => i + 1).map(pageNum => (
                                        <button
                                            key={pageNum}
                                            onClick={() => setCurrentPage(pageNum)}
                                            className={`px-2 py-1 rounded text-xs border ${currentPage === pageNum ? 'bg-blue-600 text-white' : 'bg-white hover:bg-blue-50'}`}
                                        >{pageNum}</button>
                                    ))}
                                    <button
                                        onClick={() => setCurrentPage(p => Math.min(Math.ceil(datastages.count / itemsPerPage), p + 1))}
                                        disabled={currentPage === Math.ceil(datastages.count / itemsPerPage)}
                                        className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
                                    >Siguiente</button>
                                    <select
                                        value={itemsPerPage}
                                        onChange={e => { setItemsPerPage(Number(e.target.value)); setCurrentPage(1); }}
                                        className="ml-2 px-2 py-1 border rounded text-xs"
                                    >
                                        {[10, 20, 50, 100].map(n => (<option key={n} value={n}>{n} por página</option>))}
                                    </select>
                                </div>
                            </div>
                        )}
                    </div>
                    {/* Tarjetas para móvil/tablet */}
                    <div className="lg:hidden space-y-4 p-2">
                        {datastages.results.length === 0 ? (
                            <div className="text-center text-gray-400 py-8">No hay datastages disponibles</div>
                        ) : (
                            (Array.isArray(datastages.results) ? datastages.results : []).map(item => (
                                <div key={item.id} className="bg-white rounded-xl shadow border border-gray-200 p-4 flex flex-col gap-2">
                                    <div className="flex items-center justify-between mb-2">
                                        <span className="font-bold text-blue-800">#{item.id}</span>
                                        <span className={item.procesado ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs' : 'bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs'}>
                                            {item.procesado ? 'Procesado' : 'Pendiente'}
                                        </span>
                                    </div>
                                    <div className="flex items-center gap-1 text-xs text-gray-700 break-all font-mono mb-1">
                                        {item.download_url ? (
                                            <span className="flex items-center gap-1">
                                                {(() => { try { const url = new URL(item.download_url); return decodeURIComponent(url.pathname.split('/').pop() || ''); } catch { return ''; } })()}
                                                <button
                                                    type="button"
                                                    className="inline-flex items-center justify-center w-6 h-6 rounded bg-blue-100 border border-blue-200 text-blue-700 hover:bg-blue-200 hover:border-blue-300 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 ml-1"
                                                    title="Descargar archivo"
                                                    onClick={() => downloadDatastageFile(
                                                        item.id,
                                                        (() => { try { const url = new URL(item.download_url); return decodeURIComponent(url.pathname.split('/').pop() || ''); } catch { return ''; } })()
                                                    )}
                                                >
                                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3" />
                                                    </svg>
                                                </button>
                                            </span>
                                        ) : <span className="text-gray-400">Sin archivo</span>}
                                    </div>
                                    <div className="flex flex-wrap gap-2 text-xs">
                                        <span className="font-semibold">Contribuyente:</span> {item.contribuyente}
                                    </div>
                                    <div className="flex flex-wrap gap-2 text-xs">
                                        <span className="font-semibold">Creado:</span> {item.created_at ? new Date(item.created_at).toLocaleString() : ''}
                                    </div>
                                    <div className="flex flex-wrap gap-2 text-xs">
                                        <span className="font-semibold">Actualizado:</span> {item.updated_at ? new Date(item.updated_at).toLocaleString() : ''}
                                    </div>
                                    <div className="flex gap-2 mt-2">
                                        <button onClick={() => handleSelect(item.id)}
                                            className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 hover:border-blue-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                                            title="Ver detalle"
                                        >
                                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                                        </button>
                                        <button onClick={() => openEditModal(item)}
                                            className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-yellow-50 border border-yellow-200 text-yellow-700 hover:bg-yellow-100 hover:border-yellow-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
                                            title="Editar"
                                        >
                                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536M9 13l6-6 3.536 3.536a2 2 0 010 2.828l-7.072 7.072a2 2 0 01-2.828 0l-3.536-3.536a2 2 0 010-2.828l7.072-7.072z" /></svg>
                                        </button>
                                        <button onClick={() => openDeleteModal(item.id)}
                                            className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-50 border border-red-200 text-red-700 hover:bg-red-100 hover:border-red-300 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                                            title="Eliminar"
                                        >
                                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                        </button>
                                        <button
                                            onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal)}
                                            className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
                                            title={item.procesado ? 'Ya procesado' : 'Procesar'}
                                            disabled={item.procesado}
                                        >
                                            <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </div>

                {/* Modales */}

                {/* Modal de creación - estilo Users/Importers */}
                {showCreateModal && (
                    <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
                        <form onSubmit={handleCreate} className="relative mx-auto w-full max-w-2xl bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
                            {/* Header formal con gradiente */}
                            <div className="bg-gradient-to-r from-blue-700 via-blue-800 to-blue-900 rounded-t-2xl p-6 text-white border-b-2 border-blue-500">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center space-x-4">
                                        <div className="bg-blue-500 bg-opacity-30 backdrop-blur-sm rounded-xl p-3 border border-blue-400 border-opacity-30 shadow-lg">
                                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <ellipse cx="12" cy="7" rx="8" ry="3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                <path d="M4 7v10c0 1.657 3.582 3 8 3s8-1.343 8-3V7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                <path d="M4 17c0 1.657 3.582 3 8 3s8-1.343 8-3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold tracking-wide mb-1">Nuevo Datastage</h3>
                                            <p className="text-blue-200 text-sm font-medium">Carga un archivo .zip y asigna un contribuyente</p>
                                        </div>
                                    </div>
                                    <button
                                        type="button"
                                        onClick={() => setShowCreateModal(false)}
                                        className="text-blue-100 hover:text-white hover:bg-blue-600 transition-all duration-200 p-2 hover:bg-opacity-50 rounded-lg border border-blue-400 border-opacity-30 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-800"
                                    >
                                        <svg className="w-5 h-5" 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>

                            {/* Content */}
                            <div className="p-6 space-y-6">
                                {error && (
                                    <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700 text-sm flex items-start space-x-3">
                                        <svg className="w-5 h-5 flex-shrink-0 mt-0.5" 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>
                                        <span>{error}</span>
                                    </div>
                                )}

                                {/* Sección de Archivo */}
                                <div className="bg-slate-50 rounded-xl p-5 border border-slate-200">
                                    <div className="flex items-center mb-4 pb-2 border-b border-slate-300">
                                        <div className="bg-blue-600 rounded-lg p-2 mr-3 shadow-sm">
                                            <svg className="w-4 h-4 text-white" 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>
                                            <h4 className="text-sm font-semibold text-slate-800">Archivo de Datos</h4>
                                            <p className="text-xs text-slate-600">Selecciona el archivo ZIP a procesar</p>
                                        </div>
                                    </div>
                                    <div className="space-y-2">
                                        <label className="block text-xs font-semibold text-slate-700">
                                            Archivo (.zip) <span className="text-red-500">*</span>
                                        </label>
                                        <div className="relative">
                                            <input
                                                type="file"
                                                accept=".zip"
                                                onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))}
                                                required
                                                className="w-full px-4 py-2.5 border-2 border-slate-300 border-dashed rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 text-sm hover:border-blue-500 cursor-pointer file:mr-4 file:py-1 file:px-4 file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 file:rounded-full hover:file:bg-blue-100"
                                            />
                                        </div>
                                        <p className="text-xs text-slate-500 mt-1">
                                            Formato soportado: .ZIP (máximo 100MB)
                                        </p>
                                    </div>
                                </div>

                                {/* Sección de Contribuyente */}
                                <div className="bg-slate-50 rounded-xl p-5 border border-slate-200">
                                    <div className="flex items-center mb-4 pb-2 border-b border-slate-300">
                                        <div className="bg-green-600 rounded-lg p-2 mr-3 shadow-sm">
                                            <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 className="text-sm font-semibold text-slate-800">Datos del Contribuyente</h4>
                                            <p className="text-xs text-slate-600">Selecciona el RFC del contribuyente</p>
                                        </div>
                                    </div>
                                    <div className="space-y-2">
                                        <label className="block text-xs font-semibold text-slate-700">
                                            RFC del Contribuyente <span className="text-red-500">*</span>
                                        </label>
                                        <select
                                            className="w-full px-3 py-2.5 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 text-sm"
                                            value={form.contribuyente}
                                            onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))}
                                            required
                                        >
                                            <option value="" disabled>Selecciona un RFC</option>
                                            {importadores.map(imp => (
                                                <option key={imp.rfc} value={imp.rfc} className="font-mono">
                                                    {imp.rfc}
                                                </option>
                                            ))}
                                        </select>
                                        <p className="text-xs text-slate-500 mt-1">
                                            Selecciona el RFC del contribuyente asociado a este datastage
                                        </p>
                                    </div>
                                </div>

                                {/* Botones de acción */}
                                <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
                                    <button
                                        type="button"
                                        onClick={() => setShowCreateModal(false)}
                                        className="w-full sm:w-auto px-6 py-2.5 border border-slate-300 rounded-lg shadow-sm text-sm font-medium text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200"
                                    >
                                        Cancelar
                                    </button>
                                    <button
                                        type="submit"
                                        className="w-full sm:w-auto px-6 py-2.5 border border-transparent rounded-lg shadow-lg text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2"
                                    >
                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                                        </svg>
                                        <span>Crear Datastage</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                )}


                {/* Modal de edición - estilo Users/Importers */}
                {showEditModal && (
                    <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
                        <form onSubmit={handleEdit} className="relative mx-auto w-full max-w-xl bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
                            {/* Header */}
                            <div className="bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-t-2xl p-4 text-white border-b-2 border-yellow-400">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center space-x-3">
                                        <div className="bg-yellow-500 bg-opacity-30 rounded-xl p-2 border border-yellow-400 border-opacity-30">
                                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536M9 13l6-6 3.536 3.536a2 2 0 010 2.828l-7.072 7.072a2 2 0 01-2.828 0l-3.536-3.536a2 2 0 010-2.828l7.072-7.072z" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h3 className="text-lg font-semibold tracking-wide">Editar Datastage</h3>
                                            <p className="text-yellow-200 text-xs font-medium">Actualiza el archivo o el contribuyente</p>
                                        </div>
                                    </div>
                                    <button type="button" onClick={handleCancelEdit} className="text-yellow-100 hover:text-white hover:bg-yellow-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-yellow-400 border-opacity-30">
                                        <svg className="w-5 h-5" 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>
                            {/* Content */}
                            <div className="p-6 space-y-4">
                                {error && <div className="text-red-500 mb-2">{error}</div>}
                                <div>
                                    <label className="block text-xs font-semibold text-slate-700 mb-1">Archivo (.zip)</label>
                                    <input type="file" accept=".zip" className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))} />
                                </div>
                                <div>
                                    <label className="block text-xs font-semibold text-slate-700 mb-1">Contribuyente</label>
                                    <input className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" value={form.contribuyente} onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))} required />
                                </div>
                                <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
                                    <button type="button" onClick={handleCancelEdit} className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar</button>
                                    <button type="submit" className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-yellow-600 to-yellow-800 hover:from-yellow-700 hover:to-yellow-900 focus:ring-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2">Actualizar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                )}


                {/* Modal de eliminación - estilo Users/Importers */}
                {showDeleteModal && (
                    <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
                        <div className="relative mx-auto w-full max-w-md bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
                            {/* Header */}
                            <div className="bg-gradient-to-r from-red-700 to-red-900 rounded-t-2xl p-4 text-white border-b-2 border-red-500">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center space-x-3">
                                        <div className="bg-red-500 bg-opacity-30 rounded-xl p-2 border border-red-400 border-opacity-30">
                                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h3 className="text-lg font-semibold tracking-wide">Eliminar Datastage</h3>
                                            <p className="text-red-200 text-xs font-medium">Esta acción no se puede deshacer.</p>
                                        </div>
                                    </div>
                                    <button type="button" onClick={() => setShowDeleteModal(false)} className="text-red-100 hover:text-white hover:bg-red-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-red-500 border-opacity-30">
                                        <svg className="w-5 h-5" 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>
                            {/* Content */}
                            <div className="p-6 text-center">
                                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                                    <svg className="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                    </svg>
                                </div>
                                <h3 className="text-lg font-medium text-gray-900 mb-2">¿Eliminar este datastage?</h3>
                                <p className="text-sm text-gray-500 mb-4">¿Seguro que deseas eliminar este datastage? Esta acción no se puede deshacer.</p>
                                <div className="flex justify-center space-x-3 pt-4">
                                    <button type="button" onClick={() => setShowDeleteModal(false)} className="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar</button>
                                    <button type="button" onClick={handleDelete} className="px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-red-700 to-red-900 hover:from-red-800 hover:to-red-950 focus:ring-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2">Eliminar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* Modal de detalle */}
                {showDetailModal && selected && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
                        <div className="bg-white rounded-xl shadow-2xl border border-blue-200 p-8 max-w-sm w-full flex flex-col animate-fade-in">
                            <h3 className="text-lg font-bold mb-2 text-blue-900">Detalle de Datastage #{selected.id}</h3>
                            {/* <div className="mb-1"><b>Archivo:</b> {selected.download_url ? <a href={selected.download_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline break-all">Descargar</a> : <span className="text-gray-400">Sin archivo</span>}</div> */}
                            <div className="mb-1"><b>Contribuyente:</b> {selected.contribuyente}</div>
                            <div className="mb-1"><b>Procesado:</b> <span className={selected.procesado ? 'bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs' : 'bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs'}>{selected.procesado ? 'Sí' : 'No'}</span></div>
                            <div className="mb-1"><b>Organización:</b> {selected.organizacion}</div>
                            <div className="mb-1"><b>Creado:</b> {selected.created_at ? new Date(selected.created_at).toLocaleString() : ''}</div>
                            <div className="mb-1"><b>Actualizado:</b> {selected.updated_at ? new Date(selected.updated_at).toLocaleString() : ''}</div>
                            <button onClick={() => setShowDetailModal(false)} className="mt-2 bg-gray-300 px-3 py-1 rounded hover:bg-gray-400 transition">Cerrar</button>
                        </div>
                    </div>
                )}


                {/* Modal de registros cargados */}
                <RegistrosCargadosModal open={showRegistrosModal} onClose={() => setShowRegistrosModal(false)} registros={registrosCargados} />

                {/* Modal de éxito */}
                <SuccessModal open={showSuccessModal} onClose={() => setShowSuccessModal(false)} message={success} />

            </div>
        </div>
    );
}