{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "API Manager" %} - Eenos
{% endblock title %}
{% 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 users for your reseller account." %}</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 "Eenos" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "API" %}</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-notice eenos-notice-warning mt-4 mb-4">
        <div class="eenos-notice-icon" aria-hidden="true">
            <i data-lucide="shield-alert"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Protect your API credentials" %}</div>
            <div class="eenos-notice-text">
                {% translate "API users can manage services in your reseller account. Use strong passwords and restrict access to trusted IP addresses whenever possible." %}
            </div>
        </div>
    </div>
    <div class="eenos-card mb-4">
        <div class="eenos-card-header">
            <div>
                <div class="eenos-panel-title">{% translate "API Users" %}</div>
                <div class="eenos-panel-subtitle">
                    {% translate "Manage API users, access restrictions, and credentials for remote applications." %}
                </div>
            </div>
            <i data-lucide="key-round" class="eenos-card-action-icon"></i>
        </div>
        <div class="table-responsive">
            <table id="eenos-data-table"
                   class="table table-sm table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>{% translate "No." %}</th>
                        <th>{% translate "API User" %}</th>
                        <th>{% translate "Created" %}</th>
                        <th>{% translate "Updated" %}</th>
                        <th>{% translate "Remote Access" %}</th>
                        <th>{% translate "Allowed IP Addresses" %}</th>
                        <th class="text-end">{% translate "Actions" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" class="eenos-form" id="create-api-form">
        {% csrf_token %}
        <input type="hidden" name="createaact" id="createacct" value="" />
        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <div class="eenos-panel-title">{% translate "Create API User" %}</div>
                    <div class="eenos-panel-subtitle">
                        {% translate "Create dedicated credentials for a billing system or another trusted application." %}
                    </div>
                </div>
                <i data-lucide="user-plus" class="eenos-card-action-icon"></i>
            </div>
            <div class="row g-4">
                <div class="col-12 col-xl-8">
                    <label for="apiuser" class="form-label">{% translate "API Username" %}</label>
                    <input type="text"
                           class="form-control"
                           id="apiuser"
                           name="apiuser"
                           maxlength="32"
                           autocomplete="off"
                           autocapitalize="none"
                           required
                           pattern="^[a-z_][a-z0-9_-]{0,31}$"
                           placeholder="{% translate 'Enter an API username' %}"
                           data-parsley-required-message="{% translate 'Please enter the API username.' %}"
                           data-parsley-pattern-message="{% translate 'Use lowercase letters, numbers, underscores, or hyphens, beginning with a letter or underscore.' %}" />
                    <div class="form-text">{% translate "Use up to 32 lowercase letters, numbers, underscores, or hyphens." %}</div>
                </div>
                <div class="col-12 col-xl-8">
                    <label for="api-password" class="form-label">{% translate "Password" %}</label>
                    <div class="eenos-password-generator">
                        <div class="input-group">
                            <input type="password"
                                   class="form-control eenos-password-input"
                                   id="api-password"
                                   name="apipassword"
                                   minlength="8"
                                   autocomplete="new-password"
                                   required
                                   placeholder="{% translate 'Enter a strong password' %}"
                                   data-parsley-required-message="{% translate 'Please enter the API password.' %}"
                                   data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}" />
                            <button type="button"
                                    class="btn btn-outline-secondary eenos-password-toggle"
                                    title="{% translate 'Show password' %}"
                                    aria-label="{% translate 'Show password' %}">
                                <i data-lucide="eye"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-outline-primary eenos-password-generate"
                                    title="{% translate 'Generate secure password' %}">
                                <i data-lucide="wand-sparkles"></i>
                                <span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                            </button>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="eenos-password-strength mt-2">
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar eenos-password-strength-progress"
                                     role="progressbar"
                                     style="width: 0%"
                                     aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <small class="eenos-password-strength-text text-muted"></small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-8">
                    <label for="api-password-confirm" class="form-label">{% translate "Confirm Password" %}</label>
                    <input type="password"
                           class="form-control"
                           id="api-password-confirm"
                           name="apirepassword"
                           minlength="8"
                           autocomplete="new-password"
                           required
                           placeholder="{% translate 'Enter the password again' %}"
                           data-parsley-equalto="#api-password"
                           data-parsley-required-message="{% translate 'Please confirm the API password.' %}"
                           data-parsley-equalto-message="{% translate 'The passwords do not match.' %}" />
                </div>
                <div class="col-12 col-xl-8">
                    <fieldset>
                        <legend class="form-label">{% translate "Remote Access" %}</legend>
                        <div class="form-check mb-2">
                            <input class="form-check-input"
                                   type="radio"
                                   name="remoteaccess"
                                   id="remoteaccess-off"
                                   value="off"
                                   checked />
                            <label class="form-check-label" for="remoteaccess-off">{% translate "Allow connections from any IP address" %}</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="radio"
                                   name="remoteaccess"
                                   id="remoteaccess-on"
                                   value="on" />
                            <label class="form-check-label" for="remoteaccess-on">{% translate "Allow connections only from specified IP addresses" %}</label>
                        </div>
                    </fieldset>
                </div>
                <div class="col-12 col-xl-8 d-none" id="allowed-ip-fields">
                    <label for="apiips" class="form-label">{% translate "Allowed IP Addresses" %}</label>
                    <textarea class="form-control"
                              id="apiips"
                              name="apiips"
                              rows="3"
                              placeholder="192.0.2.10, 2001:db8::10"
                              data-parsley-required-message="{% translate 'Please enter at least one allowed IP address.' %}"></textarea>
                    <div class="form-text">{% translate "Enter IPv4 or IPv6 addresses separated by commas." %}</div>
                </div>
            </div>
            <div class="eenos-card-footer justify-content-start">
                <button type="button" class="btn btn-primary" id="create-api-user">
                    <i data-lucide="user-plus"></i>
                    {% translate "Create API User" %}
                </button>
            </div>
        </div>
    </form>
    <form method="post" id="delete-api-form">
        {% csrf_token %}
        <input type="hidden" name="user" id="delete-api-user" value="" />
        <input type="hidden" name="deleteuser" id="deleteuser" value="" />
    </form>
    <form method="post" id="change-password-form">
        {% csrf_token %}
        <input type="hidden" name="change_password" id="change-password" value="" />
        <input type="hidden" name="password" id="changed-password" value="" />
        <input type="hidden" name="user" id="change-password-user" value="" />
    </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 d-flex align-items-center gap-2"
                        id="createApiModalLabel">
                        <i data-lucide="user-plus"></i>
                        {% translate "Create 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 "Create this API user with the selected remote-access permissions?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-create-api">
                        <i data-lucide="user-plus"></i>
                        {% translate "Create User" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="changeApiPasswordModal"
         tabindex="-1"
         aria-labelledby="changeApiPasswordModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="changeApiPasswordModalLabel">
                        <i data-lucide="key-round"></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-3">
                        <div class="small text-muted">{% translate "API user" %}</div>
                        <div class="fw-semibold" id="change-password-username"></div>
                    </div>
                    <label for="new-api-password" 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="new-api-password"
                                   minlength="8"
                                   autocomplete="new-password"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter the new API password.' %}" />
                            <button type="button"
                                    class="btn btn-outline-secondary eenos-password-toggle"
                                    title="{% translate 'Show password' %}"
                                    aria-label="{% translate 'Show password' %}">
                                <i data-lucide="eye"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-outline-primary eenos-password-generate"
                                    title="{% translate 'Generate secure password' %}">
                                <i data-lucide="wand-sparkles"></i>
                                <span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                            </button>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="eenos-password-strength mt-2">
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar eenos-password-strength-progress"
                                     role="progressbar"
                                     style="width: 0%"
                                     aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <small class="eenos-password-strength-text text-muted"></small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirm-change-password">
                        <i data-lucide="key-round"></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 d-flex align-items-center gap-2"
                        id="deleteApiModalLabel">
                        <i data-lucide="trash-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">
                    <div class="eenos-notice eenos-notice-warning mb-3">
                        <div class="eenos-notice-icon" aria-hidden="true">
                            <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 "Applications using these credentials will immediately lose API access." %}</div>
                        </div>
                    </div>
                    <div class="small text-muted">{% translate "API user to delete" %}</div>
                    <div class="fw-semibold" id="delete-api-username"></div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Keep User" %}</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-api">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete User" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
      (function ($) {
        "use strict";
        $(function () {
          const createModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("createApiModal"));
          const passwordModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("changeApiPasswordModal"));
          const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteApiModal"));

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

          $("#eenos-data-table").DataTable({
            responsive: true,
            processing: true,
            autoWidth: false,
            order: [[1, "asc"]],
            ajax: {
              url: "{% url 'api_users' %}",
              type: "GET",
              dataSrc: "data"
            },
            pageLength: 25,
            lengthMenu: [
              [10, 25, 50, -1],
              [10, 25, 50, "{% translate 'All' %}"]
            ],
            columns: [
              { data: "id", width: "60px", responsivePriority: 4 },
              { data: "username", responsivePriority: 1, render: $.fn.dataTable.render.text() },
              { data: "created", responsivePriority: 5, render: $.fn.dataTable.render.text() },
              { data: "updated", responsivePriority: 6, render: $.fn.dataTable.render.text() },
              {
                data: "remote_access",
                responsivePriority: 3,
                render: function (data, type) {
                  if (type !== "display") return data;
                  return data === "restricted" ? '<span class="badge bg-success-subtle text-success">{% translate "Restricted" %}</span>' : '<span class="badge bg-warning-subtle text-warning">{% translate "Open" %}</span>';
                }
              },
              {
                data: "remote_ips",
                responsivePriority: 7,
                render: function (data, type, row) {
                  if (row.remote_access === "open" || !Array.isArray(data) || data.length === 0) return type === "display" ? '<span class="text-muted">{% translate "Any IP address" %}</span>' : "";
                  const ips = data.join(", ");
                  return type === "display" ? escapeHtml(ips) : ips;
                }
              },
              {
                data: "username",
                width: "110px",
                orderable: false,
                searchable: false,
                responsivePriority: 1,
                render: function (data, type) {
                  if (type !== "display") return data;
                  const username = escapeHtml(data);
                  return `
                    <div class="eenos-dt-actions">
                      <button type="button" class="btn btn-sm btn-outline-primary change-api-password" value="${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-api-user" value="${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 users have been created yet.' %}",
              zeroRecords: "{% translate 'No matching API users found.' %}",
              search: "{% translate 'Search:' %}",
              lengthMenu: "{% translate 'Show' %} _MENU_",
              info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ API users' %}"
            },
            drawCallback: function () {
              if (typeof lucide !== "undefined") lucide.createIcons();
            }
          });

          $("input[name='remoteaccess']").on("change", function () {
            const restricted = $(this).val() === "on";
            $("#allowed-ip-fields").toggleClass("d-none", !restricted);
            $("#apiips").prop("required", restricted);
          });

          $("#create-api-user").on("click", function () {
            const form = $("#create-api-form").parsley();
            form.validate();
            if (form.isValid()) createModal.show();
          });

          $("#confirm-create-api").on("click", function () {
            $("#createacct").val("yes");
            document.getElementById("create-api-form").submit();
          });

          $(document).on("click", ".change-api-password", function () {
            const username = $(this).val();
            $("#change-password-user").val(username);
            $("#change-password-username").text(username);
            $("#new-api-password").val("");
            passwordModal.show();
          });

          $("#confirm-change-password").on("click", function () {
            const password = $("#new-api-password").val();
            if (!password || password.length < 8) {
              $("#new-api-password").trigger("focus");
              return;
            }
            $("#changed-password").val(password);
            $("#change-password").val("yes");
            document.getElementById("change-password-form").submit();
          });

          $(document).on("click", ".delete-api-user", function () {
            const username = $(this).val();
            $("#delete-api-user").val(username);
            $("#delete-api-username").text(username);
            deleteModal.show();
          });

          $("#confirm-delete-api").on("click", function () {
            $("#deleteuser").val("yes");
            document.getElementById("delete-api-form").submit();
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}