{% extends "base.html" %}
{% block title %}Battery · syspanel{% endblock %}
{% block heading %}Battery Health{% endblock %}
{% block content %}
<div class="toolbar">
  <button id="refresh-btn">Refresh</button>
</div>
<div id="loader"></div>
<div id="battery-content" style="display:none"></div>
{% endblock %}

{% block scripts %}
<script type="module">
  import { api, formatBytes, cachedPageLoader } from "/static/js/core.js";

  const VERDICT_LABEL = {
    good: "Good — battery is in good health",
    worn: "Worn — noticeable capacity loss",
    replace: "Replace — significantly degraded",
    unknown: "Unknown — no capacity report available",
  };

  function render(b) {
    const el = document.getElementById("battery-content");
    if (!b.has_battery) {
      el.innerHTML = `<div class="card">No battery detected on this machine (desktop or AC-only device).</div>`;
      return;
    }
    const healthPct = b.health_percent != null ? `${b.health_percent.toFixed(1)}%` : "n/a";
    el.innerHTML = `
      <div class="grid">
        <div class="card stat-tile">
          <p class="card-title">Charge</p>
          <div class="stat-value">${b.percent != null ? b.percent.toFixed(0) + "%" : "–"}</div>
          <div class="stat-sub">${b.power_plugged ? "Plugged in" : "On battery"}</div>
        </div>
        <div class="card stat-tile">
          <p class="card-title">Health</p>
          <div class="stat-value">${healthPct}</div>
          <div class="stat-sub pill ${b.verdict === "good" ? "good" : b.verdict === "replace" ? "danger" : "warn"}">
            ${VERDICT_LABEL[b.verdict]}
          </div>
        </div>
        <div class="card stat-tile">
          <p class="card-title">Cycle count</p>
          <div class="stat-value">${b.cycle_count != null ? b.cycle_count : "–"}</div>
        </div>
        <div class="card stat-tile">
          <p class="card-title">Chemistry / Vendor</p>
          <div class="stat-value" style="font-size:16px">${b.chemistry || "–"}</div>
          <div class="stat-sub">${b.manufacturer || ""}</div>
        </div>
      </div>
      <div class="card" id="capacity-card" style="margin-top:16px"></div>`;

    if (b.design_capacity_mwh) {
      const pct = (b.full_charge_capacity_mwh / b.design_capacity_mwh) * 100;
      document.getElementById("capacity-card").innerHTML = `
        <p class="card-title">Capacity</p>
        <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px">
          <span>Current full charge</span>
          <span class="muted">${b.full_charge_capacity_mwh} mWh / ${b.design_capacity_mwh} mWh design</span>
        </div>
        <div class="progress-bar"><div class="fill" style="width:${pct}%"></div></div>
        <p class="faint" style="margin-top:8px">Source: ${b.source}</p>`;
    }
  }

  cachedPageLoader({
    cacheKey: "battery",
    fetchFn: () => api("/battery"),
    renderFn: render,
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("battery-content"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Reading battery report…",
  });
</script>
{% endblock %}