function loadSettingsView(isAdmin) {

    const stContent = getID("st-content")
    const stReport = getID("st-report")

    if(isAdmin) {
        const stUsers = getID("st-users")
        const stNodes = getID("st-nodes")
        const stLogs = getID("st-logs")
        stUsers.addEventListener("click", () => {
            stReport.classList.remove("selected")
            stUsers.classList.add("selected")
            stNodes.classList.remove("selected")
            stLogs.classList.remove("selected")
            loadUsersView()
        })
    
        stNodes.addEventListener("click", () => {
            stReport.classList.remove("selected")
            stUsers.classList.remove("selected") 
            stNodes.classList.add("selected")
            stLogs.classList.remove("selected")
            loadNodesView()
        })
    
        stLogs.addEventListener("click", () => {
            stReport.classList.remove("selected")
            stUsers.classList.remove("selected")
            stNodes.classList.remove("selected")
            stLogs.classList.add("selected")
            loadLogsView()
        })

        stReport.addEventListener("click", () => {
            stReport.classList.add("selected")
            stUsers.classList.remove("selected")
            stNodes.classList.remove("selected")
            stLogs.classList.remove("selected")
            loadReportView()
        })

    }

    loadReportView()
    
}

function loadReportView() {

    const stContent = getID("st-content")



    stContent.innerHTML = `
    <div class="st-report">
        <h1 style="
            align-self: start;
        ">Rapport de bug</h1>
     
            <h5 style="
            text-align: justify;
            ">Si vous trouvez un bug ou vous avez une suggestion, c'est ici que vous pourrez le dire ! Vérifiez bien la catégorie ! Si cela ne vous empêche pas d'utiliser le bot : privilégiez la catégorie "Mineur". Donnez le plus d'information possible, des captures d'écran si possible, la provenance et la facon dont le bug se serait délenché. Précisez aussi si c'était par hasard ou c'était recherché (pas pour vous embêter mais pour savoir si c'est venu n'importe comment ou c'était forcé) ! Merci beaucoup pour votre aide ❤️ !</h5>
            <button id="report-send" class="report-send"><i class='fa fa-paper-plane'></i> Envoyer un rapport de bug</button>

        <br>
        <br>
        <h1 style="
            align-self: start;
        ">Tutoriel</h1>
        <h5 style="
        text-align: justify;
        ">Le tutoriel est une suite de panneaux pour vous aider à utiliser l'interface du bot. Si vous avez des difficultés à utiliser le bot, vous pouvez lancer l'OOBE pour vous aider à comprendre comment l'utiliser. Vous pouvez aussi le lancer pour le fun !</h5>
      
        <button id='oobe-launch' class="report-send"><i class="fa-solid fa-up-right-from-square"></i> Lancer le tutoriel</button>
    
    </div>
    `
            
    const reportSend = getID("report-send")
    const oobeLaunch = getID("oobe-launch")

    oobeLaunch.addEventListener("click", () => {
        oobeStep2()
    })

    reportSend.addEventListener("click", () => {
   
        const modal = new ModalComponent({"title":"Rapport de bug", "width":"20%"})

        modal.setContent(`
            <div id='report-content' class='st-report-content'>
            <p>Catégorie</p>
            <select id="report-type" class="report-type">
                <option value="Majeur">Majeur</option>
                <option value="Mineur">Mineur</option>
                <option value="Suggestion">Suggestion</option>
            </select>
            <p>Description</p>
            <textarea id="report-desc" class="report-desc"></textarea>
            <button id="report-send-confirm" class="report-send">Envoyer</button>
            </div>
        `)

        modal.show()



            const reportDesc = getID("report-desc")
            const reportType = getID("report-type")
            const reportSendConfirm = getID("report-send-confirm")
            const reportContent = getID("report-content")   

            reportSendConfirm.addEventListener("click", () => {
                reportContent.innerHTML = "<p><i class='fa fa-spinner fa-spin'></i> Envoi du rapport ...</p>"
            post("REPORT", {"level":reportType.value, "desc": reportDesc.value}).then((data) => {
                reportContent.innerHTML = "<p><i class='fa fa-check'></i> Rapport envoyé avec succès !</p>"
            })
    })
    
    })
}

function loadUsersView() {
    
        const stContent = getID("st-content")
    
        stContent.innerHTML = `
        <div class="st-users">
            <h1>Utilisateurs</h1>
            <h5>Voici la liste des utilisateurs du bot. Vous pouvez voir leur ID, leur pseudo, leur avatar et leur rôle. Vous pouvez aussi les bannir ou les débannir.</h5>
            <div class='users-container'> 
            <div id="users-list" class="users-list">
            </div>
            </div>
        </div>

        `

        const usersList = getID("users-list")

        get("USERS")
        
        AlwaysRequest("USERS", (data) => {
            
            usersList.innerHTML = ""
            var usersSettingList = new Array()

            for(var user of data) {
                var userSetting = new UserSetting(user)
                usersSettingList.push(userSetting)
                usersList.innerHTML += userSetting.generateHTML()
            }

            for(var userSetting of usersSettingList) {
         
                userSetting.loadScript()
            }

            
        })
}

function loadNodesView() {
    
        const stContent = getID("st-content")
    
        stContent.innerHTML = `
        <div class="st-nodes">
            <h1>Maintenance</h1>
            <h3>Alimentation du bot</h3>
            <div>
            <button id="nodes-restart" class="report-send"><i class='fa fa-power-off'></i> Redémarrer le bot</button>
            </div>
            <h3>Nodes Lavalink</h3>
            <p><strong>Note : </strong> Les serveurs ci-dessous permettent le bon fonctionnement du Bot.</p>
            <p>Si aucun des serveurs ne fonctionne, ajoutez-en en prenant ce lien pour la liste des serveurs : <a style="color: white" target="_blank" href="https://lavalink.darrennathanael.com/SSL/lavalink-with-ssl/"><strong>Lavalink SSL</strong></a></p>
            <br>
            <div>
            <button id="nodes-add"><i class='fa fa-plus'></i> Ajouter un serveur</button>
            </div>
            <div class="nodes-container">
                <div id="nodes-list" class="nodes-list">
                </div>
            </div>
        </div>
        `

        const nodesList = getID("nodes-list")
        const nodesAdd = getID("nodes-add")
        const nodesRestart = getID("nodes-restart")

        nodesRestart.addEventListener("click", () => {
            get("RESTART")
        })

        nodesAdd.addEventListener("click", () => {
            const modal = new ModalComponent({"title":"Ajouter un serveur", "width":"20%"})

            modal.setContent(`
                <div id='node-content' class='st-report-content'>
           
                <input placeholder='Host' type='text' id="node-host" class="report-type">
               
                <input placeholder='Port' type='number' id="node-port" class="report-type">
       
                <input placeholder='Mot de passe' type='text' id="node-password" class="report-type">
                <br>
                <button id="node-send-confirm" class="report-send">Ajouter</button>
                </div>
            `)

            modal.show()

            const nodeHost = getID("node-host")
            const nodePort = getID("node-port")
            const nodePassword = getID("node-password")
            const nodeSendConfirm = getID("node-send-confirm")
            const nodeContent = getID("node-content")   

            nodeSendConfirm.addEventListener("click", () => {
                nodeContent.innerHTML = "<p><i class='fa fa-spinner fa-spin'></i> Ajout du serveur ...</p>"
                post("NODES/ADD", {"host":nodeHost.value, "port":Number(nodePort.value), "password":nodePassword.value}).then((data) => {
                    nodeContent.innerHTML = "<p><i class='fa fa-check'></i> Serveur ajouté avec succès !</p>"
                })
            })
        })

        get("NODES")

        AlwaysRequest("NODES", (data) => {
           nodesList.innerHTML = "" 
              var nodesSettingList = new Array()
    
                for(var node of data) {
                 var nodeSetting = new NodeSetting(node)
                 nodesSettingList.push(nodeSetting)
                 nodesList.innerHTML += nodeSetting.generateHTML()
                }
    
                for(var nodeSetting of nodesSettingList) {
                 nodeSetting.loadScript()
                }
        })
}   

function loadLogsView() {
    
        const stContent = getID("st-content")
    
        stContent.innerHTML = `
        <div class="st-logs">
            <h1>Logs</h1>
            <h5 style='margin: 10px 0px 10px 0px;'>Voici les logs du bot. Vous pouvez voir les logs de l'activité du bot, les erreurs et les logs de la musique.</h5>
            <select id="logs-type" class="logs-type">
                <option value="all">Chargement en cours ...</option>
            </select>
            <h5 style='margin: 10px 0px 10px 0px;'>Trier par :</h5>
            <select id="logs-sort" class="logs-sort">
                <option value="all">Tous</option>
                <option value="INFO">Infos</option>
                <option value="ERROR">Erreurs</option>
                <option value="WARN">Avertissements</option>
                <option value="FATAL">Fatales</option>
                <option value="STEP">Etapes</option>
                <option value="Users">Utilisateurs</option>
                <option value="Web">Web</option>
                <option value="Authentification">Authentification</option>
                <option value="Discord">Discord</option>
                <option value="Node-Finder">Node-Finder</option>
                <option value="Actualisation">Actualisation</option>
                <option value="Playlist-Manager">Playlist-Manager</option>
                <option value="Lavalink">Lavalink</option>
                <option value="Lavalink-Player">Lavalink-Player</option>
                <option value="Lavalink-Manager">Lavalink-Manager</option>
            </select>
            
            <div class='logs-container'>
                <div id="logs-list" class="logs-list">

                </div>
            </div>
        
        </div>
        `

        const logsList = getID("logs-list")
        const logsType = getID("logs-type")
        const logsSort = getID("logs-sort")

        get("LOGS").then((data) => {
            logsType.innerHTML = ""

            var logsData = new Map()

            data.reverse()

            for(var log of data) {
                
                logsType.innerHTML += `<option value="${log.name}">${log.name}</option>`
                logsData.set(log.name, log.value)
            }

            loadLog()

            logsType.addEventListener("change", () => {
                logsSort.value = "all"
                loadLog()
            })

            logsSort.addEventListener("change", () => {
                
                loadLog(logsSort.value)
            })

            /**
             * @private
             */
            function loadLog(sort) {
                var logToPush = new Array()


                for(var line of logsData.get(logsType.value).split("\n")) {


                    if(sort && sort != "all" && !line.includes(sort)) {
                        continue
                    }

                    line.toString()
             
                    
                    line = line.replace("[INFO]", "<span style='color: #41f2ff !important;'>[INFO]</span>")
                                .replace("[ERROR]", "<span style='color: #ff3232;'>[ERROR]</span>")
                                .replace("[WARN]", "<span style='color: #ffea00;'>[WARN]</span>")
                                .replace("[FATAL]", "<span style='color: red;'>[FATAL]</span>")
                                .replace("[STEP]", "<span style='color: #ff6bf5;'>[STEP]</span>")
                                .replace("[Users]", "<span style='color:#c7b8ff; '>[Users]</span>")
                                .replaceAll("[Web]", "<span style='color:#fffd8a; '>[Web]</span>")
                                .replaceAll("[Authentification]", "<span style='color:#ff3232; '>[Authentification]</span>")
                                .replaceAll("[Discord]", "<span style='color:#5865F2; '>[Discord]</span>")
                                .replaceAll("[Node-Finder]", "<span style='color:#7aff5c; '>[Node-Finder]</span>")
                                .replaceAll("[Actualisation]", "<span style='color:#ff7a5c; '>[Actualisation]</span>")
                                .replaceAll("[Playlist-Manager]", "<span style='color:#EB459E; '>[Playlist-Manager]</span>")
                                .replaceAll("[Lavalink-Player]" , "<span style='color:#FEE75C; '>[Lavalink-Player]</span>")
                                .replaceAll("[Lavalink-Manager]", "<span style='color:#FEE75C; '>[Lavalink-Manager]</span>")

                    logToPush.push("<p class='log_line'>" +line+ "</p>")
                    
                }

         
                
                 logsList.innerHTML = logToPush.join("")
            }
        })
        

}

class NodeSetting {
    constructor(node) {
        this.node = node
    }

    generateHTML() {
        let status = "<i class='red fa-solid fa-circle'></i> Déconnecté"
        if(this.node.state) {
            status = "<i class='green fa-solid fa-circle'></i> Connecté"
        }
        return `<div class="node-card">
        <p class="node-name">${this.node.host}</p>
        <p class="node-state">${status}</p>
        <div class='node-buttons'>
        <button id='${this.node.host}_reload' class="node-delete"><i class='fa fa-rotate'></i> Relancer</button>
        <button id='${this.node.host}_delete' class="node-delete"><i class='fa fa-trash'></i> Supprimer</button>
        </div>
    </div>
    `
    }

    loadScript() {

        const nodeDelete = getID(`${this.node.host}_delete`)
        const nodeReload = getID(`${this.node.host}_reload`)
        if(nodeReload) {
            nodeReload.addEventListener("click", () => {
                post("NODES/RELOAD", this.node)
            })
            nodeDelete.addEventListener("click", () => {
                post("NODES/DELETE", this.node)
            })
        }
       
    }
}



class UserSetting {
    constructor(user) {
        this.user = user
    }

    

    generateHTML() {
        let rank = "Utilisateur"
        let ban = "Non banni"
        if(this.user.admin) {
            rank = "Administrateur"
        }
        if(this.user.banned) {
            ban = "Banni"
        }
        return `<div class="user-card">
        <div class='user-card-div'>
        <img class="user-avatar" src="${this.user.picture}">
        <div class='user-card-name'>
        <p class="user-pseudo">${this.user.user.global_name}</p>
        <p class="user-id">${this.user.user.username}</p>
        </div>
        </div>
        <p class="user-role">${rank} - ${ban}</p>
        <div style='display: flex; justify-content: space-between;'>
        <button id='${this.user.user.id}_ban' class="user-ban"><i class='fa fa-hammer'></i> Bannir</button>
        <button id='${this.user.user.id}_delete' class="user-ban"><i class='fa fa-trash'></i> Supprimer</button>
        <button id='${this.user.user.id}_admin' class="user-ban"><i class='fa fa-star'></i> Admin</button>
        </div>
    </div>
    `
    }

    loadScript() {
        const userBan = getID(`${this.user.user.id}_ban`)
        const userDelete = getID(`${this.user.user.id}_delete`)
        const userAdmin = getID(`${this.user.user.id}_admin`)

        if(userBan) {
            userBan.addEventListener("click", () => {
                
                post("USERS/BAN", this.user.user.id)
            })
    
            userDelete.addEventListener("click", () => {
                
                post("USERS/DELETE", this.user.user.id)
            })
    
            userAdmin.addEventListener("click", () => {
        
                post("USERS/ADMIN", this.user.user.id)
            })
        }
       
    }
}