$(document).ready(function() {
  
$(document).on('click', '.btnFiltro', function() {
    var $btnFiltro = $(this);
    var $divFiltro = $btnFiltro.closest('.divFiltro');
    var filtro = $btnFiltro.attr('data-filtro');
    var valor = $btnFiltro.attr('data-valor');
    var tipo = $divFiltro.attr('data-tipo');

    // Verifica o tipo de filtro
    if (tipo === 'simples') {
        // Remove todos os valores para esse filtro antes de adicionar o novo
        atualizarURLComFiltroSimples(filtro, valor);
    } else if (tipo === 'multiplo') {
        // Adiciona ou remove valor para filtros múltiplos
        atualizarURLComFiltroMultiplo(filtro, valor);
    }

    carregarArquivos(); // Recarrega os arquivos após atualizar o filtro
});

// Função para atualizar a URL com filtro simples (apenas um valor ativo)
function atualizarURLComFiltroSimples(filtro, valor) {
    var urlObj = new URL(window.location.href);

    // Define apenas um valor para o filtro (substitui todos os outros)
    urlObj.searchParams.set(filtro, valor);

    window.history.pushState({
        path: urlObj.toString()
    }, '', urlObj.toString());
    atualizarClasseAtivo(filtro, [valor]); // Atualiza a classe 'ativo' apenas no valor clicado
}

// Função para atualizar a URL com filtro múltiplo (vários valores ativos)
function atualizarURLComFiltroMultiplo(filtro, valor) {
    var urlObj = new URL(window.location.href);
    var currentValues = urlObj.searchParams.get(filtro) ? urlObj.searchParams.get(filtro).split(',') : [];

    if (!currentValues.includes(valor)) {
        currentValues.push(valor); // Adiciona o valor se não estiver presente
    } else {
        currentValues = currentValues.filter(item => item !== valor); // Remove o valor se já existir (desativar filtro)
    }

    if (currentValues.length > 0) {
        urlObj.searchParams.set(filtro, currentValues.join(',')); // Adiciona os valores ao parâmetro
    } else {
        urlObj.searchParams.delete(filtro); // Remove o parâmetro se não houver mais valores
    }

    window.history.pushState({
        path: urlObj.toString()
    }, '', urlObj.toString());
    atualizarClasseAtivo(filtro, currentValues); // Atualiza a classe 'ativo' nos filtros múltiplos
}

// Função para verificar os filtros aplicados na URL e adicionar a classe 'ativo' correspondente
function verificarFiltrosNaURL() {
    var urlObj = new URL(window.location.href);
    urlObj.searchParams.forEach((valores, filtro) => {
        if (valores) {
            var valoresArray = valores.split(',');
            atualizarClasseAtivo(filtro, valoresArray);
        }
    });
}

// Função para adicionar a classe 'ativo' nos filtros selecionados
function atualizarClasseAtivo(filtro, valoresArray) {
    $('.btnFiltro[data-filtro="' + filtro + '"]').removeClass('ativo'); // Remove classe 'ativo' de todos os itens com o mesmo filtro

    valoresArray.forEach(function(valor) {
        $('.btnFiltro[data-filtro="' + filtro + '"][data-valor="' + valor + '"]').addClass('ativo'); // Adiciona classe 'ativo' apenas nos itens correspondentes
    });
}

    // Evento para pressionar Enter no campo de input
    $('#searchHeader').on('keypress', function(e) {
        if (e.which === 13) { // 13 é o código para a tecla Enter
            e.preventDefault();
            adicionarParametroPesquisa();
        }
    });

    // Evento para clicar no botão de busca
    $('.btnSearch').on('click', function() {
        adicionarParametroPesquisa();
    });

    // Função para adicionar o parâmetro de pesquisa à URL e carregar os arquivos
    function adicionarParametroPesquisa() {
        var valorInput = $('#searchHeader').val().trim(); // Pega o valor do input e remove espaços extras

        if (valorInput) { // Verifica se o valor não está vazio
            var novaURL = atualizarURLComParametro(window.location.href, 'pesquisa', valorInput);
            window.history.pushState({ path: novaURL }, '', novaURL); // Atualiza a URL sem recarregar a página
            carregarArquivos(); // Chama a função para carregar os arquivos
        }
    }

    // Função para atualizar a URL com o parâmetro desejado
    function atualizarURLComParametro(url, chave, valor) {
        var urlObj = new URL(url);
        urlObj.searchParams.set(chave, valor); // Adiciona ou atualiza o parâmetro
        return urlObj.toString();
    }

    // Função para carregar os arquivos via AJAX
    function carregarArquivos() {
      $('#printArts > div').addClass('carregando pulsando');
        $.ajax({
            url: window.location.href, // A URL da página atual
            type: 'POST',
            data: {
                acao: 'get_arquivos_down'
            },
            success: function(response) {
                if (response) {
                    // Armazenar a resposta na sessionStorage
                    sessionStorage.setItem('artesRetornada', JSON.stringify(response));
                    console.log('Arquivos carregados e armazenados na sessionStorage.');
                    // Processar as artes diretamente da resposta
                    processarArtes(response);
                }
            },
            error: function(xhr, status, error) {
                console.error('Erro ao carregar arquivos:', error);
            }
        });
    }

    // Funções para processar e verificar sessionStorage permanecem as mesmas...
    function processarArtes(artes) {
        console.log("Processando artes:", artes);

        var $printArts = $('#printArts');
        var $blockArt = $('.blockArt').first(); // Seleciona o modelo original

        if ($blockArt.length === 0) {
            console.error("Modelo '.blockArt' não encontrado na página.");
            return;
        }

        $printArts.empty(); // Limpa a div antes de adicionar novos itens

        // Primeiro, coletar dados dos itens, incluindo a proporção
        var itemData = [];

        $.each(artes, function(index, arte) {
            var resolucao = arte.resolucao; // Exemplo: '1920X1080'
            var [largura, altura] = resolucao.split('X').map(Number);
            var proporcao = largura / altura; // Aspect ratio

            itemData.push({
                arte: arte,
                proporcao: proporcao,
                larguraOriginal: largura,
                alturaOriginal: altura
            });
        });

        var containerWidth = $printArts.width();
        var targetRowHeight = 200; // Altura alvo para as linhas (pode ser ajustado)
        var columnGap = 15; // Gap desejado entre as colunas em pixels
        var rowGap = 5; // Gap desejado entre as linhas em pixels
        var currentRow = [];
        var currentRowProportionSum = 0;
        var rows = [];

        // Agrupar itens em linhas
        for (var i = 0; i < itemData.length; i++) {
            currentRow.push(itemData[i]);
            currentRowProportionSum += itemData[i].proporcao;

            // Calcular a altura da linha considerando os gaps
            var totalGapWidth = columnGap * (currentRow.length - 1);
            var rowHeight = (containerWidth - totalGapWidth) / currentRowProportionSum;

            // Verificar se a altura está dentro do intervalo desejado
            if (rowHeight < targetRowHeight * 1.2) {
                // Fechar a linha
                rows.push({ items: currentRow, rowHeight: rowHeight });
                currentRow = [];
                currentRowProportionSum = 0;
            } else if (i === itemData.length - 1) {
                // Último item, adicionar a linha mesmo que não preencha totalmente
                rows.push({ items: currentRow, rowHeight: Math.min(rowHeight, targetRowHeight) });
            }
        }

        // Processar cada linha
        $.each(rows, function(rowIndex, row) {
            var rowItems = row.items;
            var rowHeight = row.rowHeight;

            // Ajustar a altura se for muito maior que a altura alvo
            if (rowHeight > targetRowHeight * 1.5) {
                rowHeight = targetRowHeight;
            }

            // Criar um contêiner para a linha
            var $rowDiv = $('<div class="row"></div>').css({
                'display': 'flex',
                'flex-wrap': 'nowrap',
                'margin': '0',
                'padding': '0'
            });

            // Aplicar margin-bottom no contêiner da linha, exceto para a última linha
            if (rowIndex < rows.length - 1) {
                $rowDiv.css('margin-bottom', rowGap + 'px');
            }

            $.each(rowItems, function(index, item) {
                var $clone = $blockArt.clone(); // Clona o modelo
                var arte = item.arte;
                $clone.attr('data-id', arte.id); // Define o atributo data-id
                $clone.attr('data-codigo', arte.codigo); // Define o atributo data-codigo

                // Remove todas as classes .bricks-lazy-hidden dos elementos dentro do clone
                $clone.find('.bricks-lazy-hidden').removeClass('bricks-lazy-hidden');

                // Remove imagem existente (se necessário)
                $clone.find('img').not('.premiumIconB').remove(); // Remove apenas as imagens que não são premiumIconB

                // Criar uma nova imagem com o valor de $thumb
                var $novaImagem = $('<img>', {
                    src: arte.thumb,
                    class: 'brxe-image css-filter tamanho-auto', // Classe para estilizar a imagem
                    alt: arte.titulo,
                    decoding: 'async'
                });

                // Adicionar a nova imagem dentro do .blockArt
                $clone.append($novaImagem);

                // Verifica o valor de licenca e remove o ícone se não for "Premium"
                if (arte.licenca !== 'Premium') {
                    console.log(`Removendo premiumIconB para a arte com licença: ${arte.licenca}`);
                    $clone.find('.premiumIconB').remove();
                }

                // Ajustar estilos
                var width = rowHeight * item.proporcao;

                $clone.css({
                    'height': rowHeight + 'px',
                    'width': width + 'px',
                    'margin': '0',
                    'flex': 'none'
                });

                // Adicionar gap à direita, exceto para o último item
                if (index < rowItems.length - 1) {
                    $clone.css('margin-right', columnGap + 'px');
                }

                // Adiciona o clone ao contêiner da linha
                $rowDiv.append($clone);
            });

            // Adiciona a linha ao contêiner principal
            $printArts.append($rowDiv);
        });

        // Log após a impressão de todos os clones
        console.log("Todos os clones foram adicionados ao #printArts.");
    }

    // Função para verificar a existência de "artesRetornada" na sessionStorage
    function verificarSessionStorage() {
        console.log("Verificando sessionStorage para 'artesRetornada'...");
        if (sessionStorage.getItem('artesRetornada')) {
            console.log("'artesRetornada' encontrado na sessionStorage.");
            // Se "artesRetornada" existir, processar os dados
            processarArtes(JSON.parse(sessionStorage.getItem('artesRetornada')));
        } else {
            console.log("'artesRetornada' não encontrado. Aguardando...");
            // Se não existir, aguardar e verificar novamente
            setTimeout(verificarSessionStorage, 1000);
        }
    }

    // Escuta qualquer atualização na sessionStorage para acionar a impressão das artes
    $(window).on('storage', function(e) {
        if (e.originalEvent.key === 'artesRetornada' && sessionStorage.getItem('artesRetornada')) {
            console.log("Atualização detectada na sessionStorage 'artesRetornada'.");
            processarArtes(JSON.parse(sessionStorage.getItem('artesRetornada')));
        }
    });

    // Ação executada ao carregar a página
    carregarArquivos(); // Carrega e processa diretamente da resposta da requisição
    verificarSessionStorage(); // Verifica se já existe algo na sessionStorage
  verificarFiltrosNaURL();
});