{% extends "framework_modern.html" %}
{% load static %}
{% block content %}
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    #vizdiv {
      width: 100%;
      height: 600px;
      background: white;
      position: relative;
    }

    #pwsvg {
      width: 100%;
      height: 100%;
      color: red;
    }

    .link {
      stroke: #999;
      stroke-opacity: 0.6;
      /* marker-end: url(#arrow); */
    }

    .link_no_arrow {
      stroke: #999;
      stroke-opacity: 0.6;
    }

    .node image {
      cursor: pointer;
    }

    .node circle {
      fill: lightblue;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    .inside_app_domain {
      fill: green;
      stroke: green;
      stroke-width: 1.5px;
    }

    .outside_app_domain {
      fill: red;
      stroke: red;
      stroke-width: 1.5px;
    }

    .passes_app_domain {
      stroke: green;
      stroke-width: 1.5px;
      stroke-opacity: 0.6;
    }

    .fails_app_domain {
      stroke: red;
      stroke-width: 1.5px;
      stroke-opacity: 0.6;
    }

    .highlighted {
      stroke: red;
      stroke-width: 3px;
    }
  </style>
  <script src="{% static 'js/pw.js' %}"></script>

  {% block action_modals %}
    {% include "modals/objects/add_pathway_node_modal.html" %}
    {% include "modals/objects/add_pathway_edge_modal.html" %}
    {% include "modals/objects/download_pathway_csv_modal.html" %}
    {% include "modals/objects/download_pathway_image_modal.html" %}
    {% include "modals/objects/identify_missing_rules_modal.html" %}
    {% include "modals/objects/generic_copy_object_modal.html" %}
    {% include "modals/objects/edit_pathway_modal.html" %}
    {% include "modals/objects/generic_set_aliases_modal.html" %}
    {% include "modals/objects/generic_set_scenario_modal.html" %}
    {% include "modals/objects/delete_pathway_node_modal.html" %}
    {% include "modals/objects/delete_pathway_edge_modal.html" %}
    {% include "modals/objects/generic_delete_modal.html" %}
    {% include "modals/objects/engineer_pathway_modal.html" %}
  {% endblock action_modals %}

  <div class="space-y-2 p-4">
    <!-- Header Section -->
    <div class="card bg-base-100">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <h2 class="card-title text-2xl">{{ pathway.name }}</h2>
        </div>
      </div>
    </div>

    <!-- Graphical Representation -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">
        Graphical Representation
      </div>
      <div class="collapse-content">
        <div class="bg-base-100 mb-2 rounded-lg p-2">
          <div class="navbar bg-base-100 rounded-lg">
            <div class="flex-1">
              <div class="dropdown">
                <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-edit"
                  >
                    <path
                      d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
                    />
                    <path
                      d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                    />
                  </svg>
                  Actions
                </div>
                <ul
                  tabindex="0"
                  class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
                >
                  {% include "actions/objects/pathway.html" %}
                </ul>
              </div>
              {% if pathway.setting.model.app_domain %}
                <div class="dropdown">
                  <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-eye"
                    >
                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                      <circle cx="12" cy="12" r="3" />
                    </svg>
                    View
                  </div>
                  <ul
                    tabindex="0"
                    class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
                  >
                    <li>
                      <a id="app-domain-toggle-button" class="cursor-pointer">
                        <svg
                          id="app-domain-icon"
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          class="lucide lucide-eye"
                        >
                          <path
                            d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
                          />
                          <circle cx="12" cy="12" r="3" />
                        </svg>
                        App Domain View
                      </a>
                    </li>
                  </ul>
                </div>
              {% endif %}
            </div>
            <div class="flex-none gap-2">
              <button
                class="btn btn-ghost btn-sm"
                onclick="goFullscreen('vizdiv')"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-maximize"
                >
                  <path
                    d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
                  />
                </svg>
                Fullscreen
              </button>
            </div>
          </div>
        </div>
        <div
          id="vizdiv"
          x-data="pathwayViewer({
          status: '{{ pathway.status }}',
          modified: '{{ pathway.modified|date:"Y-m-d H:i:s" }}',
          statusUrl: '{{ pathway.url }}?status=true'
        })"
          x-init="init()"
        >
          <!-- Status Display -->
          <div class="tooltip tooltip-left absolute top-4 right-4 z-10">
            <div class="tooltip-content" x-text="statusTooltip"></div>
            <div id="status" class="flex items-center">
              <!-- Completed icon -->
              <template x-if="status === 'completed'">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-check"
                >
                  <path d="M20 6 9 17l-5-5" />
                </svg>
              </template>
              <!-- Failed icon -->
              <template x-if="status === 'failed'">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-x"
                >
                  <path d="M18 6 6 18" />
                  <path d="M6 6l12 12" />
                </svg>
              </template>
              <!-- Loading spinner -->
              <div
                x-show="status === 'running'"
                style="width: 20px; height: 20px;"
              >
                {% include "components/loading-spinner.html" %}
              </div>
            </div>
          </div>

          <!-- Update Notice -->
          <div
            x-show="showUpdateNotice"
            x-cloak
            class="alert alert-info absolute right-4 bottom-4 left-4 z-10"
          >
            <span x-html="updateMessage"></span>
            <button @click="reloadPage()" class="btn btn-primary btn-sm mt-2">
              Reload page
            </button>
          </div>
          <svg id="pwsvg">
            <defs>
              <marker
                id="arrow"
                viewBox="0 0 10 10"
                refX="43"
                refY="5"
                markerWidth="6"
                markerHeight="6"
                orient="auto-start-reverse"
                markerUnits="userSpaceOnUse"
              >
                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
              </marker>
              <marker
                id="arrow_passes_app_domain"
                viewBox="0 0 10 10"
                refX="43"
                refY="5"
                markerWidth="6"
                markerHeight="6"
                orient="auto-start-reverse"
                markerUnits="userSpaceOnUse"
              >
                <path d="M 0 0 L 10 5 L 0 10 z" fill="green" />
              </marker>
              <marker
                id="arrow_fails_app_domain"
                viewBox="0 0 10 10"
                refX="43"
                refY="5"
                markerWidth="6"
                markerHeight="6"
                orient="auto-start-reverse"
                markerUnits="userSpaceOnUse"
              >
                <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
              </marker>
            </defs>
            <g id="zoomable"></g>
          </svg>
          <div id="tooltip" class="tooltip-content"></div>
        </div>
      </div>
    </div>

    <!-- Description -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">Description</div>
      <div class="collapse-content">
        <div id="DescriptionContent">{{ pathway.description | safe }}</div>
      </div>
    </div>

    {% if pathway.aliases %}
      <!-- Aliases -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">Aliases</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for alias in pathway.aliases %}
              <li><a class="hover:bg-base-200">{{ alias }}</a></li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    {% if pathway.scenarios.all %}
      <!-- Scenarios -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">Scenarios</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for s in pathway.scenarios.all %}
              <li>
                <a href="{{ s.url }}" class="hover:bg-base-200">
                  {{ s.name }}
                  <span class="text-sm opacity-70">({{ s.package.name }})</span>
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    {% if pathway.setting %}
      <!-- Setting -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">Setting</div>
        <div class="collapse-content">
          <div class="overflow-x-auto">
            <table class="table-zebra table">
              <thead>
                <tr>
                  <th>Parameter</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody>
                {% if pathway.setting.model %}
                  <tr>
                    <td>Model</td>
                    <td>
                      <div class="space-y-2">
                        <div>
                          <a
                            href="{{ pathway.setting.model.url }}"
                            class="link link-primary"
                          >
                            {{ pathway.setting.model.name }}
                          </a>
                        </div>
                        <div class="overflow-x-auto">
                          <table class="table-xs table">
                            <thead>
                              <tr>
                                <th>Model Parameter</th>
                                <th>Parameter Value</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Threshold</td>
                                <td>
                                  {{ pathway.setting_with_overrides.model_threshold }}
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% endif %}
                {% if pathway.setting.rule_packages.all %}
                  <tr>
                    <td>Rule Packages</td>
                    <td>
                      <ul class="menu bg-base-100 rounded-box">
                        {% for p in pathway.setting.rule_packages.all %}
                          <li>
                            <a href="{{ p.url }}" class="hover:bg-base-200"
                              >{{ p.name }}</a
                            >
                          </li>
                        {% endfor %}
                      </ul>
                    </td>
                  </tr>
                {% endif %}
                <tr>
                  <td>Max Nodes</td>
                  <td>{{ pathway.setting_with_overrides.max_nodes }}</td>
                </tr>
                <tr>
                  <td>Max Depth</td>
                  <td>{{ pathway.setting_with_overrides.max_depth }}</td>
                </tr>
                <tr>
                  <td>Expansion Scheme</td>
                  <td>{{ user.default_setting.expansion_scheme }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
  {# prettier-ignore-start #}
  {# FIXME: This is a hack to get the pathway data into the JavaScript code. #}

    <script>
        // Global switch for app domain view
        var appDomainViewEnabled = false;

        function goFullscreen(id) {
            var element = document.getElementById(id);
            if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
        }

        function transformReferences(text) {
            return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
        }


        var pathway = {{ pathway.d3_json | safe }};

        document.addEventListener('DOMContentLoaded', function() {
            draw(pathway, 'vizdiv');

            // Transform references in description
            const descContent = document.getElementById('DescriptionContent');
            if (descContent) {
                const newDesc = transformReferences(descContent.innerText);
                descContent.innerHTML = newDesc;
            }

            // App domain toggle
            const appDomainBtn = document.getElementById('app-domain-toggle-button');
            if (appDomainBtn) {
                appDomainBtn.addEventListener('click', function() {
                    appDomainViewEnabled = !appDomainViewEnabled;
                    const icon = document.getElementById('app-domain-icon');

                    if (appDomainViewEnabled) {
                        // Change to eye-off icon
                        icon.innerHTML = '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';

                        nodes.forEach((x) => {
                            if(x.app_domain) {
                                if (x.app_domain.inside_app_domain) {
                                    d3.select(x.el).select("circle").classed("inside_app_domain", true);
                                } else {
                                    d3.select(x.el).select("circle").classed("outside_app_domain", true);
                                }
                            }
                        });
                        links.forEach((x) => {
                            if(x.app_domain) {
                                if (x.app_domain.passes_app_domain) {
                                    d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_passes_app_domain)");
                                    d3.select(x.el).classed("passes_app_domain", true);
                                } else {
                                    d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_fails_app_domain)");
                                    d3.select(x.el).classed("fails_app_domain", true);
                                }
                            }
                        });
                    } else {
                        // Change back to eye icon
                        icon.innerHTML = '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';

                        nodes.forEach((x) => {
                            d3.select(x.el).select("circle").classed("inside_app_domain", false);
                            d3.select(x.el).select("circle").classed("outside_app_domain", false);
                        });
                        links.forEach((x) => {
                            d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)");
                            d3.select(x.el).classed("passes_app_domain", false);
                            d3.select(x.el).classed("fails_app_domain", false);
                        });
                    }
                });
            }

            // 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");
            }
        });

    </script>
    {# prettier-ignore-end #}
{% endblock content %}