<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank Account</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .account-details {
            margin-top: 20px;
        }
        .button { padding: 10px; background: #007BFF; color: white; border: none; width: 100%; cursor: pointer; }
        #logoutButton { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Bank Account</h1>
    <div id="message">Checking your access...</div>
    
   

    <div id="accountDetails" class="account-details">
        <h2>Account Details</h2>
        <p><strong>Name:</strong> <span class="name"></span></p>
        <p><strong>Account Number:</strong> <span class="accountNumber"></span></p>
    </div>

    <button id="vaultButton" class="button" onclick="accessBalanceOrVault()"></button>
    <p><strong>Balance: </strong><span class="balance"></span></p>

    <button id="logoutButton" class="button" onclick="logout()">Logout</button>

    <script>
        
        let isAdmin = false;

        function checkAccess() {
            const token = localStorage.getItem('token');
            if (token) {
                try {
                    
                    const payload = JSON.parse(atob(token.split('.')[1]));
                    document.getElementById('message').innerText = 'Welcome, ' + payload.username + '!';
                    let vaultButton = document.getElementById('vaultButton');
                    if (payload.role === 'manager') {
                        isAdmin = true;
                        vaultButton.innerText = 'Access the vault';
                    } else {
                        vaultButton.innerText = 'Check balance';
                    }
                    getAccountDetails();
                } catch (err) {
                    console.error('Invalid token format', err);
                    document.getElementById('message').innerText = 'Error processing token.';
                }
            } else {
                document.getElementById('message').innerText = 'No token found. Please log in.';
                
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 2000);
            }
        }

    
        function accessBalanceOrVault() {
            if (isAdmin) {
                getVaultContents();
            } else {
                getBalance();
            }
        }

        async function getAccountDetails() {
            
            const token = localStorage.getItem('token');
            const response = await fetch('http://localhost:3000/account/details', {
                method: 'GET',
                headers: { 
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
            });
            const accountDetails = await response.json();
            document.querySelector('.name').innerText = accountDetails.name;
            document.querySelector('.accountNumber').innerText = accountDetails.accountNumber;
        }

        async function getBalance() {
            
                const token = localStorage.getItem('token');
                const response = await fetch('http://localhost:3000/account/balance', {
                    method: 'GET',
                    headers: { 
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                });
                const data = await response.json();

                document.querySelector('.balance').innerText = data.balance;
        }

        async function getVaultContents() {
            
            const token = localStorage.getItem('token');
            const response = await fetch('http://localhost:3000/admin/vault', {
                    method: 'GET',
                    headers: { 
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                });

            const data = await response.json();
            alert('Vault contents: ' + data.flag);   
        }

        function logout() {
            localStorage.removeItem('token');
            window.location.href = 'index.html';
        }

        
        window.onload = checkAccess;
    </script>
</body>
</html>