script.js

let userDatabase = JSON.parse(localStorage.getItem('graphUsers')) || []; 
let currentUser = localStorage.getItem('currentUser') || null;

function toggleTheme() {
    const body = document.body;
    if (body.classList.contains('theme-pink')) {
        body.classList.replace('theme-pink', 'theme-green');
    } else {
        body.classList.replace('theme-green', 'theme-pink');
    }
}

function showAuthPage(type) {
    document.getElementById('auth-page').style.display = 'block';
    const title = document.getElementById('auth-title');
    const loginActions = document.getElementById('login-actions');
    const regActions = document.getElementById('register-actions');
    const errorMsg = document.getElementById('error-msg');

    errorMsg.style.display = 'none';

    if (type === 'login') {
        title.innerText = "LOGIN";
        loginActions.style.display = 'block';
        regActions.style.display = 'none';
    } else {
        title.innerText = "REGISTER";
        loginActions.style.display = 'none';
        regActions.style.display = 'block';
    }
}

function hideAuthPage() { 
    document.getElementById('auth-page').style.display = 'none'; 
}

function processRegister() {
    const email = document.getElementById('user-email').value.trim();
    const pass = document.getElementById('user-pass').value;

    if (!email || !pass) {
        alert("Vui lòng nhập đầy đủ thông tin đăng ký!");
        return;
    }

    if (userDatabase.find(u => u.email === email)) {
        alert("Email này đã tồn tại!");
        return;
    }

    userDatabase.push({ email, pass });
    localStorage.setItem('graphUsers', JSON.stringify(userDatabase));
    
    alert("Đăng ký thành công!");
    showAuthPage('login');
}

function processLogin() {
    const email = document.getElementById('user-email').value.trim();
    const pass = document.getElementById('user-pass').value;
    const errorMsg = document.getElementById('error-msg');

    if (userDatabase.length === 0) {
        errorMsg.innerText = "Chưa có dữ liệu người dùng! Vui lòng ĐĂNG KÝ trước.";
        errorMsg.style.display = 'block';
        return;
    }

    const user = userDatabase.find(u => u.email === email && u.pass === pass);

    if (user) {
        currentUser = email;
        localStorage.setItem('currentUser', currentUser); 
        alert("Đăng nhập thành công!");
        updateNavbar();
        hideAuthPage();
    } else {
        errorMsg.innerText = "Sai tài khoản hoặc mật khẩu!";
        errorMsg.style.display = 'block';
    }
}

function processLogout() {
    currentUser = null;
    localStorage.removeItem('currentUser'); 
    updateNavbar();
    alert("Đã đăng xuất tài khoản!");
}

function updateNavbar() {
    const nav = document.getElementById('auth-nav');
    if (currentUser) {
        nav.innerHTML = `
            <span style="color:white; margin-right:20px; font-weight:bold; letter-spacing: 1px; text-shadow: 0 0 10px var(--main-color);">${currentUser}</span>
            <button class="btn-logout-top" onclick="processLogout()">LOGOUT</button>
        `;
    } else {
        nav.innerHTML = `
            <button class="btn-login-top" onclick="showAuthPage('login')">LOGIN</button>
            <button class="btn-reg-top" onclick="showAuthPage('register')">REGISTER</button>
        `;
    }
}

window.onload = function() {
    updateNavbar();
};


function executeSearch() {
    const searchQuery = document.getElementById('algo-search').value.toLowerCase().trim();
    const cards = document.querySelectorAll('.card');

    cards.forEach(card => {
        const algoName = card.querySelector('span').innerText.toLowerCase();
        
        if (searchQuery === "" || algoName.includes(searchQuery)) {
            card.classList.remove('hidden');
        } else {
            card.classList.add('hidden');    
        }
    });
}

function handleEnterSearch(event) {
    if (event.key === "Enter") {
        event.preventDefault(); 
        executeSearch();
    }
}


function goToAlgo(name) {
    if (!currentUser) {
        alert("Bạn phải Đăng nhập mới có thể truy cập thuật toán: " + name);
        showAuthPage('login');
    } else {
        openWorkspace(name);
    }
}

function openWorkspace(name) {
    document.querySelector('.hero').style.display = 'none';
    document.querySelector('.algo-grid').style.display = 'none';

    const workspace = document.getElementById('algo-workspace');
    workspace.style.display = 'block';

    document.getElementById('workspace-title').innerText = "THUẬT TOÁN " + name.toUpperCase();

    resetWorkspaceResults(name);
}

function goBackHome() {
    document.querySelector('.hero').style.display = 'block';
    document.querySelector('.algo-grid').style.display = 'flex'; 

    document.getElementById('algo-workspace').style.display = 'none';
}

function resetWorkspaceResults(algoName) {
    document.getElementById('res-status').innerText = "Đang chờ dữ liệu đầu vào...";
    document.getElementById('res-status').classList.add('placeholder');
    document.getElementById('res-status').style.color = "";
    
    document.getElementById('res-main').innerText = "Chưa có dữ liệu tính toán.";
    document.getElementById('res-main').classList.add('placeholder');
    
    document.getElementById('res-sub').innerText = "--";
    document.getElementById('res-sub').classList.add('placeholder');

    document.getElementById('graph-map').innerHTML = '<span class="placeholder">Bản đồ đồ thị sẽ hiển thị ở đây...</span>';
    document.getElementById('execution-log').innerHTML = '<span class="placeholder">Chờ chạy thuật toán để xem chi tiết từng bước...</span>';

    let titleMain = document.getElementById('res-title-main');
    let titleSub = document.getElementById('res-title-sub');

    if (algoName === 'Dijkstra' || algoName === 'Ford-Bellman') {
        titleMain.innerText = 'Đường Đi Ngắn Nhất';
        titleSub.innerText = 'Tổng Chi Phí (Trọng Số)';
    } else if (algoName === 'Prim' || algoName === 'Kruskal') {
        titleMain.innerText = 'Cây Khung Nhỏ Nhất (MST)';
        titleSub.innerText = 'Tổng Trọng Lượng Cây';
    } else if (algoName === 'DFS') {
        titleMain.innerText = 'Thứ Tự Duyệt Đỉnh';
        titleSub.innerText = 'Thời Gian Duyệt';
    }
}