{% extends "omero_biofilefinder/index.html" %}

    {% block content %}
        <h1>Open {{ target.dtype | capfirst }}:{{ target.id }} with Biofile Finder...</h1>
        <p>
            {{ target.dtype | capfirst }} name: <b>{{ target.name }}</b> <br/>
            Image count: <b>{{ img_count }}</b>
        </p>
        <p>
            BioFile Finder loads a table of Images from OMERO with columns created dynamically from Key-Value pairs,
            creation times and Dataset or Well names. The `File Path` and `Thumbnail` columns required
            by BioFile Finder are also added.
        </p>

        <p>
            <a href="{{ bff_url}}" class="button_link" style="margin-top: 0">Open {{ target.dtype | capfirst }} in Biofile Finder</a>
        <p>

        {% if img_count > 400 or bff_parquet_anns %}
        <div class="alternative_option">
          <h2>Alternative option: Use a script to export Key-Value pairs</h2>

            <p>
                Exporting Key-Value pairs for {{ img_count }} Images may time out using the link above.
                Instead, you can export Key-Value pairs to a dedicated Parquet file
                (which will be attached to the {{ target.dtype | capfirst }}) using an OMERO.script on the server.
            </p>
            {% if script_id > 0 %}
            <form id="run_script" method="post" action="{% url 'script_run' script_id %}" >
                {% csrf_token %}
                <input type="text" hidden name="IDs" value="{{ target.id }}" size="10"/>
                <input type="text" hidden name="Data_Type" value="{{ target.dtype | capfirst }}" />
                <input id="base_url" hidden type="text" name="Base_URL" value="/"/>
                <button id="submit_button" class="button_link" type="submit" style="background: green; margin: 0;">
                  Run Script
                </button>
                <div id="script_status" style="margin-top: 10px;"></div>
            </form>
            {% else %}
                <p>
                    The "Export to Biofile Finder" script is not currently installed on this server.
                    Please contact your OMERO administrator.
                </p>
            {% endif %}

            {% if bff_parquet_anns %}
                    <h3>Existing parquet files:</h3>
                    <ul>
                    {% for ann in bff_parquet_anns %}
                        <li>
                            {{ ann.name }} (Created: {{ ann.created }} Size: {{ ann.size }} bytes)
                            <a class="button_link" href="{{ ann.bbf_url }}">Open parquet in Biofile Finder</a>
                        </li>
                    {% endfor %}
                    </ul>
            {% else %}
                <p>
                    No parquet files currently attached to {{ target.dtype | capfirst }}:{{ target.id }}.
                </p>
            {% endif %}
        </div>
        {% endif %}

        <div class="alternative_option">
          <h2>Alternative option: open an OMERO.table</h2>
          <p>
            OMERO.tables can be opened in BioFile Finder.
            They will be dynamically converted to Parquet files when loaded by BioFile Finder.
            Any Image column on the OMERO.table will be used to add `Thumbnail` and `File Path` columns
            required by BioFile Finder.
          </p>
          {% if table_anns %}
            <ul>
            {% for ann in table_anns %}
              <li>
                  {{ ann.name }} (Created: {{ ann.created }} Size: {{ ann.size }} bytes)
                  <a class="button_link" href="{{ ann.bff_url }}">Open table in BioFile Finder</a>
              </li>
            {% endfor %}
            </ul>
          {% else %}
            <p>
              No OMERO.table files currently attached to {{ target.dtype | capfirst }}:{{ target.id }}.
            </p>
          {% endif %}

          </div>
        <h2>Using Biofile Finder</h2>

        <p>

          In BioFile Finder, you can open selected Images in the OMERO webclient by using the
          "Open File" button and choosing "Browser".
        </p>
        <img src="{% static 'omero_biofilefinder/images/bff_open_file.png' %}" alt="Open File in Browser" style="float:left; margin-right: 15px; width: 300px; height: auto;">

    {% endblock %}

    {% block extra_js %}
    <script>

      const ACTIVITIES_URL = "{% url 'activities_json' %}";
      const $scriptStatus = document.querySelector("#script_status");
      const $submitButton = document.getElementById("submit_button");
      const $baseUrl = document.getElementById("base_url");

      // populate baseUrl hidden input with the base URL of this OMERO.web instance (e.g. "/" or "/web/" etc.)
      // Used by script to generate Thumbnail URLs eg. /webgateway/render_thumbnail/... or /web/webgateway/render_thumbnail/...
      $baseUrl.value = window.location.pathname.split('biofilefinder')[0];

      function pingActivities(jobId) {
        fetch(ACTIVITIES_URL)
          .then((response) => response.json())
          .then((data) => {
            if (!data[jobId]) {
              console.error("Job ID not found in activities:", jobId);
              return;
            }
            const job = data[jobId];
            console.log("Job status:", job.status);
            if (job.status === "finished") {
              $scriptStatus.innerHTML = "Script completed. <button onclick='window.location.reload(); return false;'>Refresh page</button> to check for results.";
            } else if (job.status === "error") {
              $scriptStatus.innerHTML = "Script finished with error.";
              alert("Script finished with error.");
            } else {
              // Add a "." to indicate progresss
              $scriptStatus.innerHTML = $scriptStatus.innerHTML + ".";
              setTimeout(() => pingActivities(jobId), 2000); // Poll every 2 seconds
              return;
            }
            // Must be done... reset submit button
            $submitButton.disabled = false;
            $submitButton.innerText = "Run Script";
          });
      }

      async function sendData(form) {
        const formData = new FormData(form);
        console.log("Sending form data...", formData);
        const url = form.action;
        // disable submit button
        $submitButton.disabled = true;
        $submitButton.innerText = "Building table...";

        try {
          const response = await fetch(url, {
            method: "POST",
            // Set the FormData instance as the request body
            body: formData,
          });
          const rspJson = await response.json();
          console.log(rspJson);
          // {
          //     "jobId": "ProcessCallback/acc04dd1-fb5f-480a-9c73-bc9dd6fb985c -t -e 1.1:tcp -h 172.18.0.9 -p 42113 -t 60000",
          //     "status": "in progress"
          // }
          if (rspJson.Error) {
            alert("Error: " + rspJson.Error);
          } else {
            if ($scriptStatus) {
              $scriptStatus.innerHTML = "Script running.";
            }
            const jobId = rspJson.jobId;
            // ping ACTIVITIES every 5 secs with jobId until status is "finished"
            pingActivities(jobId);
          }
        } catch (e) {
          console.error(e);
        }
      }

      // Form to run the script
      const runscriptForm = document.querySelector("#run_script");
      if (runscriptForm) {
        runscriptForm.addEventListener("submit", (event) => {
          event.preventDefault();
          sendData(runscriptForm);
        });
      }
    </script>
    {% endblock %}