// import {
//     apiCreateProject,
//     apiGetProject,
//     apiGetProjects
// } from './endpoint.js';

/**
 * @typedef {object} Project
 * @property {number} id
 * @property {number} name
 * @property {number} user
 * @property {boolean} fileExists
 */

class UserInterface {
    constructor(){
        this.page = null;
        this.userInfo = {id: null};
        this.parseCurrentPageFromUrl();
    }

    parseCurrentPageFromUrl(){
        const urlSearchParams = new URLSearchParams(window.location.search);
        const urlParams = Object.fromEntries(urlSearchParams.entries());
        this.page = urlParams.pg ?? null;
        this.projectId = urlParams.projectId ?? null;
        this.userId = urlParams.userId ?? null;
    }

    async loadCurrentUser(){
        this.userInfo = await apiGetCurrentUser();
        this.updateStateForRequest();
    }

    urlClick(params){
        const newUrl = `/UI/?${params}`;
        const newState = { };
        const newTitle = ``;
        window.history.replaceState(newState, newTitle, newUrl);
        this.clearPageContent();
        this.updateState();
        window.history.replaceState( null, null, window.location.href );
    }

    // Actions

    async login(){
        const login_email = document.getElementById('login_email').value;
        const login_password = document.getElementById('login_password').value;

        const responseElem = document.getElementById('loginResponseMessage');
        responseElem.innerHTML = '';

        try {
            const data = await apiLogin(login_email, login_password);
            this.updateState();
        } catch (error) {
            console.log(error);
            if (error.response && error.response.data && error.response.data.detail) {
                responseElem.innerHTML = error.response.data.detail;
            }
            else if (error) {
                responseElem.innerHTML = error;
            }
            else {
                responseElem.innerHTML = "An error occurred during login.";
            }
            responseElem.style.color = 'red';
        }
    }

    async logout(){
        const data = await apiLogout();
        this.updateState();
    }

    async createNewProject(){
        const data = await apiCreateProject();
        this.updateState();
    }

    async updateUserPassword(userId, password1, password2){
        const responseElem = document.getElementById('updateUserPasswordMessage');
        responseElem.innerHTML = '';
        if (password1 !== password2) {
            responseElem.innerHTML = "Passwords do not match.";
            return;
        }
        if (password1.length < 6) {
            console.log(password1.length);
            responseElem.innerHTML = "Password must be at least 6 characters long.";
            return;
        }
        await this.updateUser(userId, {password: password1});
    }

    async updateUser(userId, updateData){
        const data = await apiUpdateUser(userId, updateData);
        this.updateState();
    }

    async updateProject(projectId, updateData){
        const data = await apiUpdateProject(projectId, updateData);
        this.updateState();
    }

    async deleteIfcFile(projectId){
        const data = await apiDeleteIfcFile(projectId);
        this.updateState();
    }

    async uploadIfcFile(projectId) {
        const data = await apiUploadIfcFile(projectId);
        // this.updateState();
    }

    async registerNewUser(name, surname, email, password1, password2, securityCode){
        name = name.trim();
        surname = surname.trim();
        email = email.trim();
        securityCode = securityCode.trim();

        const responseElem = document.getElementById('registrationResponseMessage');
        responseElem.innerHTML = '';

        if (name === '' || surname === '' || email === '' || password1 === '' || password2 === '' || securityCode === '') {
            responseElem.innerHTML = "All fields are required.";
            responseElem.style.color = 'red';
            return;
        }
        if (password1 !== password2) {
            responseElem.innerHTML = "Passwords do not match.";
            responseElem.style.color = 'red';
            return;
        }
        if (password1.length < 6) {
            responseElem.innerHTML = "Password must be at least 6 characters long.";
            responseElem.style.color = 'red';
            return;
        }

        responseElem.style.color = 'black';
        try {
            const data = await apiCreateUser(name, surname, email, password1, securityCode);
            responseElem.innerHTML = "Registration successful. You can now log in.";
            responseElem.style.color = 'green';

            for (const key of ['name', 'surname', 'email', 'password_1', 'password_2', 'security_code']) {
                const inputElem = document.getElementById(`new_user_${key}`);
                if (inputElem) {
                    inputElem.value = '';
                }
            }
        } catch (error) {
            console.log(error);
            if (error.response && error.response.data && error.response.data.detail) {
                responseElem.innerHTML = error.response.data.detail;
            }
            else if (error) {
                responseElem.innerHTML = error;
            }
            else {
                responseElem.innerHTML = "An error occurred during registration.";
            }
            responseElem.style.color = 'red';
        }
        // this.updateState();
    }







    // Content

    updateHeaderLogin(){
        var elem = document.getElementById('contentHeaderLogin');
        if(this.userInfo.id === null){
            var content = '';
            content += '<button onclick="app.urlClick(\'pg=login\')" class="menuItem">Log in</button>';
            elem.innerHTML = content;
        } else {
            var content = '';
            content += '<span class="login_email_info">' + this.userInfo.mail + '</span>';
            content += '<button onclick="app.logout()" class="">Log out</button>';
            elem.innerHTML = content;
        }
    }

    updateMenuContent(){
        var elem = document.getElementById('contentMenu');
        if(this.userInfo.id === null){
            var content = '';
            // content += '<p onclick="app.urlClick(\'pg=about\')" class="menuItem">About</p>';
            content += '<p onclick="app.urlClick(\'pg=login\')" class="menuItem">Log in</p>';
            content += '<p onclick="app.urlClick(\'pg=registration\')" class="menuItem">Registration</p>';
            // content += '<p onclick="app.urlClick(\'pg=lost_password\')" class="menuItem">Reset password</p>';
            elem.innerHTML = content;
        } else {
            var content = '';
            // content += '<p onclick="app.urlClick(\'pg=about\')" class="menuItem">About</p>';
            content += '<p onclick="app.urlClick(\'pg=projects\')" class="menuItem">Projects</p>';
            content += '<p onclick="app.urlClick(\'pg=settings\')" class="menuItem">Settings</p>';

            if (this.userInfo.rights_admin) {
                content += '<p onclick="app.urlClick(\'pg=users\')" class="menuItem">Users</p>';
            }

            elem.innerHTML = content;
        }
    }

    clearPageContent(){
        var elem = document.getElementById('contentMain');
        elem.innerHTML = '';
    }

    updatePageContent(){
        const authenticated = this.userInfo.id !== null;
        var elem = document.getElementById('contentMain');
        if(this.page === 'about'){
            var content = '';
            content += '<h4>about</h4>';
            content += '<div id="contentPageAbout"></div>';
            elem.innerHTML = content;
        }
        else if(this.page === 'settings' && authenticated){
            var content = '';
            content += '<div id="contentPageSettings"></div>';
            elem.innerHTML = content;
            this.updateHtmlSettings();
        }
        else if(this.page === 'projects' && authenticated){
            var content = '';
            content += '<div id="contentPageProjects"></div>';
            elem.innerHTML = content;
            this.updateHtmlProjects();
        }
        else if(this.page === 'users' && authenticated){
            var content = '';
            content += '<div id="contentPageUsers"></div>';
            elem.innerHTML = content;
            this.updateHtmlUsers();
        }
        else if(this.page === 'login' && !authenticated){
            var content = '';
            content += '<div id="contentPageLogin"></div>';
            elem.innerHTML = content;
            this.updateHtmlLogin();
        }
        else if(this.page === 'registration' && !authenticated){
            var content = '';
            content += '<div id="contentPageRegistration"></div>';
            elem.innerHTML = content;
            this.updateHtmlRegistration();
        }
        else {
            elem.innerHTML = '';
        }
    }

    async updateHtmlRegistration(){
        var elem = document.getElementById('contentPageRegistration');

        var content = '';
        content += '<div class="table_box">';
        content += '<table class="table_elem" cellspacing="0px">';

        content += '<tr class="table_row_border_bottom">';
        content += '<td colspan="4">Registration</td>';
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Name:</td>';
        content += `<td><input type="text" name="new_user_name" value="" placeholder="Name" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_name"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Surname:</td>';
        content += `<td><input type="text" name="new_user_surname" value="" placeholder="Surname" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_surname"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>E-mail:</td>';
        content += `<td><input type="text" name="new_user_email" value="" placeholder="E-mail" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_email"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Password:</td>';
        content += `<td><input type="password" name="new_user_password_1" value="" placeholder="New Password" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_password_1"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Repeat password:</td>';
        content += `<td><input type="password" name="new_user_password_2" value="" placeholder="New Password" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_password_2"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Security code:</td>';
        content += `<td><input type="text" name="new_user_security_code" value="" placeholder="Security code" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_security_code"></td>`;
        content += `</tr>`;
        
        content += '<tr class="table_row_border_bottom">';
        content += '<td></td>';
        content += `<td><button onclick="app.registerNewUser(document.getElementById('new_user_name').value, document.getElementById('new_user_surname').value, document.getElementById('new_user_email').value, document.getElementById('new_user_password_1').value, document.getElementById('new_user_password_2').value, document.getElementById('new_user_security_code').value)">Submit</button></td>`;
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td colspan="2" id="registrationResponseMessage"></td>';
        content += '</tr>';

        content += '</table>';
        content += '</div>';

        elem.innerHTML = content;
    }

    async updateHtmlUsers(){
        var elem = document.getElementById('contentPageUsers');

        if(this.userId === null){
            const data = await apiGetUsers();

            var content = '';
            content += '<div class="table_box">';
            content += '<table class="table_elem" cellspacing="0px">';
            data.forEach((d, i) => {
                /** @var {User} d */
                content += `<tr class="table_row_border_bottom">`;
                content += `<td class="">${(i+1)}</td>`;
                content += `<td class="">${d.surname} ${d.name}</td>`;
                content += `<td class="">${d.mail}</td>`;
                content += `<td><button onclick="app.urlClick('pg=users&userId=${d.id}')" class="button">Detail</button></td>`;
                content += `</tr>`;
            });
            content += '</table>';
            content += '</div>';

            elem.innerHTML = content;
        }else{
            /** @var {User} S_user */
            const S_user = await apiGetUser(this.userId);

            // var content = '';
            // content += '<div class="table_box">';
            // content += '<table class="table_elem" cellspacing="0px">';
            // content += '<tr class="table_row_border_bottom">';
            // content += '<td>Name:</td>';
            // content += `<td><input type="text" name="project_name" value="${S_project.name}" onblur="app.updateProject(${S_project.id}, {name: this.value})"></td>`;
            // content += '</tr>';
            
            // content += '<tr class="table_row_border_bottom">';
            // content += '<td>IFC file:</td>';
            // content += '<td>';
            // if(S_project.fileExists === true){
            //         content += `<a href="/api/ifc_file/${S_project.id}" target="_blank" class="button">Download</a>`;
            // }else{
                
            // }
            // content += '</td>';
            // if (S_project.numAttributes === 0) {
            //     if(S_project.fileExists === true){
            //         content += `<td><button onclick="app.deleteIfcFile(${S_project.id});">Delete file</button></td>`;
            //     }else{
            //         content += `<td><button onclick="app.uploadIfcFile(${S_project.id});">Upload file</button></td>`;
            //     }
            // }
            // content += '</tr>';

            // if(S_project.fileExists === true){
            //     content += '<tr class="table_row_border_bottom">';
            //     content += '<td></td>';
            //     content += `<td><a href="../APP/?projectId=${S_project.id}&cleanCache" class="button">Open project</a></td>`;
            //     content += '</tr>';
            // }

            // content += '<tr class="table_row_border_bottom">';
            // content += '<td colspan="2"></td>';
            // content += '</tr>';

            // content += '<tr class="table_row_border_bottom">';
            // content += '<td>Owner:</td>';
            // content += `<td>${S_project.userEntity.name} ${S_project.userEntity.surname} (${S_project.userEntity.mail})</td>`;
            // content += '</tr>';

            // content += '</table>';
            // content += '</div>';


            // content += '<div style="height: 20px;"></div>';


            // content += '<div class="table_box">';
            // content += '<table class="table_elem" cellspacing="0px">';

            // content += '<tr class="table_row_border_bottom">';
            // content += '<td colspan="4">Cooperating users:</td>';
            // content += '</tr>';

            // S_project.userEntitiesWithAccess.forEach((user, user_i) => {
            //     content += '<tr class="table_row_border_bottom">';
            //     content += `<td>${(user_i+1)})</td>`;
            //     content += `<td>${user.name} ${user.surname}</td>`;
            //     content += `<td>${user.mail}</td>`;
            //     content += `<td><button onclick="app.updateProject(${S_project.id}, {removeUserId: ${user.id}})">Remove</button></td>`;
            //     content += '</tr>';
            // });

            // content += '<tr class="table_row_border_bottom">';
            // content += '<td colspan="4">';
            // content += 'Add new user:';
            // content += `<input type="text" name="new_user_email" value="" placeholder="E-mail" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_project_user_email">`;
            // content += `<button onclick="app.updateProject(${S_project.id}, {addUserEmail: document.getElementById('new_project_user_email').value})">Add</button>`;
            // content += '</td>';
            // content += '</tr>';

            // content += '</table>';
            // content += '</div>';

            // elem.innerHTML = content;
        }
    }

    async updateHtmlSettings(){
        var elem = document.getElementById('contentPageSettings');

        var content = '';
        content += '<div class="table_box">';
        content += '<table class="table_elem" cellspacing="0px">';

        content += '<tr class="table_row_border_bottom">';
        content += '<td colspan="4">Change password:</td>';
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td>New password:</td>';
        content += `<td><input type="password" name="new_user_password_1" value="" placeholder="New Password" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_password_1"></td>`;
        content += `</tr>`;

        content += '<tr class="table_row_border_bottom">';
        content += '<td>New password:<br>(repeat)</td>';
        content += `<td><input type="password" name="new_user_password_2" value="" placeholder="New Password" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_user_password_2"></td>`;
        content += `</tr>`;
        
        content += '<tr class="table_row_border_bottom">';
        content += '<td></td>';
        content += `<td><button onclick="app.updateUserPassword(${this.userInfo.id}, document.getElementById('new_user_password_1').value, document.getElementById('new_user_password_2').value)">Change</button></td>`;
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td colspan="2" id="updateUserPasswordMessage" style="color:red;"></td>';
        content += '</tr>';

        content += '</table>';
        content += '</div>';

        elem.innerHTML = content;
    }

    async updateHtmlProjects(){
        var elem = document.getElementById('contentPageProjects');
        if(this.projectId === null){
            const data = await apiGetProjects();

            var content = '';
            content += '<div class="table_box">';
            content += '<table class="table_elem" cellspacing="0px">';
            data.forEach((d, i) => {
                /** @var {Project} d */
                content += `<tr class="table_row_border_bottom">`;
                content += `<td class="">${(i+1)}</td>`;
                content += `<td class="" style="font-weight:bold;">${d.name}</td>`;
                content += `<td><button onclick="app.urlClick('pg=projects&projectId=${d.id}')" class="button">Detail</button></td>`;
                content += `</tr>`;

            });
            content += '</table>';
            content += '</div>';

            content += '<button onclick="app.createNewProject();">Add new project</button>';

            elem.innerHTML = content;
        }else{
            /** @var {Project} S_project */
            const S_project = await apiGetProject(this.projectId);

            var content = '';
            content += '<div class="table_box">';
            content += '<table class="table_elem" cellspacing="0px">';
            content += '<tr class="table_row_border_bottom">';
            content += '<td>Name:</td>';
            content += `<td><input type="text" name="project_name" value="${S_project.name}" onblur="app.updateProject(${S_project.id}, {name: this.value})"></td>`;
            content += '</tr>';
            
            content += '<tr class="table_row_border_bottom">';
            content += '<td>IFC file:</td>';
            content += '<td>';
            if(S_project.fileExists === true){
                    content += `<a href="/api/ifc_file/${S_project.id}" target="_blank" class="button">Download</a>`;
            }else{
                
            }
            content += '</td>';
            if (S_project.numAttributes === 0) {
                if(S_project.fileExists === true){
                    content += `<td><button onclick="app.deleteIfcFile(${S_project.id});">Delete file</button></td>`;
                }else{
                    content += `<td><button onclick="app.uploadIfcFile(${S_project.id});">Upload file</button></td>`;
                }
            }
            content += '</tr>';

            if(S_project.fileExists === true){
                content += '<tr class="table_row_border_bottom">';
                content += '<td></td>';
                content += `<td><a href="../APP/?projectId=${S_project.id}&cleanCache" class="button">Open in 3D viewer</a></td>`;
                content += '</tr>';
            }

            content += '<tr class="table_row_border_bottom">';
            content += '<td colspan="2"></td>';
            content += '</tr>';

            content += '<tr class="table_row_border_bottom">';
            content += '<td>Owner:</td>';
            content += `<td>${S_project.userEntity.name} ${S_project.userEntity.surname} (${S_project.userEntity.mail})</td>`;
            content += '</tr>';

            content += '</table>';
            content += '</div>';


            content += '<div style="height: 20px;"></div>';


            content += '<div class="table_box">';
            content += '<table class="table_elem" cellspacing="0px">';

            content += '<tr class="table_row_border_bottom">';
            content += '<td colspan="4">Cooperating users:</td>';
            content += '</tr>';

            S_project.userEntitiesWithAccess.forEach((user, user_i) => {
                content += '<tr class="table_row_border_bottom">';
                content += `<td>${(user_i+1)})</td>`;
                content += `<td>${user.name} ${user.surname}</td>`;
                content += `<td>${user.mail}</td>`;
                content += `<td><button onclick="app.updateProject(${S_project.id}, {removeUserId: ${user.id}})">Remove</button></td>`;
                content += '</tr>';
            });

            content += '<tr class="table_row_border_bottom">';
            content += '<td colspan="4">';
            content += 'Add new user:';
            content += `<input type="text" name="new_user_email" value="" placeholder="E-mail" style="width: 200px;margin: 0px 10px 0px 10px;" id="new_project_user_email">`;
            content += `<button onclick="app.updateProject(${S_project.id}, {addUserEmail: document.getElementById('new_project_user_email').value})">Add</button>`;
            content += '</td>';
            content += '</tr>';

            content += '</table>';
            content += '</div>';

            elem.innerHTML = content;
        }
    }

    async updateHtmlLogin(){
        var elem = document.getElementById('contentPageLogin');

        var content = '';
        content += '<div class="table_box">';
        content += '<table class="table_elem" cellspacing="0px">';

        content += '<form action="" method="post">';

        content += '<tr class="table_row_border_bottom">';
        content += '<td>E-mail:</td>';
        content += '<td><input type="text" name="login_email" value="" id="login_email"></td>';
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td>Password:</td>';
        content += '<td><input type="password" name="login_password" value="" id="login_password"></td>';
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td></td>';
        content += '<td><button onclick="app.login()" class="button">Submit</button></td>';
        content += '</tr>';

        content += '<tr class="table_row_border_bottom">';
        content += '<td colspan="2" id="loginResponseMessage"></td>';
        content += '</tr>';

        content += '</form>';

        content += '</table>';
        content += '</div>';

        elem.innerHTML = content;
    }

    updateState(){
        this.parseCurrentPageFromUrl();
        this.loadCurrentUser();
    }

    updateStateForRequest(){
        this.updateHeaderLogin();
        this.updateMenuContent();
        this.updatePageContent();
    }
}