{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="d-flex align-items-center mb-3">
    <a class="btn btn-link text-secondary px-0" href="{{ url_for('charging_sessions', month=return_month) if return_month else url_for('charging_sessions') }}">&larr; Zurück zu den Ladevorgängen</a>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body pb-3">
      <h1 class="ct-docs-page-h1-title mb-3">Session Analyse</h1>
      <div class="d-flex flex-wrap align-items-center gap-2">
        <span class="badge rounded-pill bg-light border text-dark">Station <span class="fw-semibold">{{ session.station_id or '-' }}</span></span>
        <span class="badge rounded-pill bg-light border text-dark">Connector <span class="fw-semibold">{{ session.connector_id or '-' }}</span></span>
        <span class="badge rounded-pill bg-light border text-dark">Transaction <span class="fw-semibold">{{ session.transaction_id or '-' }}</span></span>
        {% if session.id_tag %}
        <span class="badge rounded-pill bg-light border text-dark">RFID <span class="fw-semibold">{{ session.id_tag }}</span></span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header pb-0">
      <h2 class="h6 mb-0">Zusammenfassung</h2>
    </div>
    <div class="card-body">
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
        {% for item in session_details %}
        <div class="col">
          <div class="text-uppercase text-muted text-xxs mb-1">{{ item.label }}</div>
          <div class="text-sm fw-semibold">{{ item.value }}</div>
        </div>
        {% endfor %}
      </div>
      <div class="mt-3">
        <p class="text-xs text-muted mb-1">
          Analysefenster: {{ analysis_window.start }} – {{ analysis_window.end }}
        </p>
        {% if consulted_tables %}
        <p class="text-xs text-muted mb-0">
          Datenquellen: {{ consulted_tables|join(', ') }}
        </p>
        {% else %}
        <p class="text-xs text-muted mb-0">
          Es wurden keine passenden Nachrichtentabellen gefunden.
        </p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header pb-0">
      <h2 class="h6 mb-0">Meter Values</h2>
    </div>
    <div class="card-body">
      {% if chart_labels %}
      <div class="position-relative" style="min-height: 360px;">
        <canvas id="meterValuesChart"></canvas>
      </div>
      <p class="text-xs text-muted mt-3 mb-0">
        Nutzen Sie die Legende unterhalb der Grafik, um einzelne Messreihen ein- oder auszublenden.
      </p>
      {% else %}
      <p class="text-muted mb-0">Für diesen Ladevorgang wurden keine MeterValues gefunden.</p>
      {% endif %}
    </div>
  </div>

  {% if soc_analytics %}
  <div class="card mb-4">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center gap-2 flex-wrap">
      <h2 class="h6 mb-0">SoC Ladeeffizienz</h2>
      {% if soc_segments %}
      <button class="btn btn-sm btn-outline-secondary collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#socRangeTable" aria-expanded="false" aria-controls="socRangeTable">
        Ein-/Ausklappen
      </button>
      {% endif %}
    </div>
    <div class="card-body">
      {% if soc_chart_points %}
      <div class="position-relative mb-4" style="min-height: 260px;">
        <canvas id="socEfficiencyChart"></canvas>
      </div>
      {% endif %}
      {% if soc_segments %}
      <div class="table-responsive collapse" id="socRangeTable">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">SoC-Bereich</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">kWh pro 1% SoC</th>
            </tr>
          </thead>
          <tbody>
            {% for segment in soc_segments %}
            <tr>
              <td class="text-xs">{{ segment.range }}</td>
              <td class="text-xs">{{ segment.kwh_per_percentage }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-muted mb-0">Nicht genügend SoC-Änderungen für eine Auswertung verfügbar.</p>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% if soc_analytics %}
  <div class="card mb-4">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center gap-2 flex-wrap">
      <h2 class="h6 mb-0">Analytics</h2>
      {% if session and session.id %}
      <div class="d-flex flex-column align-items-end">
        <a class="btn btn-sm btn-outline-primary" href="{{ url_for('charging_session_analysis_training_data', session_id=session.id) }}">
          Download AI Data
        </a>
        <a class="text-xs mt-1" href="{{ url_for('static', filename='assets/Ladebericht.pdf') }}" download>
          Ladebericht herunterladen (PDF)
        </a>
      </div>
      {% endif %}
    </div>
    <div class="card-body">
      <div class="row row-cols-1 row-cols-md-2 g-3">
        <div class="col">
          <div class="text-uppercase text-muted text-xxs mb-1">KWh per SoC Percentage</div>
          <div class="text-sm fw-semibold">{{ soc_analytics.kwh_per_percentage }}</div>
        </div>
        <div class="col">
          <div class="text-uppercase text-muted text-xxs mb-1">Min KWh per SoC Percentage</div>
          <div class="text-sm fw-semibold">{{ soc_analytics.min_kwh_per_percentage }}</div>
        </div>
        <div class="col">
          <div class="text-uppercase text-muted text-xxs mb-1">Max KWh per SoC Percentage</div>
          <div class="text-sm fw-semibold">{{ soc_analytics.max_kwh_per_percentage }}</div>
        </div>
        <div class="col">
          <div class="text-uppercase text-muted text-xxs mb-1">Battery Analysis</div>
          <div class="text-sm fw-semibold">{{ soc_analytics.state_of_health }}</div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="card mb-4">
    <div class="card-header pb-0 d-flex justify-content-between align-items-center gap-2">
      <h2 class="h6 mb-0">OCPP Nachrichten</h2>
      <button class="btn btn-sm btn-outline-secondary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ocppMessagesCollapse" aria-expanded="false" aria-controls="ocppMessagesCollapse">
        Ein-/Ausklappen
      </button>
    </div>
    <div id="ocppMessagesCollapse" class="card-body collapse">
      {% if messages %}
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Zeit</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Richtung</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Topic</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nachricht</th>
            </tr>
          </thead>
          <tbody>
            {% for message in messages %}
            <tr>
              <td class="text-xs">{{ message.timestamp_display }}</td>
              <td class="text-xs">{{ message.display_direction }}</td>
              <td class="text-xs">{{ message.topic or '-' }}</td>
              <td class="text-xs" style="min-width: 240px;">
                <pre class="mb-0" style="white-space: pre-wrap; word-break: break-word;">{{ message.formatted_message }}</pre>
              </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
      </div>
      {% if messages_query_debug %}
      <div class="mt-3">
        <div class="text-uppercase text-muted text-xxs mb-1">SQL-Statement</div>
        <pre class="mb-0" style="white-space: pre-wrap; word-break: break-word;">{{ messages_query_debug | join('\n\n') }}</pre>
      </div>
      {% endif %}
      {% else %}
      <p class="text-muted mb-0">Für diesen Zeitraum wurden keine Nachrichten gefunden.</p>
      {% endif %}
    </div>
  </div>
</main>
{% if chart_labels or soc_chart_points %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var meterChartLabels = {{ chart_labels|default([], true)|tojson }};
    var chartDatasets = {{ chart_datasets|default([], true)|tojson }};
    var chartAxes = {{ chart_axes|default({}, true)|tojson }};
    var socChartPoints = {{ soc_chart_points|default([], true)|tojson }};

    var hasMeterChart = Array.isArray(meterChartLabels) && meterChartLabels.length > 0 && Array.isArray(chartDatasets) && chartDatasets.length > 0;
    if (hasMeterChart && window.Chart) {
      var ctx = document.getElementById('meterValuesChart');
      if (ctx) {
        var scales = {
          x: {
            ticks: {
              autoSkip: true,
              maxTicksLimit: 14
            },
            grid: {
              display: false
            }
          }
        };

        if (chartAxes && typeof chartAxes === 'object') {
          Object.keys(chartAxes).forEach(function (axisKey) {
            scales[axisKey] = chartAxes[axisKey];
          });
        }

        new Chart(ctx, {
          type: 'line',
          data: {
            labels: meterChartLabels,
            datasets: chartDatasets
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
              mode: 'index',
              intersect: false
            },
            stacked: false,
            scales: scales,
            elements: {
              point: {
                radius: 2,
                hoverRadius: 4
              }
            },
            plugins: {
              legend: {
                position: 'bottom'
              },
              tooltip: {
                callbacks: {
                  label: function (context) {
                    var label = context.dataset.label || '';
                    var value = context.formattedValue || context.raw;
                    var unit = context.dataset.tooltipUnit || '';
                    if (label) {
                      label += ': ';
                    }
                    if (unit) {
                      return label + value + ' ' + unit;
                    }
                    return label + value;
                  }
                }
              }
            }
          }
        });
      }
    }

    var socChart = document.getElementById('socEfficiencyChart');
    if (socChart && Array.isArray(socChartPoints) && socChartPoints.length > 0 && window.Chart) {
      var socValues = socChartPoints
        .map(function (point) {
          var socValue = typeof point.soc === 'number' ? point.soc : Number(point.soc);
          return isNaN(socValue) ? null : socValue;
        })
        .filter(function (value) { return value !== null; });

      var kwhValues = socChartPoints
        .map(function (point) {
          var kwhValue = typeof point.kwh_per_percentage === 'number' ? point.kwh_per_percentage : Number(point.kwh_per_percentage);
          return isNaN(kwhValue) ? null : kwhValue;
        })
        .filter(function (value) { return value !== null; });

      var averageKwhPerPercentage = kwhValues.length > 0
        ? kwhValues.reduce(function (sum, value) { return sum + value; }, 0) / kwhValues.length
        : null;

      var minSoc = socValues.length > 0 ? Math.min.apply(null, socValues) : null;
      var maxSoc = socValues.length > 0 ? Math.max.apply(null, socValues) : null;

      var socDatasets = [
        {
          label: 'kWh pro 1% SoC',
          data: socChartPoints,
          parsing: {
            xAxisKey: 'soc',
            yAxisKey: 'kwh_per_percentage'
          },
          borderColor: '#3b82f6',
          backgroundColor: 'rgba(59, 130, 246, 0.12)',
          fill: true,
          tension: 0.2,
          pointRadius: 2,
          pointHoverRadius: 4
        }
      ];

      if (averageKwhPerPercentage !== null && minSoc !== null && maxSoc !== null) {
        socDatasets.push({
          type: 'line',
          label: 'Durchschnitt',
          data: [
            { x: minSoc, y: averageKwhPerPercentage },
            { x: maxSoc, y: averageKwhPerPercentage }
          ],
          borderDash: [6, 4],
          borderColor: '#ef4444',
          fill: false,
          tension: 0,
          pointRadius: 0,
          pointHoverRadius: 0,
          isAverageLine: true
        });
      }

      new Chart(socChart, {
        type: 'line',
        data: {
          datasets: socDatasets
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'nearest',
            intersect: false
          },
          scales: {
            x: {
              type: 'linear',
              title: {
                display: true,
                text: 'State of Charge (%)'
              }
            },
            y: {
              title: {
                display: true,
                text: 'kWh pro 1% SoC'
              },
              beginAtZero: true
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  var dataset = context.dataset || {};

                  if (dataset.isAverageLine) {
                    var average = typeof context.parsed.y === 'number' ? context.parsed.y.toFixed(3) : context.parsed.y;
                    return (dataset.label || 'Durchschnitt') + ': ' + average + ' kWh/%';
                  }

                  var raw = context.raw || {};
                  var soc = typeof raw.soc === 'number' ? raw.soc.toFixed(1) : raw.soc;
                  var ratio = typeof raw.kwh_per_percentage === 'number' ? raw.kwh_per_percentage.toFixed(3) : raw.kwh_per_percentage;
                  return 'SoC ' + soc + '%: ' + ratio + ' kWh/%';
                }
              }
            }
          }
        }
      });
    }
  });
</script>
{% endif %}
{% endblock %}