{% load static %}

<div class="widget sla-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="sla-widget">
    <div class="loading-overlay" id="sla-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Overall SLA 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('Overall SLA 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="sla-compliance-value-tooltip" title="SLA Compliance Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">The Response SLA Compliance is the percentage of tickets which were responded to within your company's SLA response time.</div>
                </div>
                <span id="sla-compliance-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ sla_response_compliance_rate|default:"100"|floatformat:1 }}%</span>
                <br>
                <span class="label" style="font-weight: 600;">Response SLA Compliance</span>
            </div>
            <div class="count-item" style="grid-column: span 1; background-color: #00ADAD; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="mttr-value-tooltip" title="Average Response Time Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">This is the average time it took for a Datapath technician to reach out to a user after it had been submitted.</div>
                </div>
                <span id="mttr-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ avg_response_minutes|default:"0"|divisibleby:60|floatformat:1 }}h</span>
                <br>
                <span class="label" style="font-weight: 600;">Average Response Time</span>
            </div>
            <div class="count-item" style="grid-column: span 1; background-color: #435364; border-radius: 10px; padding: 1rem; color: #fff; text-align: center;">
                <div class="tooltip-icon">
                    <span id="mtts-value-tooltip" title="Average Response Time Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">This is the average time it took for a Datapath technician to complete a ticket.</div>
                </div>
                <span id="mtts-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ avg_resolution_minutes|default:"0"|divisibleby:60|floatformat:1 }}h</span>
                <br>
                <span class="label" style="font-weight: 600;">Average Resolution Time</span>
            </div>
        </div>

        <div style="margin-top: 15px; text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Reporting Period: {{ date_range|default:"No data available" }}</span>
        </div>
        <div style="text-align: center; color: #435364; font-size: 0.9rem;">
            <span>Data updated hourly</span>
        </div>

    </div>
</div>

<script>
    // Function to update the SLA widget data with the API response
    function updateSLAWidgetData(data) {
        try {
            // Update the SLA compliance value
            const slaComplianceElement = document.getElementById('sla-compliance-value');
            if (slaComplianceElement) {
                slaComplianceElement.textContent = (data.sla_response_compliance_rate || 0).toFixed(1) + '%';
                
                // Update the background color based on the compliance rate
                const countItem = slaComplianceElement.closest('.count-item');
                if (countItem) {
                    if (data.sla_response_compliance_rate >= 90) {
                        countItem.style.backgroundColor = '#03FB8D';
                        countItem.style.color = '#1B545F';
                    } else if (data.sla_response_compliance_rate >= 80) {
                        countItem.style.backgroundColor = '#FFC107';
                        countItem.style.color = '#fff';
                    } else {
                        countItem.style.backgroundColor = '#FF5252';
                        countItem.style.color = '#fff';
                    }
                }
            }
            
            // Update the average response time
            const mttrElement = document.getElementById('mttr-value');
            if (mttrElement) {
                const responseHours = (data.avg_response_minutes || 0) / 60;
                mttrElement.textContent = responseHours.toFixed(1) + 'h';
            }
            
            // Update the average resolution time
            const mttsElement = document.getElementById('mtts-value');
            if (mttsElement) {
                const resolutionHours = (data.avg_resolution_minutes || 0) / 60;
                mttsElement.textContent = resolutionHours.toFixed(1) + 'h';
            }
            
            // Update the date range
            const dateRangeElements = document.querySelectorAll('.widget-content div[style*="margin-top: 15px"] span');
            if (dateRangeElements.length > 0) {
                dateRangeElements[0].textContent = 'Reporting Period: ' + (data.date_range || 'No data available');
            }
            
            // Update the Priority Response SLA widget
            updatePriorityResponseSLAWidget(data);
            
            // Update the Priority Resolution SLA widget
            updatePriorityResolutionSLAWidget(data);
            
            // Update the Ticket Stats widget
            updateTicketStatsWidget(data);
            
        } catch (error) {
        }
    }
            
    // Function to show loading animation
    function showSLALoading() {
        const loadingElement = document.getElementById('sla-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideSLALoading() {
        const loadingElement = document.getElementById('sla-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }
            
    // Function to fetch SLA data from the API
    function fetchSLAData() {
        // Show loading animation for all widgets
        showSLALoading();
        
        // Show loading for resolution widget if it exists
        const resolutionLoading = document.getElementById('resolution-sla-loading');
        if (resolutionLoading) {
            resolutionLoading.classList.add('active');
        }
        
        // Show loading for response widget if it exists
        const responseLoading = document.getElementById('response-sla-loading');
        if (responseLoading) {
            responseLoading.classList.add('active');
        }
        
        // Show loading for ticket stats widget if it exists
        const ticketStatsLoading = document.getElementById('ticket-stats-loading');
        if (ticketStatsLoading) {
            ticketStatsLoading.classList.add('active');
        }
        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/sla-statistics';
        
        // 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 => {
            updateSLAWidgetData(data);
            // Hide loading animation
            hideSLALoading();
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('SLA request cancelled - user switched companies');
                return;
            }
            // Hide loading animation even on error
            hideSLALoading();
            const loadingResolutionElement = document.getElementById('resolution-sla-loading');
            if (loadingResolutionElement) {
                loadingResolutionElement.classList.remove('active');
            }
            const loadingResponseElement = document.getElementById('response-sla-loading');
            if (loadingResponseElement) {
                loadingResponseElement.classList.remove('active');
            }
            const ticketsLoadingElement = document.getElementById('ticket-stats-loading');
            if (ticketsLoadingElement) {
                ticketsLoadingElement.classList.remove('active');
            }
        });
    }

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