{% extends "base.html" %}
{% block title %}History · Solisdash{% endblock %}
{% block content %}
<hgroup>
  <h2>History</h2>
  <p>Charts read from MongoDB only — no live SolisCloud calls on this path.</p>
</hgroup>

{% if not stations %}
  <article>
    <header><strong>No stations stored yet</strong></header>
    <p>
      Solisdash hasn't pulled any data from SolisCloud yet. Head to the
      <strong><a href="/data">Data</a></strong> tab and click
      <em>Poll SolisCloud now</em> to fill the dashboard.
    </p>
    <a href="/data" role="button">Go to Data tab</a>
  </article>
{% else %}
  <nav id="metric-tabs" class="metric-tabs" role="tablist" aria-label="Metric"
       data-initial-metric="{{ default_metric }}">
    <button type="button" role="tab" class="metric-tab" data-metric="energy"
            data-tooltip="Cumulative production in kWh. Daily bars for short ranges, monthly bars for wider, yearly bars beyond ~2 years."
    >Energy</button>
    <button type="button" role="tab" class="metric-tab" data-metric="power"
            data-tooltip="Total station output, sample by sample (kW). Day view only."
    >Power</button>
    <button type="button" role="tab" class="metric-tab" data-metric="battery"
            data-tooltip="State of Charge — how full the battery is right now (0–100%). Day view only."
    >Battery SOC</button>
    <button type="button" role="tab" class="metric-tab" data-metric="battery_power"
            data-tooltip="Instantaneous battery throughput (kW). Positive = discharging, negative = charging. Day view only."
    >Battery power</button>
    <button type="button" role="tab" class="metric-tab" data-metric="battery_charge"
            data-tooltip="Energy put INTO the battery per period (kWh). Daily rollup; not available at sample resolution."
    >Charge</button>
    <button type="button" role="tab" class="metric-tab" data-metric="battery_discharge"
            data-tooltip="Energy drawn OUT of the battery per period (kWh). Daily rollup; not available at sample resolution."
    >Discharge</button>
    <button type="button" role="tab" class="metric-tab" data-metric="consumption"
            data-tooltip="Energy the house consumed per period (kWh). Daily rollup."
    >Consumption</button>
    <button type="button" role="tab" class="metric-tab" data-metric="import_energy"
            data-tooltip="Energy pulled FROM the grid per period (kWh). Daily rollup."
    >Import</button>
    <button type="button" role="tab" class="metric-tab" data-metric="export_energy"
            data-tooltip="Energy fed TO the grid per period (kWh). Daily rollup."
    >Export</button>
    <button type="button" role="tab" class="metric-tab" data-metric="net"
            data-tooltip="Net = Export − Import per period (kWh). Positive bar = net producer (sold more than bought), negative bar = net consumer."
    >Net</button>
    <button type="button" role="tab" class="metric-tab" data-metric="cashflow"
            data-tooltip="(Export × feed-in tariff) − (Import × import tariff) per period. Set your tariffs in Settings. Negative = net buyer."
    >Cashflow</button>
  </nav>

  <form id="history-form" onsubmit="return false">
    <fieldset class="grid">
      <label>
        Station
        <select name="station_id" id="station-select">
          {% for s in stations %}
            <option value="{{ s.id }}" {% if s.id == selected_station_id %}selected{% endif %}>
              {{ s.name or s.id }}
            </option>
          {% endfor %}
        </select>
      </label>

      <label>
        From
        <input type="date" id="range-start" name="start" value="{{ default_range_start }}" />
      </label>

      <label>
        To
        <input type="date" id="range-end" name="end" value="{{ today }}" />
      </label>

      <label>
        Resolution
        <select id="resolution-select" name="resolution">
          <option value="auto" selected>Auto</option>
          <option value="samples">Samples (5-min)</option>
          <option value="daily">Daily</option>
          <option value="monthly">Monthly</option>
          <option value="yearly">Yearly</option>
        </select>
      </label>
    </fieldset>
    <div class="range-presets" role="group" aria-label="Preset ranges">
      <button type="button" class="secondary outline" data-preset="today">Today</button>
      <button type="button" class="secondary outline" data-preset="month">This month</button>
      <button type="button" class="secondary outline" data-preset="year">This year</button>
      <button type="button" class="secondary outline" data-preset="all">All</button>
    </div>
  </form>

  <article>
    <header style="display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;">
      <span>
        <strong id="chart-title">Power</strong>
        <small id="chart-unit" class="tile-unit"></small>
        <small id="chart-resolution" class="muted"></small>
      </span>
      <a id="csv-download" class="secondary outline" role="button" href="#">Download CSV</a>
    </header>
    <div id="chart-wrap" style="position: relative; height: 22rem;">
      <canvas id="history-chart"></canvas>
    </div>
    <small id="chart-status" class="tile-footnote">Loading…</small>
  </article>
{% endif %}

<script src="{{ url_for('static', path='vendor/chart.umd.min.js') }}?v={{ asset_version }}" defer></script>
<script src="{{ url_for('static', path='vendor/chartjs-adapter-date-fns.bundle.min.js') }}?v={{ asset_version }}" defer></script>
<script src="{{ url_for('static', path='history.js') }}?v={{ asset_version }}" defer></script>
{% endblock %}