document.addEventListener('DOMContentLoaded', function () {
    // --- Theme Switcher --- //
    const themeSwitch = document.getElementById('theme-switch');
    const themeIcon = document.querySelector('.theme-icon');
    const currentTheme = localStorage.getItem('theme') || 'light';

    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        themeSwitch.checked = true;
        themeIcon.classList.remove('fa-moon');
        themeIcon.classList.add('fa-sun');
    } else {
        themeIcon.classList.remove('fa-sun');
        themeIcon.classList.add('fa-moon');
    }

    themeSwitch.addEventListener('change', function(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        }
    });

    // --- Prediction Form --- //
    const predictionForm = document.getElementById('prediction-form');
    const resultCard = document.getElementById('result-card');
    const resultMessage = document.getElementById('result-message');
    const resultValue = document.getElementById('result-value');

    predictionForm.addEventListener('submit', function (e) {
        e.preventDefault();

        // Mocking the API call for demonstration
        const mockProbability = Math.random();
        
        displayResult(mockProbability);
    });

    function displayResult(probability) {
        const isFraud = probability > 0.5; // Example threshold: tune this based on your model's ROC curve

        resultValue.textContent = `${(probability * 100).toFixed(2)}%`;

        resultCard.classList.remove('result-good', 'result-bad');

        if (isFraud) {
            resultMessage.textContent = 'High Probability of Fraud';
            resultValue.classList.remove('result-good');
            resultValue.classList.add('result-bad');
            resultCard.classList.add('result-bad');
        } else {
            resultMessage.textContent = 'Low Probability of Fraud';
            resultValue.classList.remove('result-bad');
            resultValue.classList.add('result-good');
            resultCard.classList.add('result-good');
        }

        // Show the result card with a smooth animation
        resultCard.style.display = 'block';
        resultCard.style.transform = 'translateY(20px)';
        setTimeout(() => {
            resultCard.style.opacity = 1;
            resultCard.style.transform = 'translateY(0)';
        }, 10); // A small delay to ensure the display property is applied first
    }
});