{% extends "objects/model/_model_base.html" %}
{% load static %}
{% load envipytags %}

{% block libraries %}
{% endblock %}

{% block usemodel %}

  {% if model.ready_for_prediction %}
    <!-- Predict Panel -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium" id="predictTitle">
        Predict
      </div>
      <div class="collapse-content">
        <div class="form-control">
          <div class="join w-full">
            <input
              id="smiles-to-predict"
              type="text"
              class="input input-bordered join-item grow"
              placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C"
            />
            <button
              class="btn btn-primary join-item"
              type="button"
              id="predict-button"
            >
              Predict!
            </button>
          </div>
        </div>
        <div id="predictLoading" class="mt-2 flex hidden justify-center">
          <div class="h-8 w-8">
            {% include "components/loading-spinner.html" %}
          </div>
        </div>
        <div id="predictResultTable" class="mt-4"></div>
      </div>
    </div>
  {% endif %}

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Show actions button if there are actions
      const actionsButton = document.getElementById("actionsButton");
      const actionsList = actionsButton?.querySelector("ul");
      if (actionsList && actionsList.children.length > 0) {
        actionsButton?.classList.remove("hidden");
      }
      // Predict button handler
      const predictButton = document.getElementById("predict-button");
      if (predictButton) {
        predictButton.addEventListener("click", function (e) {
          e.preventDefault();
          clear("predictResultTable");
          const smilesInput = document.getElementById("smiles-to-predict");
          const smiles = smilesInput ? smilesInput.value.trim() : "";

          if (smiles === "") {
            const resultTable = document.getElementById("predictResultTable");
            if (resultTable) {
              resultTable.classList.add("alert", "alert-error");
              resultTable.innerHTML =
                "Please enter a SMILES string to predict!";
            }
            return;
          }
          const loadingEl = document.getElementById("predictLoading");
          if (loadingEl) loadingEl.classList.remove("hidden");
          const params = new URLSearchParams({
            smiles: smiles,
            half_life: "ILikeCats!",
          });
          fetch("?" + params.toString(), {
            method: "GET",
            headers: {
              "X-CSRFToken":
                document.querySelector("[name=csrf-token]").content,
            },
          })
            .then((response) => {
              if (!response.ok) {
                return response.json().then((err) => {
                  throw err;
                });
              }
              return response.json();
            })
            .then((data) => {
              const loadingEl = document.getElementById("predictLoading");
              if (loadingEl) {
                loadingEl.classList.add("hidden");
              }
              if (data.svg === null) {
                document.getElementById("predictResultTable").innerHTML =
                  "<span class='alert alert-error alert-soft'>Processing failed...</span><br>";
                return;
              }
              handlePredictionResponse(data);
            })
            .catch((error) => {
              const loadingEl = document.getElementById("predictLoading");
              if (loadingEl) loadingEl.classList.add("hidden");
              const resultTable = document.getElementById("predictResultTable");
              if (resultTable) {
                resultTable.classList.add("alert", "alert-error");
                resultTable.innerHTML =
                  error.error || "Error while processing response :/";
              }
            });
        });
      }
    });

    function handlePredictionResponse(data) {
      let stereo = data["stereo"];
      data = data["svg"];
      let res = "";
      if (stereo) {
        res +=
          "<span class='alert alert-warning'>Removed stereochemistry for prediction</span><br>";
      }
      res += "<div class='flex justify-center'>" + data + "<\div>";
      const resultTable = document.getElementById("predictResultTable");
      if (resultTable) {
        resultTable.innerHTML = res;
      }
    }
  </script>
{% endblock %}

{% block evaluation %}
  {% if model.model_status == 'FINISHED' %}
    <!-- Model Statistics Panel -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">Model Statistics</div>
      <div class="collapse-content">
        <div class="flex justify-center">
          <div
            id="model-stats"
            class="overflow-x-auto rounded-box shadow-md bg-base-100"
          >
            <table class="table table-fixed w-full">
              <thead class="text-base">
                <tr>
                  <th class="w-1/5">Metric</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody>
                {% for metric, value in model.eval_results.items %}
                  <tr>
                    <td>{{ metric|upper }}</td>
                    <td>{{ value|floatformat:4 }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}