{% extends "framework_modern.html" %}
{% load static %}
{% block content %}
  <div class="mx-auto w-full p-8">
    <h1 class="h1 mb-4 text-3xl font-bold">
      Predict a Pathway

      <span class="text-base-content/50 text-xs"
        >in <strong>{{ meta.current_package.name|safe }}</strong>
      </span>
    </h1>

    <form
      id="predict_form"
      accept-charset="UTF-8"
      action="{{ meta.current_package.url }}/pathway"
      method="post"
    >
      {% csrf_token %}
      <div class="mb-8 flex flex-col gap-8 md:flex-row md:items-end">
        <fieldset class="flex flex-col gap-4 md:flex-3/4">
          <label class="floating-label" for="name">
            <input
              type="text"
              name="name"
              placeholder="Name"
              id="name"
              class="input input-md w-full"
            />
            <span>Name</span>
          </label>

          <label class="floating-label" for="description">
            <input
              type="text"
              name="description"
              placeholder="Description"
              id="description"
              class="input input-md w-full"
            />
            <span>Description</span>
          </label>
        </fieldset>
        <fieldset
          class="fieldset flex shrink-0 flex-row items-start gap-3 md:flex-1/4 md:flex-col"
        >
          <label class="fieldset-label text-base-content/50">Mode</label>
          <label class="label">
            <input
              type="radio"
              name="predict"
              id="radioPredict"
              value="predict"
              checked
              class="radio radio-neutral"
            />
            Predict
          </label>
          <label class="label">
            <input
              type="radio"
              name="predict"
              id="radioIncremental"
              value="incremental"
              class="radio radio-neutral"
            />
            Incremental
          </label>
          <label class="label">
            <input
              type="radio"
              name="predict"
              id="radioBuild"
              value="build"
              class="radio radio-neutral"
            />
            Build
          </label>
        </fieldset>
      </div>

      <label class="floating-label" for="predict-smiles">
        <input
          type="text"
          name="smiles"
          placeholder="SMILES"
          id="predict-smiles"
          class="input input-md w-full"
        />
        <span>SMILES</span>
      </label>

      <div class="divider text-base-content/50">OR</div>

      <div class="mb-8 w-full">
        <label class="text-base-content/50 mb-4 text-xs font-medium"
          >Draw Structure</label
        >
        <iframe
          id="predict-ketcher"
          src="{% static '/js/ketcher2/ketcher.html' %}"
          width="100%"
          height="510"
        ></iframe>
      </div>

      <label class="select mb-8 w-full">
        <span class="label">Predictor</span>
        <select id="prediction-setting" name="prediction-setting">
          <option disabled>Select a Setting</option>
          {% for s in meta.available_settings %}
            <option
              value="{{ s.url }}"
              {% if s.id == meta.user.default_setting.id %}selected{% endif %}
            >
              {{ s.name }}{% if s.id == meta.user.default_setting.id %}
                (User default)
              {% endif %}
            </option>
          {% endfor %}
        </select>
      </label>

      <div class="flex justify-end gap-2">
        <a href="{{ meta.current_package.url }}/pathway" class="btn btn-outline"
          >Cancel</a
        >
        <button
          type="submit"
          id="predict-submit-button"
          class="btn btn-primary"
        >
          Predict
        </button>
      </div>
    </form>
  </div>

  <script>
    function predictKetcherToTextInput() {
      $("#predict-smiles").val(this.ketcher.getSmiles());
    }

    $(function () {
      $("#predict-ketcher").on("load", function () {
        const checkKetcherReady = () => {
          const win = this.contentWindow;
          if (win.ketcher && "editor" in win.ketcher) {
            window.predictKetcher = win.ketcher;
            win.ketcher.editor.event.change.handlers.push({
              once: false,
              priority: 0,
              f: predictKetcherToTextInput,
              ketcher: win.ketcher,
            });
          } else {
            setTimeout(checkKetcherReady, 100);
          }
        };

        checkKetcherReady();
      });

      $("#predict-submit-button").on("click", function (e) {
        e.preventDefault();
        const button = $(this);
        button.prop("disabled", true);
        button.text("Predicting...");

        // Get SMILES from either input or Ketcher
        let smiles = $("#predict-smiles").val().trim();

        // If SMILES input is empty, try to get from Ketcher
        if (!smiles && window.predictKetcher) {
          smiles = window.predictKetcher.getSmiles().trim();
          if (smiles) {
            $("#predict-smiles").val(smiles);
          }
        }

        // Basic validation
        if (!smiles) {
          alert("Please enter a SMILES string or draw a structure.");
          button.prop("disabled", false);
          button.text("Predict");
          return;
        }

        // Submit form
        $("#predict_form").submit();
      });
    });
  </script>
{% endblock content %}