import { buildEndpoint } from './urlBuilder';
document.addEventListener('DOMContentLoaded', function() {
    const salesTable = $('#salesTable');

    if (salesTable.length) {
        const renderTableError = (message) => {
            const colspan = salesTable.find('thead th').length || 1;
            salesTable.find('tbody').html(`<tr><td colspan="${colspan}" class="text-center text-danger py-3">${message}</td></tr>`);
        };

        const dataTable = salesTable.DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            autoWidth: false,
            ajax: {
                url: buildEndpoint('admin-fit/sales/json'),
                type: 'GET',
                cache: false,
                timeout: 30000,
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                error: function(xhr, textStatus) {
                    const statusText = xhr?.status ? ` (HTTP ${xhr.status})` : '';
                    const reason = textStatus === 'timeout' ? 'Tiempo de espera agotado' : 'Error al cargar datos';
                    renderTableError(`${reason}${statusText}. Recarga la pagina.`);
                }
            },
            columns: [
                { data: 'sale', name: 'sale', className: 'text-center' },
                { data: 'name', name: 'name', className: 'text-center' },
                { data: 'last_name', name: 'last_name', className: 'text-center' },
                { data: 'total', name: 'total', className: 'text-center' },
                { data: 'debt', name: 'debt', className: 'text-center' },
                { data: 'created_at_formatted', name: 'created_at_formatted', className: 'text-center' },
                {
                    data: null,
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-center',
                    render: function(data, type, row) {
                        const editUrl = buildEndpoint(`admin-fit/sales/${row.id}/edit`);
                        return `
                            <a href="${editUrl}" class="btn btn-sm btn-primary">
                                <i class="fa-solid fa-pen-to-square"></i> Editar
                            </a>
                        `;
                    }
                }
            ],
            order: [[5, 'desc']],
            language: {
                "processing": "Procesando...",
                "search": "Buscar:",
                "lengthMenu": "Mostrar _MENU_ registros",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "infoPostFix": "",
                "loadingRecords": "Cargando...",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningun dato disponible en esta tabla",
                "paginate": {
                    "first": "Primero",
                    "previous": "Anterior",
                    "next": "Siguiente",
                    "last": "Ultimo"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            }
        });

        dataTable.on('error.dt', function() {
            renderTableError('No se pudieron procesar los datos de la tabla.');
        });

        dataTable.on('xhr.dt', function(e, settings, json, xhr) {
            if (!json || !Array.isArray(json.data)) {
                const statusText = xhr?.status ? ` (HTTP ${xhr.status})` : '';
                renderTableError(`Respuesta invalida del servidor${statusText}.`);
            }
        });
    }
});
