{% load static %}

<div class="widget email-security-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="email-security-widget">
    <div class="loading-overlay" id="email-security-loading">
        <div class="spinner"></div>
    </div>
    <div class="empty-data-overlay" id="email-security-empty-data" style="display: none; position: absolute; top: 15%; left: 0; width: 100%; height: 85%; background-color: #435364e6; z-index: 10; justify-content: center; align-items: center; text-align: center; border-radius: 10px;">
        <div style="padding: 20px; color: #fff; font-weight: 600; font-size: 1.5rem;">
            To learn more about adding Email Security to your account, speak with your account executive.
        </div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Email Security Summary</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Email Security Summary')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
    
    <div class="widget-content">
        <div class="category-counts" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <div class="count-item" style="grid-column: span 2; background-color: #03FB8D; border-radius: 10px; padding: 1rem; color: #1B545F; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-inspected-value-tooltip" title="Suspicious Emails Inspected Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The total number of emails that the system identified as potentially malicious and ran additional security scans on.
                    </div>
                </div>
                <span id="email-inspected-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_emails_inspected | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Suspicious Emails Examined</span>
            </div>
            <div class="count-item" style="grid-column: span 2; background-color: #FF5252; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-detected-tooltip" title="Confirmed Malicious Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of emails which were confirmed to be malicious and blocked from reaching users.
                    </div>
                </div>
                <span id="email-detected-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_detected_items | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Confirmed Malicious Emails</span>
            </div>
        </div>
        
        <div style="margin-top: 20px;">
            <h3 style="color: #435364; font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;">Suspicious Emails Breakdown</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <div class="count-item" style="background-color: #00ADAD; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-false-positives-value-tooltip" title="False Positives Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of emails which were reported by users, but determined not malicious.
                    </div>
                </div>
                    <span id="email-false-positives-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_false_positives | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">False Positives</span>
                </div>
                <div class="count-item" style="background-color: #FFC107; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-spam-value-tooltip" title="Spam Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of emails determined to be spam.
                    </div>
                </div>
                    <span id="email-spam-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_spam | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Spam</span>
                </div>
                <div class="count-item" style="background-color: #FF5252; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-phishing-value-tooltip" title="Phishing Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of emails determined to be phishing.
                    </div>
                </div>
                    <span id="email-phishing-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_phishing | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Phishing</span>
                </div>
                <div class="count-item" style="background-color: #435364; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="email-unclassified-value-tooltip" title="Unclassified Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of emails that the system is currently reviewing and have not been determined whether or not they are malicious.
                    </div>
                </div>
                    <span id="email-unclassified-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ ironscales_data.ironscales_unclassified | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Unclassified</span>
                </div>
            </div>
        </div>

        <div style="margin-top: 15px; text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Data updated hourly</span>
        </div>
    </div>
</div>

<script>
    // Function to update the EmailSecurity widget data with the API response
    function updateEmailSecurityWidgetData(data) {
        try {
            // Update emails inspected
            const emailsInspectedElement = document.getElementById('email-inspected-value');
            if (emailsInspectedElement) {
                emailsInspectedElement.textContent = data.ironscales_emails_inspected || 0;
            }
            
            // Update suspicious emails
            const suspiciousEmailsElement = document.getElementById('email-detected-value');
            if (suspiciousEmailsElement) {
                suspiciousEmailsElement.textContent = data.ironscales_detected_items || 0;
            }
            
            // Update phishing emails
            const phishingEmailsElement = document.getElementById('email-phishing-value');
            if (phishingEmailsElement) {
                phishingEmailsElement.textContent = data.ironscales_phishing || 0;
            }
            
            // Update spam emails
            const spamEmailsElement = document.getElementById('email-spam-value');
            if (spamEmailsElement) {
                spamEmailsElement.textContent = data.ironscales_spam || 0;
            }
            
            // Update false positives
            const falsePositivesElement = document.getElementById('email-false-positives-value');
            if (falsePositivesElement) {
                falsePositivesElement.textContent = data.ironscales_false_positives || 0;
            }
            
            // Update false positives
            const unclassifiedEmailsElement = document.getElementById('email-unclassified-value');
            if (unclassifiedEmailsElement) {
                unclassifiedEmailsElement.textContent = data.ironscales_unclassified || 0;
            }
            
            // Hide loading animation
            hideEmailSecurityLoading();
            
        } catch (error) {
            hideEmailSecurityLoading();
        }
    }
            
    // Function to show loading animation
    function showEmailSecurityLoading() {
        const loadingElement = document.getElementById('email-security-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideEmailSecurityLoading() {
        const loadingElement = document.getElementById('email-security-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }

    // Function to show empty data overlay
    function showEmailSecurityEmptyDataOverlay() {
        const emailSecurityWidgetContainer = document.getElementById('email-security-widget');
        if (!emailSecurityWidgetContainer) return;
        
        emailSecurityWidgetContainer.classList.add('has-empty-data');
        const emptyDataElement = emailSecurityWidgetContainer.querySelector('#email-security-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'flex';
        }
    }
    
    // Function to hide empty data overlay
    function hideEmailSecurityEmptyDataOverlay() {
        const emailSecurityWidgetContainer = document.getElementById('email-security-widget');
        if (!emailSecurityWidgetContainer) return;
        
        emailSecurityWidgetContainer.classList.remove('has-empty-data');
        const emptyDataElement = emailSecurityWidgetContainer.querySelector('#email-security-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'none';
        }
    }

    // Function to fetch EmailSecurity data from the API
    function fetchEmailSecurityData() {
        // Show loading animation
        showEmailSecurityLoading();
        
        const startDate = document.getElementById('startdate').value;
        const endDate = document.getElementById('enddate').value;
        
        // Start with base API URL
        let apiUrl = '{{ base_api_url }}/api/v1/dashboard/email-security';
        
        // Check for group selection and append to path if not "All Companies"
        const groupSelect = document.getElementById('group-select');
        if (groupSelect && groupSelect.value) {
            const selectedGroup = groupSelect.options[groupSelect.selectedIndex];
            const groupCodename = selectedGroup.getAttribute('data-codename');
            if (groupCodename) {
                // Append group ID to the URL path (not as a parameter)
                apiUrl += `/${groupCodename}/`;
            } else {
                // Ensure trailing slash for consistency
                apiUrl += '/';
            }
        } else {
            // Ensure trailing slash for consistency
            apiUrl += '/';
        }
        
        // Add query parameters for dates
        const params = new URLSearchParams();
        
        if (startDate) {
            params.append('startdate', startDate);
        }
        
        if (endDate) {
            params.append('enddate', endDate);
        }
        
        // Append parameters to URL if any exist
        if (params.toString()) {
            apiUrl += '?' + params.toString();
        }
        
        // Make the API request with automatic token refresh on 401
        window.authenticatedFetch(apiUrl, {
            method: 'GET'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            updateEmailSecurityWidgetData(data);
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('Email security request cancelled - user switched companies');
                return;
            }
            hideEmailSecurityLoading();
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Set default dates
        const today = new Date();
        const thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(today.getDate() - 30);
        
        // Format dates as YYYY-MM-DD
        const formatDate = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        };
        
        // Set default values for date inputs
        const startDateInput = document.getElementById('startdate');
        const endDateInput = document.getElementById('enddate');
        
            startDateInput.value = formatDate(thirtyDaysAgo);
            endDateInput.value = formatDate(today);
            
            // Add event listeners for date changes
            startDateInput.addEventListener('change', fetchEmailSecurityData);
            endDateInput.addEventListener('change', fetchEmailSecurityData);
        
        // Handle group selection
        // Listen for debounced group change event from sidebar
        document.addEventListener('groupChanged', function() {
            // Trigger a refresh of the widget with the new group selection
            fetchEmailSecurityData();
        });
        
        // Initial data fetch
        fetchEmailSecurityData();
    });
</script>