document.addEventListener('DOMContentLoaded', function() {
    const loginButton = document.getElementById('login');
    const checkMailButton = document.getElementById('check-mail');
    const logoutButton = document.getElementById('logout');
    const loginSection = document.getElementById('login-section');
    const controlSection = document.getElementById('control-section');

    // Check if already logged in
    chrome.storage.local.get(['username', 'password'], function(items) {
        if (items.username && items.password) {
            loginSection.style.display = 'none';
            controlSection.style.display = 'block';
        } else {
            loginSection.style.display = 'block';
            controlSection.style.display = 'none';
        }
    });

    loginButton.addEventListener('click', function() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        fetch('http://localhost:5000/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password }),
            credentials: 'include'
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            if (data.message === 'Login successful') {
                chrome.storage.local.set({ 'username': username, 'password': password }, function() {
                    loginSection.style.display = 'none';
                    controlSection.style.display = 'block';
                });
            }
        })
        .catch(error => {
            console.error('Error during login request:', error);
            alert('An error occurred while logging in');
        });
    });

    checkMailButton.addEventListener('click', function() {
        fetch('http://localhost:5000/check_mail', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        })
        .then(response => response.json())
        .then(data => {
            console.log('Check mail response:', data);
            chrome.runtime.sendMessage({
                type: 'phishing-detected',
                emails: data
            });
        })
        .catch(error => {
            console.error('Error during check mail request:', error);
            alert('An error occurred while checking mail');
        });
    });

    logoutButton.addEventListener('click', function() {
        fetch('http://localhost:5000/logout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            if (data.message === 'Logged out') {
                chrome.storage.local.remove(['username', 'password'], function() {
                    loginSection.style.display = 'block';
                    controlSection.style.display = 'none';
                });
            }
        })
        .catch(error => {
            console.error('Error during logout request:', error);
            alert('An error occurred while logging out');
        });
    });
});