// Função para obter a URL base do servidor
async function getApiUrl() {
    try {
        const response = await fetch('../../php/config_url.php'); // Solicita a URL base do PHP
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data.apiUrl; // Retorna a URL base
    } catch (error) {
        console.error('Error fetching API URL:', error);
        throw error;
    }
}

// Função para obter o token do localStorage
function getAuthToken() {
    return localStorage.getItem('x-access-token');
}

async function criarBlocos() {
    try {
        // Obtém a URL base do servidor
        const apiUrl = await getApiUrl();
        // Obter o token JWT do localStorage
        const token = getAuthToken();

        // Fazer uma requisição para o servidor para obter os dados dos blocos
        const response = await fetch(`${apiUrl}/mounting`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'x-access-token': token ? token : '' // Usando x-access-token diretamente no cabeçalho
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch block data');
        }

        const dadosDosBlocos = await response.json();
        // Limpar o container de blocos


        const entrada_1 = document.getElementById('entrada_1');
        entrada_1.innerHTML = '';

        // Iterar sobre o array de dados dos blocos
        dadosDosBlocos.forEach(dadosDoBloco => {
            const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela.
            const cab = document.createElement('section');
            cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela
            const Matriz = document.createElement('main');
            Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe. 


            //Cabeçalho 

            const sucab = document.createElement('header');
            sucab.classList.add('cabecario_1');

            //Bloco reponsavel pela imagem de logo da itguys

            const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página 
            bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1.
            const img_cab = document.createElement('img');//Cria a tag img na página
            img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab. 
            img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab.
            img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img.
            bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1.

            const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página 
            bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2.
            const bloco_a_cab = document.createElement('a');//Criação da tag a na página.
            bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab.
            bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2.
            const bloco_button_cab = document.createElement('button');//cria a tag button na página.
            bloco_button_cab.id = "logoutButton";
            bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button.
            bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do  bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab.

            //Matriz 

            const capitulo_1 = document.createElement('section');//Cria uma tag section na página. 
            capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada.
            const Corpo_1 = document.createElement('section');//Cria uma tag section na página. 
            Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada.
            const Coluna_1 = document.createElement('div');//Cria uma tag div na página. 
            Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada.

            //Menu Lateral

            //Painel personalizavel do usuario

            const seguimento_1 = document.createElement('div');// Cria uma tag div na página.
            seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada
            Coluna_1.appendChild(seguimento_1); // define a div seguimento_1  como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1
            const seguimento_1_button = document.createElement('button');
            seguimento_1.appendChild(seguimento_1_button);
            const seguimento_1_img = document.createElement('img');
            seguimento_1_img.id = "menu";
            seguimento_1_img.src = dadosDoBloco.imagem_segumento_1;
            seguimento_1_img.alt = "";
            seguimento_1_button.appendChild(seguimento_1_img);

            const seguimento_2 = document.createElement('div');
            seguimento_2.classList.add('seguimentos_2');
            Coluna_1.appendChild(seguimento_2);

            const user_1 = document.createElement('div');
            user_1.classList.add('user_1');
            seguimento_2.appendChild(user_1);

            const seguimento_2_img_1_user_1 = document.createElement('img');
            seguimento_2_img_1_user_1.classList.add('icon_subcab2_2');
            seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2;
            seguimento_2_img_1_user_1.alt = "";
            user_1.appendChild(seguimento_2_img_1_user_1);
            const seguimento_2_img_2_user_1 = document.createElement('img');
            seguimento_2_img_2_user_1.classList.add('icon_subcab2_1');
            seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2;
            seguimento_2_img_2_user_1.alt = "";
            user_1.appendChild(seguimento_2_img_2_user_1);


            const user_2 = document.createElement('div');
            user_2.classList.add('user_2');
            seguimento_2.appendChild(user_2);

            const identidade = document.createElement('p');
            user_2.appendChild(identidade);
            const User = document.createElement('div');
            User.id = "User";
            User.classList.add('user_2');
            User.textContent = dadosDoBloco.texto_User_segumento_2;
            identidade.appendChild(User);
            const Empresa = document.createElement('div');
            Empresa.id = "Empresa";
            Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2;
            user_2.classList.add('user_2');
            identidade.appendChild(Empresa);

            const Coluna_2 = document.createElement('div');
            Coluna_2.classList.add('Colunas_2');

            const seguimento_1_colun_2 = document.createElement('div');
            seguimento_1_colun_2.classList.add('seguimentos_1');
            Coluna_2.appendChild(seguimento_1_colun_2);

            const seguimento_2_colun_2 = document.createElement('div');
            seguimento_2_colun_2.classList.add('seguimentos_2');
            Coluna_2.appendChild(seguimento_2_colun_2);

            //Sessão de Cima

            const sessao1 = document.createElement('div');
            sessao1.classList.add('sessao_1');
            seguimento_2_colun_2.appendChild(sessao1);

            //Home

            const sessao1_a_1 = document.createElement('a');
            sessao1_a_1.href = dadosDoBloco.Menu_home_a;
            sessao1_a_1.target = 'frame';
            sessao1.appendChild(sessao1_a_1);

            const sessao1_a_1_item_menu = document.createElement('div');
            sessao1_a_1_item_menu.classList.add('item_menu');
            sessao1_a_1.appendChild(sessao1_a_1_item_menu);

            const sessao1_a_1_item_menu_img = document.createElement('img');
            sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img;
            sessao1_a_1_item_menu_img.alt = "";
            sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img);
            const sessao1_a_1_item_menu_text = document.createElement('p');
            sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text;
            sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text);

            //SevicDesck

            const sessao1_a_2 = document.createElement('a');
            sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a;
            sessao1.appendChild(sessao1_a_2);

            const sessao1_a_2_item_menu = document.createElement('div');
            sessao1_a_2_item_menu.classList.add('item_menu');
            sessao1_a_2.appendChild(sessao1_a_2_item_menu);

            const sessao1_a_2_item_menu_img = document.createElement('img');
            sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img;
            sessao1_a_2_item_menu_img.alt = "";
            sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img);
            const sessao1_a_2_item_menu_text = document.createElement('p');
            sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text;
            sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text);

            //Monitoramento

            const sessao1_a_3 = document.createElement('a');
            sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a;
            sessao1_a_3.target = 'frame';
            sessao1.appendChild(sessao1_a_3);

            const sessao1_a_3_item_menu = document.createElement('div');
            sessao1_a_3_item_menu.classList.add('item_menu');
            sessao1_a_3.appendChild(sessao1_a_3_item_menu);

            const sessao1_a_3_item_menu_img = document.createElement('img');
            sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img;
            sessao1_a_3_item_menu_img.alt = "";
            sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img);
            const sessao1_a_3_item_menu_text = document.createElement('p');
            sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text;
            sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text);

            //Sessão de baixo

            const sessao2 = document.createElement('div');
            sessao2.classList.add('sessao_2');
            seguimento_2_colun_2.appendChild(sessao2);

            //Suporte

            const sessao2_a_1 = document.createElement('a');
            sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a;
            sessao2.appendChild(sessao2_a_1);

            const sessao2_a_1_item_menu = document.createElement('div');
            sessao2_a_1_item_menu.classList.add('item_menu');
            sessao2_a_1.appendChild(sessao2_a_1_item_menu);

            const sessao2_a_1_item_menu_img = document.createElement('img');
            sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img;
            sessao2_a_1_item_menu_img.alt = "";
            sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img);
            const sessao2_a_1_item_menu_text = document.createElement('p');
            sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text;
            sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text);

            //Configuração

            const sessao2_a_2 = document.createElement('a');
            sessao2_a_2.href = dadosDoBloco.Menu_Config_a;
            sessao2_a_2.target = 'frame';
            sessao2.appendChild(sessao2_a_2);

            const sessao2_a_2_item_menu = document.createElement('div');
            sessao2_a_2_item_menu.classList.add('item_menu');
            sessao2_a_2.appendChild(sessao2_a_2_item_menu);

            const sessao2_a_2_item_menu_img = document.createElement('img');
            sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img;
            sessao2_a_2_item_menu_img.alt = "";
            sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img);
            const sessao2_a_2_item_menu_text = document.createElement('p');
            sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text;
            sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text);

            //capitulo 2

            const capitulo_2 = document.createElement('section');
            capitulo_2.classList.add('capitulo_2');
            const Corpo_2 = document.createElement('section');
            Corpo_2.classList.add('Corpo_2');
            const Corpo_2_Coluna_1 = document.createElement('div');
            Corpo_2_Coluna_1.classList.add('Colunas_1');

            const Tela = document.createElement('iframe');
            Tela.classList.add('transmissão');
            Tela.src = dadosDoBloco.Tela;
            Tela.name = 'frame';
            Corpo_2_Coluna_1.appendChild(Tela);



            // Adicionar o painel ao bloco

            Painel.appendChild(cab);
            Painel.appendChild(Matriz);


            cab.appendChild(sucab);
            sucab.appendChild(bloco_subcab1_1);
            sucab.appendChild(bloco_subcab1_2);

            Matriz.appendChild(capitulo_1);
            capitulo_1.appendChild(Corpo_1);
            Corpo_1.appendChild(Coluna_1);
            Corpo_1.appendChild(Coluna_2);

            Matriz.appendChild(capitulo_2);
            capitulo_2.appendChild(Corpo_2);
            Corpo_2.appendChild(Corpo_2_Coluna_1);


            // Adicionar o bloco ao container de blocos
            entrada_1.appendChild(Painel);
        });

        // Todas as funcionalidades que precisam da pagina construida precisam estar dentro de uma função e serem chamadas aqui.

        espasao();

        // Event listener para o botão de logout
        const logoutButton = document.getElementById('logoutButton');
        if (logoutButton) {
            logoutButton.addEventListener('click', function () {
                // Limpar o token do localStorage ao clicar no botão de logout
                clearAuthToken();
                // Redirecionar para a página de login ou qualquer outra página desejada após o logout
                window.location.href = '../login.html';
            });
        }



    } catch (error) {
        console.error('Erro ao criar blocos:', error);
    }
}

// Chama a função para criar os blocos ao carregar a página
document.addEventListener('DOMContentLoaded', criarBlocos);




function espasao() {


    var botao = document.querySelector('#menu')
    var cabecario = document.querySelector('.cabecario_1')
    var tela = document.querySelector('.transmissão')
    var menu = document.querySelector('.capitulo_1')
    var temas = document.querySelectorAll('.item_menu')


    botao.addEventListener('click', function () {
        menu.classList.toggle('expansao');
        cabecario.classList.toggle('expansao');
        tela.classList.toggle('expansao');

    });

    function selectLink() {
        temas.forEach((item) =>
            item.classList.remove('ativo')
        )
        this.classList.add('ativo')
    }
    temas.forEach((item) =>
        item.addEventListener('click', selectLink))

}