// Função para obter a URL base da API
async function getApiUrl() {
    try {
        const response = await fetch('../../../Sites/Site_ItGuys/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');
}


const Permissoes = {
    visuMonitor: true,
};



// Função para carregar uma imagem protegida com token JWT e exibi-la

// Função para carregar e exibir as imagens protegidas
async function criarBlocos() {
    try {
        const apiUrl = await getApiUrl();  // Obtém a URL da API a partir do PHP
        const token = getAuthToken();      // Obtém o token JWT do localStorage

        // Faz uma requisição para obter os dados da rota /mounting
        const response = await fetch(`${apiUrl}/mounting`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'x-access-token': token ? token : ''
            }
        });

        if (!response.ok) {
            throw new Error('Erro na requisição: ' + response.statusText);

        }

        const data = await response.json();

        // Agora acessa as propriedades do objeto
        const nomeCompleto = data.usuario.nome; // Nome completo do usuário
        const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
        const Empresa = data.empresa.nome;
        const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
        //const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
        const logoEmpresa = `${apiUrl}${data.empresa.logo}`;




        // Exibe as imagens protegidas usando os URLs retornados pela API
        loadImage(ImagemUser, 'profileImage');
        //loadImage(ImagemUser2, 'profileImage');  // Imagem de perfil do usuário
        loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa

        // Acessando o primeiro objeto do array retornado

        console.log(data);
        console.log(primeiroNome);
        console.log(Empresa);
        console.log(ImagemUser);
        console.log(logoEmpresa);


        //var visuMonitor = usuarioInfo.Permissoes_Monitor;


        //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
        const estilos = document.getElementById('conexao');
        estilos.href = './Css/page/Ambiente/Estrutura/estrutura.css';


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

        construtor_primario.innerHTML =
            '<nav>'
            +
            '<section class="menu_lateral">'
            +
            '<div class="seguimentacao_1">'
            +
            '<div class="coluna_1">'
            +
            '<div class="subcolunas_1">'
            +
            '<div class="filheira">'
            +
            '<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">'
            +
            '</div>'
            +
            '</div>'
            +
            '</div>'
            +
            '<div class="coluna_2">'
            +
            '<div class="subcolunas_1">'
            +
            '<div class="filheira">'
            +
            '<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">'
            +
            '</div>'
            +
            '<div id="sub_entrada_moni_1"></div>'
            +
            '<div class="filheira">'
            +
            '<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">'
            +
            '</div>'
            +
            '<div class="filheira">'
            +
            '<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">'
            +
            '</div>'
            +
            '</div>'
            +
            '<div class="subcolunas_2">'
            +
            '<div class="filheira">'
            +
            '<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">'
            +
            '</div>'
            +
            '<div class="filheira">'
            +
            ' <img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">'
            +
            '</div>'
            +
            '</div>'
            +
            '</div>'
            +
            '</div>'
            +
            '<div class="seguimentacao_2">'
            +
            '<div class="coluna_1">'
            +
            '<div class="subcolunas_1">'
            +
            '<div class="filheira">'
            +
            '<img class="profileImage" alt="">'
            +
            '</div>'
            +
            '<div class="filheira">'
            +
            '<h2>' + primeiroNome + '</h2>'
            +
            '<h2>' + Empresa + '</h2>'
            +
            '</div>'
            +
            '</div>'
            +
            '<div class="subcolunas_2">'
            +
            '<button class="id_ajuste" id="id_ajuste">'
            +
            '<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">'
            +
            '</button>'
            +
            '</div>'
            +
            '</div>'
            +
            '<div class="coluna_2">'
            +
            '<div class="subcolunas_1">'
            +
            '<a href="./html/Home.html" class="filheira_a" target="frame">'
            +
            '<div class="filheira">'
            +
            '<h2>Home</h2>'
            +
            '</div>'
            +
            '</a>'
            +
            //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
            '<div id="sub_entrada_moni_2"></div>'
            +
            '<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">'
            +
            '<div class="filheira">'
            +
            '<h2>Servicdesk</h2>'
            +
            '</div>'
            +
            '</a>'
            +
            '<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">'
            +
            '<div class="filheira">'
            +
            '<h2>Ferramentas</h2>'
            +
            '</div>'
            +
            '</a>'
            +
            '</div>'
            +
            '<div class="subcolunas_2">'
            +
            '<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">'
            +
            '<div class="filheira">'
            +
            '<h2>Suporte</h2>'
            +
            '</div>'
            +
            '</a>'
            +
            '<a href="./html/Config.html" class="filheira_a">'
            +
            '<div class="filheira">'
            +
            '<h2>Configurações</h2>'
            +
            '</div>'
            +
            '</a>'
            +
            '</div>'
            +
            '</div>'
            +
            '</div>'
            +
            '</section>'
            +
            '</nav>'
            +
            '<main class="apresentacao">'
            +
            '<section class="capitulo_1">'
            +
            '<div class="Bloco_subcab1_1">'
            +
            '<img class="companyLogo" alt="" class="icon_subcab1_1">'
            +
            '</div>'
            +
            '<div class="Bloco_subcab1_2">'
            +
            '<a href="https://dev.itguys.com.br/"><button>Logout</button></a>'
            +
            '</div>'
            +
            '</section>'
            +
            '<section class="capitulo_2">'
            +
            '<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe > '
            +
            '</section>'
            +
            '</main>'

        const construido = true;

        ;
        localStorage.setItem('construido', JSON.stringify(construido));

        var botao = document.getElementById('id_ajuste');
        var cabecario = document.querySelector('.capitulo_1');
        var tela = document.querySelector('.capitulo_2');
        var menu = document.querySelector('.menu_lateral');

        if (botao) {
            botao.addEventListener('click', function () {
                console.log('Botão clicado!');
                if (menu) menu.classList.toggle('expansao');
                if (cabecario) cabecario.classList.toggle('expansao');
                if (tela) tela.classList.toggle('expansao');
            });
        } else {
            console.error('Botão não encontrado!');
        }


        if (Permissoes.visuMonitor) {
            const script2 = document.createElement('script');
            script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
            script2.setAttribute // Acessando a propriedade corretamente
            document.body.appendChild(script2);
        }

        // Adiciona o listener de clique após a construção do HTML






        //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.

        //construtor da reação do menu sobre as interações do usuário









    } catch (error) {


        //Constante de controle sobre estilos css do painel de erro. 
        const estilos = document.getElementById('conexao');
        estilos.href = '../Css/page/Telas_acao/erro_404.css';

        //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
        //o Status do erro 
        //Mensagem do erro
        //Um mensagem complementar sobre o erro


        const apiUrl = await getApiUrl();  // Obtém a URL da API a partir do PHP
        const token = getAuthToken();      // Obtém o token JWT do localStorage

        // Faz uma requisição para obter os dados da rota /mounting
        const response = await fetch(`${apiUrl}/mounting`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'x-access-token': token ? token : ''
            }
        });

        const respostaserver = response.status

        if (respostaserver == 401) {

            var Status = 'Erro 401';
            var mensagem = 'Desculpe mas sua página não foi encontrada';
            var sub_mensagem = 'Tente fazer seu, login novamente';
            var button_info = 'Retorne';
            var button_acao = '/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html';

        }

        if (respostaserver == 404) {

            var Status = 'Erro 404';
            var mensagem = 'Houve um problema com seu ambiente !!';
            var sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
            var button_info = 'Nós contate';
            var button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';

        }


        //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
        const erro = document.getElementById('entrada_1');

        erro.innerHTML = '<section class="matriz_404" id="cap">'
            +
            '<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
            +
            '<section class="paineis_2">'
            +
            '<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
            +
            '<div class="cap_2"><a href="' + button_acao + '"><button>' + button_info + '</button></a></div>'
            +
            '</section>'
            +
            '<div class="wave wave_1"></div>'
            +
            '<div class="wave wave_2"></div>'
            +
            '<div class="wave wave_3"></div>'
            +
            '<div class="wave wave_4"></div>'
            +
            '</section>'
            ;




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



    }
}



// Função para carregar uma imagem protegida com token JWT e exibi-la

async function loadImage(url, imgElementClass) {
    try {
        const token = getAuthToken();
        console.log('Token:', token);
        console.log('URL da imagem:', url);

        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : ''
            }
        });

        if (!response.ok) {
            throw new Error('Erro ao carregar a imagem: ' + response.statusText);
        }

        const blob = await response.blob();
        const imageUrl = URL.createObjectURL(blob);

        // Seleciona todos os elementos com a classe
        const imgElements = document.getElementsByClassName(imgElementClass);
        if (imgElements.length > 0) {
            for (let i = 0; i < imgElements.length; i++) {
                imgElements[i].src = imageUrl;
            }
        } else {
            console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
        }

        return imageUrl; // Retorna a URL da imagem carregada
    } catch (error) {
        console.error('Erro ao carregar a imagem:', error);
        console.log('Classe do elemento:', imgElementClass);
        return null; // Retorna null em caso de erro
    }
}
// Função para carregar a imagem de fundo
async function loadBackgroundAndUpdateStyle() {
    try {
        const apiUrl = await getApiUrl();
        const token = getAuthToken();
        const response = await fetch(`${apiUrl}/mounting`, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : ''
            }
        });

        if (!response.ok) {
            throw new Error('Erro ao carregar os dados: ' + response.statusText);
        }

        const data = await response.json();
        const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;

        const fundoResponse = await fetch(imagemFun, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : ''
            }
        });

        if (!fundoResponse.ok) {
            throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
        }

        const blob = await fundoResponse.blob();
        const fundoUserUrl = URL.createObjectURL(blob);

        const fundouser = document.getElementById('fundouser');
        fundouser.innerHTML =
            '.seguimentacao_2 .coluna_1 {' +
            'width: 100%;' +
            'height: 30vh;' +
            'display: flex;' +
            'flex-direction: row;' +
            'background-image: url("' + fundoUserUrl + '");' +
            'background-position: center;'
        'background-position: center;' +
            'background-size: cover;' +
            'overflow: hidden;' +
            'transition: 1s ease;' +
            '}';




        console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
    } catch (error) {
        console.error('Erro ao carregar a imagem de fundo:', error);
    }
}

// Inicia o carregamento das imagens quando o script for carregado
document.addEventListener('DOMContentLoaded', async () => {

    await criarBlocos();
    await loadBackgroundAndUpdateStyle();

});