@extends('dashboard.layouts.app')

@section('title', 'Analyse - ' . $sondage->titre . ' - UAC eservices')

@section('page-title', 'Analyse des résultats')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('surveys.index') }}">Sondages</a></li>
    <li class="breadcrumb-item"><a href="{{ route('surveys.show', $sondage) }}">{{ $sondage->titre }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">Analyse</li>
@endsection

@section('styles')
<style>
.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
    margin-bottom: 20px;
}

.chart-toggle {
    margin-bottom: 15px;
}

.chart-toggle .btn {
    margin-right: 5px;
    margin-bottom: 5px;
}

.question-card {
    transition: all 0.3s ease;
}

.question-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.chart-color-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.stats-card {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    border: none;
}

.stats-card .card-body {
    padding: 20px;
}

.stats-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 0.9rem;
    opacity: 0.9;
}
</style>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h4 class="card-title">{{ $sondage->titre }}</h4>
                        <p class="text-muted">{{ $sondage->description }}</p>
                        <small class="text-muted">
                            Période: {{ $sondage->date_debut->format('d/m/Y') }} - {{ $sondage->date_fin->format('d/m/Y') }}
                        </small>
                    </div>
                    <a href="{{ route('surveys.index') }}" class="btn btn-secondary">
                        <i class="mdi mdi-arrow-left"></i> Retour aux sondages
                    </a>
                </div>

                <!-- Statistiques générales -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card stats-card">
                            <div class="card-body text-center">
                                <div class="stats-number">{{ $sondage->questions->count() }}</div>
                                <div class="stats-label">Questions</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stats-card">
                            <div class="card-body text-center">
                                <div class="stats-number">{{ $sondage->questions->sum(function($q) { return $q->reponses->count(); }) }}</div>
                                <div class="stats-label">Réponses totales</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stats-card">
                            <div class="card-body text-center">
                                <div class="stats-number">{{ $sondage->questions->filter(function($q) { return $q->reponses->count() > 0; })->count() }}</div>
                                <div class="stats-label">Questions répondues</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stats-card">
                            <div class="card-body text-center">
                                <div class="stats-number">{{ $sondage->questions->max(function($q) { return $q->reponses->count(); }) ?? 0 }}</div>
                                <div class="stats-label">Max réponses/question</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section d'export -->
                {{-- <div class="row mb-4">
                    <div class="col-12">
                        <div class="card border-secondary">
                            <div class="card-header bg-secondary text-white">
                                <h5 class="mb-0">
                                    <i class="mdi mdi-file-export"></i>
                                    Exporter l'analyse
                                </h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted mb-3">
                                    Téléchargez les résultats d'analyse au format Excel (avec mise en forme et graphiques).
                                </p>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('surveys.export.excel', $sondage) }}"
                                        class="btn btn-success btn-lg"
                                        onclick="return confirmExport('Excel')">
                                        <i class="mdi mdi-file-excel"></i>
                                        Exporter en Excel
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}

                @if(empty($analysis))
                    <div class="alert alert-info">
                        <i class="mdi mdi-information"></i>
                        Aucune donnee d'analyse disponible pour ce sondage.
                    </div>
                @else
                    @foreach($analysis as $questionAnalysis)
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    {{ $questionAnalysis['question']->texte }}
                                    <small class="text-muted">({{ $questionAnalysis['total_responses'] }} réponses)</small>
                                </h5>
                            </div>
                            <div class="card-body">
                                @if($questionAnalysis['question']->type === 'TEXTE_LIBRE')
                                    <!-- Analyse IA des réponses texte libre -->
                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0">
                                                <i class="mdi mdi-brain me-2"></i>
                                                Analyse IA des réponses
                                            </h6>
                                            <button type="button"
                                                    class="btn btn-primary btn-sm analyze-ai-btn"
                                                    data-question-id="{{ $questionAnalysis['question']->id }}"
                                                    id="analyze-btn-{{ $questionAnalysis['question']->id }}">
                                                <i class="mdi mdi-brain"></i>
                                                Analyser avec l'IA
                                            </button>
                                        </div>
                                        <div id="ai-analysis-container-{{ $questionAnalysis['question']->id }}" class="mt-3" style="display: none;">
                                            <!-- L'analyse IA sera chargée ici via AJAX -->
                                        </div>
                                    </div>

                                    <!-- Liste des réponses texte libre -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">
                                                <i class="mdi mdi-text me-2"></i>
                                                Réponses individuelles ({{ $questionAnalysis['total_responses'] }})
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-striped">
                                                    <thead>
                                                        <tr>
                                                            <th>Réponse</th>
                                                            <th>Date</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse($questionAnalysis['responses'] as $response)
                                                            <tr>
                                                                <td>{{ $response }}</td>
                                                                <td>{{ now()->format('d/m/Y H:i') }}</td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="2" class="text-center text-muted">Aucune réponse</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    @if(empty($questionAnalysis['option_counts']))
                                        <div class="alert alert-warning">
                                            <i class="mdi mdi-alert"></i>
                                            Aucune option disponible pour cette question.
                                        </div>
                                    @else
                                        <!-- Graphiques pour les questions à choix -->
                                        <div class="row">
                                            <div class="col-md-8">
                                                <!-- Conteneur du graphique -->
                                                <div class="chart-container">
                                                    <canvas id="chart-{{ $questionAnalysis['question']->id }}" width="400" height="200"></canvas>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h6 class="mb-0">Détails des réponses</h6>
                                                    </div>
                                                    <div class="card-body p-0">
                                                        <div class="list-group list-group-flush">
                                                            @foreach($questionAnalysis['option_counts'] as $index => $optionCount)
                                                                <div class="list-group-item px-3 py-2">
                                                                    <div class="d-flex justify-content-between align-items-center">
                                                                        <div class="d-flex align-items-center">
                                                                            <div class="chart-color-indicator me-2"
                                                                                style="width: 12px; height: 12px; background-color: {{ $chartColors[$index % count($chartColors)] }}; border-radius: 2px;"></div>
                                                                            <span class="small">{{ $optionCount['option']->texte }}</span>
                                                                        </div>
                                                                        <div class="text-end">
                                                                            <div class="fw-bold">{{ $optionCount['count'] }}</div>
                                                                            <div class="small text-muted">{{ number_format($optionCount['percentage'], 1) }}%</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="progress mt-2" style="height: 6px;">
                                                                        <div class="progress-bar" role="progressbar"
                                                                            style="width: {{ $optionCount['percentage'] }}%; background-color: {{ $chartColors[$index % count($chartColors)] }} !important;"
                                                                            aria-valuenow="{{ $optionCount['percentage'] }}"
                                                                            aria-valuemin="0" aria-valuemax="100">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @endforeach
                @endif

                @if(empty($analysis))
                    <div class="text-center py-5">
                        <i class="mdi mdi-chart-line-variant fs-1 text-muted"></i>
                        <h5 class="mt-3">Aucune donnee disponible</h5>
                        <p class="text-muted">Ce sondage n'a encore recu aucune reponse.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Fonction de confirmation d'export
function confirmExport(format) {
    const message = 'L\'export Excel inclura les données d\'analyse avec mise en forme et couleurs. Le fichier sera généré et téléchargé automatiquement.';

    return confirm(`Confirmer l'export en ${format} ?\n\n${message}\n\nCette opération peut prendre quelques instants selon la taille des données.`);
}
</script>
<script>
const analysisData = @json($analysis);
const chartColors = [
    '#007bff', '#28a745', '#dc3545', '#ffc107',
    '#6f42c1', '#e83e8c', '#fd7e14', '#20c997',
    '#6c757d', '#17a2b8'
];

// Gestionnaire pour l'analyse IA
$(document).on('click', '.analyze-ai-btn', function() {
    const button = $(this);
    const questionId = button.data('question-id');
    const container = $('#ai-analysis-container-' + questionId);

    // Désactiver le bouton et afficher le loader
    button.prop('disabled', true).html('<i class="mdi mdi-loading mdi-spin"></i> Analyse en cours...');

    // Faire l'appel AJAX
    $.ajax({
        url: '{{ route("surveys.analyze.ai", ":questionId") }}'.replace(':questionId', questionId),
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                // Afficher l'analyse
                container.html(response.html).show();

                // Initialiser les graphiques ApexCharts
                initializeAIAnalysisCharts(questionId, response.analysis);
            } else {
                container.html(`
                    <div class="alert alert-danger">
                        <i class="mdi mdi-alert-circle"></i>
                        Erreur lors de l'analyse: ${response.error || 'Erreur inconnue'}
                    </div>
                `).show();
            }
        },
        error: function(xhr) {
            let errorMessage = 'Erreur lors de l\'analyse IA';
            if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            }
            container.html(`
                <div class="alert alert-danger">
                    <i class="mdi mdi-alert-circle"></i>
                    ${errorMessage}
                </div>
            `).show();
        },
        complete: function() {
            // Réactiver le bouton
            button.prop('disabled', false).html('<i class="mdi mdi-brain"></i> Analyser avec l\'IA');
        }
    });
});

// Fonction pour initialiser les graphiques d'analyse IA
function initializeAIAnalysisCharts(questionId, analysis) {
    if (!analysis || !analysis.chart_data) return;

    const chartData = analysis.chart_data;

    // Graphique des thèmes (camembert)
    if (chartData.themes_pie && chartData.themes_pie.labels.length > 0) {
        const themesOptions = {
            series: chartData.themes_pie.data,
            chart: {
                type: 'pie',
                height: 300,
                fontFamily: 'Nunito, sans-serif'
            },
            labels: chartData.themes_pie.labels,
            colors: chartData.themes_pie.colors,
            legend: {
                position: 'bottom',
                fontSize: '14px'
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return value + '%';
                    }
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };
        const themesChart = new ApexCharts(document.querySelector(`#themes-chart-${questionId}`), themesOptions);
        themesChart.render();
    }

    // Graphique des sentiments (barres)
    if (chartData.sentiment_bar && chartData.sentiment_bar.labels.length > 0) {
        const sentimentOptions = {
            series: [{
                name: 'Pourcentage',
                data: chartData.sentiment_bar.data
            }],
            chart: {
                type: 'bar',
                height: 300,
                fontFamily: 'Nunito, sans-serif'
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    borderRadius: 4
                }
            },
            colors: chartData.sentiment_bar.colors,
            dataLabels: {
                enabled: true,
                formatter: function(value) {
                    return value + '%';
                }
            },
            xaxis: {
                categories: chartData.sentiment_bar.labels,
                labels: {
                    formatter: function(value) {
                        return value + '%';
                    }
                }
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return value + '%';
                    }
                }
            }
        };
        const sentimentChart = new ApexCharts(document.querySelector(`#sentiment-chart-${questionId}`), sentimentOptions);
        sentimentChart.render();
    }

    // Graphique des mots-clés (colonnes)
    if (chartData.keywords_bar && chartData.keywords_bar.labels.length > 0) {
        const keywordsOptions = {
            series: [{
                name: 'Fréquence',
                data: chartData.keywords_bar.data
            }],
            chart: {
                type: 'bar',
                height: 300,
                fontFamily: 'Nunito, sans-serif'
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    columnWidth: '60%'
                }
            },
            colors: chartData.keywords_bar.colors,
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: chartData.keywords_bar.labels,
                labels: {
                    rotate: -45,
                    style: {
                        fontSize: '12px'
                    }
                }
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return value + ' occurrence(s)';
                    }
                }
            }
        };
        const keywordsChart = new ApexCharts(document.querySelector(`#keywords-chart-${questionId}`), keywordsOptions);
        keywordsChart.render();
    }
}

$(document).ready(function() {
    console.log('=== DEBUG: DOM Ready ===');
    console.log('Chart.js chargé:', typeof Chart !== 'undefined');
    console.log('jQuery chargé:', typeof $ !== 'undefined');
    console.log('Données d\'analyse:', analysisData);

    setTimeout(function() {
        console.log('=== Début initialisation des graphiques ===');

        if (!analysisData || analysisData.length === 0) {
            console.log('Aucune donnée d\'analyse disponible');
            return;
        }

        // Vérifie la présence des canvas dans le DOM
        const allCanvas = document.querySelectorAll('canvas[id^="chart-"]');
        console.log('Canvas trouvés dans le DOM:', allCanvas.length);
        allCanvas.forEach(canvas => console.log('Canvas ID:', canvas.id));

        // Crée les graphiques pour chaque question
        analysisData.forEach(function(questionData, index) {
            console.log(`\n--- Question ${index + 1} ---`);
            console.log('Texte:', questionData.question.texte);
            console.log('Type:', questionData.question.type);

            if (questionData.question.type === 'TEXTE_LIBRE') {
                console.log('texte libre - pas de graphique');
                return;
            }

            if (!questionData.option_counts || questionData.option_counts.length === 0) {
                console.log('Aucune option pour cette question');
                return;
            }

            console.log('Options disponibles:', questionData.option_counts.length);

            const canvasId = 'chart-' + questionData.question.id;
            const canvas = document.getElementById(canvasId);

            console.log('Recherche canvas:', canvasId);
            console.log('Canvas trouvé:', !!canvas);

            if (!canvas) {
                console.error('Canvas non trouvé:', canvasId);
                return;
            }

            try {
                const labels = questionData.option_counts.map(item => item.option.texte);
                const data = questionData.option_counts.map(item => item.count);

                const chart = new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Réponses',
                            data: data,
                            backgroundColor: chartColors.slice(0, data.length).map(color => color + 'CC'),
                            borderColor: chartColors.slice(0, data.length),
                            borderWidth: 2,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const value = context.parsed.x;
                                        const percentage = questionData.option_counts[context.dataIndex].percentage;
                                        return `${context.label}: ${value} (${percentage.toFixed(1)}%)`;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                beginAtZero: true,
                                ticks: { stepSize: 1 }
                            },
                            y: {
                                grid: { display: false }
                            }
                        }
                    }
                });

            } catch (error) {
                console.error('Erreur création graphique:', error);
                console.error('Stack trace:', error.stack);
            }
        });

    }, 500);

});
</script>
@endpush