setTimeout(async () => {
    const ApresentarTeladeConfiguracao = localStorage.getItem('Iniciar_Config')
    if (ApresentarTeladeConfiguracao === "true") {
        const ConfigLoad = document.getElementById('entrada_2');
        localStorage.removeItem('Iniciar_Config', 'true')
        if (ConfigLoad) {
            // Verifica se o conteúdo do elemento não está vazio
            if (ConfigLoad.innerHTML.trim() !== "") {


                const estilos_config = document.getElementById('conexao');

                const estilos_config_tela = document.getElementById('conexao_tela');

                estilos_config_tela.href = '';
                estilos_config.href = './Css/page/Ambiente/Config/Config.css';

                InteracoesTelas_Config();
            }
        } else {
            console.error("Elemento 'entrada_2' não encontrado.");
        }
        setTimeout(ConfigLoad == null, 500) // Salva um valor no localStorage
    }
}, 300); // Executa as funções 3 segundos após o carregamento do DOM



async function InteracoesTelas_Config() {
    let usuariConfig = null
    try {

        // Conexção com o script de Comunicacao.js para se utilizar da função de autenticação com a rota mouten, para puxar a const response e apiURL
        const { response, apiUrl } = await Autenticao();
        //Essa constante faz um tratamento sobre a response retirando o json para armazenar nesse data
        const data = await response.json();

        //console.log(data)
        // Armazena os dados para usos futuros
        usuariConfig = {
            nomeCompleto: data.usuario.nome,
            Empresa: data.empresa.nome,
            ImagemUser: `${apiUrl}${data.usuario.img_perfil}`,
            FundoUser: `${apiUrl}${data.usuario.img_fundo}`
        };


        //console.log("Esse dados vem para configurações", usuariConfig)
        ControladorDeVisualizacao_config(usuariConfig)

        const Voltar_home = document.getElementById('Voltar_config');


        const Manual_button = document.getElementById('Manual_config');
        const Perfil_button = document.getElementById('Perfil_config');

        // Adiciona eventos para alternar entre as telas
        Voltar_home.addEventListener('click', () => carregarTela_config('RetornarHome'));
        // Manual_button.addEventListener('click', () => carregarTela_config('PainelManual'));
        Perfil_button.addEventListener('click', () => carregarTela_config('PainelEstilo'));

        localStorage.setItem('Carregou_tela_config', 'true');
    } catch (error) {

        const ConfigErro = document.getElementById('entrada_2');
        ConfigErro.innerHTML = ""
        await criarBlocos();
        localStorage.setItem('Carregou_tela_config', 'true');
        setTimeout(() => {
            localStorage.removeItem('Carregou_tela_config');
        }, 100);
        console.error("Erro na tela de configuração" + error)
    }





}

async function carregarTela_config(tela) {

    const telaVisualizacao = document.getElementById('Pop_up_Config');
    const scriptPaths = {

        //Alinhamento das telas por datas, aqui são organizadas das possiveis respostas de cada botão e os caminhos scripts cada uma delas necessita para o seu funcionamento.
        PainelEstilo: {
            func: './js/page/Modulo_Construcao/Funcao/Config/Perfil/PopPerfil_Func.js',
            html: './js/page/Modulo_Construcao/Painel/Config/Perfil/PopPerfil_html.js',
            mensagem: 'Carregando ...',
        },
        PainelUser: {
            func: './js/page/Modulo_Construcao/Funcao/Config/User/PopUser_Func.js',
            html: './js/page/Modulo_Construcao/Painel/Config/User/PopUser_html.js',
            mensagem: 'Carregando ...',
        },
        PainelManual: {
            func: './js/page/Modulo_Construcao/Funcao/Config/Manual/PopManual_Func.js',
            html: './js/page/Modulo_Construcao/Painel/Config/Manual/PopManual_html.js',
            mensagem: 'Carregando ...',
        },
        PainelAmbiente: {
            func: './js/page/Modulo_Construcao/Funcao/Config/Ambiente/PopAmbientes_Func.js',
            html: './js/page/Modulo_Construcao/Painel/Config/Ambiente/PopAmbientes_html.js',
            mensagem: 'Carregando ...',
        },
        RetornarHome: {
            func: './js/page/Modulo_Construcao/Funcao/Config/Estrutura/config.js',
            html: './js/page/Modulo_Construcao/Painel/Config/Estrutura/Estrutura_Config_Html.js',
            mensagem: 'Carregando ...',
        },
    };

    if (!scriptPaths[tela]) {
        console.error('Tela inválida:', tela);
        return;
    }

    // Remove scripts antigos antes de adicionar novos
    document.querySelectorAll('script[data-dinamico]').forEach(script => script.remove());

    try {
        // Aguarda o carregamento dos dois scripts
        await Promise.all([
            carregarScript(scriptPaths[tela].func),
            carregarScript(scriptPaths[tela].html),
        ]);


        // Função para atualizar a classe de forma dinâmica
        function atualizarClasse(novaClasse) {
            telaVisualizacao.className = 'Pop_up_Config'; // Remove todas as classes, mantendo apenas a base
            telaVisualizacao.classList.add(novaClasse); // Adiciona a nova classe
        }


        // Estrutura html do home
        if (tela === 'PainelEstilo' && typeof estruturaHtml_Home === 'function') {
            scriptPaths[tela].mensagem = Estrututura_html_Perfil();
            telaVisualizacao.style.display = "flex"
            atualizarClasse('PainelEstilo'); // Aplica a classe dinamicamente

        }

        // Estrutura html de monitoramento
        if (tela === 'PainelUser' && typeof estruturaHtml_Home === 'function') {
            scriptPaths[tela].mensagem = Estrututura_html_User_home();
            telaVisualizacao.style.display = "flex"
            atualizarClasse('PainelUser');
        }

        // Estrutura html de monitoramento
        if (tela === 'PainelManual' && typeof estruturaHtml_Home === 'function') {
            scriptPaths[tela].mensagem = Estrututura_html_Manual();
            telaVisualizacao.style.display = "flex"
            atualizarClasse('PainelManual');
        }

        // Estrutura html de monitoramento
        if (tela === 'Painel_configuracao' && typeof estruturaHtml_Home === 'function') {
            scriptPaths[tela].mensagem = Estrututura_html_Ambiente_home();
            telaVisualizacao.style.display = "flex"
            atualizarClasse('Painel_configuracao');
        }



        // Estrutura html de configuração
        if (tela === 'RetornarHome' && typeof estruturaHtml_Home === 'function') {
            // Verifica se a função EstruturaEsqueleto existe antes de chamar
            localStorage.setItem('Carregou_tela_config_New', 'true');
            const fimPainel = document.getElementById('entrada_2')
            fimPainel.innerHTML = '';
            CarregamentoLoad();
            await criarBlocos();
            //console.log('config')

        }

        telaVisualizacao.innerHTML = scriptPaths[tela].mensagem;

        //console.log(`Tela ${tela} carregada com sucesso!`);
    } catch (error) {
        console.error('Erro ao carregar os scripts:', error);
    }
}

// função que carreca os scripts dentro do html
function carregarScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.dataset.dinamico = true; // Marca como script dinâmico
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Erro ao carregar o script ${src}`));
        document.body.appendChild(script);
    });
}


// Carrega a tela 'home' automaticamente ao iniciar
//carregarTela('home');

// Controlador de visualização sobre as opições que existem dentro do ambiente do usuário
function ControladorDeVisualizacao_config(InfoGeral) {
    //console.log(InfoGeral)
    if (InfoGeral.Empresa == "itguys.com.br") {
        const EstruraDinamicadeConfiguracao = document.getElementById('Painel_configuracao');


        EstruraDinamicadeConfiguracao.innerHTML += `
        <div class="element_1" id="User_config">
            <img src="./Acessts/Imagens/Iconis/group.png" alt="">
            <p>Usuário</p>
        </div>`;

        EstruraDinamicadeConfiguracao.innerHTML += `
        <div class="element_1" id="Ambiente_config">
            <img src="./Acessts/Imagens/Iconis/ferramentas copiar.png" alt="" >
            <p>Ambiente</p>
        </div>`;

        const User_button = document.getElementById('User_config');
        User_button.addEventListener('click', () => carregarTela_config('PainelUser'));
        const Ambiente_button = document.getElementById('Ambiente_config');
        Ambiente_button.addEventListener('click', () => carregarTela_config('PainelAmbiente'));
    }


}