{% extends "base.html" %} {% block title %}Consumption · CalMiner{% endblock %}
{% block content %}
<section class="panel">
  <h2>Consumption Tracking</h2>
  <div class="form-grid">
    <label for="consumption-scenario-filter">
      Scenario filter
      <select id="consumption-scenario-filter">
        <option value="">Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  <div id="consumption-empty" class="empty-state">
    Choose a scenario to review its consumption records.
  </div>
  <div id="consumption-table-wrapper" class="table-container hidden">
    <table aria-label="Scenario consumption records">
      <thead>
        <tr>
          <th scope="col">Amount</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody id="consumption-table-body"></tbody>
    </table>
  </div>
</section>

<section class="panel">
  <h2>Add Consumption Record</h2>
  {% if scenarios %}
  <form id="consumption-form" class="form-grid">
    <label for="consumption-form-scenario">
      Scenario
      <select id="consumption-form-scenario" name="scenario_id" required>
        <option value="" disabled selected>Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label for="consumption-form-amount">
      Amount
      <input
        id="consumption-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="consumption-form-description">
      Description (optional)
      <textarea
        id="consumption-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add Record</button>
  </form>
  <p id="consumption-feedback" class="feedback hidden" role="status"></p>
  {% else %}
  <p class="empty-state">
    Create a scenario before adding consumption records.
  </p>
  {% endif %}
</section>

<script>
  const scenarios = {{ scenarios | tojson | safe }};
  const consumptionByScenario = {{ consumption_by_scenario | tojson | safe }};

  const filterSelect = document.getElementById("consumption-scenario-filter");
  const tableWrapper = document.getElementById("consumption-table-wrapper");
  const tableBody = document.getElementById("consumption-table-body");
  const emptyState = document.getElementById("consumption-empty");
  const form = document.getElementById("consumption-form");
  const feedbackEl = document.getElementById("consumption-feedback");

  function showFeedback(message, type = "success") {
    if (!feedbackEl) {
      return;
    }
    feedbackEl.textContent = message;
    feedbackEl.classList.remove("hidden", "success", "error");
    feedbackEl.classList.add(type);
  }

  function hideFeedback() {
    if (!feedbackEl) {
      return;
    }
    feedbackEl.classList.add("hidden");
    feedbackEl.textContent = "";
  }

  function formatAmount(value) {
    return Number(value).toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }

  function renderConsumptionRows(scenarioId) {
    const key = String(scenarioId);
    const records = consumptionByScenario[key] || [];

    tableBody.innerHTML = "";

    if (!records.length) {
      emptyState.textContent = "No consumption records for this scenario yet.";
      emptyState.classList.remove("hidden");
      tableWrapper.classList.add("hidden");
      return;
    }

    emptyState.classList.add("hidden");
    tableWrapper.classList.remove("hidden");

    records.forEach((record) => {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>${formatAmount(record.amount)}</td>
        <td>${record.description || "—"}</td>
      `;
      tableBody.appendChild(row);
    });
  }

  if (filterSelect) {
    filterSelect.addEventListener("change", (event) => {
      const value = event.target.value;
      if (!value) {
        emptyState.textContent = "Choose a scenario to review its consumption records.";
        emptyState.classList.remove("hidden");
        tableWrapper.classList.add("hidden");
        tableBody.innerHTML = "";
        return;
      }
      renderConsumptionRows(value);
    });
  }

  async function submitConsumption(event) {
    event.preventDefault();
    hideFeedback();

    const formData = new FormData(form);
    const scenarioId = formData.get("scenario_id");
    const payload = {
      scenario_id: scenarioId ? Number(scenarioId) : null,
      amount: Number(formData.get("amount")),
      description: formData.get("description") || null,
    };

    try {
      const response = await fetch("/api/consumption/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        const errorDetail = await response.json().catch(() => ({}));
        throw new Error(errorDetail.detail || "Unable to add consumption record.");
      }

      const result = await response.json();
      const mapKey = String(result.scenario_id);

      if (!Array.isArray(consumptionByScenario[mapKey])) {
        consumptionByScenario[mapKey] = [];
      }
      consumptionByScenario[mapKey].push(result);

      form.reset();
      showFeedback("Consumption record saved.", "success");

      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
        renderConsumptionRows(filterSelect.value);
      }
    } catch (error) {
      showFeedback(error.message || "An unexpected error occurred.", "error");
    }
  }

  if (form) {
    form.addEventListener("submit", submitConsumption);
  }

  if (filterSelect && filterSelect.value) {
    renderConsumptionRows(filterSelect.value);
  }
</script>
{% endblock %}