{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Charging Session Analytics</h1>

  <div class="card mb-4">
    <div class="card-body">
      <h2 class="h5 mb-3">Meter Values</h2>
      {% if chart_labels %}
      <div class="position-relative" style="min-height: 360px;">
        <canvas id="sessionAnalyticsChart"></canvas>
      </div>
      <p class="text-muted small mt-3 mb-0">Use the legend below the chart to show or hide individual measurements.</p>
      {% else %}
      <p class="text-muted mb-0">No meter values were found for this transaction.</p>
      {% endif %}
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h2 class="h5 mb-3">Session Details</h2>
      <dl class="row mb-0">
        <dt class="col-sm-3 text-sm">Start</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.start_display }}</dd>

        <dt class="col-sm-3 text-sm">End</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.end_display }}</dd>

        <dt class="col-sm-3 text-sm">Vehicle</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.vehicle_name or '—' }}</dd>

        <dt class="col-sm-3 text-sm">Duration</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.duration_display }}</dd>

        <dt class="col-sm-3 text-sm">Transaction ID</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.transaction_id or '—' }}</dd>

        <dt class="col-sm-3 text-sm">Chargepoint ID</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.station_id or '—' }}</dd>

        <dt class="col-sm-3 text-sm">ID Tag</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.id_tag or '—' }}</dd>

        <dt class="col-sm-3 text-sm">kWh Charged</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.kwh_display }}</dd>

        <dt class="col-sm-3 text-sm">Temperature (Start)</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.temperature_first_display }}</dd>

        <dt class="col-sm-3 text-sm">Temperature (End)</dt>
        <dd class="col-sm-9 text-sm">{{ session_info.temperature_last_display }}</dd>
      </dl>
    </div>
  </div>
</main>

{% if chart_labels %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var ctx = document.getElementById('sessionAnalyticsChart');
    if (!ctx || !window.Chart) {
      return;
    }
    var chartDatasets = {{ chart_datasets|tojson }};
    var chartAxes = {{ chart_axes|tojson }};
    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];
      });
    }

    var chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: {{ chart_labels|tojson }},
        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;
              }
            }
          }
        }
      }
    });
  });
</script>
{% endif %}
{% endblock %}