{% load analysis_assets %}
<link rel="stylesheet" href="{% analysis_static 'omero_analysis/panel.css' %}">
<script>
$(function () {
  "use strict";
  var panel = $("#omero_analysis_panel");
  panel.addClass("omero-analysis-center");
  var panelPattern = "{% url 'omero_analysis_panel' 'Image' 1 %}";
  var analysisBase = "{% url 'omero_analysis_index' %}";
  var tokenUrl = "{% url 'omero_analysis_token' %}";
  var attachmentUploadPattern = "{% url 'omero_analysis_upload' 'Image' 1 %}";
  var typeMap = {
    image: "Image",
    dataset: "Dataset",
    plate: "Plate",
    screen: "Screen",
    project: "Project",
    well: "Well"
  };
  var multiSourceTypes = {image: true, plate: true};

  function objectUrl(pattern, type, id) {
    return pattern.replace("/Image/1/", "/" + type + "/" + id + "/");
  }

  function csrfToken() {
    var match = document.cookie.match(/(?:^|;\s*)csrftoken=([^;]+)/);
    return match ? decodeURIComponent(match[1]) : "";
  }

  function uploadAttachment(root, file) {
    var status = root.querySelector(".oa-panel-status");
    status.textContent = "Uploading and attaching " + file.name + "…";
    return fetch(tokenUrl, {
      method: "POST", credentials: "same-origin",
      headers: {"Content-Type": "application/json", "X-CSRFToken": csrfToken()},
      body: JSON.stringify({
        object_type: root.dataset.objectType,
        object_id: Number(root.dataset.objectId)
      })
    })
      .then(function (response) { return response.json().then(function (body) {
        if (!response.ok) {
          throw new Error((body.error && body.error.message) || "Could not authorize upload");
        }
        return body.context_token;
      }); })
      .then(function (token) {
        var form = new FormData();
        form.append("file", file, file.name);
        return fetch(
          objectUrl(attachmentUploadPattern, root.dataset.objectType, root.dataset.objectId),
          {
            method: "POST", credentials: "same-origin",
            headers: {"X-CSRFToken": csrfToken(), "X-OMERO-Analysis-Context": token},
            body: form
          }
        );
      })
      .then(function (response) { return response.json().then(function (body) {
        if (!response.ok) {
          throw new Error((body.error && body.error.message) || "Attachment upload failed");
        }
        return body.attachment;
      }); })
      .then(function () {
        return renderSelection(
          [{id: root.dataset.objectType.toLowerCase() + "-" + root.dataset.objectId}],
          root.dataset.objectType,
          root.dataset.objectId
        );
      })
      .catch(function (error) { status.textContent = error.message; });
  }

  function selectedAnnotationIds(root) {
    return Array.from(root.querySelectorAll(".oa-data-attachment:checked"))
      .map(function (input) { return input.value; });
  }

  function selectedWorkspaceId(root) {
    var input = root.querySelector(".oa-workspace-snapshot:checked");
    return input ? input.value : null;
  }

  function selectedLibraryIds(root) {
    return Array.from(root.querySelectorAll(".oa-library-item-input:checked"))
      .map(function (input) { return input.value; });
  }

  function filterLibrary(root, query) {
    var normalized = String(query || "").trim().toLowerCase();
    var treeRoot = root.querySelector(".oa-tree-root-node");
    if (normalized && treeRoot) treeRoot.open = true;
    var anyDataset = false;
    root.querySelectorAll(".oa-tree-dataset").forEach(function (dataset) {
      var datasetText = String(dataset.dataset.searchText || "").toLowerCase();
      var anyItem = false;
      dataset.querySelectorAll(".oa-library-item").forEach(function (item) {
        var visible = !normalized ||
          datasetText.indexOf(normalized) >= 0 ||
          String(item.dataset.searchText || "").toLowerCase().indexOf(normalized) >= 0;
        item.hidden = !visible;
        if (visible) anyItem = true;
      });
      dataset.hidden = !anyItem;
      if (normalized && anyItem) {
        dataset.open = true;
        dataset.querySelectorAll(".oa-tree-group").forEach(function (group) {
          group.open = Array.from(group.querySelectorAll(".oa-library-item"))
            .some(function (item) { return !item.hidden; });
        });
      }
      if (anyItem) anyDataset = true;
    });
    var empty = root.querySelector(".oa-library-no-match");
    if (empty) empty.hidden = !normalized || anyDataset;
  }

  function selectedSourceIds(root) {
    return String(root.dataset.selectionIds || "")
      .split(",")
      .map(function (value) { return Number(value); })
      .filter(function (value) { return Number.isInteger(value) && value > 0; });
  }

  function analysisUrl(type, id, annotationIds, workspaceAnnotationId, libraryIds, selectionIds) {
    var url = analysisBase + "?type=" + encodeURIComponent(type) +
      "&id=" + encodeURIComponent(id);
    (selectionIds || []).forEach(function (selectionId) {
      url += "&selection_id=" + encodeURIComponent(selectionId);
    });
    if (workspaceAnnotationId) {
      url += "&workspace_annotation=" + encodeURIComponent(workspaceAnnotationId);
    } else {
      annotationIds.forEach(function (annotationId) {
        url += "&data_annotation=" + encodeURIComponent(annotationId);
      });
    }
    if (libraryIds.length) {
      url += "&open_library=1";
      libraryIds.forEach(function (annotationId) {
        url += "&library_item=" + encodeURIComponent(annotationId);
      });
    }
    return url;
  }

  function updateSelection(root) {
    if (root.dataset.panelKind !== "source") return;
    var count = selectedAnnotationIds(root).length;
    var workspaceId = selectedWorkspaceId(root);
    var libraryCount = selectedLibraryIds(root).length;
    var selectionCount = selectedSourceIds(root).length;
    var countBadge = root.querySelector(".oa-selected-count");
    var libraryBadge = root.querySelector(".oa-library-selected-count");
    var status = root.querySelector(".oa-panel-status");
    var button = root.querySelector(".oa-open-analysis");
    if (countBadge) countBadge.textContent = count + " selected";
    if (libraryBadge) libraryBadge.textContent = libraryCount + " selected";
    if (status) {
      status.textContent = workspaceId
        ? "The saved workspace will be restored locally and its OMERO inputs synchronized."
        : count
        ? count + " attachment" + (count === 1 ? "" : "s") +
          " will be downloaded into the Analysis Workspace."
        : libraryCount
        ? libraryCount + " reusable item" + (libraryCount === 1 ? "" : "s") +
          " will be imported into Analysis automatically."
        : selectionCount > 1
        ? selectionCount + " selected " + root.dataset.objectType +
          "s will define one Analysis Workspace."
        : "No OMERO data selected; you can add local files after opening Analysis.";
    }
    if (button) {
      button.innerHTML = workspaceId
        ? '<span aria-hidden="true">&#8635;</span> Open selected workspace'
        : count
        ? '<span aria-hidden="true">&#8599;</span> Open with ' + count +
          " attachment" + (count === 1 ? "" : "s")
        : libraryCount
        ? '<span aria-hidden="true">&#8599;</span> Open with library selection'
        : selectionCount > 1
        ? '<span aria-hidden="true">&#8599;</span> Open ' + selectionCount +
          '-' + root.dataset.objectType.toLowerCase() + ' Workspace'
        : '<span aria-hidden="true">&#8599;</span> Open Analysis';
    }
  }

  function selectionParts(selected) {
    return (selected || []).map(function (item) {
      var parts = String(item.id || "").split("-");
      return {type: String(parts[0] || "").toLowerCase(), id: Number(parts[1])};
    }).filter(function (item) { return item.type && Number.isInteger(item.id) && item.id > 0; });
  }

  function renderGuidance(title, message) {
    panel.html(
      '<section class="oa-object"><header class="oa-panel-header"><div>' +
      '<span class="oa-eyebrow">OMERO Analysis</span><h2></h2></div>' +
      '<span class="oa-object-badge">Selection</span></header>' +
      '<section class="oa-card oa-info-card"><div class="oa-section-heading"><div>' +
      '<span class="oa-step">i</span><h3></h3></div></div><p class="oa-help"></p>' +
      '</section></section>'
    );
    panel.find(".oa-panel-header h2, .oa-info-card h3").text(title);
    panel.find(".oa-info-card .oa-help").text(message);
  }

  function renderSelection(selected, dtype, oid) {
    var parts = selectionParts(selected);
    if (parts.length > 1) {
      var firstType = parts[0].type;
      var sameType = parts.every(function (item) { return item.type === firstType; });
      if (!sameType || !multiSourceTypes[firstType]) {
        renderGuidance(
          "Choose one analysis source",
          "Multiple selection creates one Workspace only for Images or Plates of the same type. " +
          "Select one Dataset or Screen, or select Images or Plates together."
        );
        return Promise.resolve();
      }
      dtype = firstType;
      oid = parts[0].id;
    }
    var type = typeMap[String(dtype || "").toLowerCase()];
    if (!type || !oid) {
      renderGuidance(
        "Select an analysis source",
        "Choose a Dataset, Screen, Plate, Image, or a selection of Images or Plates."
      );
      return Promise.resolve();
    }
    panel.html('<div class="oa-empty-state"><strong>Loading Analysis…</strong></div>');
    var panelUrl = objectUrl(panelPattern, type, oid);
    if (parts.length > 1) {
      panelUrl += "?" + parts.map(function (item) {
        return "selection_id=" + encodeURIComponent(item.id);
      }).join("&");
    }
    return fetch(panelUrl, {credentials: "same-origin"})
      .then(function (response) {
        if (!response.ok) {
          throw new Error("Could not load Analysis (HTTP " + response.status + ")");
        }
        return response.text();
      })
      .then(function (html) {
        panel.html(html);
        var root = panel[0].querySelector("[data-object-type]");
        if (root) updateSelection(root);
      })
      .catch(function (error) {
        panel.html('<p class="oa-panel-error"></p>');
        panel.find(".oa-panel-error").text(error.message);
      });
  }

  panel.omeroweb_center_plugin({
    plugin_index: {{ forloop.counter|default:"0" }},
    empty_on_sel_change: false,
    plugin_enabled: function (selected) { return Boolean(selected && selected.length); },
    load_plugin_content: function (selected, dtype, oid) {
      renderSelection(selected, dtype, oid);
    }
  });

  panel.on("change", ".oa-data-attachment", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    if (root) {
      root.querySelectorAll(".oa-workspace-snapshot").forEach(function (input) {
        input.checked = false;
      });
      updateSelection(root);
    }
  });

  panel.on("change", ".oa-workspace-snapshot", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    if (root) {
      root.querySelectorAll(".oa-data-attachment").forEach(function (input) {
        input.checked = false;
      });
      updateSelection(root);
    }
  });

  panel.on("change", ".oa-library-item-input", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    if (root) updateSelection(root);
  });

  panel.on("input", ".oa-library-search input", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    if (root) filterLibrary(root, event.currentTarget.value);
  });

  panel.on("click", ".oa-open-analysis", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    if (!root) return;
    window.open(
      analysisUrl(
        root.dataset.analysisObjectType || root.dataset.objectType,
        root.dataset.analysisObjectId || root.dataset.objectId,
        selectedAnnotationIds(root),
        selectedWorkspaceId(root),
        selectedLibraryIds(root),
        selectedSourceIds(root)
      ),
      "_blank",
      "noopener"
    );
  });

  panel.on("click", ".oa-upload-attachment", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    var input = root && root.querySelector(".oa-attachment-upload-input");
    if (input) input.click();
  });

  panel.on("change", ".oa-attachment-upload-input", function (event) {
    var root = event.currentTarget.closest("[data-object-type]");
    var file = event.currentTarget.files && event.currentTarget.files[0];
    if (root && file) uploadAttachment(root, file);
  });
});
</script>