{% extends "base.html" %}
{% block title %}Energie-Verbrauch{% endblock %}
{% block heading %}⚡ Energie-Verbrauch{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Energie</p>{% endblock %}

{% block topbar_actions %}
  <a href="/energy?days=7"  class="btn btn-sm {% if days == 7 %}btn-primary{% else %}btn-secondary{% endif %}">7 T</a>
  <a href="/energy?days=30" class="btn btn-sm {% if days == 30 %}btn-primary{% else %}btn-secondary{% endif %}">30 T</a>
  <a href="/energy?days=90" class="btn btn-sm {% if days == 90 %}btn-primary{% else %}btn-secondary{% endif %}">90 T</a>
{% endblock %}

{% block content %}
<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Stromverbrauch pro Maschine ({{ days }} Tage Rückblick).
  Strompreis: <strong>{{ "%.4f"|format(electricity_price) }} €/kWh</strong>
  (anpassbar in Settings).
  Für CSRD-Berichtspflicht: kWh pro Auftrag wird automatisch berechnet
  wenn Smart-Meter-API Werte mit <code>production_job_id</code> postet.
</p>

<!-- KPIs -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px;">
  <div class="card" style="padding:16px;">
    <div class="text-[10px] uppercase font-semibold text-neutral-500">Gesamt-Verbrauch</div>
    <div class="text-2xl font-bold nums mt-1">{{ "%.1f"|format(total_kwh or 0) }} kWh</div>
  </div>
  <div class="card" style="padding:16px;">
    <div class="text-[10px] uppercase font-semibold text-neutral-500">Gesamt-Kosten</div>
    <div class="text-2xl font-bold nums mt-1">{{ "%.2f"|format(total_cost or 0) }} €</div>
  </div>
  <div class="card" style="padding:16px;">
    <div class="text-[10px] uppercase font-semibold text-neutral-500">Aktive Maschinen</div>
    <div class="text-2xl font-bold nums mt-1">{{ summary|length }}</div>
  </div>
</div>

<!-- Pro Maschine -->
<div class="card">
  <div class="card-header"><div><h2>Verbrauch pro Maschine</h2></div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Maschine</th>
        <th class="num">Readings</th>
        <th class="num">kWh</th>
        <th class="num">Kosten</th>
        <th>Anteil</th>
      </tr>
    </thead>
    <tbody>
      {% for s in summary %}
        {% set pct = ((s.kwh_total or 0) * 100 / total_kwh) if total_kwh > 0 else 0 %}
        <tr>
          <td><strong>{{ s.machine_name or '—' }}</strong></td>
          <td class="num nums">{{ s.reading_count }}</td>
          <td class="num nums">{{ "%.1f"|format(s.kwh_total or 0) }}</td>
          <td class="num nums">{{ "%.2f"|format(s.cost_total or 0) }} €</td>
          <td>
            <div style="background:rgba(0,0,0,0.05);border-radius:3px;height:8px;width:200px;">
              <div style="height:100%;background:#f59e0b;width:{{ pct }}%;border-radius:3px;"></div>
            </div>
            <div class="text-[10px] text-neutral-500 nums">{{ "%.1f"|format(pct) }} %</div>
          </td>
        </tr>
      {% else %}
      <tr><td colspan="5" style="text-align:center;padding:30px;color:var(--card-text-muted);">
        Keine Energie-Readings im Zeitraum. Smart-Meter-API mit POST <code>/api/energy/reading</code>
        oder manueller Eintrag unten.
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Manueller Eintrag -->
<div class="card" style="margin-top:14px;">
  <div class="card-header"><div><h2>Manueller Eintrag</h2><p class="sub">z.B. monatlicher Zähler-Stand vom Stromzähler</p></div></div>
  <form method="post" action="/energy/reading" class="p-5" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;">
    <div>
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Maschine</label>
      <select name="machine_id" class="select mt-1 w-full" required>
        <option value="">— wählen —</option>
        {% for m in all_machines %}
          <option value="{{ m.id }}">{{ m.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase font-semibold text-neutral-500">kWh-Zähler</label>
      <input class="input mt-1 nums" type="number" step="0.1" name="kwh_total" placeholder="z.B. 12345.6">
    </div>
    <div>
      <label class="text-[10px] uppercase font-semibold text-neutral-500">… ODER kWh-Delta</label>
      <input class="input mt-1 nums" type="number" step="0.1" name="kwh_delta" placeholder="z.B. 234.5">
    </div>
    <div>
      <button class="btn btn-primary w-full" type="submit">Eintragen</button>
    </div>
  </form>
</div>

<p style="margin-top:14px;font-size:11px;color:var(--card-text-muted);">
  <strong>Smart-Meter-Anbindung:</strong>
  POST an <code>/api/energy/reading</code> mit JSON
  <code>{"machine_id": 1, "kwh_total": 12345.6, "production_job_id": 42}</code>.
  kWh-Delta wird automatisch aus dem letzten Reading berechnet.
</p>
{% endblock %}