{% extends "base.html" %}
{% load i18n %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "API Manager" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Create and manage API accounts for secure remote access to your Eenos 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 "Preferences" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "API Manager" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card mb-4">
        <div class="d-flex align-items-start gap-3">
            <div class="flex-shrink-0">
                <i data-lucide="key-round"></i>
            </div>
            <div>
                <div class="eenos-panel-title">{% translate "Manage API Access" %}</div>
                <p class="eenos-panel-subtitle mb-0">
                    {% translate "Create API users that can manage the Eenos platform from remote applications such as billing systems." %}
                </p>
            </div>
        </div>
        <div class="eenos-notice eenos-notice-warning mb-4 mt-3">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "API Security Warning" %}</div>
                <div class="eenos-notice-text">
                    {% translate "Please use API access carefully. Exposing API accounts to public services may compromise your server. API credentials should be treated like root-level access." %}
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card mb-4">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <div class="eenos-panel-title">{% translate "API Accounts" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Manage existing API users and their access settings." %}</div>
            </div>
        </div>
        <table id="eenos-data-table" class="table table-hover align-middle w-100">
            <thead>
                <tr>
                    <th>{% translate "Sl.No" %}</th>
                    <th>{% translate "API User" %}</th>
                    <th>{% translate "Date of Creation" %}</th>
                    <th>{% translate "Date of Update" %}</th>
                    <th>{% translate "Remote Access" %}</th>
                    <th>{% translate "Whitelisted IPs" %}</th>
                    <th>{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form action="" method="POST" class="eenos-form" id="eenos-form">
        {% csrf_token %}
        <div class="eenos-card">
            <div class="d-flex align-items-start gap-3 mb-4">
                <div class="flex-shrink-0">
                    <i data-lucide="user-plus"></i>
                </div>
                <div>
                    <div class="eenos-panel-title">{% translate "Create API Account" %}</div>
                    <div class="eenos-panel-subtitle">{% translate "Create a dedicated API user for remote applications." %}</div>
                </div>
            </div>
            <div class="mb-3">
                <label for="user" class="form-label">{% translate "API User Name" %}</label>
                <div style="max-width: 420px">
                    <input type="text"
                           class="form-control"
                           id="user"
                           name="apiuser"
                           autocomplete="off"
                           required
                           pattern="^[A-Za-z0-9_][A-Za-z0-9_\-]{4,29}$"
                           data-parsley-required="true"
                           data-parsley-required-message="{% translate 'Please enter an API username.' %}"
                           data-parsley-pattern-message="{% translate 'Please enter a valid API username.' %}" />
                </div>
                <div class="form-text">{% translate "Use 5–30 letters, numbers, underscores or hyphens." %}</div>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">{% translate "Password" %}</label>
                <div class="eenos-password-generator" style="max-width: 420px">
                    <div class="input-group">
                        <input type="password"
                               class="form-control eenos-password-input"
                               id="password"
                               name="apipassword"
                               autocomplete="new-password"
                               required
                               data-parsley-required="true"
                               data-parsley-required-message="{% translate 'Please enter a password.' %}" />
                        <button type="button"
                                class="btn btn-outline-secondary eenos-password-toggle"
                                aria-label="{% translate 'Show password' %}"
                                title="{% translate 'Show password' %}">
                            <i data-lucide="eye"></i>
                        </button>
                        <button type="button"
                                class="btn btn-outline-primary eenos-password-generate"
                                aria-label="{% translate 'Generate password' %}"
                                title="{% translate 'Generate password' %}">
                            <i data-lucide="refresh-cw"></i>
                        </button>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="eenos-password-strength mt-2">
                        <div class="progress" style="height: 4px">
                            <div class="progress-bar eenos-password-strength-progress"
                                 role="progressbar"
                                 style="width: 0%"></div>
                        </div>
                        <div class="eenos-password-strength-text small text-muted mt-1"></div>
                    </div>
                </div>
                <div class="form-text">{% translate "Use a strong password for this API account." %}</div>
            </div>
            <div class="mb-4">
                <label for="repassword" class="form-label">{% translate "Re-enter Password" %}</label>
                <div style="max-width: 420px">
                    <input type="password"
                           class="form-control"
                           id="repassword"
                           name="apirepassword"
                           autocomplete="new-password"
                           required
                           data-parsley-required="true"
                           data-parsley-equalto="#password"
                           data-parsley-equalto-message="{% translate 'Passwords do not match.' %}"
                           data-parsley-required-message="{% translate 'Please re-enter the password.' %}" />
                </div>
            </div>
            <fieldset class="mb-4">
                <legend class="form-label mb-2">{% translate "Remote Access" %}</legend>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input remoteaccess_off"
                               type="radio"
                               name="remoteaccess"
                               id="remoteaccess_off"
                               value="off" />
                        <label class="form-check-label" for="remoteaccess_off">{% translate "Allow any IP" %}</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input remoteaccess_on"
                               type="radio"
                               name="remoteaccess"
                               id="remoteaccess_on"
                               value="on" />
                        <label class="form-check-label" for="remoteaccess_on">{% translate "Allow the following IPs only" %}</label>
                    </div>
                </div>
            </fieldset>
            <div class="mb-4 hide_custom_ip" style="display: none; max-width: 600px">
                <label for="allowedips" class="form-label">{% translate "Whitelisted IPs" %}</label>
                <textarea id="allowedips"
                          name="apiips"
                          class="form-control allowedips"
                          rows="3"
                          placeholder="{% translate '192.168.1.10, 203.0.113.20' %}"
                          data-parsley-required-message="{% translate 'Please enter at least one IP address.' %}"></textarea>
                <div class="form-text">{% translate "Enter remote IP addresses as a comma-separated list." %}</div>
            </div>
            <button type="button" class="btn btn-primary createacct">
                <i data-lucide="user-plus" class="me-1"></i>
                {% translate "Create API User" %}
            </button>
        </div>
        <input type="hidden" name="createaact" id="createacct" />
    </form>
    <form action="" method="POST" id="del_form">
        {% csrf_token %}
        <input type="hidden" name="user" id="deluser" />
        <input type="hidden" name="deleteuser" id="deleteuser" />
    </form>
    <form action="" method="POST" id="change_pwd_form">
        {% csrf_token %}
        <input type="hidden" name="change_password" id="change_password" />
        <input type="hidden" name="password" id="cpassword" />
        <input type="hidden" name="user" id="password_usr" />
    </form>
    <div class="modal fade"
         id="createApiModal"
         tabindex="-1"
         aria-labelledby="createApiModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createApiModalLabel">
                        <i data-lucide="user-plus" class="me-2"></i>
                        {% translate "Create API Account" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">{% translate "Do you wish to create this API account?" %}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirmCreateApi">{% translate "Create" %}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="changePasswordModal"
         tabindex="-1"
         aria-labelledby="changePasswordModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="changePasswordModalLabel">
                        <i data-lucide="key-round" class="me-2"></i>
                        {% translate "Change API Password" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <div class="form-label mb-2">{% translate "API User" %}</div>
                        <div class="form-control bg-body-secondary" id="changePasswordUser"></div>
                    </div>
                    <div class="mb-3">
                        <label for="changePasswordInput" class="form-label">{% translate "New Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group">
                                <input type="password"
                                       class="form-control eenos-password-input"
                                       id="changePasswordInput"
                                       autocomplete="new-password" />
                                <button type="button"
                                        class="btn btn-outline-secondary eenos-password-toggle"
                                        aria-label="{% translate 'Show password' %}"
                                        title="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-outline-primary eenos-password-generate"
                                        aria-label="{% translate 'Generate password' %}"
                                        title="{% translate 'Generate password' %}">
                                    <i data-lucide="refresh-cw"></i>
                                </button>
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="eenos-password-strength mt-2">
                                <div class="progress" style="height: 4px">
                                    <div class="progress-bar eenos-password-strength-progress"
                                         role="progressbar"
                                         style="width: 0%"></div>
                                </div>
                                <div class="eenos-password-strength-text small text-muted mt-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirmChangePassword">
                        <i data-lucide="key-round" class="me-1"></i>
                        {% translate "Change Password" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="deleteApiModal"
         tabindex="-1"
         aria-labelledby="deleteApiModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteApiModalLabel">
                        <i data-lucide="trash-2" class="me-2"></i>
                        {% translate "Delete API User" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">
                        {% translate "Do you wish to delete the API user" %}
                        <strong id="deleteApiUser"></strong>?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteApi">
                        <i data-lucide="trash-2" class="me-1"></i>
                        {% translate "Delete" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
  /*
   * =========================================================
   * API Manager
   * =========================================================
   */

  $(function () {
    /*
     * =========================================================
     * Modals
     * =========================================================
     */

    const changePasswordModal = new bootstrap.Modal(document.getElementById("changePasswordModal"));
    const deleteModal = new bootstrap.Modal(document.getElementById("deleteApiModal"));
    const createModal = new bootstrap.Modal(document.getElementById("createApiModal"));
    /*
     * =========================================================
     * Selected Users
     * =========================================================
     */

    let selectedPasswordUser = "";
    let selectedDeleteUser = "";

    /*
     * =========================================================
     * API Users DataTable
     * =========================================================
     */
    $("#eenos-data-table").DataTable({
      responsive: true,
      processing: true,

      order: [[1, "asc"]],

      ajax: {
        url: "{% url 'api_users' %}",
        type: "GET",
        dataSrc: "data",
      },

      pageLength: 10,

      lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, "{% translate 'All' %}"],
      ],

      columns: [
        {
          data: "id",
          orderable: false,
          searchable: false,
          width: "50px",
          responsivePriority: 2,
        },

        {
          data: "username",
          responsivePriority: 1,
        },

        {
          data: "created",
          responsivePriority: 5,
        },

        {
          data: "updated",
          responsivePriority: 6,
        },

        {
          data: "remote_access",
          responsivePriority: 4,

          render: function (data) {
            if (data === "restricted") {
              return `
            <span class="badge bg-success-subtle text-success">
              {% translate "Restricted" %}
            </span>
          `;
            }

            return `
          <span class="badge bg-warning-subtle text-warning">
            {% translate "Open" %}
          </span>
        `;
          },
        },

        {
          data: null,
          responsivePriority: 7,

          render: function (data, type, row) {
            if (
              row.remote_access === "open" ||
              !row.remote_ips ||
              row.remote_ips.length === 0
            ) {
              return `
            <span class="text-muted">
              {% translate "Connect From Any IP" %}
            </span>
          `;
            }

            return row.remote_ips.join(", ");
          },
        },

        {
          data: null,
          orderable: false,
          searchable: false,
          width: "110px",
          responsivePriority: 1,

          render: function (data, type, row) {
            return `
          <div class="eenos-dt-actions">

            <button type="button" class="btn btn-sm btn-outline-primary change_pass" value="${row.username}" title="{% translate 'Change API Password' %}" aria-label="{% translate 'Change API Password' %}">
              <i data-lucide="key-round"></i>
            </button>

            <button type="button" class="btn btn-sm btn-outline-danger delete" value="${row.username}" title="{% translate 'Delete API User' %}" aria-label="{% translate 'Delete API User' %}">
              <i data-lucide="trash-2"></i>
            </button>

          </div>
        `;
          },
        },
      ],

      language: {
        loadingRecords: "&nbsp;",

        processing:
          '' +
          "{% translate 'Loading...' %}",

        emptyTable:
          "{% translate 'No API accounts found.' %}",

        zeroRecords:
          "{% translate 'No matching API accounts found.' %}",

        search:
          "{% translate 'Search:' %}",

        lengthMenu:
          "{% translate 'Show' %} _MENU_",

        info:
          "{% translate 'Showing _START_ to _END_ of _TOTAL_ API accounts' %}",
      },

      drawCallback: function () {
        if (typeof lucide !== "undefined") {
          lucide.createIcons();
        }
      },
    });

    /*
     * =========================================================
     * Change API Password
     * =========================================================
     */

    $(document).on("click", ".change_pass", function () {
      selectedPasswordUser = $(this).attr("value");

      $("#changePasswordUser").text(selectedPasswordUser);

      /*
       * Generate a fresh password after
       * the modal becomes visible.
       */

      $("#changePasswordModal").one("shown.bs.modal", function () {
        $(this).find(".eenos-password-generate").trigger("click");
      });

      changePasswordModal.show();
    });

    /*
     * =========================================================
     * Confirm Password Change
     * =========================================================
     */

    $("#confirmChangePassword").on("click", function () {
      const password = $("#changePasswordInput").val().trim();

      if (!password) {
        $("#changePasswordInput").trigger("focus");

        return;
      }

      /*
       * Populate Django form.
       */

      $("#cpassword").val(password);

      $("#change_password").val("yes");

      $("#password_usr").val(selectedPasswordUser);

      /*
       * Submit.
       */

      $("#change_pwd_form").submit();
    });

    /*
     * =========================================================
     * Delete API User
     * =========================================================
     */

    $(document).on("click", ".delete", function () {
      selectedDeleteUser = $(this).attr("value");

      $("#deleteApiUser").text(selectedDeleteUser);

      deleteModal.show();
    });

    /*
     * =========================================================
     * Confirm Delete
     * =========================================================
     */

    $("#confirmDeleteApi").on("click", function () {
      $("#deluser").val(selectedDeleteUser);

      $("#deleteuser").val("yes");

      $("#del_form").submit();
    });

    /*
     * =========================================================
     * Remote Access
     * =========================================================
     */

    $(".remoteaccess_off").prop("checked", true);
    $(".hide_custom_ip").hide();
    $("input[name='remoteaccess']").on("change", function () {
      if ($(this).val() === "on") {
        $(".hide_custom_ip").slideDown(150);

        $(".allowedips").prop("required", true).attr("data-parsley-required", "true");
      } else {
        $(".allowedips").prop("required", false).removeAttr("data-parsley-required");

        $(".hide_custom_ip").slideUp(150);
      }
    });

    /*
     * =========================================================
     * Create API Account
     * =========================================================
     */

    $(".createacct").on("click", function () {
      const form = $("#eenos-form").parsley();

      if (!form.validate()) {
        return;
      }

      createModal.show();
    });

    /*
     * =========================================================
     * Confirm Create API Account
     * =========================================================
     */

    $("#confirmCreateApi").on("click", function () {
      $("#createacct").val("yes");
      $("#eenos-form").submit();
    });
  });
    </script>
{% endblock %}