{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}
    {% translate "Terminate Account" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Terminate Account" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Permanently remove hosting accounts and all associated data from this server." %}
            </div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'listuser' %}">{% translate "User Accounts" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Terminate Account" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div>
                <div class="eenos-panel-title">{% translate "Delete Hosting Accounts" %}</div>
                <div class="eenos-panel-subtitle">
                    {% translate "Deleting a hosting account permanently removes all data belonging to that account." %}
                </div>
            </div>
        </div>
        <div class="eenos-notice eenos-notice-danger mb-4">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "Permanent action" %}</div>
                <div class="eenos-notice-text">
                    {% translate "Account files, databases, email, and configuration cannot be recovered after termination." %}
                </div>
            </div>
        </div>
        <div class="mb-3">
            <button type="button" id="act_id" class="btn btn-danger btn-sm bulk_delete">
                <i data-lucide="trash-2"></i>
                {% translate "Bulk Terminate" %}
            </button>
        </div>
        <form action=""
              class="login-form"
              name="featurelist"
              id="featurelist"
              method="POST">
            {% csrf_token %}
            <table id="eenos-data-table"
                   class="table table-sm table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox"
                                   class="form-check-input checkAll"
                                   aria-label="{% translate 'Select all accounts on this page' %}">
                        </th>
                        <th>{% translate "User" %}</th>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Status" %}</th>
                        <th class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </form>
    </div>
    <form action=""
          class="option_terminate_account d-none"
          id="change_terminate_form"
          method="POST">
        {% csrf_token %}
        <input type="hidden" name="terminate_account" id="terminate_account">
        <input type="hidden" name="user" id="terminate_usr">
    </form>
    <form action=""
          class="multi-delete d-none"
          id="multi_delete_form"
          method="POST">
        {% csrf_token %}
        <input type="hidden" name="userlist" id="multiuser">
        <input type="hidden" name="bulk_delete" id="multidelete">
    </form>
    <div class="modal fade"
         id="terminateAccountModal"
         tabindex="-1"
         aria-labelledby="terminateAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon eenos-modal-icon-danger">
                            <i data-lucide="trash-2"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="terminateAccountModalLabel">{% translate "Terminate Account" %}</h5>
                            <div class="text-muted small">{% translate "Permanently remove this hosting account." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="terminateAccountUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="globe"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Domain" %}</div>
                            <div id="terminateAccountDomain" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "This action cannot be undone" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "The account and all of its data will be permanently removed from this server." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button"
                            class="btn btn-danger btn-sm"
                            id="terminateAccountConfirm">
                        <i data-lucide="trash-2"></i>
                        {% translate "Terminate" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="bulkTerminateModal"
         tabindex="-1"
         aria-labelledby="bulkTerminateModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon eenos-modal-icon-danger">
                            <i data-lucide="users-round"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="bulkTerminateModalLabel">{% translate "Terminate Multiple Accounts" %}</h5>
                            <div class="text-muted small">{% translate "Permanently remove all selected hosting accounts." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-danger mb-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "This action cannot be undone" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "All selected accounts and their data will be permanently removed." %}
                            </div>
                        </div>
                    </div>
                    <div class="small text-muted mb-1">{% translate "Selected accounts" %}</div>
                    <div id="bulkTerminateUsers" class="font-monospace text-break"></div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" id="bulkTerminateConfirm">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="selectionRequiredModal"
         tabindex="-1"
         aria-labelledby="selectionRequiredModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="selectionRequiredModalLabel">{% translate "Input Error" %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">{% translate "Select at least one user for termination." %}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">{% translate "OK" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {
    const selectedUsers = new Set();
    const currentUser = "{{ request.session.user|escapejs }}";
    let selectedUser = "";

    const terminateModal = bootstrap.Modal.getOrCreateInstance(
      document.getElementById("terminateAccountModal")
    );
    const bulkTerminateModal = bootstrap.Modal.getOrCreateInstance(
      document.getElementById("bulkTerminateModal")
    );
    const selectionRequiredModal = bootstrap.Modal.getOrCreateInstance(
      document.getElementById("selectionRequiredModal")
    );

    function escapeHtml(value) {
      return $("<div>").text(value || "").html();
    }

    function updateSelectAll() {
      const $visible = $("#eenos-data-table tbody .user-check");
      const visibleChecked = $visible.filter(":checked").length;
      const allChecked = $visible.length > 0 && visibleChecked === $visible.length;

      $(".checkAll")
        .prop("checked", allChecked)
        .prop("indeterminate", visibleChecked > 0 && !allChecked);
    }

    const table = $("#eenos-data-table").DataTable({
      responsive: {
        details: {
          renderer: DataTable.Responsive.renderer.listHiddenNodes()
        }
      },
      processing: true,
      pageLength: 25,
      lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, "{% translate 'All' %}"]
      ],
      ajax: {
        url: "{% url 'hosting_users_data' %}",
        type: "GET",
        dataSrc: function (json) {
          return (json.data || []).filter(function (row) {
            return String(row.username || "") !== currentUser;
          });
        }
      },
      order: [[1, "asc"]],
      columns: [
        {
          data: "username",
          orderable: false,
          searchable: false,
          width: "40px",
          responsivePriority: 1,
          render: function (data, type) {
            if (type !== "display") {
              return data;
            }

            const user = escapeHtml(data);
            const checked = selectedUsers.has(String(data)) ? " checked" : "";
            return `<input type="checkbox" class="form-check-input user-check" name="user_check" value="${user}" aria-label="{% translate 'Select account' %} ${user}"${checked}>`;
          }
        },
        {
          data: "username",
          width: "180px",
          className: "text-nowrap",
          responsivePriority: 2,
          render: function (data, type) {
            return type === "display"
              ? `<span class="fw-semibold">${escapeHtml(data) || "-"}</span>`
              : data;
          }
        },
        {
          data: "domain",
          responsivePriority: 3,
          render: function (data, type) {
            if (type !== "display") {
              return data;
            }
            return data
              ? escapeHtml(data)
              : '<span class="text-muted">-</span>';
          }
        },
        {
          data: "status",
          width: "120px",
          className: "text-nowrap",
          responsivePriority: 4,
          render: function (data, type) {
            if (type !== "display") {
              return data;
            }

            if (data === "suspended") {
              return `
                <span class="eenos-status text-warning">
                  <i data-lucide="pause-circle"></i>
                  <span>{% translate "Suspended" %}</span>
                </span>
              `;
            }

            return `
              <span class="eenos-status text-success">
                <i data-lucide="circle-check"></i>
                <span>{% translate "Active" %}</span>
              </span>
            `;
          }
        },
        {
          data: "username",
          orderable: false,
          searchable: false,
          width: "70px",
          className: "text-end text-nowrap",
          responsivePriority: 4,
          render: function (data, type, row) {
            if (type !== "display") {
              return data;
            }

            const user = escapeHtml(data);
            const domain = escapeHtml(row.domain || "");
            return `
              <div class="eenos-dt-actions">
                <button type="button" class="btn btn-sm btn-outline-danger action-terminate terminate_acct" value="${user}" data-user="${user}" data-domain="${domain}" title="{% translate 'Terminate Account' %}" aria-label="{% translate 'Terminate Account' %}">
                  <i data-lucide="trash-2"></i>
                </button>
              </div>
            `;
          }
        }
      ],
      language: {
        loadingRecords: "&nbsp;",
        processing: '{% translate "Loading..." %}',
        emptyTable: "{% translate 'No hosting accounts have been configured.' %}",
        zeroRecords: "{% translate 'No matching hosting accounts found.' %}",
        search: "{% translate 'Search:' %}",
        lengthMenu: "{% translate 'Show' %} _MENU_",
        info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ hosting accounts' %}"
      },
      drawCallback: function () {
        $("#eenos-data-table tbody .user-check").each(function () {
          $(this).prop("checked", selectedUsers.has(String(this.value)));
        });
        updateSelectAll();

        if (typeof lucide !== "undefined") {
          lucide.createIcons();
        }
      }
    });

    table.on("responsive-display", function () {
      if (typeof lucide !== "undefined") {
        lucide.createIcons();
      }
    });

    $(document).on("change", ".user-check", function () {
      if (this.checked) {
        selectedUsers.add(String(this.value));
      } else {
        selectedUsers.delete(String(this.value));
      }
      updateSelectAll();
    });

    $(document).on("change", ".checkAll", function () {
      const checked = this.checked;

      $("#eenos-data-table tbody .user-check").each(function () {
        $(this).prop("checked", checked);
        if (checked) {
          selectedUsers.add(String(this.value));
        } else {
          selectedUsers.delete(String(this.value));
        }
      });

      updateSelectAll();
    });

    $(document).on("click", ".terminate_acct", function () {
      selectedUser = String($(this).val() || "");
      $("#terminateAccountUser").text(selectedUser);
      $("#terminateAccountDomain").text($(this).data("domain") || "-");
      terminateModal.show();
    });

    $("#terminateAccountConfirm").on("click", function () {
      $("#terminate_account").val("yes");
      $("#terminate_usr").val(selectedUser);
      $("#change_terminate_form").trigger("submit");
    });

    $(".bulk_delete").on("click", function () {
      const users = Array.from(selectedUsers);

      if (!users.length) {
        selectionRequiredModal.show();
        return;
      }

      $("#bulkTerminateUsers").text(users.join(", "));
      bulkTerminateModal.show();
    });

    $("#bulkTerminateConfirm").on("click", function () {
      const users = Array.from(selectedUsers);

      if (!users.length) {
        bulkTerminateModal.hide();
        selectionRequiredModal.show();
        return;
      }

      $("#multiuser").val(users.join(","));
      $("#multidelete").val("yes");
      $("#multi_delete_form").trigger("submit");
    });
  });
    </script>
{% endblock %}