import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

import qt.koriolan.shipheart 1.0

// ============================================================================
// detail_capteur.qml - page de détail d'un capteur (valeur + historique).
// ----------------------------------------------------------------------------
// Poussée sur le StackView depuis home.qml (clic court sur un capteur).
// Première page de détail du client wasm - domaine capteurs uniquement pour
// l'instant (Phase 2 du plan convenu), circuits/batteries/reservoirs à
// répliquer ensuite sur le même patron.
//
// Simplifications volontaires par rapport au natif (capteur.qml) :
//  - Graphique dessiné "à la main" en Canvas QML (pas QtCharts, qui exigerait
//    de repasser de QGuiApplication à QApplication - remise en cause
//    structurelle écartée pour l'instant).
//  - Tracé en ligne continue, pas en "escalier" comme le natif (détail
//    esthétique, ajustable plus tard si besoin).
//  - Bornes de l'axe Y avec une marge simple (10%), pas encore l'arrondi "à
//    un nombre rond" du natif (Fonctions.ajustement_mini_maxi()).
//  - Pas de zoom/glisser tactile (cf discussion - le sélecteur de période
//    couvre l'essentiel du besoin pour cette V1).
// ============================================================================

Shipheart_page {
    id: page_detail_capteur

    // Capturé ici, à la racine - cf home.qml pour l'explication du piège QML évité.

    property int idElement: 0
    property string nomElement: ""

    property int periodeIndex: 1   // 24 heures par défaut
    readonly property var periodesLibelles: [qsTr("1 heure"), qsTr("24 heures"), qsTr("7 jours"), qsTr("30 jours")]

    property var pointsCourbe: []
    property real valeurMin: 0
    property real valeurMax: 0
    property real valeurMoyenne: 0
    property double tempsMin: 0
    property double tempsMax: 0
    property string uniteAffichage: ""
    property int precisionAffichage: 1

    property real valeurActuelle: 0

    property DataProvider dataProvider: DataProvider {}

    function charger_courbe() {
        dataProvider.get_mesures("capteurs", idElement, periodeIndex);
    }

    function formater_date(timestampMs) {
        return Qt.formatDateTime(new Date(timestampMs), "dd/MM HH:mm");
    }

    Connections {
        target: dataProvider

        function onMesuresRecues(type, id, periode, variable, donnees) {
            if (id !== idElement || periode !== periodeIndex) return;   // Réponse obsolète (période changée entretemps)

            pointsCourbe = donnees.points;
            uniteAffichage = donnees.unite;
            precisionAffichage = donnees.precision;
            valeurActuelle = donnees.valeur_actuelle;
            if (donnees.points.length > 0) {
                valeurMin = donnees.min.v;
                tempsMin = donnees.min.t;
                valeurMax = donnees.max.v;
                tempsMax = donnees.max.t;
                valeurMoyenne = donnees.moyenne;
            }
            graphique.requestPaint();
        }

        function onErreur(message) {
            console.log("DataProvider erreur (détail capteur) : " + message);
        }
    }

    Component.onCompleted: charger_courbe()

    // Rafraîchissement périodique - moins fréquent que sur l'accueil, une
    // courbe n'a pas besoin d'une résolution à la seconde :
    Timer {
        interval: 5000
        running: true
        repeat: true
        onTriggered: charger_courbe()
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 15

        Text {
            text: nomElement
            font.pixelSize: 22
            font.bold: true
            color: couleur_gris_pale
        }

        RowLayout {
            Layout.fillWidth: true
            spacing: 20
            opacity: dataProvider.connecte ? 1.0 : 0.45

            RowLayout {
                Layout.alignment: Qt.AlignVCenter
                spacing: 4
                Text {
                    text: valeurActuelle.toFixed(precisionAffichage)
                    font.pixelSize: 64
                    font.bold: true
                    color: couleur_blanc_casse
                }
                Text {
                    text: uniteAffichage
                    font.pixelSize: 20
                    color: couleur_gris_pale
                    Layout.alignment: Qt.AlignTop
                }
            }

            Item { Layout.fillWidth: true }

            ColumnLayout {
                spacing: 10
                RowLayout {
                    Text { text: qsTr("Max"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
                    Text { text: valeurMax.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
                    Text { text: "[" + formater_date(tempsMax) + "]"; color: couleur_gris_moyen }
                }
                RowLayout {
                    Text { text: qsTr("Moyen"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
                    Text { text: valeurMoyenne.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
                }
                RowLayout {
                    Text { text: qsTr("Min"); color: couleur_gris_pale; Layout.preferredWidth: 90 }
                    Text { text: valeurMin.toFixed(precisionAffichage) + " " + uniteAffichage; color: couleur_blanc_casse; Layout.preferredWidth: 100 }
                    Text { text: "[" + formater_date(tempsMin) + "]"; color: couleur_gris_moyen }
                }
                RowLayout {
                    Text { text: qsTr("Delta (Max - Min)"); color: couleur_gris_pale; Layout.preferredWidth: 160 }
                    Text { text: (valeurMax - valeurMin).toFixed(precisionAffichage + 1) + " " + uniteAffichage; color: couleur_blanc_casse }
                }
            }
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 15
            opacity: dataProvider.connecte ? 1.0 : 0.45

            Canvas {
                id: graphique
                Layout.fillWidth: true
                Layout.fillHeight: true

                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();
                    ctx.clearRect(0, 0, width, height);

                    if (pointsCourbe.length < 2) {
                        ctx.fillStyle = couleur_rouge_transparent;
                        ctx.font = "14px sans-serif";
                        ctx.fillText(qsTr("Pas assez de données sur cette période."), width / 2 - 110, height / 2);
                        return;
                    }

                    var marge = 45;
                    var largeurUtile = width - 2 * marge;
                    var hauteurUtile = height - 2 * marge;

                    var tMin = pointsCourbe[0].t;
                    var tMax = pointsCourbe[pointsCourbe.length - 1].t;

                    var padding = (valeurMax - valeurMin) * 0.1 || 1;
                    var yMin = valeurMin - padding;
                    var yMax = valeurMax + padding;

                    function px(t) { return marge + ((t - tMin) / (tMax - tMin)) * largeurUtile; }
                    function py(v) { return marge + hauteurUtile - ((v - yMin) / (yMax - yMin)) * hauteurUtile; }

                    // Quadrillage horizontal + étiquettes Y :
                    ctx.strokeStyle = "#333333";
                    ctx.fillStyle = couleur_gris_pale;
                    ctx.font = "11px sans-serif";
                    var nbLignesY = 5;
                    for (var i = 0; i <= nbLignesY; i++) {
                        var v = yMin + (i / nbLignesY) * (yMax - yMin);
                        var y = py(v);
                        ctx.beginPath();
                        ctx.moveTo(marge, y);
                        ctx.lineTo(width - marge, y);
                        ctx.stroke();
                        ctx.fillText(v.toFixed(precisionAffichage), 2, y + 4);
                    }

                    // Quadrillage vertical ET étiquettes, ensemble, sur les mêmes
                    // paliers ronds - paliers de 5 min (1h), heure pleine (24h) ou
                    // minuit (7j/30j). Remplace l'ancien double affichage (quadrillage
                    // sans étiquette + étiquettes à des positions non alignées).
                    function prochain_palier_rond(instant, periodeIdx) {
                        var d = new Date(instant);
                        if (periodeIdx >= 2) {
                            d.setHours(0, 0, 0, 0);
                            if (d.getTime() < instant) d.setDate(d.getDate() + 1);
                        } else if (periodeIdx === 1) {
                            d.setMinutes(0, 0, 0);
                            if (d.getTime() < instant) d.setHours(d.getHours() + 1);
                        } else {
                            d.setSeconds(0, 0);
                            d.setMinutes(Math.ceil(d.getMinutes() / 5) * 5);
                            if (d.getTime() < instant) d.setMinutes(d.getMinutes() + 5);
                        }
                        return d.getTime();
                    }
                    var pasGrilleMs = (periodeIndex >= 2) ? 86400000 : (periodeIndex === 1) ? 3600000 : 5 * 60000;
                    var formatEtiquette = (periodeIndex >= 2) ? "dd/MM" : "HH:mm";
                    ctx.strokeStyle = "#2a2a2a";
                    ctx.fillStyle = couleur_gris_pale;
                    // Une étiquette sur 3 seulement pour 24h/30j (trop chargé sinon,
                    // 24-25 ou 30 barres) - à partir de la première, quitte à ce que les
                    // 1-2 dernières graduations restent sans étiquette :
                    var pasEtiquette = (periodeIndex === 1 || periodeIndex === 3) ? 3 : 1;
                    var indexGrille = 0;
                    for (var tGrille = prochain_palier_rond(tMin, periodeIndex); tGrille <= tMax; tGrille += pasGrilleMs, indexGrille++) {
                        var xGrille = px(tGrille);
                        ctx.beginPath();
                        ctx.moveTo(xGrille, marge);
                        ctx.lineTo(xGrille, marge + hauteurUtile);
                        ctx.stroke();
                        if (indexGrille % pasEtiquette === 0) {
                            ctx.fillText(Qt.formatDateTime(new Date(tGrille), formatEtiquette), xGrille - 18, height - 8);
                        }
                    }

                    // Ligne de la courbe :
                    ctx.strokeStyle = couleur_bleu_koriolan;
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    for (var k = 0; k < pointsCourbe.length; k++) {
                        var xx = px(pointsCourbe[k].t);
                        var yy = py(pointsCourbe[k].v);
                        if (k === 0) ctx.moveTo(xx, yy);
                        else ctx.lineTo(xx, yy);
                    }
                    ctx.stroke();

                    // Points min/max :
                    ctx.fillStyle = "lightgreen";
                    ctx.beginPath();
                    ctx.arc(px(tempsMin), py(valeurMin), 4, 0, 2 * Math.PI);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(px(tempsMax), py(valeurMax), 4, 0, 2 * Math.PI);
                    ctx.fill();
                }
            }

            ColumnLayout {
                spacing: 8
                Repeater {
                    model: periodesLibelles
                    delegate: Rectangle {
                        Layout.preferredWidth: 140
                        Layout.preferredHeight: 40
                        radius: 8
                        color: (index === periodeIndex) ? shipheart_couleur_fond_bouton_actif : shipheart_couleur_fond_bouton

                        Text {
                            anchors.centerIn: parent
                            text: modelData
                            color: couleur_blanc_casse
                            font.bold: (index === periodeIndex)
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                periodeIndex = index;
                                charger_courbe();
                            }
                        }
                    }
                }
            }
        }

        // Bouton retour :
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 44
            radius: 8
            color: shipheart_couleur_fond_bouton

            Text {
                anchors.centerIn: parent
                text: "↩"
                font.pixelSize: 20
                color: couleur_blanc_casse
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    stackView.pop();
                }
            }
        }
    }
}