{% load static %}

<div class="widget csat-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="csat-widget">
    <div class="loading-overlay" id="csat-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Customer Satisfaction</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Customer Satisfaction')">
            🤖
            <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; margin-bottom: 20px;">
            <div class="count-item" id="satisfaction-score-container" style="grid-column: span 2; background-color: #03FB8D; border-radius: 10px; padding: 1rem; color: #1B545F; text-align: center;">
                <div class="tooltip-icon">
                    <span id="satisfaction-score-value-tooltip" title="Satisfaction Score Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The average score of the responses recieved to satisfaction surveys sent after a support ticket is closed.
                        <br>
                        <br>
                        Responses can be "Happy," "Nuetral," or "Unhappy"
                    </div>
                </div>
            <span id="satisfaction-score-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ simplesat_data.average_score|default:"0" }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Average Score (Last 6 Months)</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="response-count-tooltip" title="Response Count Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The total number of all responses recieved to satisfaction surveys sent after a support ticket is closed.
                    </div>
                </div>
                <span id="response-count-value" class="value" style="font-size: 1.8rem; font-weight: 700;">{{ simplesat_data.response_count|default:"0" }}</span>
                <br>
                <span class="label" style="font-weight: 600;">Total Responses</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="positive-count-value-tooltip" title="Positive Count Tooltip" style="text-align: right;" onclick="toggleTooltip(this)">ⓘ</span>
                    <div class="tooltip-box">
                        The total number of responses recieved in which the user responded with "Happy" in the post-ticket satisfaction survey.
                    </div>
                </div>
                <span id="positive-count-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0</span>
                <br>
                <span class="label" style="font-weight: 600;">Positive Feedback</span>
            </div>
        </div>

        <div id="latest-feedback-container" style="background-color: #ECFDF5; border-radius: 10px; padding: 15px; margin-bottom: 20px; border-left: 4px solid #10B981; display: none;">
            <h3 style="margin-top: 0; color: #065F46; font-size: 1rem; font-weight: 600;">Latest Positive Feedback</h3>
            <div id="latest-feedback-comment" style="font-style: italic; font-size: 1rem; color: #1F2937; margin: 10px 0;"></div>
            <div style="display: flex; justify-content: space-between; color: #6B7280; font-size: 0.8rem;">
                <span id="latest-feedback-date"></span>
                <span id="latest-feedback-score" style="color: #10b981; font-weight: 600;"></span>
                <span id="latest-feedback-name"></span>
            </div>
        </div>
        <div>
            <a href="#csat-table-widget">View More</a>
        </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 convert score (2-4 range) to percentage (0-100%)
    function scoreToPercentage(score) {
        // Ensure score is within bounds
        score = Math.max(2, Math.min(4, parseFloat(score) || 0));
        return ((score - 2) / 2) * 100;
    }

    // Function to update the CSAT table with data
    function updateCSATTable(data) {
        try {
            // Get the table body
            const tableBody = document.querySelector('#csat-table tbody');
            if (!tableBody) {
                console.error('Table body not found');
                return;
            }
            
            // Destroy existing DataTable if it exists and clear existing rows
            // Has to be done in this order or the data doesn't actually clear
            if ($.fn.DataTable.isDataTable('#csat-table')) {
                $('#csat-table').DataTable().destroy();
            }
            tableBody.innerHTML = '';
            
            // If no data or no responses, show a "no surveys" message
            if (!data || !data.responses || data.responses.length === 0) {
                const row = document.createElement('tr');
                row.style.backgroundColor = '#ffffff';
                
                const nameCell = document.createElement('td');
                nameCell.className = 'text-center';
                nameCell.textContent = 'No survey responses';
                nameCell.style.padding = '10px';
                nameCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(nameCell);
                
                // Always create company column cell with the csat-company-column class
                const companyCell = document.createElement('td');
                companyCell.className = 'text-center csat-company-column';
                companyCell.textContent = '-';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Add empty cells for other columns
                for (let i = 0; i < 3; i++) {
                    const emptyCell = document.createElement('td');
                    emptyCell.className = 'text-center';
                    emptyCell.textContent = '-';
                    emptyCell.style.padding = '10px';
                    emptyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(emptyCell);
                }
                
                tableBody.appendChild(row);
                return;
            }
            
            // Use the responses array directly from the API data
            const responses = data.responses;
            
            // Add rows for each response with comments
            responses.forEach((response, index) => {
                // Only add the row if response.comment is not null
                if (response.comment) {
                    const row = document.createElement('tr');
                    
                    // Apply row background styling based on score
                    if (response.score === 4) {
                        // No special background for positive (green border only)
                        row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#f8fafc';
                    } else if (response.score === 3) {
                        // Yellow/orange background for neutral
                        row.style.backgroundColor = '#FFFBEB';
                    } else if (response.score === 2) {
                        // Red background for negative
                        row.style.backgroundColor = '#FEF2F2';
                    } else {
                        // Default alternating colors
                        row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#f8fafc';
                    }
                    
                    // Name cell (customer_name)
                    const nameCell = document.createElement('td');
                    nameCell.textContent = response.customer_name || 'N/A';
                    nameCell.style.padding = '10px';
                    nameCell.style.borderBottom = '1px solid #e2e8f0';
                    nameCell.style.borderTopLeftRadius = '10px';
                    nameCell.style.borderBottomLeftRadius = '10px';
                    // Apply styling based on score
                    if (response.score === 4) {
                        // Green styling for score 4 (positive)
                        nameCell.style.borderLeft = '4px solid #10B981';
                    } else if (response.score === 3) {
                        // Yellow/orange styling for score 3 (neutral)
                        nameCell.style.borderLeft = '4px solid #F59E0B';
                    } else if (response.score === 2) {
                        // Red styling for score 2 (negative)
                        nameCell.style.borderLeft = '4px solid #EF4444';
                    }
                    row.appendChild(nameCell);
                
                    // Company cell
                    const companyCell = document.createElement('td');
                    companyCell.className = 'csat-company-column';
                    companyCell.textContent = response.company || 'N/A';
                    companyCell.style.padding = '10px';
                    companyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(companyCell);
                    
                    // Score cell
                    const scoreCell = document.createElement('td');
                    // Replace numeric scores with emoji faces
                    if (response.score === 4) {
                        scoreCell.textContent = '\uD83D\uDE03'; // Smiling face 😃 (U+1F603)
                    } else if (response.score === 3) {
                        scoreCell.textContent = '\uD83D\uDE10'; // Neutral face 😐 (U+1F610)
                    } else if (response.score === 2) {
                        scoreCell.textContent = '\uD83D\uDE41'; // Frowning face ☹ (U+1F641)
                    } else {
                        scoreCell.textContent = response.score || 'N/A';
                    }
                    scoreCell.style.padding = '10px';
                    scoreCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(scoreCell);
                    
                    // Comment cell
                    const commentCell = document.createElement('td');
                    commentCell.textContent = response.comment || 'No comment provided';
                    commentCell.style.padding = '10px';
                    commentCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(commentCell);
                    
                    // Date cell
                    const dateCell = document.createElement('td');
                    const createdDate = response.created_at ? new Date(response.created_at).toLocaleDateString("en-US", { year: "numeric", month: '2-digit', day: '2-digit' }) : 'N/A';
                    dateCell.textContent = createdDate;
                    dateCell.style.padding = '10px';
                    dateCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(dateCell);
                
                    tableBody.appendChild(row);
                }
            });
                        
            // Initialize DataTable if jQuery and DataTables are available
            if (typeof $ !== 'undefined' && $.fn.DataTable) {
                var csatCompact = window._tablesCompactMode || false;
                var csatColDefs = [
                    {
                        targets: 0, // Name column
                        className: csatCompact ? undefined : 'all'
                    },
                    {
                        targets: 1, // Company column
                        className: csatCompact ? undefined : 'all',
                        columnControl: [
                            'order',
                            ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                        ]
                    }
                ];
                if (csatCompact) {
                    csatColDefs.push({ targets: [2, 3, 4], className: 'none' });
                } else {
                    csatColDefs.push(
                        {
                            targets: 2, // Score column
                            className: 'min-tablet',
                            type: 'string',
                            columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']]
                        },
                        {
                            targets: 3, // Response column
                            className: 'min-desktop'
                        },
                        {
                            targets: 4, // Date column
                            className: 'min-tablet'
                        }
                    );
                }
                $('#csat-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: {
                        indicators: false
                    },
                    info: true,
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    language: {
                        emptyTable: "No surveys found",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "→",
                            previous: "←"
                        },
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        lengthMenu: "Show _MENU_ entries"
                    },
                    order: csatCompact ? [[1, 'asc']] : [[4, 'desc']],
                    columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                    columnDefs: csatColDefs,
                    responsive: csatCompact ? true : {
                        breakpoints: [
                            { name: 'desktop', width: Infinity },
                            { name: 'tablet', width: 1200 },
                            { name: 'mobile', width: 900 }
                        ]
                    },
                    // Custom styling for DataTables elements
                    initComplete: function() {
                        // Style the DataTables wrapper
                        $('.dataTables_wrapper').css({
                            'font-family': "'Quicksand', 'Helvetica Neue', Arial, sans-serif",
                            'color': '#435364',
                            'margin-top': '10px'
                        });
                        
                        // Style the search input
                        $('.dataTables_filter input').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style the length selector
                        $('.dataTables_length select').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style pagination buttons
                        $('.dataTables_paginate').css({
                            'margin-top': '10px'
                        });
                        
                        $('.dataTables_paginate .paginate_button').css({
                            'border-radius': '5px',
                            'padding': '5px 10px',
                            'margin': '0 2px',
                            'border': '1px solid #e2e8f0',
                            'background-color': '#f8fafc',
                            'color': '#435364 !important'
                        });
                        
                        $('.dataTables_paginate .paginate_button.current').css({
                            'background-color': '#00ADAD !important',
                            'color': 'white !important',
                            'border': '1px solid #00ADAD'
                        });
                        
                        $('.dataTables_paginate .paginate_button:hover').css({
                            'background-color': '#e2e8f0 !important',
                            'color': '#435364 !important'
                        });
                    }
                });
            
            // Hide loading animation
            hideCSATTableLoading();
            }
        } catch (error) {
            hideCSATTableLoading();
        }
    }

    // Function to update the CSAT widget data with the API response
    function updateCSATWidgetData(data) {
        try {
            // Convert initial server-rendered score to percentage
            document.addEventListener('DOMContentLoaded', function() {
                const initialScoreElement = document.getElementById('satisfaction-score-value');
                if (initialScoreElement && initialScoreElement.textContent) {
                    const initialScore = parseFloat(initialScoreElement.textContent) || 0;
                    const initialPercentage = scoreToPercentage(initialScore);
                    initialScoreElement.textContent = `${initialPercentage.toFixed(1)}%`;
                }
            });
            // Update average score
            const satisfactionScoreElement = document.getElementById('satisfaction-score-value');
            if (satisfactionScoreElement) {
                const averageScore = data.average_score || 0;
                // Convert score (2-4 range) to percentage (0-100%)
                const percentage = scoreToPercentage(averageScore);
                satisfactionScoreElement.textContent = `${percentage.toFixed(1)}%`;
                
                // Update the background color based on the average score
                const countItem = document.getElementById('satisfaction-score-container');
                if (countItem) {
                    if (averageScore >= 4) {
                        countItem.style.backgroundColor = '#03FB8D';
                        countItem.style.color = '#1B545F';
                    } else if (averageScore >= 3) {
                        countItem.style.backgroundColor = '#03FB8D';
                        countItem.style.color = '#1B545F';
                        // countItem.style.backgroundColor = '#FFC107';
                        // countItem.style.color = '#fff';
                    } else {
                        countItem.style.backgroundColor = '#03FB8D';
                        countItem.style.color = '#1B545F';
                        // countItem.style.backgroundColor = '#FF5252';
                        // countItem.style.color = '#fff';
                    }
                }
            }
            
            // Update response count
            const responseCountElement = document.getElementById('response-count-value');
            if (responseCountElement) {
                responseCountElement.textContent = data.response_count || 0;
            }
            
            // Calculate and update positive feedback count (scores >= 4)
            const positiveCountElement = document.getElementById('positive-count-value');
            if (positiveCountElement && data.responses) {
                const positiveCount = data.responses.filter(response => response.score >= 4).length;
                positiveCountElement.textContent = positiveCount;
            }
            
            // Update latest positive feedback
            const latestFeedbackContainer = document.getElementById('latest-feedback-container');
            const latestFeedbackComment = document.getElementById('latest-feedback-comment');
            const latestFeedbackDate = document.getElementById('latest-feedback-date');
            const latestFeedbackScore = document.getElementById('latest-feedback-score');
            const latestFeedbackName = document.getElementById('latest-feedback-name');
            
            if (latestFeedbackContainer && latestFeedbackComment && latestFeedbackDate && latestFeedbackScore && latestFeedbackName && data.responses) {
                // Filter for positive responses with comments
                const positiveResponses = data.responses.filter(response => 
                    response.score >= 4 && 
                    response.comment && 
                    response.comment !== 'No comment provided'
                );
                
                if (positiveResponses.length > 0) {
                    // Sort by created_at date (newest first)
                    positiveResponses.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
                    const latestPositive = positiveResponses[0];
                    
                    // Update the latest feedback section
                    latestFeedbackComment.textContent = `"${latestPositive.comment}"`;
                    latestFeedbackDate.textContent = latestPositive.created_at ? latestPositive.created_at.split('T')[0] : 'Unknown Date';
                    latestFeedbackScore.textContent = `Score: ${latestPositive.score}`;
                    latestFeedbackName.textContent = latestPositive.customer_name || '';
                    
                    // Show the container
                    latestFeedbackContainer.style.display = 'block';
                } else {
                    // Hide the container if no positive responses with comments
                    latestFeedbackContainer.style.display = 'none';
                }
            }
            // Hide loading animation
            hideCSATLoading();
            hideCSATTableLoading();
            
        } catch (error) {
            hideCSATLoading();
            hideCSATTableLoading();
        }
    }
            
    // Function to show loading animation
    function showCSATLoading() {
        const loadingElement = document.getElementById('csat-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideCSATLoading() {
        const loadingElement = document.getElementById('csat-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }
            
    // Function to show loading animation
    function showCSATTableLoading() {
        const loadingCSATTableElement = document.getElementById('csat-table-loading');
        if (loadingCSATTableElement) {
            loadingCSATTableElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideCSATTableLoading() {
        const loadingCSATTableElement = document.getElementById('csat-table-loading');
        if (loadingCSATTableElement) {
            loadingCSATTableElement.classList.remove('active');
        }
    }
            
    // Function to fetch CSAT data from the API
    function fetchCSATData() {
        // Show loading animation
        showCSATLoading();
        showCSATTableLoading();
        
        const endDate = new Date();
        const oneHundredEightyDaysAgo = new Date();
        endDate.setDate(endDate.getDate())
        oneHundredEightyDaysAgo.setDate(endDate.getDate() - 180);
        
        // 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}`;
        };
        
        // Start with base API URL
        let apiUrl = '{{ base_api_url }}' + '/api/v1/dashboard/csat';
        
        // 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
                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();
        

        // Format dates before appending to params
        params.append('startdate', formatDate(oneHundredEightyDaysAgo));
        params.append('enddate', formatDate(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 => {
            updateCSATWidgetData(data);
            updateCSATTable(data);
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('CSAT request cancelled - user switched companies');
                return;
            }
            hideCSATLoading();
            hideCSATTableLoading();
        });
    }

    // Global function to reinitialize CSAT table when drawer opens/closes
    window.reinitCSATTable = function() {
        if (!$.fn.DataTable.isDataTable('#csat-table')) return;
        
        var compact = window._tablesCompactMode || false;
        
        $('#csat-table').DataTable().destroy();
        
        var colDefs = [];
        if (compact) {
            colDefs = [
                { targets: 0 },
                { targets: 1, columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] },
                { targets: [2, 3, 4], className: 'none' }
            ];
        } else {
            colDefs = [
                { targets: 0, className: 'all' },
                { targets: 1, className: 'all', columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] },
                { targets: 2, className: 'min-tablet', type: 'string', columnControl: ['order', ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']] },
                { targets: 3, className: 'min-desktop' },
                { targets: 4, className: 'min-tablet' }
            ];
        }
        
        $('#csat-table').DataTable({
            paging: true,
            searching: true,
            ordering: { indicators: false },
            info: true,
            pageLength: 10,
            lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            language: {
                emptyTable: "No surveys found",
                paginate: { first: "First", last: "Last", next: "→", previous: "←" },
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                lengthMenu: "Show _MENU_ entries"
            },
            order: compact ? [[1, 'asc']] : [[4, 'desc']],
            columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
            columnDefs: colDefs,
            responsive: compact ? true : {
                breakpoints: [
                    { name: 'desktop', width: Infinity },
                    { name: 'tablet', width: 1200 },
                    { name: 'mobile', width: 900 }
                ]
            }
        });
    };

    document.addEventListener('DOMContentLoaded', function() {        
        // 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
            fetchCSATData();
        });
        
        // Initial data fetch
        fetchCSATData();
    });
</script>