{% load static %}

<div class="widget sat-awareness-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="sat-awareness-widget">
    <div class="loading-overlay" id="sat-awareness-loading">
        <div class="spinner"></div>
    </div>
    <div class="empty-data-overlay" id="sat-awareness-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 Simulated Phishing Training to your account, speak with your account executive.
        </div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Simulated Phishing Campaigns</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Simulated Phishing Campaigns')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
    
    <div class="widget-content">
        <div id="phishing-data-container">
            <div id="phishing-data-content">
                <div class="mb-3" id="campaign-filter-container" style="display: block; margin-bottom: 35px;">
                    <label for="campaignFilter" style="display: block; margin-bottom: 5px; font-weight: 600; color: #435364;">Filter by Campaign:</label>
                    <select id="campaignFilter" style="width: 90%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Quicksand', sans-serif;">
                        <option value="all">All Campaigns</option>
                    </select>
                </div>
                
                <div class="category-counts" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
                    <div class="count-item" style="grid-column: span 3; background-color: #03FB8D; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #1B545F; text-align: center; box-sizing: border-box; width: 100%;">
                        <span id="totalAttempts-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0</span>
                        <br>
                        <span class="label" style="font-weight: 600;">Total Attempts</span>
                    </div>
                </div>
            <div style="margin-top: 20px;">
                <h3 style="color: #435364; font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;">Campaign Breakdown</h3>
                <div style="display: grid; grid-template-columns: calc(33.33% - 7px) calc(33.33% - 7px) calc(33.33% - 6px); gap: 10px; max-width: 100%; box-sizing: border-box;">
                    <div class="count-item" style="grid-column: span 1; background-color: #00ADAD; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; color: #1B545F; text-align: center; box-sizing: border-box; width: 100%;">
                        <span id="report-rate-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                        <br>
                        <span class="label" style="font-weight: 600;">Report Rate</span>
                    </div>
                    <div class="count-item" style="grid-column: span 1; background-color: #435364; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; color: #fff; text-align: center; box-sizing: border-box; width: 100%;">
                        <span id="open-rate-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                        <br>
                        <span class="label" style="font-weight: 600;">Open Rate</span>
                    </div>
                    <div class="count-item" style="grid-column: span 1; background-color: #FF5252; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; color: #fff; text-align: center; box-sizing: border-box; width: 100%;">
                        <span id="click-rate-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                        <br>
                        <span class="label" style="font-weight: 600;">Click Rate</span>
                    </div>
                </div>
            </div>

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

<script>
    // Store the data globally so we can access it when filtering by campaign
    let globalPhishingData = {
        allData: {
            campaigns: [],
            recipients: 0,
            adjusted: 0,
            sent: 0,
            opened: 0,
            clicked: 0,
            compromised: 0,
            reported: 0,
            sendRate: 0,
            openRate: 0,
            clickRate: 0,
            compromiseRate: 0,
            reportRate: 0
        },
        campaignsData: []
    };
    
    // Function to update the UI with the given data
    function updateAwarenessUIWithData(data) {
        // Update the UI with data
        const openRateElement = document.getElementById('open-rate-value');
        if (openRateElement) {
            openRateElement.textContent = (data.openRate || 0).toFixed(1) + '%';
        }
        
        const clickRateElement = document.getElementById('click-rate-value');
        if (clickRateElement) {
            clickRateElement.textContent = (data.clickRate || 0).toFixed(1) + '%';
        }
        
        const reportRateElement = document.getElementById('report-rate-value');
        if (reportRateElement) {
            reportRateElement.textContent = (data.reportRate || 0).toFixed(1) + '%';
            
            // Update color based on report rate (higher is better for phishing awareness)
            const reportRateItem = reportRateElement.closest('.count-item');
            if (reportRateItem) {
                if (data.reportRate >= 10) {
                    reportRateItem.style.backgroundColor = '#03FB8D';
                    reportRateItem.style.color = '#1B545F';
                } else if (data.reportRate >= 5) {
                    reportRateItem.style.backgroundColor = '#03FB8D';
                    reportRateItem.style.color = '#1B545F';
                    // reportRateItem.style.backgroundColor = '#FFC107';
                    // reportRateItem.style.color = '#435364';
                } else {
                    reportRateItem.style.backgroundColor = '#03FB8D';
                    reportRateItem.style.color = '#1B545F';
                    // reportRateItem.style.backgroundColor = '#FF5252';
                    // reportRateItem.style.color = '#fff';
                }
            }
        }

        // Update campaign summary
        const totalAttemptsElement = document.getElementById('totalAttempts-value');
        if (totalAttemptsElement) {
            const campaignsCount = data.campaigns ? data.campaigns.length : 1; // If single campaign, count as 1
            const totalAttempts = data.sent || 0;
            if (totalAttemptsElement) {
                totalAttemptsElement.textContent = totalAttempts;
            }
        }
    }
    
    // Function to handle campaign filter change
    function handleCampaignFilterChange() {
        const campaignFilter = document.getElementById('campaignFilter');
        if (!campaignFilter) return;
        
        const selectedValue = campaignFilter.value;
        
        if (selectedValue === 'all') {
            // Show aggregated data for all campaigns
            updateAwarenessUIWithData(globalPhishingData.allData);
        } else {
            // Show data for the selected campaign
            const campaignIndex = parseInt(selectedValue);
            if (globalPhishingData.campaignsData[campaignIndex]) {
                updateAwarenessUIWithData(globalPhishingData.campaignsData[campaignIndex]);
            }
        }
    }
    
    // Function to update the SATAwareness widget data with the API response
    function updateSATAwarenessWidgetData(data) {
        try {
            // Process the data - if multiple companies, aggregate the data
            let awarenessAggregatedData = {
                campaigns: [],
                recipients: 0,
                adjusted: 0,
                sent: 0,
                opened: 0,
                clicked: 0,
                compromised: 0,
                reported: 0,
                sendRate: 0,
                openRate: 0,
                clickRate: 0,
                compromiseRate: 0,
                reportRate: 0
            };
            
            // Check if data is empty
            let isEmpty = false;
            
            // Handle the specific case where we have a single company with empty recent_campaigns
            // Format: {"company_id":"22919","company_name":"Hercules OEM Group","recent_campaigns":[]}
            if (data && typeof data === 'object') {
                if (data.company_id && data.company_name &&
                    Array.isArray(data.recent_campaigns) && data.recent_campaigns.length === 0) {
                    isEmpty = true;
                }
            }
            
            // Check if data is an array (multiple companies)
            if (Array.isArray(data) && data.length > 0) {
                let companyCount = 0;
                
                // Aggregate data from all companies
                data.forEach(companyData => {
                    // Get the first (and only) key in the object
                    const companyName = Object.keys(companyData)[0];
                    const stats = companyData[companyName];
                    
                    if (stats) {
                        companyCount++;
                        awarenessAggregatedData.recipients += stats.recipients || 0;
                        awarenessAggregatedData.adjusted += stats.adjusted || 0;
                        awarenessAggregatedData.sent += stats.sent || 0;
                        awarenessAggregatedData.opened += stats.opened || 0;
                        awarenessAggregatedData.clicked += stats.clicked || 0;
                        awarenessAggregatedData.compromised += stats.compromised || 0;
                        awarenessAggregatedData.reported += stats.reported || 0;
                        
                        // Add campaigns
                        if (stats.recent_campaigns && stats.recent_campaigns.length > 0) {
                            awarenessAggregatedData.campaigns = awarenessAggregatedData.campaigns.concat(stats.recent_campaigns);
                        }
                    }
                });
                
                // Calculate rates based on aggregated data
                if (awarenessAggregatedData.sent > 0) {
                    awarenessAggregatedData.openRate = (awarenessAggregatedData.opened / awarenessAggregatedData.sent) * 100;
                    awarenessAggregatedData.clickRate = (awarenessAggregatedData.clicked / awarenessAggregatedData.sent) * 100;
                    awarenessAggregatedData.reportRate = (awarenessAggregatedData.reported / awarenessAggregatedData.sent) * 100;
                    awarenessAggregatedData.compromiseRate = (awarenessAggregatedData.compromised / awarenessAggregatedData.sent) * 100;
                }
                
                if (awarenessAggregatedData.adjusted > 0) {
                    awarenessAggregatedData.sendRate = (awarenessAggregatedData.sent / awarenessAggregatedData.adjusted) * 100;
                }
            } else if (typeof data === 'object') {
                // Handle single company data
                // If it's a single object but not in array format, process it properly
                if (Object.keys(data).length > 0) {
                    const companyName = Object.keys(data)[0];
                    const stats = data[companyName];
                    
                    if (stats) {
                        awarenessAggregatedData.recipients = stats.recipients || 0;
                        awarenessAggregatedData.adjusted = stats.adjusted || 0;
                        awarenessAggregatedData.sent = stats.sent || 0;
                        awarenessAggregatedData.opened = stats.opened || 0;
                        awarenessAggregatedData.clicked = stats.clicked || 0;
                        awarenessAggregatedData.compromised = stats.compromised || 0;
                        awarenessAggregatedData.reported = stats.reported || 0;
                        
                        // Calculate rates
                        if (awarenessAggregatedData.sent > 0) {
                            awarenessAggregatedData.openRate = (awarenessAggregatedData.opened / awarenessAggregatedData.sent) * 100;
                            awarenessAggregatedData.clickRate = (awarenessAggregatedData.clicked / awarenessAggregatedData.sent) * 100;
                            awarenessAggregatedData.reportRate = (awarenessAggregatedData.reported / awarenessAggregatedData.sent) * 100;
                            awarenessAggregatedData.compromiseRate = (awarenessAggregatedData.compromised / awarenessAggregatedData.sent) * 100;
                        }
                        
                        if (awarenessAggregatedData.adjusted > 0) {
                            awarenessAggregatedData.sendRate = (awarenessAggregatedData.sent / awarenessAggregatedData.adjusted) * 100;
                        }
                        
                        // Add campaigns
                        if (stats.recent_campaigns && stats.recent_campaigns.length > 0) {
                            awarenessAggregatedData.campaigns = stats.recent_campaigns;
                        }
                    }
                }
            }
            
            // Show or hide the empty data overlay based on the check
            if (isEmpty) {
                showSATAwarenessEmptyDataOverlay();
            } else {
                hideSATAwarenessEmptyDataOverlay();
            }
            
            // Store the aggregated data globally
            globalPhishingData.allData = awarenessAggregatedData;
            
            // Extract and aggregate individual campaign data by title
            globalPhishingData.campaignsData = [];
            if (awarenessAggregatedData.campaigns && awarenessAggregatedData.campaigns.length > 0) {
                // Group campaigns by title
                const campaignsByTitle = {};
                
                awarenessAggregatedData.campaigns.forEach(campaign => {
                    if (!campaignsByTitle[campaign.title]) {
                        // Initialize a new campaign group
                        campaignsByTitle[campaign.title] = {
                            title: campaign.title,
                            recipients: 0,
                            adjusted: 0,
                            sent: 0,
                            opened: 0,
                            clicked: 0,
                            compromised: 0,
                            reported: 0,
                            sendRate: 0,
                            openRate: 0,
                            clickRate: 0,
                            compromiseRate: 0,
                            reportRate: 0,
                            campaigns: [] // Store all campaigns with this title
                        };
                    }
                    
                    // Add this campaign's data to the group
                    const group = campaignsByTitle[campaign.title];
                    group.recipients += campaign.recipients || 0;
                    group.adjusted += campaign.adjusted || 0;
                    group.sent += campaign.sent || 0;
                    group.opened += campaign.opened || 0;
                    group.clicked += campaign.clicked || 0;
                    group.compromised += campaign.compromised || 0;
                    group.reported += campaign.reported || 0;
                    group.campaigns.push(campaign);
                });
                
                // Calculate rates for each campaign group
                Object.values(campaignsByTitle).forEach(group => {
                    if (group.sent > 0) {
                        group.openRate = (group.opened / group.sent) * 100;
                        group.clickRate = (group.clicked / group.sent) * 100;
                        group.reportRate = (group.reported / group.sent) * 100;
                        group.compromiseRate = (group.compromised / group.sent) * 100;
                    }
                    
                    if (group.adjusted > 0) {
                        group.sendRate = (group.sent / group.adjusted) * 100;
                    }
                    
                    // Add to the campaigns data array
                    globalPhishingData.campaignsData.push(group);
                });
            }
            
            // Update the UI with the aggregated data initially
            updateAwarenessUIWithData(awarenessAggregatedData);
            
            // Always update campaign filter dropdown
            const campaignFilter = document.getElementById('campaignFilter');
            
            if (campaignFilter) {
                // Clear existing options except "All Campaigns"
                while (campaignFilter.options.length > 1) {
                    campaignFilter.remove(1);
                }
                
                if (globalPhishingData.campaignsData.length > 0) {
                    // Add campaign options (one per unique campaign title)
                    globalPhishingData.campaignsData.forEach((campaign, index) => {
                        const option = document.createElement('option');
                        option.value = index;
                        option.textContent = campaign.title;
                        campaignFilter.appendChild(option);
                    });
                    
                    // Make sure "All Campaigns" is selected and enabled
                    campaignFilter.options[0].textContent = "All Campaigns";
                    campaignFilter.options[0].disabled = false;
                } else {
                    // No campaigns available, show "No Campaigns" option
                    campaignFilter.options[0].textContent = "No Campaigns";
                    campaignFilter.options[0].disabled = true;
                }
                
                // Add change event listener
                campaignFilter.removeEventListener('change', handleCampaignFilterChange);
                campaignFilter.addEventListener('change', handleCampaignFilterChange);
            }
            
            // Hide loading animation
            hideSATAwarenessLoading();
            
        } catch (error) {
            hideSATAwarenessLoading();
        }
    }

    // Function to show empty data overlay
    function showSATAwarenessEmptyDataOverlay() {
        const awarenessWidgetContainer = document.getElementById('sat-awareness-widget');
        if (!awarenessWidgetContainer) return;
        
        awarenessWidgetContainer.classList.add('has-empty-data');
        const emptyDataElement = awarenessWidgetContainer.querySelector('#sat-awareness-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'flex';
        }
    }
    
    // Function to hide empty data overlay
    function hideSATAwarenessEmptyDataOverlay() {
        const awarenessWidgetContainer = document.getElementById('sat-awareness-widget');
        if (!awarenessWidgetContainer) return;
        
        awarenessWidgetContainer.classList.remove('has-empty-data');
        const emptyDataElement = awarenessWidgetContainer.querySelector('#sat-awareness-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'none';
        }
    }

    // Function to show loading animation
    function showSATAwarenessLoading() {
        const loadingElement = document.getElementById('sat-awareness-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideSATAwarenessLoading() {
        const loadingElement = document.getElementById('sat-awareness-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }
            
    // Function to fetch SATAwareness data from the API
    function fetchSATAwarenessData() {
        // Show loading animation
        showSATAwarenessLoading();
                
        // Start with base API URL
        let apiUrl = '{{ base_api_url }}' + '/api/v1/dashboard/sat-campaigns';
        
        // 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();
        
        // 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 => {
            updateSATAwarenessWidgetData(data);
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('SAT awareness request cancelled - user switched companies');
                return;
            }
            hideSATAwarenessLoading();
        });
    }

    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}`;
        };
        
        // 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
            fetchSATAwarenessData();
        });
        
        // Initial data fetch
        fetchSATAwarenessData();
    });
</script>