{% extends 'dashboard/base.html.twig' %}

{% block title %}Mes Statistiques - Dashboard{% endblock %}

{% block analytics_page_type %}dashboard{% endblock %}
{% block analytics_member_id %}{{ member.id }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .stats-card.secondary {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .stats-card.success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .stats-card.warning {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        .stats-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .stats-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .period-selector {
            background: white;
            border-radius: 10px;
            padding: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
        
        .period-btn {
            margin: 0 0.25rem;
        }
        
        .conversion-metric {
            text-align: center;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 10px;
            margin-bottom: 1rem;
        }
        
        .trend-indicator {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 20px;
            margin-left: 0.5rem;
        }
        
        .trend-up {
            background: #d4edda;
            color: #155724;
        }
        
        .trend-down {
            background: #f8d7da;
            color: #721c24;
        }
        
        .trend-stable {
            background: #fff3cd;
            color: #856404;
        }
    </style>
{% endblock %}

{% block dashboard_content %}
<div class="row">
    <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="fas fa-chart-line me-2"></i>
                    Mes Statistiques
                </h1>
                <div>
                    <a href="{{ path('dashboard_statistics_detailed') }}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-chart-bar me-1"></i>
                        Vue détaillée
                    </a>
                    <a href="{{ path('dashboard_statistics_export', {period: current_period}) }}" class="btn btn-success">
                        <i class="fas fa-download me-1"></i>
                        Exporter
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Sélecteur de période -->
    <div class="period-selector">
        <div class="d-flex flex-wrap align-items-center">
            <span class="me-3 fw-bold">Période :</span>
            <div class="btn-group" role="group">
                <a href="{{ path('dashboard_statistics_index', {period: '7d'}) }}" 
                   class="btn {{ current_period == '7d' ? 'btn-primary' : 'btn-outline-primary' }} period-btn">
                    7 jours
                </a>
                <a href="{{ path('dashboard_statistics_index', {period: '30d'}) }}" 
                   class="btn {{ current_period == '30d' ? 'btn-primary' : 'btn-outline-primary' }} period-btn">
                    30 jours
                </a>
                <a href="{{ path('dashboard_statistics_index', {period: '90d'}) }}" 
                   class="btn {{ current_period == '90d' ? 'btn-primary' : 'btn-outline-primary' }} period-btn">
                    90 jours
                </a>
                <a href="{{ path('dashboard_statistics_index', {period: 'this_month'}) }}" 
                   class="btn {{ current_period == 'this_month' ? 'btn-primary' : 'btn-outline-primary' }} period-btn">
                    Ce mois
                </a>
                <a href="{{ path('dashboard_statistics_index', {period: 'last_month'}) }}" 
                   class="btn {{ current_period == 'last_month' ? 'btn-primary' : 'btn-outline-primary' }} period-btn">
                    Mois dernier
                </a>
            </div>
        </div>
    </div>

    <!-- KPIs Rapides -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-value">{{ quick_stats.this_month.total_views | number_format }}</div>
                <div class="stats-label">
                    <i class="fas fa-eye me-1"></i>
                    Vues ce mois
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card secondary">
                <div class="stats-value">{{ quick_stats.this_month.total_clicks | number_format }}</div>
                <div class="stats-label">
                    <i class="fas fa-mouse-pointer me-1"></i>
                    Clics ce mois
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card success">
                <div class="stats-value">{{ quick_stats.this_month.total_messages_received | number_format }}</div>
                <div class="stats-label">
                    <i class="fas fa-envelope me-1"></i>
                    Messages reçus
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card warning">
                <div class="stats-value">{{ quick_stats.this_week.total_interactions | number_format }}</div>
                <div class="stats-label">
                    <i class="fas fa-handshake me-1"></i>
                    Interactions cette semaine
                </div>
            </div>
        </div>
    </div>

    <!-- Vue d'ensemble de la période -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="chart-container">
                <h5 class="mb-3">
                    <i class="fas fa-chart-area me-2"></i>
                    Vue d'ensemble 
                    <small class="text-muted">({{ start_date | date('d/m/Y') }} - {{ end_date | date('d/m/Y') }})</small>
                </h5>
                
                <div class="row">
                    <div class="col-md-8">
                        <canvas id="dailyTrendsChart" width="400" height="200"></canvas>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-12">
                                <div class="conversion-metric">
                                    <div class="h4 mb-1">{{ report.overview.total_views | number_format }}</div>
                                    <div class="text-muted small">Total des vues</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="conversion-metric">
                                    <div class="h4 mb-1">{{ report.overview.total_clicks | number_format }}</div>
                                    <div class="text-muted small">Total des clics</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="conversion-metric">
                                    <div class="h4 mb-1">{{ report.overview.total_messages_received | number_format }}</div>
                                    <div class="text-muted small">Messages reçus</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphiques principaux -->
    <div class="row">
        <!-- Répartition par langue -->
        <div class="col-md-6 mb-4">
            <div class="chart-container">
                <h5 class="mb-3">
                    <i class="fas fa-globe me-2"></i>
                    Répartition par langue
                </h5>
                <canvas id="languageChart" width="400" height="400"></canvas>
            </div>
        </div>

        <!-- Top items -->
        <div class="col-md-6 mb-4">
            <div class="chart-container">
                <h5 class="mb-3">
                    <i class="fas fa-star me-2"></i>
                    Top 5 objets
                </h5>
                <canvas id="topItemsChart" width="400" height="400"></canvas>
            </div>
        </div>
    </div>

    <!-- Métriques de conversion -->
    <div class="row">
        <div class="col-12">
            <div class="chart-container">
                <h5 class="mb-3">
                    <i class="fas fa-exchange-alt me-2"></i>
                    Métriques de performance
                </h5>
                
                <div class="row">
                    {% if report.conversion_metrics is defined %}
                        <div class="col-md-3">
                            <div class="conversion-metric">
                                <div class="h4 mb-1">{{ (report.conversion_metrics.profile_to_contact_rate | default(0)) | number_format(2) }}%</div>
                                <div class="text-muted small">Taux de conversion profil</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="conversion-metric">
                                <div class="h4 mb-1">{{ (report.conversion_metrics.item_view_to_contact_rate | default(0)) | number_format(2) }}%</div>
                                <div class="text-muted small">Taux de conversion objets</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="conversion-metric">
                                <div class="h4 mb-1">{{ (report.conversion_metrics.overall_engagement_rate | default(0)) | number_format(2) }}%</div>
                                <div class="text-muted small">Taux d'engagement global</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="conversion-metric">
                                <div class="h4 mb-1">{{ (report.conversion_metrics.average_item_conversion_rate | default(0)) | number_format(2) }}%</div>
                                <div class="text-muted small">Conversion moyenne objets</div>
                            </div>
                        </div>
                    {% else %}
                        <div class="col-12 text-center text-muted">
                            <p>Pas encore assez de données pour calculer les métriques de conversion.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Comparaison avec période précédente -->
    {% if report.performance_comparison is defined %}
        <div class="row">
            <div class="col-12">
                <div class="chart-container">
                    <h5 class="mb-3">
                        <i class="fas fa-chart-line me-2"></i>
                        Comparaison avec la période précédente
                    </h5>
                    
                    <div class="row">
                        <div class="col-md-8">
                            <canvas id="comparisonChart" width="400" height="200"></canvas>
                        </div>
                        <div class="col-md-4">
                            {% for metric, data in report.performance_comparison %}
                                {% if metric in ['total_views', 'total_clicks', 'total_messages'] %}
                                    <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
                                        <span class="fw-bold">
                                            {{ metric == 'total_views' ? 'Vues' : (metric == 'total_clicks' ? 'Clics' : 'Messages') }}
                                        </span>
                                        <span class="trend-indicator trend-{{ data.trend }}">
                                            {% if data.trend == 'up' %}
                                                <i class="fas fa-arrow-up"></i> +{{ data.change_percentage | number_format(1) }}%
                                            {% elseif data.trend == 'down' %}
                                                <i class="fas fa-arrow-down"></i> {{ data.change_percentage | number_format(1) }}%
                                            {% else %}
                                                <i class="fas fa-equals"></i> 0%
                                            {% endif %}
                                        </span>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Configuration globale Chart.js
        Chart.defaults.font.family = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
        Chart.defaults.color = '#666';
        
        const period = '{{ current_period }}';
        const chartBaseUrl = '{{ path('dashboard_statistics_chart_data') }}';

        // Graphique des tendances quotidiennes
        fetch(`${chartBaseUrl}?type=daily_trends&period=${period}`)
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('dailyTrendsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: data,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });

        // Graphique répartition par langue
        fetch(`${chartBaseUrl}?type=language_breakdown&period=${period}`)
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('languageChart').getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: data,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            }
                        }
                    }
                });
            });

        // Graphique top items
        fetch(`${chartBaseUrl}?type=top_items&period=${period}`)
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('topItemsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });

        // Graphique de comparaison
        {% if report.performance_comparison is defined %}
            fetch(`${chartBaseUrl}?type=performance_comparison&period=${period}`)
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('comparisonChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: data,
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                });
        {% endif %}
    </script>
{% endblock %}