jQuery(function () {
    // build commit popup
    let md5File = '';
    var fieldsetcontent =
        '<p>' +
        '<label for="do__popup_msg">' +
        PluginDo.getLang("popup_msg") +
        '</label>' +
        '<input class="edit" id="do__popup_msg" />' +
        '</p>';

    // Ajuste contenido selector
    let contenidoSelector = `
        <div style="padding-bottom: 12px">
            <label for="do__popup_msg">${PluginDo.getLang("popup_msg")}: </label>
            <select id="do__popup_msg" class="edit">
                <option value="Completado">Completado</option>
                <option value="En Proceso">En proceso</option>
                <option value="No Aplica">No aplica</option>
            </select>
        </div>
    `;

    contenidoSelector += `
        <div style="padding-bottom: 2px;">
            <div style="padding-bottom: 9px">
                <small><b>Nota:</b> <b>1.</b> Cargar Archivo. | <b>2.</b> Click en "Procesar Archivo...".</small>
                <input type="file" id="fileInput" name="file" class="edit" />
            </div>
            <div style="padding-top: 6px; display: none;" id="procesarArchivoContainer">
                <button id="btnCargarArchivo" style="padding: 3px 6px; color: black; border-radius: 4px;">
                    Procesar Archivo
                </button>
            </div>
            <div id="statusCargue" style="margin-top: 12px; font-size: 14px; color: #333;"></div>
            <hr>
        </div>
    `;

    PluginDo.createOverlay(
        LANG.plugins['do'].finish_popup_title,
        'do__commit_popup',
        contenidoSelector,
        LANG.plugins['do'].finish_popup_submit,
        PluginDo.closeSingleTask
    );

    // Mostrar botón de procesar archivo y ocultar botón "Close" al seleccionar archivo
    jQuery(document).on('change', '#fileInput', function () {
        const fileInput = jQuery('#fileInput')[0];
        const closeBtn = jQuery('.button.plugin_do_closetask');

        if (fileInput.files && fileInput.files.length > 0) {
            jQuery('#procesarArchivoContainer').show(); 
            closeBtn.hide(); 
        } else {
            jQuery('#procesarArchivoContainer').hide(); 
            closeBtn.show();
        }
    });

    // Vincular funcionalidad al botón de subir archivo
    jQuery(document).on('click', '#btnCargarArchivo', function (e) {
        e.preventDefault();

        const fileInput = jQuery('#fileInput')[0];
        const closeBtn = jQuery('.button.plugin_do_closetask');

        if (!fileInput.files || fileInput.files.length === 0) {
            jQuery('#statusCargue').html('<p style="color:red;">Por favor, seleccione un archivo.</p>');
            return;
        }

        const $span = jQuery('#do_file_' + md5File);
        const $parentDiv = $span.closest('.section_highlight_wrapper');
        const $filelisting = $parentDiv.nextAll('.plugin__filelisting').first();
        const ns = $filelisting.length ? $filelisting.attr('data-namespace') : JSINFO.namespace;

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('call', 'cargar_archivo_do');
        formData.append('nsRuta', ns);
        formData.append('do_page', JSINFO.id);
        formData.append('md5', md5File);

        // Enviar el archivo usando AJAX
        jQuery.ajax({
            type: "POST",
            url: DOKU_BASE + 'lib/exe/ajax.php',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response.status === 'success') {
                    jQuery('#statusCargue').html('<p style="color:green;">' + response.message + '</p>');
                    jQuery('#do_file_' + md5File).html(` ( Archivo: <a href="${response.path}" target="_blank">${response.file}</a> )`);
                } else {
                    jQuery('#statusCargue').html('<p style="color:red;">' + response.message + '</p>');
                }
                jQuery("#fileInput").val('');
            },
            error: function () {
                jQuery('#statusCargue').html('<p style="color:red;">Ocurrió un error al subir el archivo.</p>');
            }
        });

        // Ocultar botón de procesar archivo y mostrar botón "Close"
        jQuery('#procesarArchivoContainer').hide();
        closeBtn.show();
    });

    // Clickable checkbox validacion
    jQuery(document).on('click', 'a.plugin_do_status', function (event) {
        event.preventDefault(); // Evita que el enlace navegue automáticamente
        
        jQuery('#statusCargue').html('');
        const md5Value = jQuery(this).attr('data-md5');        
        md5File = md5Value;

        // Reseteamos la visual al quitar selector.
        jQuery('#do_file_' + md5File).html("");

        PluginDo.toggle_status.call(this, event);
    });

    var $items = jQuery('span.plugin_do_item');

    if ($items.length > 0) {
        // Update titles of items with initial status info, especially for tables
        $items.each(function (i, item) {
            PluginDo.buildTitle(jQuery(item), [], '', null, null);
        });

        jQuery.ajax({
            type: "POST",
            url: DOKU_BASE + 'lib/exe/ajax.php',
            data: {
                call: 'plugin_do_status',
                do_page: JSINFO.id
            },
            success: PluginDo.updateItems,
            dataType: 'json'
        });
    }
});
