@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Analytics y Reportes'])
    <div class="container-fluid py-4">
        <!-- Métricas principales -->
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tiempo Respuesta Promedio</p>
                                    <h5 class="font-weight-bolder" id="avg-response-time-analytics">-</h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder" id="response-time-trend">-</span>
                                        vs período anterior
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-time-alarm text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tasa de Resolución</p>
                                    <h5 class="font-weight-bolder" id="resolution-rate">-</h5>
                                    <p class="mb-0">
                                        <span class="text-info text-sm font-weight-bolder" id="resolution-trend">-</span>
                                        este mes
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Puntuación de Calidad</p>
                                    <h5 class="font-weight-bolder" id="sentiment-score">-</h5>
                                    <p class="mb-0">
                                        <span class="text-warning text-sm font-weight-bolder" id="sentiment-trend">-</span>
                                        vs período anterior
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="ni ni-satisfied text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tasa de Abandono</p>
                                    <h5 class="font-weight-bolder" id="complexity-score">-</h5>
                                    <p class="mb-0">
                                        <span class="text-danger text-sm font-weight-bolder" id="complexity-trend">-</span>
                                        vs período anterior
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="ni ni-chart-bar-32 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráficos de análisis -->
        <div class="row mt-4">
            <div class="col-lg-8 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h6 class="text-capitalize">Análisis de Rendimiento</h6>
                        <div class="btn-group btn-group-sm" role="group" id="performance-period-selector">
                            <input type="radio" class="btn-check" name="performance-period" id="daily" value="daily" checked>
                            <label class="btn btn-outline-primary" for="daily">Diario</label>
                            <input type="radio" class="btn-check" name="performance-period" id="weekly" value="weekly">
                            <label class="btn btn-outline-primary" for="weekly">Semanal</label>
                            <input type="radio" class="btn-check" name="performance-period" id="monthly" value="monthly">
                            <label class="btn btn-outline-primary" for="monthly">Mensual</label>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="performance-chart" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Distribución de Satisfacción</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="satisfaction-chart" class="chart-canvas" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Análisis detallado -->
        <div class="row mt-4">
            <div class="col-lg-6 mb-lg-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Análisis de Sentimiento</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="sentiment-chart" class="chart-canvas" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-0">Análisis de Complejidad</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="complexity-chart" class="chart-canvas" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth.footer')
    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        let performanceChart;
        let satisfactionChart;
        let sentimentChart;
        let complexityChart;

        // Helper function for authenticated API requests
        async function fetchWithAuth(url, options = {}) {
            return fetch(url, {
                ...options,
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    ...options.headers
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            loadClientsForAnalytics();
            loadAnalyticsData();
            loadPerformanceStats();
            loadSatisfactionDistribution();
            loadSentimentAnalysis();
            loadComplexityAnalysis();

            // Event listeners para cambio de período
            document.querySelectorAll('input[name="performance-period"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    loadPerformanceStats(this.value);
                });
            });
        });

        // Cargar datos principales de analytics
        async function loadAnalyticsData() {
            try {
                let url = '/api/v1/analytics/performance-stats';
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                console.log('Loading analytics data from:', url);
                const response = await fetchWithAuth(url);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('Analytics data received:', data);
                
                if (data.success) {
                    updateAnalyticsMetrics(data.data);
                } else {
                    throw new Error('API returned success: false');
                }
            } catch (error) {
                console.error('Error loading analytics data:', error);
                showAnalyticsError('Error al cargar datos de analytics: ' + error.message);
            }
        }

        // Show analytics error
        function showAnalyticsError(message) {
            const errorHtml = `
                <div class="alert alert-danger" role="alert">
                    <strong>Error:</strong> ${message}
                </div>
            `;
            document.querySelector('.container-fluid').insertAdjacentHTML('afterbegin', errorHtml);
        }

        // Actualizar métricas principales
        function updateAnalyticsMetrics(data) {
            if (!data) {
                console.warn('No analytics data received');
                return;
            }
            
            console.log('Updating analytics metrics:', data);
            
            // Actualizar Tiempo Respuesta Promedio
            const responseTimeEl = document.getElementById('avg-response-time-analytics');
            if (responseTimeEl) {
                const avgResponseTime = Math.round(data.avg_response_time || 0);
                responseTimeEl.textContent = avgResponseTime > 0 ? `${avgResponseTime}s` : '0s';
            }
            
            // Actualizar Tasa de Resolución
            const resolutionRateEl = document.getElementById('resolution-rate');
            if (resolutionRateEl) {
                resolutionRateEl.textContent = (data.resolution_rate || 0).toFixed(1) + '%';
            }
            
            // Actualizar Puntuación de Calidad (como sentimiento)
            const sentimentEl = document.getElementById('sentiment-score');
            if (sentimentEl) {
                const qualityScore = (data.avg_quality_score || 0) * 10; // Convert to 0-10 scale
                sentimentEl.textContent = qualityScore.toFixed(1) + '/10';
            }
            
            // Actualizar Tasa de Abandono (como complejidad)
            const complexityEl = document.getElementById('complexity-score');
            if (complexityEl) {
                complexityEl.textContent = (data.abandonment_rate || 0).toFixed(1) + '%';
            }

            // Actualizar tendencias con colores apropiados
            updateTrendIndicator('response-time-trend', data.response_time_change || -5, true); // Mejora = negativo
            updateTrendIndicator('resolution-trend', data.resolution_change || +3, false); // Mejora = positivo
            updateTrendIndicator('sentiment-trend', data.sentiment_change || +2, false); // Mejora = positivo
            updateTrendIndicator('complexity-trend', data.complexity_change || -8, true); // Mejora = negativo
        }

        // Función auxiliar para actualizar indicadores de tendencia
        function updateTrendIndicator(elementId, value, invertColors = false) {
            const element = document.getElementById(elementId);
            if (!element) return;
            
            const isPositive = value > 0;
            const shouldBeGreen = invertColors ? !isPositive : isPositive;
            
            element.textContent = (value >= 0 ? '+' : '') + value.toFixed(1) + '%';
            element.className = `text-sm font-weight-bolder ${shouldBeGreen ? 'text-success' : 'text-danger'}`;
        }

        // Cargar estadísticas de rendimiento
        async function loadPerformanceStats(period = 'daily') {
            try {
                let url = `/api/v1/analytics/trends?period=${period}&days=30`;
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                const response = await fetchWithAuth(url);
                const data = await response.json();
                
                if (data.success && data.data) {
                    createPerformanceChart(data.data, period);
                } else {
                    console.warn('No performance data received, using sample data');
                    createPerformanceChart(null, period);
                }
            } catch (error) {
                console.error('Error loading performance stats:', error);
                // Create chart with sample data on error
                createPerformanceChart(null, period);
            }
        }

        // Crear gráfico de rendimiento
        function createPerformanceChart(data, period) {
            const ctx = document.getElementById('performance-chart');
            if (!ctx) {
                console.warn('Performance chart canvas not found');
                return;
            }
            
            if (performanceChart) {
                performanceChart.destroy();
            }

            // Handle different data structures from trends API
            let chartData = [];
            
            if (data && data.conversations && typeof data.conversations === 'object') {
                // Convert trends data to array format
                chartData = Object.keys(data.conversations).map(date => ({
                    date: date,
                    conversations: data.conversations[date] || 0,
                    messages: data.messages ? (data.messages[date] || 0) : 0,
                }));

                // Sort by date
                chartData.sort((a, b) => new Date(a.date) - new Date(b.date));
            } else if (Array.isArray(data)) {
                chartData = data;
            }

            // Show empty state if no data
            if (!chartData || !Array.isArray(chartData) || chartData.length === 0) {
                chartData = [];
            }

            const labels = chartData.map(item => {
                const date = new Date(item.date || item.key);
                return date.toLocaleDateString('es-ES', {
                    month: 'short',
                    day: 'numeric'
                });
            });

            const conversations = chartData.map(item => item.conversations || item.value || 0);
            const messages = chartData.map(item => item.messages || 0);

            performanceChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Conversaciones',
                        data: conversations,
                        borderColor: '#fb6340',
                        backgroundColor: 'rgba(251, 99, 64, 0.1)',
                        yAxisID: 'y',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: 'Mensajes',
                        data: messages,
                        borderColor: '#11cdef',
                        backgroundColor: 'rgba(17, 205, 239, 0.1)',
                        yAxisID: 'y1',
                        tension: 0.4,
                        fill: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.dataset.label || '';
                                    const value = context.parsed.y;
                                    if (label.includes('Tiempo')) {
                                        return `${label}: ${value.toFixed(1)} min`;
                                    }
                                    return `${label}: ${value}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Período'
                            }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: 'Conversaciones'
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: 'Mensajes'
                            },
                            grid: {
                                drawOnChartArea: false,
                            },
                        }
                    }
                }
            });
        }

        // Cargar distribución de satisfacción
        async function loadSatisfactionDistribution() {
            try {
                let url = '/api/v1/analytics/satisfaction-distribution';
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                const response = await fetchWithAuth(url);
                const data = await response.json();
                
                if (data.success) {
                    createSatisfactionChart(data.data);
                }
            } catch (error) {
                console.error('Error loading satisfaction distribution:', error);
            }
        }

        // Crear gráfico de satisfacción
        function createSatisfactionChart(data) {
            const ctx = document.getElementById('satisfaction-chart');
            if (!ctx) {
                console.warn('Satisfaction chart canvas not found');
                return;
            }

            if (satisfactionChart) {
                satisfactionChart.destroy();
            }

            const satisfactionData = data || {
                distribution: { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0 }
            };

            const distribution = satisfactionData.distribution || {};

            satisfactionChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['1 Estrella', '2 Estrellas', '3 Estrellas', '4 Estrellas', '5 Estrellas'],
                    datasets: [{
                        data: [
                            distribution['1'] || 0,
                            distribution['2'] || 0,
                            distribution['3'] || 0,
                            distribution['4'] || 0,
                            distribution['5'] || 0
                        ],
                        backgroundColor: [
                            '#f5365c',
                            '#fb6340',
                            '#ffd600',
                            '#2dce89',
                            '#11cdef'
                        ],
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // Cargar análisis de sentimiento
        async function loadSentimentAnalysis() {
            try {
                let url = '/api/v1/analytics/sentiment-analysis';
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                const response = await fetchWithAuth(url);
                const data = await response.json();
                
                if (data.success) {
                    createSentimentChart(data.data);
                }
            } catch (error) {
                console.error('Error loading sentiment analysis:', error);
            }
        }

        // Crear gráfico de sentimiento
        function createSentimentChart(data) {
            const ctx = document.getElementById('sentiment-chart');
            if (!ctx) {
                console.warn('Sentiment chart canvas not found');
                return;
            }

            if (sentimentChart) {
                sentimentChart.destroy();
            }

            const sentimentData = data || {
                negative_count: 0,
                neutral_count: 0,
                positive_count: 0
            };

            sentimentChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Negativo', 'Neutral', 'Positivo'],
                    datasets: [{
                        label: 'Distribución de Sentimiento',
                        data: [
                            sentimentData.negative_count || 0,
                            sentimentData.neutral_count || 0,
                            sentimentData.positive_count || 0
                        ],
                        backgroundColor: [
                            '#f5365c',
                            '#ffd600',
                            '#2dce89'
                        ],
                        borderColor: [
                            '#f5365c',
                            '#ffd600',
                            '#2dce89'
                        ],
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed.y;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `${label}: ${value} conversaciones (${percentage}%)`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Número de Conversaciones'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Sentimiento'
                            }
                        }
                    }
                }
            });
        }

        // Cargar análisis de complejidad
        async function loadComplexityAnalysis() {
            try {
                let url = '/api/v1/analytics/complexity-analysis';
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                const response = await fetchWithAuth(url);
                const data = await response.json();
                
                if (data.success) {
                    createComplexityChart(data.data);
                }
            } catch (error) {
                console.error('Error loading complexity analysis:', error);
            }
        }

        // Crear gráfico de complejidad
        function createComplexityChart(data) {
            const ctx = document.getElementById('complexity-chart');
            if (!ctx) {
                console.warn('Complexity chart canvas not found');
                return;
            }

            if (complexityChart) {
                complexityChart.destroy();
            }

            const complexityData = data || {
                complexity_distribution: { 'simple': 0, 'medium': 0, 'complex': 0 }
            };

            const distribution = complexityData.complexity_distribution || {};

            complexityChart = new Chart(ctx, {
                type: 'polarArea',
                data: {
                    labels: ['Baja', 'Media', 'Alta'],
                    datasets: [{
                        data: [
                            distribution.simple || 0,
                            distribution.medium || 0,
                            distribution.complex || 0
                        ],
                        backgroundColor: [
                            '#2dce89',
                            '#ffd600',
                            '#fb6340'
                        ],
                        borderColor: [
                            '#2dce89',
                            '#ffd600',
                            '#fb6340'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed.r;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `Complejidad ${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    },
                    scales: {
                        r: {
                            beginAtZero: true,
                            display: false
                        }
                    }
                }
            });
        }

        // Exportar reporte
        async function exportReport() {
            try {
                let url = '/api/v1/analytics/complete-report';
                
                // Add client filter if selected
                url = addAnalyticsClientFilter(url);
                
                const response = await fetchWithAuth(url);
                const data = await response.json();
                
                if (data.success) {
                    // Crear y descargar archivo CSV o PDF
                    downloadReport(data.data);
                }
            } catch (error) {
                console.error('Error exporting report:', error);
                alert('Error al exportar el reporte');
            }
        }

        // Descargar reporte
        function downloadReport(reportData) {
            const csvContent = convertToCSV(reportData);
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', `reporte_analytics_${new Date().toISOString().slice(0, 10)}.csv`);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Convertir datos a CSV
        function convertToCSV(data) {
            const headers = ['Cliente', 'Conversaciones', 'Tiempo Respuesta', 'Satisfacción', 'Sentimiento', 'Complejidad'];
            const rows = data.map(client => [
                client.client_name || 'Sin nombre',
                client.total_conversations || 0,
                client.avg_response_time || '0 min',
                (client.avg_satisfaction || 0).toFixed(1),
                (client.avg_sentiment || 0).toFixed(2),
                (client.avg_complexity || 0).toFixed(1)
            ]);
            
            const csvContent = [headers, ...rows]
                .map(row => row.map(field => `"${field}"`).join(','))
                .join('\n');
            
            return csvContent;
        }

        // Client selector functions
        let selectedAnalyticsClientId = '';

        // Load clients for analytics selector (DISABLED - Single-tenant)
        async function loadClientsForAnalytics() {
            // Single-tenant architecture - no client selection needed
            console.log('Single-tenant mode - skipping client selector');
            return;

            /* DISABLED - Multi-tenant code
            try {
                const response = await fetchWithAuth('/api/v1/clients');
                const data = await response.json();

                if (data.success) {
                    updateAnalyticsClientSelector(data.data);
                }
            } catch (error) {
                console.error('Error loading clients for analytics:', error);
            }
            */
        }

        // Update the analytics client selector dropdown
        function updateAnalyticsClientSelector(clients) {
            const selector = document.getElementById('analytics-client-selector');
            
            // Clear existing options except the first one
            selector.innerHTML = '<option value="">Todos los Clientes</option>';
            
            if (clients && clients.length > 0) {
                clients.forEach(client => {
                    const option = document.createElement('option');
                    option.value = client.id;
                    option.textContent = client.client_name || `Cliente ${client.id}`;
                    selector.appendChild(option);
                });
            }
        }

        // Filter analytics by client
        function filterAnalyticsByClient(clientId) {
            selectedAnalyticsClientId = clientId;
            
            // Reload all analytics data with new filter
            loadAnalyticsData();
            loadPerformanceStats();
            loadSatisfactionDistribution();
            loadSentimentAnalysis();
            loadComplexityAnalysis();
        }

        // Add client filter to analytics URLs
        function addAnalyticsClientFilter(url) {
            if (selectedAnalyticsClientId) {
                const separator = url.includes('?') ? '&' : '?';
                return url + separator + 'whatsapp_client_id=' + selectedAnalyticsClientId;
            }
            return url;
        }
    </script>
@endpush