function Interatividade() {

    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/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/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


}

async function ApresentarTelas(InfoGeral) {

    InteracoesTelas();



    function InteracoesTelas() {

        ControladorDeVisualizacao(InfoGeral);

        const Config_texts = document.getElementById('Configuracao_1');
        const Config_icon = document.getElementById('Configuracao_2');

        const Home_texts = document.getElementById('Home_1');
        const Home_icon = document.getElementById('Home_2');

        // Adiciona eventos para alternar entre as telas
        Config_texts.addEventListener('click', () => carregarTela('config'));
        Config_icon.addEventListener('click', () => carregarTela('config'));

        Home_texts.addEventListener('click', () => carregarTela('home'));
        Home_icon.addEventListener('click', () => carregarTela('home'));
    }

    async function carregarTela(tela) {
        const telaVisualizacao = document.getElementById('TelaVisualizacao');
        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.
            home: {
                func: './js/page/Modulo_Construcao/Funcao/Home/Func_Home.js',
                html: './js/page/Modulo_Construcao/Painel/Home/Html_Home.js',
                mensagem: 'Carregando ...',
            },
            moni: {
                func: './js/page/Modulo_Construcao/Funcao/Monitoramento/Func_Moni.js',
                html: './js/page/Modulo_Construcao/Painel/Monitoramento/Html_Moni.js',
                mensagem: 'Carregando ...',
            },
            config: {
                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].html),
                carregarScript(scriptPaths[tela].func),

            ]);

            // Aplicação de if realizam a modificação da mensagem de cada condicional para a estrutura de seu html respectivo.

            // Estrutura html do home
            if (tela === 'home' && typeof estruturaHtml_Home === 'function') {
                scriptPaths[tela].mensagem = estruturaHtml_Home();

                const Tela_homelink = document.getElementById('conexao_tela');
                Tela_homelink.href = "./Css/page/Ambiente/Home/root_Home.css";



            }

            // Estrutura html de monitoramento
            if (tela === 'moni' && typeof estruturaHtml_Home === 'function') {
                scriptPaths[tela].mensagem = estruturaHtml_Moni();
            }

            // Estrutura html de configuração
            if (tela === 'config' && typeof estruturaHtml_Home === 'function') {
                const novatela = document.getElementById('entrada_2')
                const antigatela = document.getElementById('entrada_1')

                novatela.innerHTML = estruturaHtml_Config();
                antigatela.innerHTML = "";

                // Remove os scripts específicos, se existirem
                const scriptFunc = document.getElementById('Ambiente_func');
                const scriptHtml = document.getElementById('Ambiente_Html');

                if (scriptFunc) {
                    scriptFunc.remove(); // Remove o script 'func'
                    console.log('Script Ambiente_func removido');
                }

                if (scriptHtml) {
                    scriptHtml.remove(); // Remove o script 'html'
                    console.log('Script Ambiente_Html removido');
                }

                console.log('estrutura')

            }

            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(InfoGeral) {

        if (InfoGeral.Empresa == "itguys.com.br") {
            const PainelMoniIcon = document.getElementById('sub_entrada_moni_1');
            const PainelMoniButton = document.getElementById('sub_entrada_moni_2');


            PainelMoniButton.innerHTML = "<h2>Monitormaneto</h2>"
            PainelMoniIcon.innerHTML = `<img class="img" src="./Acessts/Imagens/Iconis/monitor.png" alt="">`

            PainelMoniButton.addEventListener('click', () => carregarTela('moni'));
            PainelMoniIcon.addEventListener('click', () => carregarTela('moni'));

        }


    }



}