{% load static %}

<div class="widget endpoint-security-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="endpoint-security-widget">
    <div class="loading-overlay" id="endpoint-security-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Endpoint Protection 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('Endpoint Protection 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: calc(33.33% - 7px) calc(33.33% - 7px) calc(33.33% - 6px); gap: 10px;">
            <div class="count-item" style="grid-column: span 3; background-color: #03FB8D; border-radius: 10px; padding: 1rem; color: #1B545F; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-entities-value-tooltip" title="Huntress Entities Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of workstations and servers managed for Endpoint Detection and Response.
                    </div>
                </div>
                <span id="huntress-entities-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_entity_count | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Protected Entities</span>
            </div>
            <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: 0.5rem; padding-bottom: 0.5rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-edr-events-value-tooltip" title="Endpoint Events Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of system log events reviewed from workstations and servers.
                    </div>
                </div>
                <span id="huntress-edr-events-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_edr_events_analyzed | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Endpoint Events</span>
            </div>
            <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: 0.5rem; padding-bottom: 0.5rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-m365-events-value-tooltip" title="M365 Events Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of M365 log entries reviewed by the security system.
                    </div>
                </div>
                <span id="huntress-m365-events-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_m365_events_analyzed | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">M365 Events</span>
            </div>
            <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: 0.5rem; padding-bottom: 0.5rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-firewall-events-value-tooltip" title="Firewall Events Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of firewall log entries reviewed by the security system.
                    </div>
                </div>
                <span id="huntress-firewall-events-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_firewall_log_ingestion | default:'0' }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Firewall Events</span>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <h3 style="color: #435364; font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;">Security Events Breakdown</h3>
            <div style="display: grid; grid-template-columns: calc(33.33% - 7px) calc(33.33% - 7px) calc(33.33% - 6px); gap: 10px;">
                <div class="count-item" style="background-color: #435364; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-malware-value-tooltip" title="Malware Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        A count of malicious software that was identified and remediated.
                    </div>
                </div>
                    <span id="huntress-malware-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_malware_blocked | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Malware Blocked</span>
                </div>
                <div class="count-item" style="background-color: #FFC107; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-signals-value-tooltip" title="Signals Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of events that were deemed "interesting" for our security system to take a closer look at.
                    </div>
                </div>
                    <span id="huntress-signals-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_signals_detected | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Signals</span>
                </div>
                <div class="count-item" style="background-color: #FF5252; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="huntress-incidents-value-tooltip" title="Incidents Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The number of times malicious activity was identified..
                    </div>
                </div>
                    <span id="huntress-incidents-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ huntresssiem_data.huntress_total_incidents | default:'0' }}</span>
                    <br>
                    <span class="label" style="font-weight: 600;">Incidents</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 format large numbers with 2 decimal places and suffix (m for millions, b for billions)
    function formatLargeNumber(number) {
        if (!number) return '0';
        
        // Convert to number if it's a string
        number = Number(number);
        
        if (number >= 1000000000) {
            // Format as billions
            return (number / 1000000000).toFixed(1) + 'b';
        } else if (number >= 1000000) {
            // Format as millions
            return (number / 1000000).toFixed(1) + 'm';
        } else if (number >= 1000) {
            // Format as millions
            return (number / 1000).toFixed(1) + 'k';
        } else {
            // Return as is for smaller numbers
            return number.toString();
        }
    }
    
    // Function to update the EndpointSecurity widget data with the API response
    function updateEndpointSecurityWidgetData(data) {
        try {
            // Update protected entities
            const entitiesElement = document.getElementById('huntress-entities-value');
            if (entitiesElement) {
                entitiesElement.textContent = data.huntress_entity_count || 0;
            }
            
            // Update EDR events analyzed - format as large number
            const edrEventsElement = document.getElementById('huntress-edr-events-value');
            if (edrEventsElement) {
                edrEventsElement.textContent = formatLargeNumber(data.huntress_edr_events_analyzed || 0);
            }
            
            // Update incidents
            const incidentsElement = document.getElementById('huntress-incidents-value');
            if (incidentsElement) {
                incidentsElement.textContent = data.huntress_total_incidents || 0;
            }
            
            // Update signals
            const signalsElement = document.getElementById('huntress-signals-value');
            if (signalsElement) {
                signalsElement.textContent = data.huntress_signals_detected || 0;
            }
            
            // Update malware blocked
            const malwareElement = document.getElementById('huntress-malware-value');
            if (malwareElement) {
                malwareElement.textContent = data.huntress_malware_blocked || 0;
            }
            
            // Update M365 events - format as large number
            const m365EventsElement = document.getElementById('huntress-m365-events-value');
            if (m365EventsElement) {
                m365EventsElement.textContent = formatLargeNumber(data.huntress_m365_events_analyzed || 0);
            }
            
            // Update firewall events - format as large number
            const firewallEventsElement = document.getElementById('huntress-firewall-events-value');
            if (firewallEventsElement) {
                firewallEventsElement.textContent = formatLargeNumber(data.huntress_firewall_log_ingestion || 0);
            }
            
            // Hide loading animation
            hideEndpointSecurityLoading();
            
        } catch (error) {
            hideEndpointSecurityLoading();
        }
    }
            
    // Function to show loading animation
    function showEndpointSecurityLoading() {
        const loadingElement = document.getElementById('endpoint-security-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideEndpointSecurityLoading() {
        const loadingElement = document.getElementById('endpoint-security-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }
            
    // Function to fetch EndpointSecurity data from the API
    function fetchEndpointSecurityData() {
        // Show loading animation
        showEndpointSecurityLoading();
        
        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/endpoint-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 => {
            updateEndpointSecurityWidgetData(data);
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('Endpoint security request cancelled - user switched companies');
                return;
            }
            hideEndpointSecurityLoading();
        });
    }

    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', fetchEndpointSecurityData);
            endDateInput.addEventListener('change', fetchEndpointSecurityData);
        
        // 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
            fetchEndpointSecurityData();
        });
        
        // Initial data fetch
        fetchEndpointSecurityData();
    });
</script>