{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title %}Dashboard LintellO{% endblock %}

{% block content_header %}
    <div class="content-header-title">
        <h1 class="title d-flex align-items-center gap-3">
            <img src="/Logo-long-noir.png" alt="LintellO" style="height: 32px;">
            <span>— Back-office Admin</span>
        </h1>
    </div>
{% endblock %}

{% block head_javascript %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
{% endblock %}

{% block main %}
<div class="dashboard-wrapper">
    <!-- Statistiques principales -->
    <div class="row mb-4">
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card bg-primary text-white h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1 text-white-50">Utilisateurs</h6>
                            <h2 class="card-title mb-0">{{ stats.totalUsers }}</h2>
                        </div>
                        <i class="fa fa-users fa-2x opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <small>+{{ stats.newUsersToday }} aujourd'hui | +{{ stats.newUsersThisWeek }} cette semaine</small>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card bg-info text-white h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1 text-white-50">Conversations</h6>
                            <h2 class="card-title mb-0">{{ stats.totalConversations }}</h2>
                        </div>
                        <i class="fa fa-comments fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card bg-warning text-dark h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-1 opacity-75">Tokens aujourd'hui</h6>
                            <h2 class="card-title mb-0">{{ stats.tokensToday|number_format(0, ',', ' ') }}</h2>
                        </div>
                        <i class="fa fa-bolt fa-2x opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    <small>
                        <i class="fa fa-arrow-down me-1"></i>{{ stats.tokensTodayInput|number_format(0, ',', ' ') }} in |
                        <i class="fa fa-arrow-up me-1"></i>{{ stats.tokensTodayOutput|number_format(0, ',', ' ') }} out
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Utilisateurs par plan + Utilisateurs bêta -->
    <div class="row mb-4">
        <div class="col-lg-8 mb-3">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-chart-pie me-2"></i>Répartition par plan
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3 col-6 mb-3">
                            <div class="p-3 border rounded">
                                <span class="badge bg-secondary mb-2">Gratuit</span>
                                <h3 class="mb-0">{{ stats.planCounts.free }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <div class="p-3 border rounded">
                                <span class="badge bg-info mb-2">Perso</span>
                                <h3 class="mb-0">{{ stats.planCounts.perso }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <div class="p-3 border rounded">
                                <span class="badge bg-primary mb-2">Pro</span>
                                <h3 class="mb-0">{{ stats.planCounts.pro }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <div class="p-3 border rounded">
                                <span class="badge bg-success mb-2">LintellO</span>
                                <h3 class="mb-0">{{ stats.planCounts.lintello }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="card h-100 border-warning">
                <div class="card-header bg-warning bg-opacity-10">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-star me-2 text-warning"></i>Utilisateurs Bêta
                    </h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <div class="text-center">
                        <h1 class="display-4 text-warning mb-0">{{ stats.betaUsers }}</h1>
                        <p class="text-muted mb-0">testeurs actifs</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Histogramme Tokens par Plan -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-chart-bar me-2"></i>Consommation tokens par plan
                    </h5>
                    <div class="btn-group" role="group" id="periodSelector">
                        <button type="button" class="btn btn-outline-primary btn-sm" data-period="week">Semaine</button>
                        <button type="button" class="btn btn-primary btn-sm" data-period="month">Mois</button>
                        <button type="button" class="btn btn-outline-primary btn-sm" data-period="year">Année</button>
                    </div>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="tokensByPlanChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Évolution des tokens -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-chart-line me-2"></i>Évolution de la consommation
                    </h5>
                    <div class="btn-group" role="group" id="trendPeriodSelector">
                        <button type="button" class="btn btn-outline-info btn-sm" data-period="week">7 jours</button>
                        <button type="button" class="btn btn-info btn-sm" data-period="month">30 jours</button>
                        <button type="button" class="btn btn-outline-info btn-sm" data-period="year">12 mois</button>
                    </div>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="usageTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tableau des moyennes -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-table me-2"></i>Moyennes mensuelles (tokens/utilisateur)
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="averagesTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Mois</th>
                                    <th class="text-center">
                                        <span class="badge bg-primary">S</span> Small
                                    </th>
                                    <th class="text-center">
                                        <span class="badge" style="background-color: #6f42c1;">L</span> Large
                                    </th>
                                    <th class="text-center">
                                        <span class="badge bg-warning text-dark">C</span> Codestral
                                    </th>
                                    <th class="text-center">
                                        <span class="badge bg-info">P</span> Pixtral
                                    </th>
                                    <th class="text-center text-primary fw-bold">Total tokens</th>
                                    <th class="text-center">Users actifs</th>
                                    <th class="text-center text-success fw-bold">Moy. tokens/user</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="8" class="text-center text-muted">
                                        <i class="fa fa-spinner fa-spin me-2"></i>Chargement...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tokens par modèle avec coûts (ce mois) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-bolt me-2"></i>Tokens & Coûts ce mois
                    </h5>
                    <span class="badge bg-success fs-5">{{ stats.totalCostMonth|number_format(2, ',', ' ') }} €</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Modèle</th>
                                    <th class="text-end"><i class="fa fa-arrow-down text-muted me-1"></i>Input</th>
                                    <th class="text-end"><i class="fa fa-arrow-up text-muted me-1"></i>Output</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Coût</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span class="badge bg-primary me-2">S</span>
                                        <strong>Mistral Small</strong>
                                        <small class="text-muted ms-2">(0.10€/0.30€)</small>
                                    </td>
                                    <td class="text-end">{{ stats.modelTokens.small.input|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end">{{ stats.modelTokens.small.output|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end fw-medium">{{ (stats.modelTokens.small.input + stats.modelTokens.small.output)|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end text-success fw-bold">{{ stats.modelTokens.small.cost|number_format(4, ',', ' ') }} €</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="badge me-2" style="background-color: #6f42c1;">L</span>
                                        <strong>Mistral Large</strong>
                                        <small class="text-muted ms-2">(0.43€/1.29€)</small>
                                    </td>
                                    <td class="text-end">{{ stats.modelTokens.large.input|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end">{{ stats.modelTokens.large.output|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end fw-medium">{{ (stats.modelTokens.large.input + stats.modelTokens.large.output)|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end text-success fw-bold">{{ stats.modelTokens.large.cost|number_format(4, ',', ' ') }} €</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="badge bg-warning text-dark me-2">C</span>
                                        <strong>Codestral</strong>
                                        <small class="text-muted ms-2">(0.30€/0.90€)</small>
                                    </td>
                                    <td class="text-end">{{ stats.modelTokens.codestral.input|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end">{{ stats.modelTokens.codestral.output|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end fw-medium">{{ (stats.modelTokens.codestral.input + stats.modelTokens.codestral.output)|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end text-success fw-bold">{{ stats.modelTokens.codestral.cost|number_format(4, ',', ' ') }} €</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="badge bg-info me-2">P</span>
                                        <strong>Pixtral</strong>
                                        <small class="text-muted ms-2">(0.12€/0.12€)</small>
                                    </td>
                                    <td class="text-end">{{ stats.modelTokens.pixtral.input|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end">{{ stats.modelTokens.pixtral.output|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end fw-medium">{{ (stats.modelTokens.pixtral.input + stats.modelTokens.pixtral.output)|number_format(0, ',', ' ') }}</td>
                                    <td class="text-end text-success fw-bold">{{ stats.modelTokens.pixtral.cost|number_format(4, ',', ' ') }} €</td>
                                </tr>
                            </tbody>
                            <tfoot class="table-light">
                                <tr class="fw-bold">
                                    <td>TOTAL</td>
                                    <td class="text-end">
                                        {{ (stats.modelTokens.small.input + stats.modelTokens.large.input + stats.modelTokens.codestral.input + stats.modelTokens.pixtral.input)|number_format(0, ',', ' ') }}
                                    </td>
                                    <td class="text-end">
                                        {{ (stats.modelTokens.small.output + stats.modelTokens.large.output + stats.modelTokens.codestral.output + stats.modelTokens.pixtral.output)|number_format(0, ',', ' ') }}
                                    </td>
                                    <td class="text-end">
                                        {{ (stats.modelTokens.small.input + stats.modelTokens.small.output + stats.modelTokens.large.input + stats.modelTokens.large.output + stats.modelTokens.codestral.input + stats.modelTokens.codestral.output + stats.modelTokens.pixtral.input + stats.modelTokens.pixtral.output)|number_format(0, ',', ' ') }}
                                    </td>
                                    <td class="text-end text-success fs-5">{{ stats.totalCostMonth|number_format(2, ',', ' ') }} €</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="mt-3 text-muted small">
                        <i class="fa fa-info-circle me-1"></i>
                        Prix Mistral (€/M tokens) : Input moins cher, Output ~3x plus cher
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top modes utilisés (30 jours) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-trophy text-warning me-2"></i>Top 5 modes utilisés (30 jours)
                    </h5>
                    <span class="badge bg-primary">{{ modeStats.totalUsages }} utilisations</span>
                </div>
                <div class="card-body">
                    {% if modeStats.topModesGlobal is empty %}
                        <p class="text-muted text-center mb-0">Aucune donnée disponible</p>
                    {% else %}
                        <div class="row">
                            {% for mode in modeStats.topModesGlobal %}
                            <div class="col-lg-2 col-md-4 col-6 mb-3">
                                <div class="card h-100 text-center {% if loop.index <= 3 %}border-warning{% endif %}">
                                    <div class="card-body py-3">
                                        {% if loop.index == 1 %}
                                            <span class="badge bg-warning text-dark mb-2">🥇</span>
                                        {% elseif loop.index == 2 %}
                                            <span class="badge bg-secondary mb-2">🥈</span>
                                        {% elseif loop.index == 3 %}
                                            <span class="badge bg-danger mb-2">🥉</span>
                                        {% else %}
                                            <span class="badge bg-light text-dark mb-2">#{{ loop.index }}</span>
                                        {% endif %}
                                        <div class="fs-3 mb-1">{{ mode.modeIcon }}</div>
                                        <h6 class="mb-1 small">{{ mode.modeName }}</h6>
                                        <span class="badge bg-primary">{{ mode.usageCount }}</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="text-end mt-2">
                            <a href="{{ ea_url().setController('App\\\\Controller\\\\Admin\\\\ModeUsageCrudController').setAction('index') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fa fa-list me-1"></i>Voir tout le détail
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Actions rapides -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-rocket me-2"></i>Actions rapides
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ ea_url().setController('App\\\\Controller\\\\Admin\\\\UserCrudController').setAction('index') }}" class="btn btn-outline-primary">
                            <i class="fa fa-users me-1"></i>Gérer les utilisateurs
                        </a>
                        <a href="{{ ea_url().setController('App\\\\Controller\\\\Admin\\\\PlanQuotaCrudController').setAction('index') }}" class="btn btn-outline-success">
                            <i class="fa fa-sliders me-1"></i>Configurer les quotas
                        </a>
                        <a href="{{ ea_url().setController('App\\\\Controller\\\\Admin\\\\UsageLogCrudController').setAction('index') }}" class="btn btn-outline-info">
                            <i class="fa fa-chart-line me-1"></i>Voir les logs d'usage
                        </a>
                        <a href="{{ ea_url().setController('App\\\\Controller\\\\Admin\\\\AdminLogCrudController').setAction('index') }}" class="btn btn-outline-secondary">
                            <i class="fa fa-history me-1"></i>Historique admin
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Configuration commune Chart.js
    Chart.defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";

    // URLs des API (générées par Symfony)
    const API_URLS = {
        tokensByPlan: '{{ path('admin_api_tokens_by_plan') }}',
        averages: '{{ path('admin_api_averages') }}',
        usageTrend: '{{ path('admin_api_usage_trend') }}'
    };

    let tokensByPlanChart = null;
    let usageTrendChart = null;

    // Formater les nombres
    function formatNumber(num) {
        return new Intl.NumberFormat('fr-FR').format(num);
    }

    // Charger l'histogramme tokens par plan
    async function loadTokensByPlan(period = 'month') {
        try {
            const response = await fetch(`${API_URLS.tokensByPlan}?period=${period}`, { credentials: 'same-origin' });
            const data = await response.json();

            const ctx = document.getElementById('tokensByPlanChart').getContext('2d');

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

            tokensByPlanChart = new Chart(ctx, {
                type: 'bar',
                data: data.chart,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + formatNumber(context.raw) + ' tokens';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            stacked: false,
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return formatNumber(value);
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('Erreur chargement tokens par plan:', error);
        }
    }

    // Charger le graphique d'évolution
    async function loadUsageTrend(period = 'month') {
        try {
            const response = await fetch(`${API_URLS.usageTrend}?period=${period}`, { credentials: 'same-origin' });
            const data = await response.json();

            const ctx = document.getElementById('usageTrendChart').getContext('2d');

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

            usageTrendChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + formatNumber(context.raw) + ' tokens';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return formatNumber(value);
                                }
                            }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('Erreur chargement évolution:', error);
        }
    }

    // Charger le tableau des moyennes
    async function loadAverages() {
        try {
            const response = await fetch(API_URLS.averages, { credentials: 'same-origin' });
            const data = await response.json();

            const tbody = document.querySelector('#averagesTable tbody');

            if (data.months.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted">
                            <i class="fa fa-info-circle me-2"></i>Aucune donnée disponible
                        </td>
                    </tr>
                `;
                return;
            }

            let html = '';
            data.months.forEach(month => {
                const small = month.models?.small || { totalTokens: 0, avgTokensPerUser: 0 };
                const large = month.models?.large || { totalTokens: 0, avgTokensPerUser: 0 };
                const codestral = month.models?.codestral || { totalTokens: 0, avgTokensPerUser: 0 };
                const pixtral = month.models?.pixtral || { totalTokens: 0, avgTokensPerUser: 0 };

                html += `
                    <tr>
                        <td class="fw-medium">${month.monthLabel}</td>
                        <td class="text-center">
                            <span class="d-block">${formatNumber(small.totalTokens)}</span>
                            <small class="text-muted">${formatNumber(small.avgTokensPerUser)}/user</small>
                        </td>
                        <td class="text-center">
                            <span class="d-block">${formatNumber(large.totalTokens)}</span>
                            <small class="text-muted">${formatNumber(large.avgTokensPerUser)}/user</small>
                        </td>
                        <td class="text-center">
                            <span class="d-block">${formatNumber(codestral.totalTokens)}</span>
                            <small class="text-muted">${formatNumber(codestral.avgTokensPerUser)}/user</small>
                        </td>
                        <td class="text-center">
                            <span class="d-block">${formatNumber(pixtral.totalTokens)}</span>
                            <small class="text-muted">${formatNumber(pixtral.avgTokensPerUser)}/user</small>
                        </td>
                        <td class="text-center text-primary fw-bold">${formatNumber(month.totalTokens)}</td>
                        <td class="text-center">${month.totalUsers}</td>
                        <td class="text-center">
                            <span class="badge bg-success fs-6">${formatNumber(month.avgTokensPerUser)}</span>
                        </td>
                    </tr>
                `;
            });

            tbody.innerHTML = html;
        } catch (error) {
            console.error('Erreur chargement moyennes:', error);
            document.querySelector('#averagesTable tbody').innerHTML = `
                <tr>
                    <td colspan="8" class="text-center text-danger">
                        <i class="fa fa-exclamation-triangle me-2"></i>Erreur de chargement
                    </td>
                </tr>
            `;
        }
    }

    // Event listeners pour les sélecteurs de période
    document.querySelectorAll('#periodSelector button').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('#periodSelector button').forEach(b => {
                b.classList.remove('btn-primary');
                b.classList.add('btn-outline-primary');
            });
            this.classList.remove('btn-outline-primary');
            this.classList.add('btn-primary');
            loadTokensByPlan(this.dataset.period);
        });
    });

    document.querySelectorAll('#trendPeriodSelector button').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('#trendPeriodSelector button').forEach(b => {
                b.classList.remove('btn-info');
                b.classList.add('btn-outline-info');
            });
            this.classList.remove('btn-outline-info');
            this.classList.add('btn-info');
            loadUsageTrend(this.dataset.period);
        });
    });

    // Charger les données initiales
    loadTokensByPlan('month');
    loadUsageTrend('month');
    loadAverages();
});
</script>
{% endblock %}