document.addEventListener("DOMContentLoaded", () => {
  const dataElement = document.getElementById("parameters-data");
  let parametersByScenario = {};

  if (dataElement) {
    try {
      const parsed = JSON.parse(dataElement.textContent || "{}");
      if (parsed && typeof parsed === "object") {
        parametersByScenario = parsed;
      }
    } catch (error) {
      console.error("Unable to parse parameter data", error);
    }
  }

  const form = document.getElementById("parameter-form");
  const scenarioSelect = /** @type {HTMLSelectElement | null} */ (
    document.getElementById("scenario_id")
  );
  const nameInput = /** @type {HTMLInputElement | null} */ (
    document.getElementById("name")
  );
  const valueInput = /** @type {HTMLInputElement | null} */ (
    document.getElementById("value")
  );
  const feedback = document.getElementById("parameter-feedback");
  const tableBody = document.getElementById("parameter-table-body");

  const setFeedback = (message, variant) => {
    if (!feedback) {
      return;
    }
    feedback.textContent = message;
    feedback.classList.remove("success", "error");
    if (variant) {
      feedback.classList.add(variant);
    }
  };

  const renderTable = (scenarioId) => {
    if (!tableBody) {
      return;
    }
    tableBody.innerHTML = "";
    const rows = parametersByScenario[String(scenarioId)] || [];
    if (!rows.length) {
      const emptyRow = document.createElement("tr");
      emptyRow.id = "parameter-empty-state";
      emptyRow.innerHTML =
        '<td colspan="4">No parameters recorded for this scenario yet.</td>';
      tableBody.appendChild(emptyRow);
      return;
    }
    rows.forEach((row) => {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${row.name}</td>
        <td>${row.value}</td>
        <td>${row.distribution_type ?? "—"}</td>
        <td>${
          row.distribution_parameters
            ? JSON.stringify(row.distribution_parameters)
            : "—"
        }</td>
      `;
      tableBody.appendChild(tr);
    });
  };

  if (scenarioSelect) {
    renderTable(scenarioSelect.value);
    scenarioSelect.addEventListener("change", () =>
      renderTable(scenarioSelect.value)
    );
  }

  if (!form || !scenarioSelect || !nameInput || !valueInput) {
    return;
  }

  form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const scenarioId = scenarioSelect.value;
    const payload = {
      scenario_id: Number(scenarioId),
      name: nameInput.value.trim(),
      value: Number(valueInput.value),
    };

    if (!payload.name) {
      setFeedback("Parameter name is required.", "error");
      return;
    }

    if (!Number.isFinite(payload.value)) {
      setFeedback("Enter a numeric value.", "error");
      return;
    }

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

    if (!response.ok) {
      const errorText = await response.text();
      setFeedback(`Error saving parameter: ${errorText}`, "error");
      return;
    }

    const data = await response.json();
    const scenarioKey = String(scenarioId);
    parametersByScenario[scenarioKey] = parametersByScenario[scenarioKey] || [];
    parametersByScenario[scenarioKey].push(data);

    form.reset();
    scenarioSelect.value = scenarioKey;
    renderTable(scenarioKey);
    nameInput.focus();
    setFeedback("Parameter saved.", "success");
  });
});