{% extends "registration-admin/base.html" %}
{% load static %}

{% block title %}GLCDI Admin - Data space members{% endblock %}

{% block content %}
<div class="admin-header">
  <h1 class="admin-page-title">Data space members</h1>
</div>

<div class="admin-table-wrap">
  <table class="admin-table">
    <thead>
      <tr>
        <th>Organization</th>
        <th>Primary contact</th>
        <th>Organization type</th>
        <th>Submitted</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for p in participants %}
      <tr>
        <td>
          <div class="org-cell">
            {% if p.organization_logo %}
            <img src="{{ p.organization_logo.url }}" alt="{{ p.organization }}" class="org-logo">
            {% else %}
            <span class="org-logo-placeholder">{{ p.organization|truncatechars:2 }}</span>
            {% endif %}
            <span>{{ p.organization }}</span>
          </div>
        </td>
        <td>
          <div class="contact-cell">
            <span class="contact-name">{{ p.firstname }} {{ p.lastname }}</span>
            <span class="contact-email">{{ p.email }}</span>
          </div>
        </td>
        <td>
          {% if p.organization_type_display %}
            <span class="org-type-list">{{ p.organization_type_display|join:", " }}</span>
          {% else %}
            <span class="text-muted">N/A</span>
          {% endif %}
        </td>
        <td>{{ p.created_at|date:"M d, Y H:i" }}</td>
        <td>
          <span class="status-badge status-{{ p.status }}">
            {% if p.status == "pending" %}Pending
            {% elif p.status == "processing" %}Processing
            {% elif p.status == "approved" %}Member
            {% elif p.status == "rejected" %}Denied
            {% endif %}
          </span>
        </td>
        <td>
          <div class="actions-cell">
            <button type="button"
                    class="btn-pen"
                    aria-label="Actions"
                    data-pk="{{ p.pk }}"
                    data-org="{{ p.organization|escapejs }}"
                    data-name="{{ p.firstname }} {{ p.lastname }}"
                    data-email="{{ p.email|escapejs }}"
                    {% if p.organization_logo %}data-logo="{{ p.organization_logo.url }}"{% endif %}
                    data-status="{{ p.status }}"
                    onclick="toggleActionsMenu(this)">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Z"/><path d="M4.237 11.477 11.5 4.21l.34.34-7.263 7.267 -.34-.34Z"/></svg>
            </button>
            <div class="actions-menu">
              <button type="button" class="actions-menu-item actions-approve"
                      onclick="approveFromMenu(this)">Approve</button>
              <button type="button" class="actions-menu-item actions-edit">Edit</button>
              <button type="button" class="actions-menu-item actions-delete">Delete</button>
            </div>
          </div>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="empty-state">No participants registered yet.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="modal-overlay" id="reviewModal" style="display:none;">
  <div class="modal">
    <div class="modal-header">
      <h2 class="modal-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#d97706"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 6Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
        <span>Approve application</span>
      </h2>
      <button type="button" class="modal-close" onclick="closeReviewModal()" aria-label="Close">&times; <span class="modal-close-text">Close</span></button>
    </div>
    <p class="modal-subtitle">You are about to approve the application from:</p>
    <div class="modal-participant">
      <div class="modal-participant-main">
        <span class="modal-participant-logo" id="modalLogo"></span>
        <strong id="modalOrg"></strong>
      </div>
      <span class="modal-represented">Represented by <span id="modalRepName"></span> (<span id="modalRepEmail"></span>)</span>
    </div>
    <p class="modal-note">This will deploy a dedicated connector for data sharing &amp; access management, temporarily hosted on the Governance Authority infrastructure.</p>
    <div class="modal-actions">
      <form method="post" id="modalApproveForm" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn-approve">Approve application</button>
      </form>
      <button type="button" class="btn-cancel" onclick="closeReviewModal()">Cancel</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
  var approveTemplate = "{{ approve_url_template }}";
  var denyTemplate = "{{ deny_url_template }}";

  function urlFor(template, pk) {
    return template.replace(/\/0\/?/, "/" + pk + "/");
  }

  function openReviewModalFromData(data) {
    var pk = data.pk;
    var org = data.org;
    var name = data.name;
    var email = data.email;
    var logo = data.logo;

    document.getElementById("modalOrg").textContent = org;
    document.getElementById("modalRepName").textContent = name;
    document.getElementById("modalRepEmail").textContent = email;

    var logoEl = document.getElementById("modalLogo");
    if (logo) {
      logoEl.innerHTML = '<img src="' + logo + '" alt="' + org + '" class="modal-logo-img">';
    } else {
      logoEl.innerHTML = '<span class="org-logo-placeholder">' + org.substring(0, 2) + '</span>';
    }

    document.getElementById("modalApproveForm").action = urlFor(approveTemplate, pk);
    document.getElementById("reviewModal").style.display = "flex";
  }

  window.openReviewModal = function(btn) {
    openReviewModalFromData({
      pk: btn.getAttribute("data-pk"),
      org: btn.getAttribute("data-org"),
      name: btn.getAttribute("data-name"),
      email: btn.getAttribute("data-email"),
      logo: btn.getAttribute("data-logo")
    });
  };

  window.toggleActionsMenu = function(btn) {
    var cell = btn.closest(".actions-cell");
    var menu = cell.querySelector(".actions-menu");
    var isOpen = menu.classList.contains("open");
    closeAllActionsMenus();
    if (!isOpen) {
      menu.classList.add("open");
    }
  };

  window.approveFromMenu = function(item) {
    var cell = item.closest(".actions-cell");
    var btn = cell.querySelector(".btn-pen");
    closeAllActionsMenus();
    openReviewModalFromData({
      pk: btn.getAttribute("data-pk"),
      org: btn.getAttribute("data-org"),
      name: btn.getAttribute("data-name"),
      email: btn.getAttribute("data-email"),
      logo: btn.getAttribute("data-logo")
    });
  };

  function closeAllActionsMenus() {
    document.querySelectorAll(".actions-menu.open").forEach(function(m) {
      m.classList.remove("open");
    });
  }

  document.addEventListener("click", function(e) {
    if (!e.target.closest(".actions-cell")) {
      closeAllActionsMenus();
    }
  });

  window.closeReviewModal = function() {
    document.getElementById("reviewModal").style.display = "none";
  };

  document.getElementById("reviewModal").addEventListener("click", function(e) {
    if (e.target === this) closeReviewModal();
  });

  document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") {
      closeAllActionsMenus();
      closeReviewModal();
    }
  });
})();
</script>
{% endblock %}