{# templates/app/dashboard.html.twig #}
{% extends 'app/base.html.twig' %}

{% block title %}Tableau de bord — {{ tenant.name }}{% endblock %}

{% block body %}

{# ── En-tête page ──────────────────────────────────────────────────────────── #}
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h1 class="h4 fw-bold mb-1 page-title">
            <i class="fas fa-tachometer-alt me-2"></i>Tableau de bord
        </h1>
        <p class="text-muted mb-0 small">
            Bienvenue, <strong>{{ user.prenom }} {{ user.nom }}</strong> — {{ "now"|date("d/m/Y") }}
        </p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <button id="btn-refresh" class="btn btn-sm btn-outline-secondary" title="Actualiser les KPIs">
            <i class="fas fa-sync-alt me-1"></i>Actualiser
        </button>
        <span class="badge rounded-pill fs-6 px-3 py-2 bg-secondary">{{ tenant.name }}</span>
    </div>
</div>

{# ── Alerte changement de mot de passe ─────────────────────────────────────── #}
{% if user.mustChangePassword() %}
<div class="alert alert-warning d-flex align-items-center gap-2 mb-4" role="alert">
    <i class="fas fa-key fa-lg"></i>
    <div>
        <strong>Mot de passe temporaire détecté.</strong>
        Pour votre sécurité, veuillez modifier votre mot de passe dès que possible.
    </div>
</div>
{% endif %}

{# ── Ligne 1 : KPIs financiers (4 cartes) ─────────────────────────────────── #}
<div class="row g-3 mb-3" id="kpi-row-1">

    {# CA Mensuel #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-ca">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">CA ce mois</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center stat-icon stat-icon-blue" style="width:38px;height:38px">
                        <i class="fas fa-euro-sign"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

    {# Bénéfice mensuel #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-benefice">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Bénéfice mensuel</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center stat-icon stat-icon-green" style="width:38px;height:38px">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

    {# Charges fixes #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-charges">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Charges fixes mois</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center stat-icon stat-icon-yellow" style="width:38px;height:38px">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

    {# Achats nets #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-achats">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Achats nets mois</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center stat-icon stat-icon-red" style="width:38px;height:38px">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

</div>

{# ── Ligne 2 : KPIs opérationnels (4 cartes) ──────────────────────────────── #}
<div class="row g-3 mb-4" id="kpi-row-2">

    {# Repas aujourd'hui #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-repas-jour">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Repas aujourd'hui</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary" style="width:38px;height:38px">
                        <i class="fas fa-utensils"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small text-muted kpi-sub"></div>
            </div>
        </div>
    </div>

    {# Stock critique #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-stock">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Stock critique</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-warning bg-opacity-15 text-warning" style="width:38px;height:38px">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

    {# Coût / convive #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-cout">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Coût / convive</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-info bg-opacity-15 text-info" style="width:38px;height:38px">
                        <i class="fas fa-user-tag"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

    {# Food cost % #}
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm h-100" id="kpi-foodcost">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted small fw-semibold">Food Cost %</span>
                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-danger bg-opacity-10 text-danger" style="width:38px;height:38px">
                        <i class="fas fa-percent"></i>
                    </div>
                </div>
                <div class="fw-bold fs-4 lh-1 mb-1 kpi-value">—</div>
                <div class="kpi-badge small"></div>
            </div>
        </div>
    </div>

</div>

{# ── Widget Automatisation Présences → Ventes ─────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm border-start border-primary" style="border-left-width:4px!important">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-robot me-2 text-primary"></i>Automatisation Présences → Ventes
                <small class="text-muted fw-normal ms-2" id="widget-auto-date"></small>
            </div>
            <div class="card-body p-3" id="widget-auto-ventes">
                <div class="text-center text-muted py-3">
                    <span class="spinner-border spinner-border-sm me-2"></span>Chargement...
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Graphiques ligne 1 ────────────────────────────────────────────────────── #}
<div class="row g-3 mb-3">

    <div class="col-12 col-xl-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-chart-area me-2"></i>Évolution des ventes (12 mois)
            </div>
            <div class="card-body p-3" style="min-height:280px">
                <canvas id="chart-ventes" style="max-height:260px"></canvas>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-chart-pie me-2"></i>Coûts fournisseurs — <span id="fourn-annee"></span>
            </div>
            <div class="card-body p-3 d-flex align-items-center justify-content-center" style="min-height:280px">
                <canvas id="chart-fournisseurs" style="max-height:240px;max-width:240px"></canvas>
            </div>
        </div>
    </div>

</div>

{# ── Graphiques ligne 2 ────────────────────────────────────────────────────── #}
<div class="row g-3 mb-4">

    <div class="col-12 col-xl-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-boxes me-2"></i>Stocks par catégorie
            </div>
            <div class="card-body p-3" style="min-height:260px">
                <canvas id="chart-stocks" style="max-height:240px"></canvas>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-shield-alt me-2"></i>Conformité HACCP (12 mois glissants)
            </div>
            <div class="card-body p-3" style="min-height:260px">
                <div id="haccp-vide" class="d-none text-center text-muted pt-5">
                    <i class="fas fa-clipboard-list fa-2x mb-2 d-block"></i>Aucun document HACCP disponible
                </div>
                <canvas id="chart-haccp" style="max-height:260px"></canvas>
            </div>
        </div>
    </div>

</div>

{# ── Synthèse Financière Complète ─────────────────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-pie-chart me-2"></i>Synthèse Financière Complète — Mois en cours
            </div>
            <div class="card-body p-3">
                <div id="synthese-vide" class="d-none text-center text-muted py-3">
                    <i class="fas fa-info-circle me-1"></i>Aucune donnée financière ce mois
                </div>
                <div class="table-responsive" id="synthese-wrapper">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th><i class="fas fa-tag me-1"></i>Catégorie</th>
                                <th class="text-end"><i class="fas fa-euro-sign me-1"></i>Montant</th>
                                <th class="text-end"><i class="fas fa-percent me-1"></i>Part</th>
                                <th style="width:40%">Répartition</th>
                            </tr>
                        </thead>
                        <tbody id="synthese-body">
                            <tr><td colspan="4" class="text-center text-muted py-3">
                                <span class="spinner-border spinner-border-sm me-2"></span>Chargement...
                            </td></tr>
                        </tbody>
                        <tfoot class="table-secondary fw-bold">
                            <tr>
                                <td>Total des dépenses</td>
                                <td class="text-end" id="synthese-total">—</td>
                                <td class="text-end">100 %</td>
                                <td>
                                    <div class="progress" style="height:18px">
                                        <div class="progress-bar bg-success" style="width:100%">100 %</div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Statistiques Rapides ─────────────────────────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-tachometer-alt me-2"></i>Statistiques Rapides — <span id="stats-annee"></span>
            </div>
            <div class="card-body p-3" id="stats-rapides">
                <div class="text-center text-muted py-3">
                    <span class="spinner-border spinner-border-sm me-2"></span>Chargement...
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Analytics Sectoriels Avancés ─────────────────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm border-start border-info" style="border-left-width:4px!important">
            <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
                <i class="fas fa-diagram-project me-2 text-info"></i>Analytics Sectoriels Avancés
            </div>
            <div class="card-body p-3">
                <div class="row g-3" id="analytics-sectoriels">
                    <div class="col-12 text-center text-muted py-3">
                        <span class="spinner-border spinner-border-sm me-2"></span>Chargement...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Accès rapides ─────────────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-bottom fw-semibold py-3 page-title">
        <i class="fas fa-bolt me-2"></i>Accès rapides
    </div>
    <div class="card-body">
        <div class="row g-2">
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_menus_index') }}" class="btn btn-outline-primary w-100 text-start py-2">
                    <i class="fas fa-book-open me-2"></i>Menus
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_commandes_index') }}" class="btn btn-outline-success w-100 text-start py-2">
                    <i class="fas fa-shopping-basket me-2"></i>Commandes
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_stocks_index') }}" class="btn btn-outline-warning w-100 text-start py-2">
                    <i class="fas fa-warehouse me-2"></i>Stocks
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_presences_index') }}" class="btn btn-outline-info w-100 text-start py-2">
                    <i class="fas fa-users me-2"></i>Présences
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_syntheses_index') }}" class="btn btn-outline-secondary w-100 text-start py-2">
                    <i class="fas fa-chart-bar me-2"></i>Synthèses
                </a>
            </div>
            <div class="col-6 col-md-4 col-xl-2">
                <a href="{{ path('tenant_achats_index') }}" class="btn btn-outline-danger w-100 text-start py-2">
                    <i class="fas fa-receipt me-2"></i>Achats
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js" integrity="sha256-1G2Xof0CLF+yn6L0Xry8MiAtc67r8HbOX3JI9UmPx9c=" crossorigin="anonymous"></script>
<script>
(function () {
    'use strict';

    const API_URL = '{{ path('tenant_dashboard_api') }}';
    const MOIS_NOMS = ['', 'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];

    // ── Helpers ────────────────────────────────────────────────────────────

    function fmt(val, dec = 2) {
        return new Intl.NumberFormat('fr-FR', { minimumFractionDigits: dec, maximumFractionDigits: dec }).format(val);
    }

    function badgeClass(status) {
        return { success: 'text-success', warning: 'text-warning', danger: 'text-danger' }[status] ?? 'text-muted';
    }

    function tendanceBadge(val) {
        if (val === 0) return '';
        const icon  = val > 0 ? '▲' : '▼';
        const cls   = val > 0 ? 'text-success' : 'text-danger';
        return `<span class="${cls}">${icon} ${Math.abs(val)} %</span>`;
    }

    function setKpi(id, valeur, sousTexte) {
        const card = document.getElementById(id);
        if (!card) return;
        card.querySelector('.kpi-value').innerHTML = valeur;
        const badge = card.querySelector('.kpi-badge');
        if (badge) badge.innerHTML = sousTexte ?? '';
    }

    // ── Chargement KPIs ──────────────────────────────────────────────────

    async function loadKpis() {
        try {
            const r = await fetch(`${API_URL}?action=kpis`);
            if (!r.ok) return;
            const d = await r.json();

            const moisLabel = MOIS_NOMS[d.mois_courant] ?? '' + ' ' + d.annee_courante;

            setKpi('kpi-ca',
                `${fmt(d.ca_mois)} €`,
                tendanceBadge(d.ca_tendance) || `<span class="text-muted">vs mois préc.</span>`
            );

            setKpi('kpi-benefice',
                `<span class="${d.benefice_mois >= 0 ? 'text-success' : 'text-danger'}">${fmt(d.benefice_mois)} €</span>`,
                `Marge : <strong>${fmt(d.ratio_benefice, 1)} %</strong> ${tendanceBadge(d.benefice_tendance)}`
            );

            setKpi('kpi-charges',
                `${fmt(d.charges_fixes_mois)} €`,
                `<span class="text-muted">Charges fixes</span>`
            );

            setKpi('kpi-achats',
                `${fmt(d.achats_nets_mois)} €`,
                `<span class="text-muted">${d.repas_mois} repas ce mois</span>`
            );

            setKpi('kpi-repas-jour',
                `<strong>${d.repas_jour}</strong>`,
                `<span class="text-muted">${d.repas_mois} ce mois</span>`
            );

            const alertClass = d.stock_critique > 0 ? 'text-danger fw-bold' : 'text-success';
            setKpi('kpi-stock',
                `<span class="${alertClass}">${d.stock_critique}</span>`,
                d.stock_critique > 0
                    ? `<span class="text-danger">Produits sous seuil !</span>`
                    : `<span class="text-success">Aucune alerte</span>`
            );

            setKpi('kpi-cout',
                `${fmt(d.cout_par_couvert)} €`,
                `<span class="${badgeClass(d.cout_status)}">${
                    { success: '✅ Excellent', warning: '⚠️ Acceptable', danger: '❌ Élevé' }[d.cout_status] ?? ''
                }</span> (obj. ≤ 4,50 €)`
            );

            setKpi('kpi-foodcost',
                `${fmt(d.food_cost, 1)} %`,
                `<span class="${badgeClass(d.food_cost_status)}">${
                    { success: '✅ Bon', warning: '⚠️ Limite', danger: '❌ Élevé' }[d.food_cost_status] ?? ''
                }</span> (obj. ≤ 30 %)`
            );

        } catch (e) {
            console.error('Erreur chargement KPIs', e);
        }
    }

    // ── Graphique évolution ventes ────────────────────────────────────────

    let chartVentes = null;
    async function loadVentesChart() {
        try {
            const r = await fetch(`${API_URL}?action=ventes_evolution`);
            if (!r.ok) return;
            const d = await r.json();

            const ctx = document.getElementById('chart-ventes');
            if (!ctx) return;

            if (chartVentes) chartVentes.destroy();
            chartVentes = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: d.labels,
                    datasets: [
                        {
                            label: 'CA (€)',
                            data: d.datasets_ca,
                            borderColor: '#4e73df',
                            backgroundColor: 'rgba(78,115,223,0.08)',
                            fill: true,
                            tension: 0.3,
                            yAxisID: 'y',
                        },
                        {
                            label: 'Repas',
                            data: d.datasets_repas,
                            borderColor: '#1cc88a',
                            backgroundColor: 'rgba(28,200,138,0.08)',
                            fill: false,
                            tension: 0.3,
                            yAxisID: 'y1',
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    interaction: { mode: 'index', intersect: false },
                    plugins: { legend: { position: 'top' } },
                    scales: {
                        y:  { type: 'linear', display: true, position: 'left',  title: { display: true, text: 'CA (€)' } },
                        y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Repas' }, grid: { drawOnChartArea: false } }
                    }
                }
            });
        } catch (e) {
            console.error('Erreur graphique ventes', e);
        }
    }

    // ── Graphique coûts fournisseurs ──────────────────────────────────────

    const COLORS_PALETTE = [
        '#4e73df','#1cc88a','#36b9cc','#f6c23e','#e74a3b',
        '#5a5c69','#858796','#6610f2','#fd7e14','#20c9a6'
    ];

    let chartFourn = null;
    async function loadFournisseursChart() {
        try {
            const r = await fetch(`${API_URL}?action=couts_fournisseurs`);
            if (!r.ok) return;
            const d = await r.json();

            const ctx = document.getElementById('chart-fournisseurs');
            if (!ctx) return;

            if (chartFourn) chartFourn.destroy();
            if (d.vide || !d.labels.length) {
                ctx.closest('.card-body').innerHTML = '<p class="text-muted text-center pt-5">Aucun achat enregistré</p>';
                return;
            }

            const anneeLbl = document.getElementById('fourn-annee');
            if (anneeLbl) anneeLbl.textContent = d.annee;

            chartFourn = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: d.labels,
                    datasets: [{
                        data: d.totaux,
                        backgroundColor: COLORS_PALETTE.slice(0, d.labels.length),
                        borderWidth: 2,
                        borderColor: '#fff',
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { position: 'bottom', labels: { font: { size: 11 }, boxWidth: 12 } },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => ` ${ctx.label}: ${new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(ctx.raw)}`
                            }
                        }
                    }
                }
            });
        } catch (e) {
            console.error('Erreur graphique fournisseurs', e);
        }
    }

    // ── Graphique stocks par catégorie ────────────────────────────────────

    let chartStocks = null;
    async function loadStocksChart() {
        try {
            const r = await fetch(`${API_URL}?action=rotation_stocks`);
            if (!r.ok) return;
            const d = await r.json();

            const ctx = document.getElementById('chart-stocks');
            if (!ctx) return;

            if (chartStocks) chartStocks.destroy();
            if (!d.labels.length) {
                ctx.closest('.card-body').innerHTML = '<p class="text-muted text-center pt-5">Aucun article en stock</p>';
                return;
            }

            chartStocks = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: d.labels,
                    datasets: [{
                        label: 'Valeur stock (€)',
                        data: d.valeurs,
                        backgroundColor: 'rgba(78,115,223,0.7)',
                        borderColor: '#4e73df',
                        borderWidth: 1,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { font: { size: 11 } } },
                        y: { ticks: { callback: (v) => v + ' €' } }
                    }
                }
            });
        } catch (e) {
            console.error('Erreur graphique stocks', e);
        }
    }

    // ── Graphique conformité HACCP ────────────────────────────────────────

    let chartHaccp = null;
    async function loadHaccpChart() {
        try {
            const r = await fetch(`${API_URL}?action=conformite_haccp`);
            if (!r.ok) return;
            const d = await r.json();

            const ctx = document.getElementById('chart-haccp');
            if (!ctx) return;

            if (d.vide || !d.labels.length) {
                ctx.style.display = 'none';
                document.getElementById('haccp-vide').classList.remove('d-none');
                return;
            }

            if (chartHaccp) chartHaccp.destroy();
            chartHaccp = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: d.labels,
                    datasets: [{
                        label: 'Conformité (%)',
                        data: d.conformite,
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        pointBackgroundColor: 'rgb(54, 162, 235)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgb(54, 162, 235)',
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                stepSize: 25,
                                callback: (v) => v + '%',
                            },
                            pointLabels: { font: { size: 11 } },
                        }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => ` ${ctx.label} : ${ctx.parsed.r} %`
                            }
                        }
                    }
                }
            });
        } catch (e) {
            console.error('Erreur graphique HACCP', e);
        }
    }

    // ── Widget Automatisation Présences → Ventes ─────────────────────────

    async function loadWidgetAutoVentes() {
        try {
            const r = await fetch(`${API_URL}?action=widget_auto_ventes`);
            if (!r.ok) return;
            const d = await r.json();

            const dateLbl = document.getElementById('widget-auto-date');
            if (dateLbl) dateLbl.textContent = d.date;

            const fmtEur = (v) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v);

            let statusHtml;
            if (d.vente_existe) {
                statusHtml = `<span class="badge bg-success px-3 py-2">
                    <i class="fas fa-check-circle me-2"></i>Vente enregistrée (${d.nb_repas} repas — ${fmtEur(d.montant)})
                </span>`;
            } else if (d.nb_presences === 0) {
                statusHtml = `<span class="badge bg-secondary px-3 py-2">
                    <i class="fas fa-minus-circle me-2"></i>Aucune présence détectée aujourd'hui
                </span>`;
            } else {
                statusHtml = `<span class="badge bg-warning text-dark px-3 py-2">
                    <i class="fas fa-exclamation-triangle me-2"></i>Présences enregistrées — aucune vente générée
                </span>`;
            }

            document.getElementById('widget-auto-ventes').innerHTML = `
                <div class="row g-3 align-items-center">
                    <div class="col-6 col-md-3 text-center">
                        <div class="display-6 text-primary mb-1"><i class="fas fa-users"></i></div>
                        <div class="fs-4 fw-bold">${d.nb_presences}</div>
                        <div class="text-muted small">Présences validées</div>
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        <div class="display-6 text-success mb-1"><i class="fas fa-utensils"></i></div>
                        <div class="fs-4 fw-bold">${d.nb_repas}</div>
                        <div class="text-muted small">Repas facturés</div>
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        <div class="display-6 text-warning mb-1"><i class="fas fa-coins"></i></div>
                        <div class="fs-4 fw-bold">${fmtEur(d.montant)}</div>
                        <div class="text-muted small">Montant du jour</div>
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        ${statusHtml}
                    </div>
                </div>`;
        } catch (e) {
            console.error('Erreur widget auto ventes', e);
        }
    }

    // ── Synthèse Financière Complète ─────────────────────────────────────

    async function loadSyntheseFinanciere() {
        try {
            const r = await fetch(`${API_URL}?action=synthese_financiere`);
            if (!r.ok) return;
            const res = await r.json();

            if (res.vide || !res.success) {
                document.getElementById('synthese-wrapper').classList.add('d-none');
                document.getElementById('synthese-vide').classList.remove('d-none');
                return;
            }

            const fmtEur  = (v) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v);
            const LABELS  = {
                denrees: 'Denrées Alimentaires', salaires: 'Salaires & Charges',
                loyer: 'Loyer', electricite: 'Électricité',
                eau_gaz: 'Eau & Gaz', maintenance: 'Maintenance', diverses: 'Dépenses Diverses'
            };
            const COLORS  = {
                denrees: 'bg-info', salaires: 'bg-primary', loyer: 'bg-warning',
                electricite: 'bg-danger', eau_gaz: 'bg-secondary', maintenance: 'bg-success', diverses: 'bg-dark'
            };
            const ICONS   = {
                denrees: 'fa-basket-shopping', salaires: 'fa-users', loyer: 'fa-building',
                electricite: 'fa-bolt', eau_gaz: 'fa-droplet', maintenance: 'fa-tools', diverses: 'fa-ellipsis'
            };

            let html = '';
            res.data.details.forEach(item => {
                const label = LABELS[item.type] ?? item.type;
                const color = COLORS[item.type] ?? 'bg-secondary';
                const icon  = ICONS[item.type]  ?? 'fa-circle';
                html += `<tr>
                    <td><i class="fas ${icon} me-2 text-muted"></i><strong>${label}</strong></td>
                    <td class="text-end fw-bold">${fmtEur(item.montant)}</td>
                    <td class="text-end">${item.pourcentage} %</td>
                    <td>
                        <div class="progress" style="height:18px">
                            <div class="progress-bar ${color}" style="width:${item.pourcentage}%"
                                 role="progressbar" aria-valuenow="${item.pourcentage}" aria-valuemin="0" aria-valuemax="100">
                                ${item.pourcentage} %
                            </div>
                        </div>
                    </td>
                </tr>`;
            });

            document.getElementById('synthese-body').innerHTML = html;
            document.getElementById('synthese-total').textContent = fmtEur(res.data.total);
        } catch (e) {
            console.error('Erreur synthèse financière', e);
        }
    }

    // ── Statistiques Rapides ─────────────────────────────────────────────

    async function loadStatsRapides() {
        try {
            const r = await fetch(`${API_URL}?action=stats_rapides`);
            if (!r.ok) return;
            const d = await r.json();

            const anneeEl = document.getElementById('stats-annee');
            if (anneeEl) anneeEl.textContent = d.annee;

            const fmtEur = (v) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v);

            document.getElementById('stats-rapides').innerHTML = `
                <div class="row text-center g-3">
                    <div class="col-6 col-md-3">
                        <div class="border rounded p-3">
                            <div class="h5 fw-bold mb-1 text-primary">${fmtEur(d.ca_annuel)}</div>
                            <div class="text-muted small">CA Annuel</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="border rounded p-3">
                            <div class="h5 fw-bold mb-1 text-success">${fmtEur(d.moyenne)}</div>
                            <div class="text-muted small">Moyenne mensuelle (${d.mois_actifs} mois)</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="border rounded p-3">
                            <div class="h5 fw-bold mb-1 text-warning">${fmtEur(d.meilleur_mois_montant)}</div>
                            <div class="text-muted small">Meilleur mois</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="border rounded p-3">
                            <div class="h5 fw-bold mb-1">${d.meilleur_mois_label}</div>
                            <div class="text-muted small">Période record</div>
                        </div>
                    </div>
                </div>`;
        } catch (e) {
            console.error('Erreur stats rapides', e);
        }
    }

    // ── Analytics Sectoriels Avancés ─────────────────────────────────────

    async function loadAnalyticsSectoriels() {
        try {
            const r = await fetch(`${API_URL}?action=analytics_sectoriels`);
            if (!r.ok) return;
            const res = await r.json();

            const container = document.getElementById('analytics-sectoriels');

            if (res.vide) {
                container.innerHTML = `<div class="col-12 text-center text-muted py-3">
                    <i class="fas fa-info-circle me-2"></i>Aucune donnée sectorielle disponible pour ce mois
                </div>`;
                return;
            }

            const fmtEur = (v) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(parseFloat(v));
            const data   = res.data;
            let html     = '';

            // 1. Repas des 10 derniers jours
            if (data.presences_categories?.length) {
                const total  = data.presences_categories.reduce((s, d) => s + parseInt(d.total_repas), 0);
                const moy    = Math.round(total / data.presences_categories.length);
                html += `<div class="col-lg-6">
                    <h6 class="mb-2"><i class="fas fa-calendar-check me-2 text-primary"></i>Repas servis (10 derniers jours)</h6>
                    <div class="alert alert-info py-2 small mb-2">
                        <strong>Total :</strong> ${total.toLocaleString('fr-FR')} repas &nbsp;|&nbsp;
                        <strong>Moyenne/jour :</strong> ${moy.toLocaleString('fr-FR')} repas
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light"><tr><th>Date</th><th class="text-end">Repas</th><th class="text-end">Services</th></tr></thead>
                            <tbody>`;
                data.presences_categories.forEach(row => {
                    html += `<tr>
                        <td><span class="badge bg-primary">${row.date_label}</span></td>
                        <td class="text-end fw-bold">${row.total_repas}</td>
                        <td class="text-end">${row.nb_services}</td>
                    </tr>`;
                });
                html += `</tbody></table></div></div>`;
            }

            // 2. Coûts par catégorie
            if (data.couts_categories?.length) {
                html += `<div class="col-lg-6">
                    <h6 class="mb-2"><i class="fas fa-tags me-2 text-warning"></i>Coûts par catégorie de produits</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light"><tr><th>Catégorie</th><th class="text-end">Montant</th></tr></thead>
                            <tbody>`;
                data.couts_categories.forEach(cat => {
                    html += `<tr>
                        <td><span class="badge bg-warning text-dark">${cat.categorie}</span></td>
                        <td class="text-end">${fmtEur(cat.montant_total)}</td>
                    </tr>`;
                });
                html += `</tbody></table></div></div>`;
            }

            // 3. Top 5 fournisseurs
            if (data.performance_fournisseurs?.length) {
                html += `<div class="col-lg-6">
                    <h6 class="mb-2"><i class="fas fa-truck me-2 text-success"></i>Top 5 fournisseurs (mois en cours)</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light"><tr><th>Fournisseur</th><th class="text-end">Total</th></tr></thead>
                            <tbody>`;
                data.performance_fournisseurs.forEach((f, i) => {
                    html += `<tr>
                        <td><span class="badge ${i === 0 ? 'bg-success' : 'bg-secondary'}">${f.fournisseur}</span></td>
                        <td class="text-end">${fmtEur(f.montant_total)}</td>
                    </tr>`;
                });
                html += `</tbody></table></div></div>`;
            }

            // 4. Tendances hebdomadaires
            if (data.tendances_hebdomadaires?.length) {
                html += `<div class="col-lg-6">
                    <h6 class="mb-2"><i class="fas fa-calendar-week me-2 text-info"></i>Tendances hebdomadaires</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light"><tr><th>Semaine</th><th>Période</th><th class="text-end">Repas</th><th class="text-end">Moy/j</th></tr></thead>
                            <tbody>`;
                data.tendances_hebdomadaires.forEach(t => {
                    html += `<tr>
                        <td><span class="badge bg-info">S${t.semaine}</span></td>
                        <td class="text-muted small">${t.debut_semaine} – ${t.fin_semaine}</td>
                        <td class="text-end fw-bold">${t.total_repas}</td>
                        <td class="text-end">${t.moyenne_repas}</td>
                    </tr>`;
                });
                html += `</tbody></table></div></div>`;
            }

            container.innerHTML = html || `<div class="col-12 text-center text-muted py-3">
                <i class="fas fa-info-circle me-2"></i>Aucune donnée disponible ce mois
            </div>`;

        } catch (e) {
            console.error('Erreur analytics sectoriels', e);
        }
    }

    // ── Chargement initial ────────────────────────────────────────────────

    function loadAll() {
        loadKpis();
        loadVentesChart();
        loadFournisseursChart();
        loadStocksChart();
        loadHaccpChart();
        loadWidgetAutoVentes();
        loadSyntheseFinanciere();
        loadStatsRapides();
        loadAnalyticsSectoriels();
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadAll();
        document.getElementById('btn-refresh')?.addEventListener('click', () => {
            document.querySelectorAll('.kpi-value').forEach(el => { el.textContent = '…'; });
            loadAll();
        });
    });

})();
</script>
{% endblock %}