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

{% block head %}
    {{ parent() }}
    <style>
        .maree-tide { display: flex; align-items: center; gap: 14px; border: 1px solid #dee2e6; border-radius: .5rem; padding: 12px 14px; }
        .maree-tide .badge-mer { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: #fff; }
        .maree-tide.pm .badge-mer { background: #0369a1; }
        .maree-tide.bm .badge-mer { background: #b45309; }
        .maree-tide .heure { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
        .maree-tide .coef { margin-left: auto; text-align: right; }
        .maree-tide .coef b { display: block; font-size: 1.3rem; }

        #mareeCurve svg { width: 100%; height: auto; display: block; touch-action: none; }
        #mareeCurve .zone-temps { cursor: col-resize; }
        #mareeCurve .zone-hauteur { cursor: row-resize; }
        #mareeCurve .readout { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; min-height: 34px; }
        #mareeCurve .readout .h { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
        #mareeCurve .readout .t { font-size: 1.05rem; color: #6c757d; font-variant-numeric: tabular-nums; }
        #mareeCurve .readout .trend { font-size: .85rem; color: #6c757d; }

        .hour-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
        .hour-cell { display: flex; align-items: baseline; gap: 6px; justify-content: center; border: 1px solid #dee2e6; border-radius: .5rem; padding: 8px 6px; cursor: pointer; background: none; font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s; }
        .hour-cell:hover { border-color: #0e7490; }
        .hour-cell.sel { border-color: #0e7490; background: rgba(14, 116, 144, .12); }
        .hour-cell .hh { font-size: .8rem; color: #6c757d; }
        .hour-cell .hv { font-weight: 700; }
        .hour-cell .arrow { font-size: .72rem; color: #6c757d; }

        .seances-card .form-check { margin-bottom: 0; }
        .seance-lanes { position: relative; }
        .seance-lane { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
        .seance-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: #0e7490; color: #fff; border-radius: 999px;
            padding: 5px 12px; font-size: .85rem; font-weight: 600;
            font-variant-numeric: tabular-nums; white-space: nowrap;
        }
        .seance-badge .creneau { opacity: .85; font-weight: 400; font-size: .78rem; }
        .seance-fenetre { border-left: 3px solid #0e7490; padding-left: 12px; margin-bottom: 14px; }
        .seance-fenetre .entete { font-size: .82rem; color: #6c757d; margin-bottom: 6px; }

        .vent-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: .5rem; }
        .vent-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    </style>
{% endblock %}

{% block title %}Marée et Vent -
    {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-eolia text-white py-3">
                    <h4 class="mb-0 text-center">
                        <i class="fas fa-water me-2"></i>
                        MARÉE ET VENT
                    </h4>
                </div>
                <div class="card-body">
                    <p class="text-muted text-center mb-4">Pleines mers, basses mers et coefficients — données api-maree.fr</p>

                    {% if cleManquante %}
                        <div class="alert alert-warning">
                            <i class="fas fa-key me-2"></i>
                            Aucune clé API n'est configurée. Un administrateur peut la renseigner dans
                            <strong>Administration &rsaquo; Paramètres du site</strong> (paramètre <code>maree_api_key</code>).
                        </div>
                    {% endif %}

                    {% if erreur %}
                        <div class="alert alert-danger">{{ erreur }}</div>
                    {% endif %}

                    <div class="row g-3 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label" for="mareeSite">Site</label>
                            <select class="form-select" id="mareeSite">
                                {% for site in sites %}
                                    <option value="{{ site.site_id }}" {% if site.site_id == siteDefaut %}selected{% endif %}>{{ site.site_name }}</option>
                                {% else %}
                                    <option value="">Aucun site disponible</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="mareeDate">Date</label>
                            <input type="date" class="form-control" id="mareeDate" value="{{ aujourdhui }}">
                        </div>
                        <div class="col-md-2 d-grid">
                            <button type="button" class="btn blue text-white" id="mareeGo">Afficher</button>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-3 align-items-end seances-card">
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="seancesActif">
                                <label class="form-check-label fw-semibold" for="seancesActif">
                                    <i class="fas fa-flag-checkered me-1"></i>
                                    Créneaux char à voile
                                </label>
                            </div>
                            <div class="form-text">Praticable sous {{ reglagesSeances.hauteurMax }} m d'eau.</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="seanceDuree">Durée (min)</label>
                            <input type="number" class="form-control" id="seanceDuree" min="5" max="600" step="5"
                                   value="{{ reglagesSeances.duree }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="seanceBattement">Battement (min)</label>
                            <input type="number" class="form-control" id="seanceBattement" min="0" max="600" step="5"
                                   value="{{ reglagesSeances.battement }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="seanceHauteur">Hauteur max (m)</label>
                            <input type="number" class="form-control" id="seanceHauteur" min="0" max="20" step="0.1"
                                   value="{{ reglagesSeances.hauteurMax }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="seanceHeureMin">Pas avant</label>
                            <input type="time" class="form-control" id="seanceHeureMin" step="900"
                                   value="{{ reglagesSeances.heureMinHhmm }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="seanceHeureMax">Pas après</label>
                            <input type="time" class="form-control" id="seanceHeureMax" step="900"
                                   value="{{ reglagesSeances.heureMaxHhmm }}">
                        </div>
                    </div>
                </div>
            </div>

            <div id="mareeOut"></div>

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-eolia text-white py-3">
                    <h5 class="mb-0 text-center">
                        <i class="fas fa-wind me-2"></i>
                        VENT EN TEMPS RÉEL
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Carte interactive centrée sur la base. Utilisez les commandes de la carte pour
                        changer de couche (vent, rafales, température, pluie) ou d'échéance.
                    </p>
                    <div class="vent-embed">
                        <iframe src="{{ carteVentUrl }}" loading="lazy" title="Carte des vents"
                                allowfullscreen referrerpolicy="no-referrer"></iframe>
                    </div>
                </div>
            </div>

            <p class="text-muted small text-center mt-4">
                Vent : <a href="https://www.ventusky.com" target="_blank" rel="noopener">Ventusky</a>.<br>
                Données de marée fournies par <a href="https://api-maree.fr" target="_blank" rel="noopener">api-maree.fr</a> — sources Ifremer/PREVIMER (CC BY).<br>
                Coefficients estimés, impropres à la navigation.
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
    {{ parent() }}
    <script>
    (function () {
        const TZ = "Europe/Paris";
        const ENDPOINT = "{{ path('mareeDonnees') }}";
        const siteSel = document.getElementById("mareeSite");
        const dateIn  = document.getElementById("mareeDate");
        const goBtn   = document.getElementById("mareeGo");
        const out     = document.getElementById("mareeOut");
        const seancesActif   = document.getElementById("seancesActif");
        const seanceDuree    = document.getElementById("seanceDuree");
        const seanceBattement = document.getElementById("seanceBattement");
        const seanceHauteur  = document.getElementById("seanceHauteur");
        const seanceHeureMin = document.getElementById("seanceHeureMin");
        const seanceHeureMax = document.getElementById("seanceHeureMax");

        // Champ <input type="time"> -> heures decimales.
        function lireHeure(input, defaut) {
            const m = /^(\d{1,2}):(\d{2})$/.exec(String(input.value).trim());
            if (!m) return defaut;
            const h = +m[1] + +m[2] / 60;
            return h >= 0 && h <= 24 ? h : defaut;
        }

        function lireNombre(input, defaut) {
            const v = parseFloat(String(input.value).replace(",", "."));
            return Number.isFinite(v) ? v : defaut;
        }

        function say(msg, isError) {
            const box = document.createElement("div");
            box.className = isError ? "alert alert-danger" : "alert alert-info";
            box.textContent = msg;
            out.innerHTML = "";
            out.appendChild(box);
        }

        function frDate(iso) {
            const p = iso.split("-").map(Number);
            return new Date(Date.UTC(p[0], p[1] - 1, p[2])).toLocaleDateString("fr-FR",
                { weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC" });
        }

        function hhmm(t) {
            return new Intl.DateTimeFormat("fr-FR", { hour: "2-digit", minute: "2-digit", timeZone: TZ }).format(new Date(t));
        }

        // Interpolation linéaire de la hauteur entre deux points de la série (pas de 10 min).
        function heightAt(points, t) {
            if (!points.length) return null;
            const first = points[0]._t, last = points[points.length - 1]._t;
            if (t <= first) return points[0].height;
            if (t >= last) return points[points.length - 1].height;
            let lo = 0, hi = points.length - 1;
            while (hi - lo > 1) {
                const mid = (lo + hi) >> 1;
                if (points[mid]._t <= t) lo = mid; else hi = mid;
            }
            const a = points[lo], b = points[hi];
            const f = (t - a._t) / (b._t - a._t);
            return a.height + (b.height - a.height) * f;
        }

        // Courbe SVG interactive de la hauteur d'eau sur la journée.
        // Retourne { node, select(t) } pour que la liste horaire puisse piloter le marqueur.
        function curve(points) {
            if (!points || points.length < 2) return null;
            const W = 700, H = 200, PT = 20, PB = 28, PL = 38, PR = 12;
            const hs = points.map(p => p.height);
            let lo = Math.min.apply(null, hs), hi = Math.max.apply(null, hs);
            if (hi - lo < 0.1) { hi += 0.5; lo -= 0.5; }
            const t0 = points[0]._t, t1 = points[points.length - 1]._t;
            if (!(t1 > t0)) return null;
            const X = t => PL + (t - t0) / (t1 - t0) * (W - PL - PR);
            const Y = h => PT + (hi - h) / (hi - lo) * (H - PT - PB);

            const line = points.map((p, i) =>
                (i ? "L" : "M") + X(p._t).toFixed(1) + " " + Y(p.height).toFixed(1)).join(" ");
            const area = line + " L" + X(t1).toFixed(1) + " " + (H - PB).toFixed(1)
                              + " L" + X(t0).toFixed(1) + " " + (H - PB).toFixed(1) + " Z";

            let grid = "";
            // Une graduation par heure ; libellé toutes les 3 h pour rester lisible.
            for (let hh = 0; hh <= 24; hh++) {
                const t = t0 + hh * 3600e3;
                if (t > t1) break;
                const x = X(t).toFixed(1);
                const major = hh % 3 === 0;
                grid += '<line x1="' + x + '" y1="' + PT + '" x2="' + x + '" y2="' + (H - PB)
                     +  '" stroke="#dee2e6" stroke-width="1" opacity="' + (major ? 1 : 0.45) + '"/>';
                if (major) {
                    grid += '<text x="' + x + '" y="' + (H - PB + 16) + '" fill="#6c757d" font-size="11" text-anchor="middle">'
                         +  String(hh).padStart(2, "0") + 'h</text>';
                }
            }
            [lo, (lo + hi) / 2, hi].forEach(h => {
                const y = Y(h);
                grid += '<line x1="' + PL + '" y1="' + y.toFixed(1) + '" x2="' + (W - PR) + '" y2="' + y.toFixed(1) + '" stroke="#dee2e6"/>'
                     +  '<text x="' + (PL - 6) + '" y="' + (y + 4).toFixed(1) + '" fill="#6c757d" font-size="11" text-anchor="end">'
                     +  h.toFixed(1) + '</text>';
            });

            const node = document.createElement("div");
            node.className = "card shadow-sm mb-4";
            node.id = "mareeCurve";
            node.innerHTML = '<div class="card-body">'
                + '<div class="readout"><span class="h"></span><span class="t"></span><span class="trend"></span></div>'
                + '<svg viewBox="0 0 ' + W + ' ' + H + '" role="img" aria-label="Courbe de hauteur d\'eau sur la journee">'
                + grid
                + '<path d="' + area + '" fill="#0e7490" opacity="0.14"/>'
                + '<path d="' + line + '" fill="none" stroke="#0e7490" stroke-width="2.5" stroke-linejoin="round"/>'
                + '<g class="marker" style="display:none">'
                + '<line y1="' + PT + '" y2="' + (H - PB) + '" stroke="#0e7490" stroke-width="1" stroke-dasharray="3 3"/>'
                + '<circle r="5" fill="#0e7490" stroke="#fff" stroke-width="2"/>'
                + '<text font-size="11" font-weight="700" fill="#0e7490" stroke="#fff"'
                + ' stroke-width="3" paint-order="stroke" style="font-variant-numeric:tabular-nums"></text>'
                + '</g>'
                // Marqueur de hauteur : trait horizontal + un point par passage à ce niveau.
                + '<g class="hmarker" style="display:none">'
                + '<line x1="' + PL + '" x2="' + (W - PR) + '" stroke="#b45309" stroke-width="1" stroke-dasharray="3 3"/>'
                + '<g class="hdots"></g>'
                + '</g>'
                // Bandes de saisie : en bas l'heure, à gauche la hauteur.
                + '<rect class="zone-temps" x="' + PL + '" y="' + (H - PB) + '" width="' + (W - PL - PR) + '" height="' + PB + '" fill="transparent"/>'
                + '<rect class="zone-hauteur" x="0" y="' + PT + '" width="' + PL + '" height="' + (H - PT - PB) + '" fill="transparent"/>'
                + '</svg>'
                + '<p class="text-muted small mt-2 mb-0">Choisissez une <strong>heure</strong> sur l\'axe du bas, ou une <strong>hauteur</strong> sur l\'axe de gauche pour voir tous les passages à ce niveau.</p>'
                + '</div>';

            const svg = node.querySelector("svg");
            const marker = node.querySelector(".marker");
            const mLine = marker.querySelector("line");
            const mDot = marker.querySelector("circle");
            const mText = marker.querySelector("text");
            const rH = node.querySelector(".readout .h");
            const rT = node.querySelector(".readout .t");
            const rTrend = node.querySelector(".readout .trend");
            const hMarker = node.querySelector(".hmarker");
            const hLine = hMarker.querySelector("line");
            const hDots = hMarker.querySelector(".hdots");

            function select(t) {
                t = Math.max(t0, Math.min(t1, t));
                const h = heightAt(points, t);
                if (h == null) return;
                const x = X(t), y = Y(h);
                mLine.setAttribute("x1", x); mLine.setAttribute("x2", x);
                mDot.setAttribute("cx", x); mDot.setAttribute("cy", y);
                // Hauteur affichee au point : a droite du marqueur, a gauche pres du
                // bord droit, et decalee vers le bas si le point touche le haut du cadre.
                const aGauche = x > W - PR - 52;
                mText.setAttribute("x", (aGauche ? x - 9 : x + 9).toFixed(1));
                mText.setAttribute("y", Math.max(PT + 10, y - 9).toFixed(1));
                mText.setAttribute("text-anchor", aGauche ? "end" : "start");
                mText.textContent = h.toFixed(2) + " m";
                marker.style.display = "";
                hMarker.style.display = "none";

                rH.textContent = h.toFixed(2) + " m";
                rT.textContent = hhmm(t);
                // Sens de la marée : comparaison à 15 min d'intervalle.
                const prev = heightAt(points, Math.max(t0, t - 9e5));
                const next = heightAt(points, Math.min(t1, t + 9e5));
                rTrend.textContent = next > prev ? "↑ marée montante"
                                   : next < prev ? "↓ marée descendante" : "étale";
                node.dispatchEvent(new CustomEvent("pick", { detail: { time: t } }));
            }

            // Tous les instants où l'eau passe par la hauteur h (typiquement 4 par jour :
            // deux à la montée, deux à la descente). Repérés par changement de signe entre
            // deux points consécutifs, puis affinés par interpolation linéaire.
            function crossings(h) {
                const res = [];
                for (let i = 1; i < points.length; i++) {
                    const a = points[i - 1], b = points[i];
                    const da = a.height - h, db = b.height - h;
                    let t = null;
                    if (da === 0) {
                        t = a._t;
                    } else if ((da < 0) !== (db < 0)) {
                        t = a._t + (b._t - a._t) * (da / (da - db));
                    }
                    if (t === null) continue;
                    // Un point d'echantillon pile a la hauteur h appartient a deux segments,
                    // et un extremum tangent a h n'est qu'un seul passage : on dedoublonne.
                    if (res.length && Math.abs(res[res.length - 1].t - t) < 1000) continue;
                    res.push({ t: t, rising: b.height > a.height });
                }
                return res;
            }

            function selectHeight(h) {
                h = Math.max(lo, Math.min(hi, h));
                const list = crossings(h);
                const y = Y(h);
                hLine.setAttribute("y1", y); hLine.setAttribute("y2", y);
                // Un point + son heure a chaque passage. Les libelles vont sous le trait,
                // ou au-dessus s'il n'y a pas la place ; deux passages trop proches sont
                // empiles sur des lignes successives plutot que de se chevaucher.
                const LARGEUR = 46, LIGNE = 13;
                const versLeBas = y < H - PB - 26;
                const y0 = versLeBas ? y + 18 : y - 11;
                const finDeLigne = [];
                hDots.innerHTML = list.map(c => {
                    const x = X(c.t);
                    const ancre = x < PL + LARGEUR / 2 ? "start"
                                : x > W - PR - LARGEUR / 2 ? "end" : "middle";
                    const xTexte = ancre === "start" ? PL + 2 : ancre === "end" ? W - PR - 2 : x;
                    const gauche = ancre === "start" ? PL + 2
                                 : ancre === "end" ? W - PR - 2 - LARGEUR : x - LARGEUR / 2;

                    // Premiere ligne ou le libelle precedent est deja termine.
                    let ligne = 0;
                    while (finDeLigne[ligne] != null && gauche < finDeLigne[ligne]) ligne++;
                    finDeLigne[ligne] = gauche + LARGEUR;
                    const yTexte = y0 + (versLeBas ? ligne * LIGNE : -ligne * LIGNE);

                    return '<circle cx="' + x.toFixed(1) + '" cy="' + y.toFixed(1)
                        + '" r="5" fill="#b45309" stroke="#fff" stroke-width="2"/>'
                        // paint-order : le halo blanc est peint sous le texte, pas par-dessus.
                        + '<text x="' + xTexte.toFixed(1) + '" y="' + yTexte.toFixed(1)
                        + '" text-anchor="' + ancre + '" font-size="11" font-weight="700"'
                        + ' fill="#b45309" stroke="#fff" stroke-width="3" paint-order="stroke"'
                        + ' style="font-variant-numeric:tabular-nums">'
                        + hhmm(c.t) + (c.rising ? " ↑" : " ↓") + '</text>';
                }).join("");
                hMarker.style.display = "";
                marker.style.display = "none";

                rH.textContent = h.toFixed(2) + " m";
                rT.textContent = list.length
                    ? list.map(c => hhmm(c.t) + (c.rising ? " ↑" : " ↓")).join("  ·  ")
                    : "";
                rTrend.textContent = list.length
                    ? list.length + (list.length > 1 ? " passages" : " passage")
                    : "niveau jamais atteint ce jour";
                node.dispatchEvent(new CustomEvent("pickHeight", { detail: { height: h, crossings: list } }));
            }

            // Conversion coordonnées écran → valeurs, via le viewBox (le SVG est redimensionné en CSS).
            function viewBoxPoint(ev) {
                const r = svg.getBoundingClientRect();
                return {
                    x: (ev.clientX - r.left) / r.width * W,
                    y: (ev.clientY - r.top) / r.height * H,
                };
            }

            function timeFromEvent(ev) {
                const frac = (viewBoxPoint(ev).x - PL) / (W - PL - PR);
                return t0 + Math.max(0, Math.min(1, frac)) * (t1 - t0);
            }

            function heightFromEvent(ev) {
                const frac = (viewBoxPoint(ev).y - PT) / (H - PT - PB);
                return hi - Math.max(0, Math.min(1, frac)) * (hi - lo);
            }

            // Chaque bande pilote sa propre grandeur : le bas l'heure, la gauche la hauteur.
            const zoneTemps = svg.querySelector(".zone-temps");
            const zoneHauteur = svg.querySelector(".zone-hauteur");

            zoneTemps.addEventListener("pointermove", ev => select(timeFromEvent(ev)));
            zoneTemps.addEventListener("pointerdown", ev => {
                zoneTemps.setPointerCapture(ev.pointerId);
                select(timeFromEvent(ev));
            });

            zoneHauteur.addEventListener("pointermove", ev => selectHeight(heightFromEvent(ev)));
            zoneHauteur.addEventListener("pointerdown", ev => {
                zoneHauteur.setPointerCapture(ev.pointerId);
                selectHeight(heightFromEvent(ev));
            });

            return { node: node, select: select, selectHeight: selectHeight, t0: t0, t1: t1 };
        }

        // Liste des hauteurs heure par heure ; cliquer une case déplace le marqueur de la courbe.
        function hourList(points, c) {
            const node = document.createElement("div");
            node.className = "card shadow-sm mb-4";
            node.innerHTML = '<div class="card-body"><h5 class="mb-3">Hauteur heure par heure</h5><div class="hour-grid"></div></div>';
            const grid = node.querySelector(".hour-grid");
            const cells = [];

            const base = new Date(points[0]._t);
            base.setMinutes(0, 0, 0);
            const last = points[points.length - 1]._t;

            for (let i = 0; i < 24; i++) {
                const t = base.getTime() + i * 3600e3;
                if (t < points[0]._t || t > last) continue;
                const h = heightAt(points, t);
                if (h == null) continue;
                const prev = heightAt(points, Math.max(points[0]._t, t - 9e5));
                const next = heightAt(points, Math.min(last, t + 9e5));

                const b = document.createElement("button");
                b.type = "button";
                b.className = "hour-cell";
                b.innerHTML = '<span class="hh"></span><span class="hv"></span><span class="arrow"></span>';
                b.querySelector(".hh").textContent = hhmm(t);
                b.querySelector(".hv").textContent = h.toFixed(2) + " m";
                b.querySelector(".arrow").textContent = next > prev ? "↑" : next < prev ? "↓" : "=";
                b.addEventListener("click", () => c.select(t));
                b._t = t;
                cells.push(b);
                grid.appendChild(b);
            }

            function highlight(t) {
                // t null : choix par hauteur, aucune heure precise a mettre en avant.
                if (t == null) { for (const b of cells) b.classList.remove("sel"); return; }
                let best = null, bd = Infinity;
                for (const b of cells) {
                    const dd = Math.abs(b._t - t);
                    if (dd < bd) { bd = dd; best = b; }
                }
                for (const b of cells) b.classList.toggle("sel", b === best && bd <= 18e5);
            }

            return { node: node, highlight: highlight };
        }

        // --- Planification des seances de char a voile --------------------
        // La pratique exige du sable decouvert : une seance n'est possible que
        // tant que la hauteur d'eau reste SOUS le seuil configure.
        const SNAP = 15 * 60e3;   // les seances se calent sur le quart d'heure
        const MIDI = 12;          // frontiere matin / apres-midi (heure locale)

        // Heure decimale -> libelle « 8h » / « 20h30 ».
        function fmtHeure(h) {
            const entier = Math.floor(h), min = Math.round((h - entier) * 60);
            return entier + 'h' + (min ? String(min).padStart(2, "0") : "");
        }

        // Heure locale (Europe/Paris) d'un instant, en heures decimales.
        function heureLocale(t) {
            const p = new Intl.DateTimeFormat("fr-FR", {
                hour: "2-digit", minute: "2-digit", hour12: false, timeZone: TZ
            }).formatToParts(new Date(t));
            const h = +p.find(x => x.type === "hour").value;
            const m = +p.find(x => x.type === "minute").value;
            return h + m / 60;
        }

        // Instant du midi local encadrant t, en ms.
        function midiLocal(t) {
            return t + (MIDI - heureLocale(t)) * 3600e3;
        }

        // Plages continues ou la hauteur reste <= seuil, bornees par interpolation
        // pour ne pas perdre les quelques minutes entre deux echantillons.
        function fenetres(points, seuil) {
            const res = [];
            let debut = null;
            const croise = (a, b) => a._t + (b._t - a._t) * ((a.height - seuil) / (a.height - b.height));

            for (let i = 0; i < points.length; i++) {
                const p = points[i];
                const dedans = p.height <= seuil;
                if (dedans && debut === null) {
                    const prev = points[i - 1];
                    debut = prev ? croise(prev, p) : p._t;
                } else if (!dedans && debut !== null) {
                    res.push({ debut: debut, fin: croise(points[i - 1], p) });
                    debut = null;
                }
            }
            if (debut !== null) res.push({ debut: debut, fin: points[points.length - 1]._t });
            return res;
        }

        // Remplit une plage de seances calees au quart d'heure.
        // versLaFin : on empile depuis la fin (matin, seances le plus tard possible).
        // Sinon on empile depuis le debut (apres-midi, le plus tot possible).
        function placer(debut, fin, dureeMs, battementMs, versLaFin) {
            if (fin - debut < dureeMs) return [];

            // On maximise d'abord le NOMBRE de seances : caler betement sur le premier
            // (ou le dernier) quart d'heure peut gaspiller quelques minutes et faire
            // perdre un creneau entier. Tous les decalages possibles au quart d'heure
            // sont donc essayes, et la preference matin/apres-midi ne sert qu'a
            // departager les remplissages de meme taille.
            const pas = dureeMs + battementMs;
            const premier = Math.ceil(debut / SNAP) * SNAP;
            let meilleur = [];

            for (let depart = premier; depart + dureeMs <= fin; depart += SNAP) {
                const serie = [];
                for (let d = depart; d + dureeMs <= fin; d += pas) {
                    serie.push({ debut: d, fin: d + dureeMs });
                }
                if (!serie.length) break;

                let mieux = serie.length > meilleur.length;
                if (!mieux && serie.length === meilleur.length) {
                    // A nombre egal : le matin on retient la serie qui finit le plus
                    // tard, l'apres-midi celle qui commence le plus tot (la premiere
                    // trouvee, qu'on ne remplace donc pas).
                    mieux = versLaFin && serie[serie.length - 1].fin > meilleur[meilleur.length - 1].fin;
                }
                if (mieux) meilleur = serie;
            }
            return meilleur;
        }

        // Seances d'une journee : chaque fenetre est coupee a midi, la moitie du
        // matin tassee vers midi (au plus tard), celle de l'apres-midi aussi (au plus tot).
        function planifier(points, seuil, dureeMin, battementMin, heureMin, heureMax) {
            const dureeMs = dureeMin * 60e3, battementMs = battementMin * 60e3;
            return fenetres(points, seuil).map(f => {
                // Amplitude d'ouverture du club : la fenetre de maree est rognee
                // avant tout placement, pour ne jamais proposer de creneau nocturne.
                const jour = midiLocal(f.debut) - MIDI * 3600e3;   // minuit local
                const ouvre = jour + heureMin * 3600e3;
                const ferme = jour + heureMax * 3600e3;
                f = { debut: Math.max(f.debut, ouvre), fin: Math.min(f.fin, ferme) };
                if (f.fin - f.debut < dureeMs) return { fenetre: f, seances: [] };

                const midi = midiLocal(f.debut);
                const seances = [];
                if (f.fin <= midi) {
                    seances.push(...placer(f.debut, f.fin, dureeMs, battementMs, true));
                } else if (f.debut >= midi) {
                    seances.push(...placer(f.debut, f.fin, dureeMs, battementMs, false));
                } else {
                    // La fenetre enjambe midi : chaque moitie se tasse vers midi.
                    const matin = placer(f.debut, midi, dureeMs, battementMs, true);
                    seances.push(...matin);
                    // L'apres-midi ne peut pas demarrer pile a midi si une seance du
                    // matin s'y termine : le battement doit aussi valoir de part et d'autre.
                    const apres = matin.length
                        ? Math.max(midi, matin[matin.length - 1].fin + battementMs)
                        : midi;
                    seances.push(...placer(apres, f.fin, dureeMs, battementMs, false));
                }
                return { fenetre: f, seances: seances };
            }).filter(x => x.seances.length);
        }

        // Repartit les badges sur plusieurs lignes : deux seances qui se chevauchent
        // ne peuvent pas partager la meme ligne.
        function enLignes(seances) {
            const lignes = [];
            for (const s of seances.slice().sort((a, b) => a.debut - b.debut)) {
                let i = 0;
                while (lignes[i] && lignes[i][lignes[i].length - 1].fin > s.debut) i++;
                (lignes[i] ||= []).push(s);
            }
            return lignes;
        }

        function blocSeances(points, seuil, dureeMin, battementMin, heureMin, heureMax) {
            const groupes = planifier(points, seuil, dureeMin, battementMin, heureMin, heureMax);
            const node = document.createElement("div");
            node.className = "card shadow-sm mb-4";

            const total = groupes.reduce((n, g) => n + g.seances.length, 0);
            let corps = '<h5 class="mb-1"><i class="fas fa-flag-checkered me-2"></i>Cr\u00e9neaux char \u00e0 voile</h5>'
                + '<p class="text-muted small mb-3">Sous ' + seuil.toFixed(2) + ' m d\'eau \u00b7 '
                + dureeMin + ' min par s\u00e9ance \u00b7 ' + battementMin + ' min de battement \u00b7 '
                + 'entre ' + fmtHeure(heureMin) + ' et ' + fmtHeure(heureMax) + '.</p>';

            if (!total) {
                corps += '<p class="text-muted mb-0">Aucun cr\u00e9neau praticable ce jour \u00e0 ce niveau d\'eau '
                    + 'dans la plage ' + fmtHeure(heureMin) + '\u2013' + fmtHeure(heureMax) + '.</p>';
            } else {
                for (const g of groupes) {
                    corps += '<div class="seance-fenetre"><div class="entete">Mar\u00e9e basse \u00b7 praticable de '
                        + hhmm(g.fenetre.debut) + ' \u00e0 ' + hhmm(g.fenetre.fin) + '</div><div class="seance-lanes">';
                    for (const ligne of enLignes(g.seances)) {
                        corps += '<div class="seance-lane">' + ligne.map(s =>
                            '<span class="seance-badge">' + hhmm(s.debut)
                            + '<span class="creneau">\u2192</span>' + hhmm(s.fin) + '</span>').join("") + '</div>';
                    }
                    corps += '</div></div>';
                }
            }
            node.innerHTML = '<div class="card-body">' + corps + '</div>';
            return node;
        }

        async function show() {
            const site = siteSel.value, date = dateIn.value;
            if (!site) return say("Aucun site sélectionné.", true);
            if (!date) return say("Choisissez une date.", true);

            goBtn.disabled = true;
            say("Chargement…");

            try {
                const r = await fetch(ENDPOINT + "?site=" + encodeURIComponent(site) + "&date=" + encodeURIComponent(date));
                const d = await r.json();
                if (!r.ok) throw new Error(d.error || "Erreur " + r.status);

                out.innerHTML = '<div class="card shadow-sm mb-4"><div class="card-body">'
                    + '<h5 class="site-title mb-1"></h5><p class="text-muted site-date"></p>'
                    + '<div class="d-grid gap-2 tides"></div></div></div>';
                out.querySelector(".site-title").textContent = d.site_name;
                out.querySelector(".site-date").textContent = frDate(d.date);

                const tides = out.querySelector(".tides");
                if (!d.extrema.length) {
                    const s = document.createElement("p");
                    s.className = "text-muted mb-0";
                    s.textContent = "Aucune donnée de marée pour cette date.";
                    tides.appendChild(s);
                } else {
                    for (const t of d.extrema) {
                        const pm = t.type === "PM";
                        const el = document.createElement("div");
                        el.className = "maree-tide " + (pm ? "pm" : "bm");
                        el.innerHTML = '<div class="badge-mer">' + (pm ? "PM" : "BM") + '</div>'
                            + '<div><div class="heure"></div><div class="text-muted small meta"></div></div>'
                            + (t.coef != null ? '<div class="coef"><b></b><span class="text-muted small">coefficient</span></div>' : "");
                        el.querySelector(".heure").textContent = t.time;
                        el.querySelector(".meta").textContent =
                            (pm ? "Pleine mer" : "Basse mer") + (t.height != null ? " — " + t.height.toFixed(2) + " m" : "");
                        if (t.coef != null) el.querySelector(".coef b").textContent = t.coef;
                        tides.appendChild(el);
                    }
                }

                const pts = (d.niveaux || []).map(p => ({ height: p.height, time: p.time, _t: new Date(p.time).getTime() }));

                if (seancesActif.checked && pts.length > 1) {
                    out.appendChild(blocSeances(pts, lireNombre(seanceHauteur, 3.5),
                        lireNombre(seanceDuree, 90), lireNombre(seanceBattement, 30),
                        lireHeure(seanceHeureMin, 8), lireHeure(seanceHeureMax, 20)));
                }
                const c = curve(pts);
                if (c) {
                    const hours = hourList(pts, c);
                    out.appendChild(hours.node);
                    out.appendChild(c.node);
                    c.node.addEventListener("pick", e => hours.highlight(e.detail.time));
                    c.node.addEventListener("pickHeight", () => hours.highlight(null));
                    // Sélection initiale : l'heure courante si on regarde aujourd'hui, sinon midi.
                    const now = Date.now();
                    c.select(now >= c.t0 && now <= c.t1 ? now : (c.t0 + c.t1) / 2);
                }
            } catch (e) {
                say(e.message, true);
            } finally {
                goBtn.disabled = false;
            }
        }

        goBtn.addEventListener("click", show);
        // Tout changement de reglage relance le calcul des creneaux.
        for (const el of [seancesActif, seanceDuree, seanceBattement, seanceHauteur,
                          seanceHeureMin, seanceHeureMax]) {
            el.addEventListener("change", show);
        }
        dateIn.addEventListener("keydown", e => { if (e.key === "Enter") show(); });
        if (siteSel.value) show();
    })();
    </script>
{% endblock %}