// ==UserScript==
// @name        Colorful Repertoire With Music quality
// @namespace   Violentmonkey Scripts
// @match       https://*.popmundo.com/World/Popmundo.aspx/Artist/Repertoire/*
// @grant       GM_setValue
// @grant       GM_getValue
// @license     M.I.T
// @version     1.2
// @description 28/09/2024, 00:38:02
// @downloadURL none
// ==/UserScript==
const currentUrl = window.location.href;
const bandId = currentUrl.split('/').pop();
const urlDomain = window.location.hostname;
let grupos = GM_getValue('grupos', ['default']); // Inicia com o grupo 'default' se não houver nenhum

jQuery(document).ready(function () {
    // Create a div for color pickers
    const colorPickerDiv = jQuery('<div>', { class: 'box', css: { marginBottom: '10px', padding: '10px', border: '1px solid #ccc' } });
    const heading = jQuery('<h2>').text('Configuração das Cores').appendTo(colorPickerDiv);

    // Create color pickers
    const propriaColorPickerLabel = jQuery('<label>', {css: { marginRight: '20px'}}).text('Musica própria: ').appendTo(colorPickerDiv);
    const propriaColorPicker = jQuery('<input>', { type: 'color', value: GM_getValue('propriaColor', '#008000') }).appendTo(propriaColorPickerLabel);

    const naoPropriaColorPickerLabel = jQuery('<label>').text('Comprada/Cover: ').appendTo(colorPickerDiv);
    const naoPropriaColorPicker = jQuery('<input>', { type: 'color', value: GM_getValue('naoPropriaColor', '#FFFF00') }).appendTo(naoPropriaColorPickerLabel);
    const hr= jQuery('<hr>').appendTo(colorPickerDiv);

    // Create the submit button
    const submitButton = jQuery('<input>', { type: 'submit', value: 'Salvar Cores', class: 'cnf' }).appendTo(colorPickerDiv);
    const createGroup = jQuery('<input>', { type: 'button', value: 'Criar novo grupo', class: 'cnf' }).appendTo(colorPickerDiv);

    // Save the selected colors in GM storage when changed
    propriaColorPicker.on('change', function () {
        GM_setValue('propriaColor', propriaColorPicker.val());
    });

    naoPropriaColorPicker.on('change', function () {
        GM_setValue('naoPropriaColor', naoPropriaColorPicker.val());
    });

    // Handle the submit button click
    submitButton.on('click', function () {
        alert('Cores atualizadas com sucesso!');
        location.reload(); // Refresh the page
    });

    // Lida com o clique no botão "Criar novo grupo"
    createGroup.on('click', function() {
        let groupName = prompt("Nome do grupo que deseja criar:");
        if (groupName) {
            grupos.push(groupName); // Adiciona o novo grupo
            GM_setValue('grupos', grupos); // Salva a lista de grupos atualizada
            alert(`Grupo "${groupName}" criado com sucesso!`);
            location.reload(); // Recarrega a página para atualizar os selects
        }
    });

    // Insert the color picker div above the table
    jQuery('#tablesongs').before(colorPickerDiv);

    // Cria um iframe único que será reutilizado para cada link e o oculta
    const iframe = jQuery('<iframe>', {
        id: 'songIframe',
        width: '0px',
        height: '0px',
        css: { display: 'none' } // Deixa o iframe oculto inicialmente
    }).appendTo('#ppm-wrapper');

    // Seleciona todos os links da tabela
    const links = jQuery('#tablesongs tbody tr td a');
    let currentIndex = 0;

    // Função para processar um link
    function processLink() {
        if (currentIndex >= links.length) {
            console.log('Processamento concluído para todos os links.');
            iframe.remove(); // Remove o iframe após concluir o processamento de todos os links
            return;
        }

        const currentLink = jQuery(links[currentIndex]);
        const originalText = currentLink.text();
        const currentLinkHref = currentLink.attr('href');
        const linkFormatted = "https://" + urlDomain + currentLinkHref;
        let notaMelodia = 0;
        let notaLetra = 0;
        let bandaPropria = false;

        // Atualiza o iframe com o novo link
        iframe.attr('src', linkFormatted);

        iframe.off('load').on('load', function () {
            const iframeContent = iframe.contents();
            let div1stBox = iframeContent.find('div.box').first();
            const bandHref = div1stBox.find('a[href^="/World/Popmundo.aspx/Artist/"]').attr('href');

            if (bandHref) {
                const bandIdFromHref = bandHref.split('/').pop();
                if (bandIdFromHref === bandId) {
                    bandaPropria = true;
                }
            }

            let div2ndBox = iframeContent.find('div.box').eq(1);
            const melodiaTitle = div2ndBox.find('p a').eq(0).attr('title');
            const letraTitle = div2ndBox.find('p a').eq(1).attr('title');

            if (melodiaTitle && letraTitle) {
                notaMelodia = melodiaTitle.split('/')[0];
                notaLetra = letraTitle.split('/')[0];

                console.log(`Link ${currentIndex + 1} - Nota da Melodia: ${notaMelodia}`);
                console.log(`Link ${currentIndex + 1} - Nota da Letra: ${notaLetra}`);

                let newText = `${originalText} (${notaMelodia}/${notaLetra})`;

                currentLink.text(newText);

                // Get saved colors from GM storage
                const propriaColor = GM_getValue('propriaColor', '#008000'); // Default green
                const naoPropriaColor = GM_getValue('naoPropriaColor', '#FFFF00'); // Default yellow

                if (bandaPropria) {
                    currentLink.css({ 'color': propriaColor });
                } else {
                    currentLink.css({ 'color': naoPropriaColor });
                }
            } else {
                console.error('Não foi possível encontrar os títulos para as notas da melodia e da letra.');
            }

            // Avança para o próximo link
            currentIndex++;
            processLink();
        });
    }

    // Inicia o processamento do primeiro link
    processLink();

    // Pega a tabela com id tablesongs
    const table = document.getElementById('tablesongs');
    if (table) {
        // Inicializa o tbody antes de qualquer uso
        const tbody = table.querySelector('tbody');

        // Adiciona cabeçalho "grupo" no thead
        const thead = table.querySelector('thead');
        if (thead) {
            const headerRow = thead.querySelector('tr');
            const newHeader = document.createElement('th');
            newHeader.textContent = 'Grupo';
            headerRow.appendChild(newHeader);
        }

        // Cria um mapa para associar cada grupo ao seu respectivo accordion
        let accordionMap = {};

        // Adiciona um accordion diretamente dentro da tabela para cada grupo
        grupos.forEach(grupo => {
            // Cria a linha para o accordion
            const accordionRow = document.createElement('tr');
            const accordionCell = document.createElement('td');
            accordionCell.setAttribute('colspan', table.querySelectorAll('th').length); // Define o colspan para abranger todas as colunas
            accordionCell.style.padding = '0';

            // Cria o header clicável para expandir/recolher
            const accordionHeader = document.createElement('div');
            accordionHeader.style.cursor = 'pointer';
            accordionHeader.style.backgroundColor = '#f1f1f1';
            accordionHeader.style.padding = '10px';
            accordionHeader.style.border = '1px solid #ccc';
            accordionHeader.style.fontWeight = 'bold';
            accordionHeader.textContent = `Grupo: ${grupo}`;

            // Cria o conteúdo do accordion
            const accordionContent = document.createElement('div');
            accordionContent.style.display = 'none'; // Inicia escondido
            accordionContent.style.padding = '10px';
            accordionContent.style.border = '1px solid #ccc';
            accordionContent.style.borderTop = 'none';

            // Evento de clique para expandir/recolher o conteúdo
            accordionHeader.addEventListener('click', () => {
                accordionContent.style.display = accordionContent.style.display === 'none' ? 'block' : 'none';
            });

            // Anexa o header e o conteúdo no accordionCell
            accordionCell.appendChild(accordionHeader);
            accordionCell.appendChild(accordionContent);
            accordionRow.appendChild(accordionCell);

            // Adiciona a linha do accordion ao final do tbody da tabela
            tbody.appendChild(accordionRow);

            // Salva o conteúdo do accordion no mapa para referência futura
            accordionMap[grupo] = accordionContent;
        });

        // Adiciona um selectbox em cada linha do tbody e salva o valor selecionado com o nome da música
        if (tbody) {
            const rows = tbody.querySelectorAll('tr');
            rows.forEach((row, index) => {
                const songName = row.querySelector('a').textContent.trim(); // Pega o nome da música

                // Cria uma nova célula com o selectbox
                const newCell = document.createElement('td');
                const select = document.createElement('select');

                // Preenche o select com as opções de grupos salvos
                grupos.forEach(grupo => {
                    const option = document.createElement('option');
                    option.value = grupo;
                    option.textContent = grupo;
                    select.appendChild(option);
                });

                // Carrega a seleção previamente salva para a música
                const savedGroup = GM_getValue(`song_${index}_group`, 'default');
                select.value = savedGroup;

                // Listener para salvar a seleção com GM_setValue e mover a linha para o accordion correto
                select.addEventListener('change', () => {
                    GM_setValue(`song_${index}_group`, select.value);
                    console.log(`Salvando grupo: ${songName}, Grupo: ${select.value}`);

                    // Move a linha para o accordion correto
                    const selectedGroup = select.value;
                    if (accordionMap[selectedGroup]) {
                        accordionMap[selectedGroup].appendChild(row);
                    }
                });

                // Adiciona o selectbox na nova célula
                newCell.appendChild(select);
                row.appendChild(newCell);

                // Move a linha para o accordion correto ao carregar a página
                if (accordionMap[savedGroup]) {
                    accordionMap[savedGroup].appendChild(row);
                }
            });

            // Remove as linhas que ficaram fora de accordions
            rows.forEach((row) => {
                if (!row.parentElement || row.parentElement === tbody) {
                    row.remove(); // Remove a linha órfã
                }
            });
        }
    }
});