@props([
    'tableId',
    'route',
    'columns' => [],
    'columnsVar' => null,
    'order' => [[0, 'asc']],
    'permissionExcel' => null,
    'permissionPdf' => null,
    'permissionPrint' => null,
    'emptyMessage' => 'No hay registros disponibles'
])

@push('css')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/datatables-plugins/responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/datatables-plugins/buttons/css/buttons.bootstrap4.min.css') }}">
@endpush

@push('js')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('vendor/sweetalert2/sweetalert2.all.min.js') }}"></script>

    {{-- Configuración Centralizada --}}
    <script src="{{ asset('js/datatable-config.js') }}"></script>

    <script>
        // Mostrar skeleton mientras carga
        $('#{{ $tableId }}').addClass('d-none');
        var skeletonHtml = `<div class="skeleton-table-loading"><x-ui.skeleton-loader type="table" count="1" /></div>`;
        $('#{{ $tableId }}').parent().before(skeletonHtml);

        $(document).ready(function() {
            // Validar que DtConfig esté cargado
            if (typeof DtConfig === 'undefined') {
                console.error('DtConfig no está definido. Asegúrese de que public/js/datatable-config.js existe.');
                return;
            }

            // BLINDAJE: Suprimir el popup nativo de DataTables y usar Swal
            $.fn.dataTable.ext.errMode = 'none';
            $('#{{ $tableId }}').on('error.dt', function(e, settings, techNote, message) {
                console.error('DataTable Error:', message);
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ icon: 'error', title: 'Error al cargar datos', text: 'Verifique su conexión o recargue la página.', confirmButtonColor: '#d33' });
                }
            });

            // 1. Configurar Idioma
            var idiomaLocal = @json(config('datatable_esp.idioma') ?? null);
            if (idiomaLocal) DtConfig.language = idiomaLocal;

            // 2. Definir Botones
            var exportConfig = { 
                columns: ':visible:not(.no-export)',
                format: { 
                    body: function (data, row, column, node) { 
                        return typeof data === 'string' ? data.replace(/<.*?>/ig, "").trim() : data; 
                    } 
                } 
            };
            
            var dtButtons = [];

            @if(!$permissionExcel || auth()->user()->can($permissionExcel))
                dtButtons.push({ extend: 'excel', className: 'btn btn-sm btn-premium btn-light border', text: '<i class="fas fa-file-excel text-success mr-1"></i> Excel', titleAttr: 'Exportar a Excel', exportOptions: exportConfig });
            @endif

            @if(!$permissionPdf || auth()->user()->can($permissionPdf))
                dtButtons.push({ extend: 'pdf', className: 'btn btn-sm btn-premium btn-light border', text: '<i class="fas fa-file-pdf text-danger mr-1"></i> PDF', titleAttr: 'Exportar a PDF', exportOptions: exportConfig });
            @endif

            @if(!$permissionPrint || auth()->user()->can($permissionPrint))
                dtButtons.push({ extend: 'print', className: 'btn btn-sm btn-premium btn-light border', text: '<i class="fas fa-print text-primary mr-1"></i> Imprimir', titleAttr: 'Imprimir reporte', exportOptions: exportConfig });
            @endif

            dtButtons.push({ extend: 'colvis', className: 'btn btn-sm btn-premium btn-light border', text: '<i class="fas fa-eye mr-1"></i> Ver', titleAttr: 'Seleccionar columnas visibles' });

            // 3. Inicializar DataTable
            var cols = {!! $columnsVar ? $columnsVar : json_encode($columns) !!};
            var config = DtConfig.create(
                "{{ $route }}", 
                cols, 
                {
                    buttons: dtButtons,
                    order: @json($order),
                    language: DtConfig.language,
                    ajax: {
                        url: "{{ $route }}",
                        xhrFields: {
                            withCredentials: true
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }
                }
            );

            // BLINDAJE: Destruir instancia previa si existe (evita error "Cannot reinitialise")
            if ($.fn.DataTable.isDataTable('#{{ $tableId }}')) {
                $('#{{ $tableId }}').DataTable().clear().destroy();
            }

            window.LaravelDataTables = window.LaravelDataTables || {};
            window.LaravelDataTables['{{ $tableId }}'] = $('#{{ $tableId }}').DataTable(config);

            // Ocultar skeleton y mostrar tabla
            $('.skeleton-table-loading').remove();
            $('#{{ $tableId }}').removeClass('d-none');

            // --- TOOLTIPS EN BOTONES DE DATATABLE ---
            window.LaravelDataTables['{{ $tableId }}'].on('init.dt draw.dt', function() {
                $('#{{ $tableId }}_wrapper .dt-buttons .btn').each(function() {
                    var btn = $(this);
                    var text = btn.text().trim();
                    if (!btn.attr('title') && text) {
                        btn.attr('title', text);
                    }
                });
            });

            // --- LÓGICA DELETE ---
            $('body').on('click', '.btn-delete-action', function(e) {
                e.preventDefault();
                let url = $(this).data('url'); 
                
                Swal.fire({
                    title: '¿Estás seguro?', 
                    text: "Esta acción es irreversible", 
                    icon: 'warning',
                    showCancelButton: true, 
                    confirmButtonColor: '#d33', 
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, eliminar', 
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // 4. Ejecutar eliminación vía Fetch
                        fetch(url, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json().then(data => ({ ok: response.ok, data })))
                        .then(res => {
                            if (res.ok) {
                                Swal.fire('¡Eliminado!', res.data.message || 'El registro ha sido eliminado.', 'success');
                                $('#{{ $tableId }}').DataTable().ajax.reload();
                                
                                // Opcional: Actualizar KPIs si existen en la página
                                if (typeof hidratarKPIs === 'function') {
                                    hidratarKPIs();
                                }
                            } else {
                                Swal.fire('Error', res.data.message || 'No se pudo eliminar el registro.', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire('Error', 'Sucedió un error inesperado en el servidor.', 'error');
                        });
                    }
                });
            });
        });
    </script>
@endpush

@once
    <form id="formDelete" method="POST" action="" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@endonce