@extends('base')
@section('content')
    @include('partials.step_navigation')

    <style>
        /* Titre de la feuille comme sur l'État des centrales : sans fond, même vert, souligné */
        .titre-plan-charge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
        .titre-plan-charge h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #28a745; }
        .titre-plan-charge .sous-titre { color: #5d665f; font-size: .9rem; }
        .titre-plan-charge .actualisation-auto { display: none; align-items: center; gap: 8px; font-size: .85rem; color: #3d4540; }
        .titre-plan-charge .actualisation-auto .point { width: 8px; height: 8px; border-radius: 50%; background: #28a745; }

        .plan-charge-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
        .plan-charge-filtres .filtre-centrale { flex: 1 1 280px; max-width: 380px; }
        .plan-charge-filtres label { font-weight: 700; margin-bottom: 4px; }
        .plan-charge-filtres .navigation-date { display: flex; gap: 6px; align-items: center; }
        .plan-charge-filtres .navigation-date .form-control { width: auto; }

        /* Tuiles de synthèse, même rendu que les tuiles de l'État des centrales */
        .plan-charge-tuiles { display: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
        .plan-charge-tuiles .tuile { background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; padding: 12px 16px; display: grid; gap: 4px; align-content: start; }
        .plan-charge-tuiles .tuile.alerte { border-color: #b3261e; box-shadow: inset 4px 0 0 #b3261e; }
        .plan-charge-tuiles .tuile-titre { font-size: .85rem; font-weight: 600; color: #5d665f; }
        .plan-charge-tuiles .tuile-valeur { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
        .plan-charge-tuiles .tuile-valeur small { font-size: .85rem; font-weight: 600; color: #5d665f; }
        .plan-charge-tuiles .tuile-detail { font-size: .85rem; color: #5d665f; }
        .plan-charge-tuiles .tuile.alerte .tuile-detail { color: #b3261e; font-weight: 600; }
        .plan-charge-tuiles .jauge { height: 8px; border-radius: 4px; background: #e6ebe5; overflow: hidden; }
        .plan-charge-tuiles .jauge div { height: 8px; width: 0; background: #28a745; }

        /* En-tête de carte : fond du même vert que le titre (État des centrales), écriture blanche en gras */
        .carte-plan-charge .card-header { padding: .3rem .75rem; background-color: #28a745; color: #fff; font-weight: bold; }
        .carte-plan-charge .message-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5d665f; font-size: 1rem; pointer-events: none; }
        .carte-plan-charge .message-vide span { background: rgba(255, 255, 255, .9); padding: 8px 16px; border-radius: 6px; }
    </style>

    <div class="titre-plan-charge">
        <div>
            <h2>Plan de charge centrale</h2>
            <div class="sous-titre">Quantités prévues et réalisées heure par heure</div>
        </div>
        <div class="actualisation-auto" id="plan_charge_actualisation_auto"><span class="point"></span>Actualisation auto · 5 min</div>
    </div>

    <div class="plan-charge-filtres">
        <div class="filtre-centrale">
            <label for="plan_charge_centrale_id">Centrale</label>
            <select class="form-control" id="plan_charge_centrale_id">
                <option value="0">-- Choisir une centrale --</option>
                @foreach($centrales as $centrale)
                    <option value="{{ $centrale->id_centrale }}">{{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="plan_charge_date">Date</label>
            <div class="navigation-date">
                <button type="button" class="btn btn-outline-secondary" id="plan_charge_veille" title="Veille" aria-label="Veille"><i class="fas fa-chevron-left"></i></button>
                <input type="date" class="form-control" style="color:black !important" id="plan_charge_date" value="{{ $date_defaut }}">
                <button type="button" class="btn btn-outline-secondary" id="plan_charge_lendemain" title="Lendemain" aria-label="Lendemain"><i class="fas fa-chevron-right"></i></button>
                <button type="button" class="btn btn-success" id="plan_charge_aujourdhui">Aujourd'hui</button>
            </div>
        </div>
    </div>

    <div class="plan-charge-tuiles" id="plan_charge_tuiles">
        <div class="tuile">
            <div class="tuile-titre">Prévu jour</div>
            <div class="tuile-valeur"><span id="tuile_prevu">0</span> <small>m³</small></div>
            <div class="tuile-detail">Planning prévisionnel + OF non réalisés</div>
        </div>
        <div class="tuile">
            <div class="tuile-titre">Réalisé jour</div>
            <div class="tuile-valeur" style="color: #1f7a3d"><span id="tuile_realise">0</span> <small>m³</small></div>
            <div class="tuile-detail">dont <span id="tuile_sous_centrale">0</span> m³ sous centrale</div>
        </div>
        <div class="tuile">
            <div class="tuile-titre">Avancement</div>
            <div class="tuile-valeur" id="tuile_taux">-</div>
            <div class="jauge"><div id="tuile_jauge"></div></div>
            <div class="tuile-detail" id="tuile_reste"></div>
        </div>
        <div class="tuile" id="tuile_pointe_carte">
            <div class="tuile-titre">Heure de pointe</div>
            <div class="tuile-valeur" id="tuile_pointe">-</div>
            <div class="tuile-detail" id="tuile_depassement"></div>
        </div>
    </div>

    <div class="card mb-3 carte-plan-charge">
        <div class="card-header"><i class="fas fa-chart-bar"></i> Charge horaire prévue / réalisée</div>
        <div class="card-body" style="height: 60vh; position: relative">
            <canvas id="chart_plan_charge_centrale"></canvas>
            <div class="message-vide" id="plan_charge_message_vide"><span>Choisissez une centrale et une date.</span></div>
        </div>
        <div class="card-footer small text-muted" id="mise_a_jour_plan_charge_centrale">Choisissez une centrale et une date.</div>
    </div>

    <script>
        $(document).ready(function() {
            Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#292b2c';

            var COULEUR_ALERTE = '#b3261e';
            var COULEUR_OBJECTIF = '#e8890c';

            // Mode d'interaction personnalisé : au survol de Livré ou Sous centrale (stack 'realise'),
            // renvoie les DEUX éléments (un par dataset) à cet index plutôt qu'un seul, pour que le tooltip
            // affiche chaque valeur avec sa propre couleur native. Sur les autres barres/courbes,
            // comportement inchangé (un seul élément, le plus proche).
            Chart.Interaction.modes.groupeRealise = function(chart, e, options) {
                var proche = Chart.Interaction.modes.nearest(chart, e, {intersect: true, axis: 'xy'});
                if (!proche.length) {
                    return proche;
                }

                var dataset = chart.data.datasets[proche[0]._datasetIndex];
                if (!dataset || dataset.stack !== 'realise') {
                    return proche;
                }

                var index = proche[0]._index;
                var elements = [];
                chart.data.datasets.forEach(function(ds, datasetIndex) {
                    if (ds.stack === 'realise' && chart.isDatasetVisible(datasetIndex)) {
                        var element = chart.getDatasetMeta(datasetIndex).data[index];
                        if (element) {
                            elements.push(element);
                        }
                    }
                });

                return elements;
            };

            // Dessins de référence propres au plan de charge : bande de l'heure en cours, objectif horaire
            // en paliers (un trait sur toute la largeur de chaque heure) et ligne de capacité sur toute la largeur.
            // Les datasets Capacité / Objectif restent dans le graphique (légende cliquable, infobulle),
            // mais sans tracé : c'est ce plugin qui les dessine, s'ils sont visibles.
            var pluginReperes = {
                beforeDatasetsDraw: function(chart) {
                    var index = chart.options.indexHeureCourante;
                    if (index === null || index === undefined) {
                        return;
                    }
                    var ctx = chart.ctx;
                    var axeX = chart.scales['x-axis-0'];
                    var largeur = (axeX.right - axeX.left) / chart.data.labels.length;
                    var centre = axeX.getPixelForValue(null, index);
                    var zone = chart.chartArea;

                    ctx.save();
                    ctx.fillStyle = '#eef7f0';
                    ctx.fillRect(centre - largeur / 2, zone.top, largeur, zone.bottom - zone.top);
                    ctx.fillStyle = '#1f7a3d';
                    ctx.font = 'bold 10px ' + Chart.defaults.global.defaultFontFamily;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'top';
                    ctx.fillText('MAINTENANT', centre, zone.top + 2);
                    ctx.restore();
                },
                afterDatasetsDraw: function(chart) {
                    var ctx = chart.ctx;
                    var axeX = chart.scales['x-axis-0'];
                    var axeY = chart.scales['y_lignes'];
                    var largeur = (axeX.right - axeX.left) / chart.data.labels.length;
                    var zone = chart.chartArea;

                    chart.data.datasets.forEach(function(dataset, datasetIndex) {
                        if (!dataset.repere || !chart.isDatasetVisible(datasetIndex)) {
                            return;
                        }

                        ctx.save();
                        if (dataset.repere === 'objectif') {
                            ctx.strokeStyle = COULEUR_OBJECTIF;
                            ctx.lineWidth = 3;
                            dataset.data.forEach(function(valeur, index) {
                                if (valeur === null || valeur === undefined) {
                                    return;
                                }
                                var y = axeY.getPixelForValue(valeur);
                                var centre = axeX.getPixelForValue(null, index);
                                ctx.beginPath();
                                ctx.moveTo(centre - largeur * 0.46, y);
                                ctx.lineTo(centre + largeur * 0.46, y);
                                ctx.stroke();
                            });
                        }

                        if (dataset.repere === 'capacite') {
                            var valeur = dataset.data[0];
                            var y = axeY.getPixelForValue(valeur);
                            ctx.strokeStyle = COULEUR_ALERTE;
                            ctx.lineWidth = 2;
                            ctx.setLineDash([6, 4]);
                            ctx.beginPath();
                            ctx.moveTo(zone.left, y);
                            ctx.lineTo(zone.right, y);
                            ctx.stroke();
                            ctx.setLineDash([]);

                            var texte = 'Capacité ' + formaterQuantite(valeur) + ' m³/h';
                            ctx.font = 'bold 12px ' + Chart.defaults.global.defaultFontFamily;
                            var largeurTexte = ctx.measureText(texte).width;
                            ctx.fillStyle = 'rgba(255, 255, 255, .9)';
                            ctx.fillRect(zone.right - largeurTexte - 12, y - 18, largeurTexte + 8, 16);
                            ctx.fillStyle = COULEUR_ALERTE;
                            ctx.textAlign = 'right';
                            ctx.textBaseline = 'bottom';
                            ctx.fillText(texte, zone.right - 8, y - 3);
                        }
                        ctx.restore();
                    });
                },
            };

            var chart_plan_charge = null;

            function formaterQuantite(valeur) {
                return Number(valeur).toLocaleString('fr-FR', {maximumFractionDigits: 2});
            }

            function dateDuJour() {
                var d = new Date();
                return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
            }

            function decalerDate(jours) {
                var morceaux = ($('#plan_charge_date').val() || dateDuJour()).split('-');
                var d = new Date(Number(morceaux[0]), Number(morceaux[1]) - 1, Number(morceaux[2]) + jours);
                $('#plan_charge_date').val(d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'));
                chargerGraphique();
            }

            function estAujourdhui() {
                return $('#plan_charge_date').val() === dateDuJour();
            }

            function afficherMessageVide(message) {
                if (message) {
                    $('#plan_charge_message_vide').show().find('span').text(message);
                } else {
                    $('#plan_charge_message_vide').hide();
                }
            }

            function afficherTuiles(retour) {
                var capacite = retour.capacite_horaire ? Number(retour.capacite_horaire) : null;
                var totalPrevu = 0, totalLivre = 0, totalSousCentrale = 0;
                var indexPointe = null, nbDepassements = 0;

                retour.labels.forEach(function(_, i) {
                    var prevu = Number(retour.data_prevu[i] || 0);
                    var realise = Number(retour.data_realise_livre[i] || 0) + Number(retour.data_realise_sous_centrale[i] || 0);
                    totalPrevu += prevu;
                    totalLivre += Number(retour.data_realise_livre[i] || 0);
                    totalSousCentrale += Number(retour.data_realise_sous_centrale[i] || 0);
                    if (prevu > 0 && (indexPointe === null || prevu > Number(retour.data_prevu[indexPointe]))) {
                        indexPointe = i;
                    }
                    if (capacite && Math.max(prevu, realise) > capacite) {
                        nbDepassements++;
                    }
                });

                var totalRealise = totalLivre + totalSousCentrale;
                $('#tuile_prevu').text(formaterQuantite(totalPrevu));
                $('#tuile_realise').text(formaterQuantite(totalRealise));
                $('#tuile_sous_centrale').text(formaterQuantite(totalSousCentrale));

                if (totalPrevu > 0) {
                    var taux = Math.round(totalRealise / totalPrevu * 100);
                    $('#tuile_taux').text(taux + ' %');
                    $('#tuile_jauge').css('width', Math.min(taux, 100) + '%');
                    $('#tuile_reste').text(totalRealise >= totalPrevu ? 'Prévu atteint' : 'Reste ' + formaterQuantite(totalPrevu - totalRealise) + ' m³ à produire');
                } else {
                    $('#tuile_taux').text('-');
                    $('#tuile_jauge').css('width', 0);
                    $('#tuile_reste').text('Aucune quantité prévue');
                }

                if (indexPointe !== null) {
                    $('#tuile_pointe').html(retour.labels[indexPointe] + ' <small>· ' + formaterQuantite(retour.data_prevu[indexPointe]) + ' m³ prévus</small>');
                } else {
                    $('#tuile_pointe').text('-');
                }

                if (!capacite) {
                    $('#tuile_depassement').text('Capacité horaire non renseignée');
                } else if (nbDepassements > 0) {
                    $('#tuile_depassement').text(nbDepassements + (nbDepassements > 1 ? ' heures' : ' heure') + ' au-dessus de la capacité (' + formaterQuantite(capacite) + ' m³/h)');
                } else {
                    $('#tuile_depassement').text('Aucune heure au-dessus de la capacité (' + formaterQuantite(capacite) + ' m³/h)');
                }
                $('#tuile_pointe_carte').toggleClass('alerte', nbDepassements > 0);

                $('#plan_charge_tuiles').css('display', 'grid');
                return totalPrevu + totalRealise;
            }

            function chargerGraphique() {
                var centrale_id = $('#plan_charge_centrale_id').val();

                $('#plan_charge_actualisation_auto').css('display', centrale_id && centrale_id != 0 && estAujourdhui() ? 'flex' : 'none');

                if (!centrale_id || centrale_id == 0) {
                    $('#mise_a_jour_plan_charge_centrale').html('Choisissez une centrale et une date.');
                    $('#plan_charge_tuiles').hide();
                    afficherMessageVide('Choisissez une centrale et une date.');
                    if (chart_plan_charge) {
                        chart_plan_charge.destroy();
                        chart_plan_charge = null;
                    }
                    return;
                }

                $.get('{{ route('plan_charge_centrale.data') }}', {
                    centrale_id: centrale_id,
                    date: $('#plan_charge_date').val(),
                }, function(retour) {
                    var maintenant = new Date();
                    $('#mise_a_jour_plan_charge_centrale').text('Mis à jour à ' + String(maintenant.getHours()).padStart(2, '0') + ':' + String(maintenant.getMinutes()).padStart(2, '0') + ' — ' + (retour.centrale_nom ?? '') + ' — ' + retour.date);

                    var totalJour = afficherTuiles(retour);
                    afficherMessageVide(totalJour > 0 ? null : 'Aucune quantité prévue ni réalisée pour cette journée.');

                    var capacite = retour.capacite_horaire ? Number(retour.capacite_horaire) : null;
                    var objectifNombres = (retour.data_objectif || []).map(function(v) { return v === null || v === undefined ? null : Number(v); });

                    // Contour rouge sur les barres qui dépassent la capacité horaire
                    var totauxRealises = retour.labels.map(function(_, i) {
                        return Number(retour.data_realise_livre[i] || 0) + Number(retour.data_realise_sous_centrale[i] || 0);
                    });
                    var contour = function(valeurs, couleur) {
                        return valeurs.map(function(v) { return capacite && Number(v) > capacite ? COULEUR_ALERTE : couleur; });
                    };
                    var epaisseur = function(valeurs) {
                        return valeurs.map(function(v) { return capacite && Number(v) > capacite ? 2 : 1; });
                    };

                    var datasets = [
                        {label: 'Prévu', data: retour.data_prevu, backgroundColor: '#d4dfea', borderColor: contour(retour.data_prevu, '#6f8aa8'), borderWidth: epaisseur(retour.data_prevu), stack: 'prevu', yAxisID: 'y_quantite'},
                        {label: 'Livré', data: retour.data_realise_livre, backgroundColor: '#28a745', borderColor: contour(totauxRealises, '#28a745'), borderWidth: epaisseur(totauxRealises), stack: 'realise', yAxisID: 'y_quantite'},
                        {label: 'Sous centrale', data: retour.data_realise_sous_centrale, backgroundColor: '#9fd8ac', borderColor: contour(totauxRealises, '#9fd8ac'), borderWidth: epaisseur(totauxRealises), stack: 'realise', yAxisID: 'y_quantite'},
                    ];

                    if (capacite) {
                        datasets.push({
                            type: 'line',
                            repere: 'capacite',
                            label: 'Capacité / heure',
                            data: retour.labels.map(function() { return capacite; }),
                            fill: false,
                            showLine: false,
                            borderColor: COULEUR_ALERTE,
                            backgroundColor: COULEUR_ALERTE,
                            borderDash: [6, 4],
                            borderWidth: 2,
                            pointRadius: 0,
                            pointHitRadius: 6,
                            yAxisID: 'y_lignes',
                        });
                    }

                    if (objectifNombres.some(function(v) { return v !== null; })) {
                        datasets.push({
                            type: 'line',
                            repere: 'objectif',
                            label: 'Objectif horaire',
                            data: objectifNombres,
                            fill: false,
                            showLine: false,
                            borderColor: COULEUR_OBJECTIF,
                            backgroundColor: COULEUR_OBJECTIF,
                            borderWidth: 3,
                            pointRadius: 0,
                            pointHitRadius: 10,
                            yAxisID: 'y_lignes',
                        });
                    }

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

                    // Chart.js 2.7 additionne entre elles toutes les courbes d'un même axe Y dès que cet axe
                    // est "stacked" (voir calculatePointY dans Chart.js) : les courbes de référence (capacité,
                    // objectif) doivent donc vivre sur un second axe non empilé, calé sur le même 0 → même max
                    // que l'axe des barres, pour rester à la bonne hauteur visuelle.
                    var maxQuantiteBarres = Math.max(
                        0,
                        Math.max.apply(null, retour.data_prevu.map(Number)),
                        Math.max.apply(null, totauxRealises)
                    );
                    var maxLignes = Math.max(
                        0,
                        capacite || 0,
                        Math.max.apply(null, objectifNombres.map(function(v) { return v === null ? 0 : v; }))
                    );
                    var maxAxeY = Math.ceil(Math.max(maxQuantiteBarres, maxLignes) * 1.1) || 10;

                    // Bande « MAINTENANT » sur l'heure en cours, seulement quand la date affichée est aujourd'hui
                    var libelleHeureCourante = String(new Date().getHours()).padStart(2, '0') + ':00';
                    var indexHeureCourante = estAujourdhui() ? retour.labels.indexOf(libelleHeureCourante) : -1;

                    chart_plan_charge = new Chart($('#chart_plan_charge_centrale'), {
                        type: 'bar',
                        data: {
                            labels: retour.labels,
                            datasets: datasets,
                        },
                        plugins: [pluginReperes],
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            indexHeureCourante: indexHeureCourante >= 0 ? indexHeureCourante : null,
                            tooltips: {
                                enabled: true,
                                mode: 'groupeRealise',
                                intersect: true,
                                callbacks: {
                                    label: function(tooltipItem, data) {
                                        var dataset = data.datasets[tooltipItem.datasetIndex];
                                        return dataset.label + ' : ' + tooltipItem.yLabel;
                                    },
                                    footer: function(tooltipItems) {
                                        var item = tooltipItems[0];
                                        var dataset = datasets[item.datasetIndex];
                                        if (!dataset || dataset.stack !== 'realise') {
                                            return '';
                                        }
                                        return 'Total réalisé : ' + totauxRealises[item.index].toFixed(2);
                                    },
                                },
                            },
                            hover: {mode: 'groupeRealise', intersect: true, animationDuration: 0},
                            legend: {display: true, position: 'bottom', labels: {boxWidth: 14, padding: 16}},
                            scales: {
                                xAxes: [{stacked: true, offset: true, barPercentage: 0.8, categoryPercentage: 0.8, gridLines: {display: false}, scaleLabel: {display: true, labelString: 'Heure'}}],
                                yAxes: [
                                    {id: 'y_quantite', stacked: true, ticks: {beginAtZero: true, max: maxAxeY}, gridLines: {color: '#edf0ec', zeroLineColor: '#9aa39b'}, scaleLabel: {display: true, labelString: 'Quantité (m³)'}},
                                    {id: 'y_lignes', display: false, stacked: false, ticks: {beginAtZero: true, max: maxAxeY}},
                                ],
                            },
                        },
                    });
                }, 'json');
            }

            $('#plan_charge_centrale_id, #plan_charge_date').change(function(e) {
                e.preventDefault();
                chargerGraphique();
            });

            $('#plan_charge_veille').click(function(e) {
                e.preventDefault();
                decalerDate(-1);
            });

            $('#plan_charge_lendemain').click(function(e) {
                e.preventDefault();
                decalerDate(1);
            });

            $('#plan_charge_aujourdhui').click(function(e) {
                e.preventDefault();
                $('#plan_charge_date').val(dateDuJour());
                chargerGraphique();
            });

            // Une seule centrale accessible : on la sélectionne et on affiche directement le graphique
            var options_centrales = $('#plan_charge_centrale_id option').filter(function() { return this.value != 0; });
            if (options_centrales.length === 1) {
                $('#plan_charge_centrale_id').val(options_centrales.val());
                chargerGraphique();
            }

            // Actualisation automatique toutes les 5 minutes quand on regarde la journée en cours
            setInterval(function() {
                if ($('#plan_charge_centrale_id').val() != 0 && estAujourdhui()) {
                    chargerGraphique();
                }
            }, 300000);
        });
    </script>
@endsection