{% extends "admin/base_site.html" %}
{% load i18n %}

{% block content %}
<div style="max-width: 720px;">
  <h1>{% trans "Register passkey" %}</h1>
  <p class="help">{% trans "Start registration, then complete the browser passkey prompt to enroll a credential." %}</p>

  <form method="post" novalidate>
    {% csrf_token %}
    {{ form.non_field_errors }}
    <fieldset class="module aligned">
      <div class="form-row">{{ form.user.label_tag }} {{ form.user }}</div>
      {% for error in form.user.errors %}<p class="errornote">{{ error }}</p>{% endfor %}
      <div class="form-row">{{ form.name.label_tag }} {{ form.name }}</div>
      {% for error in form.name.errors %}<p class="errornote">{{ error }}</p>{% endfor %}
    </fieldset>
    <div class="submit-row">
      <input type="submit" class="default" name="start" value="{% trans 'Start passkey registration' %}">
    </div>
  </form>

  {% if public_key_options_data %}
    <hr>
    <form method="post" id="passkey-finish-form">
      {% csrf_token %}
      <input type="hidden" name="finish" value="1">
      <input type="hidden" name="credential_json" id="credential-json-field">
      <div class="submit-row">
        <button type="button" class="default" id="register-passkey-button">{% trans "Complete passkey prompt" %}</button>
      </div>
      <p class="help" id="passkey-error" style="display:none;color:var(--error-fg);"></p>
    </form>
    {{ public_key_options_data|json_script:"passkey-public-key-options" }}
    <script>
      (function () {
        const optionsNode = document.getElementById('passkey-public-key-options');
        const options = optionsNode ? JSON.parse(optionsNode.textContent) : null;
        const button = document.getElementById('register-passkey-button');
        const errorNode = document.getElementById('passkey-error');
        const credentialField = document.getElementById('credential-json-field');
        const finishForm = document.getElementById('passkey-finish-form');

        if (!button || !options || !window.PublicKeyCredential || !navigator.credentials) {
          if (button) {
            button.disabled = true;
          }
          return;
        }

        function decodeBase64UrlToBytes(value) {
          const normalized = value.replace(/-/g, '+').replace(/_/g, '/');
          const padding = '='.repeat((4 - normalized.length % 4) % 4);
          const base64 = normalized + padding;
          const raw = window.atob(base64);
          return Uint8Array.from(raw, c => c.charCodeAt(0));
        }

        function encodeBytesToBase64Url(bytes) {
          const array = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
          let binary = '';
          for (let i = 0; i < array.length; i += 1) {
            binary += String.fromCharCode(array[i]);
          }
          return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
        }

        button.addEventListener('click', async function () {
          errorNode.style.display = 'none';
          button.disabled = true;
          try {
            const publicKey = { ...options.publicKey };
            publicKey.challenge = decodeBase64UrlToBytes(publicKey.challenge);
            publicKey.user = {
              ...publicKey.user,
              id: decodeBase64UrlToBytes(publicKey.user.id),
            };
            if (Array.isArray(publicKey.excludeCredentials)) {
              publicKey.excludeCredentials = publicKey.excludeCredentials.map((entry) => ({
                ...entry,
                id: decodeBase64UrlToBytes(entry.id),
              }));
            }

            const created = await navigator.credentials.create({ publicKey });
            if (!created) {
              throw new Error('{% trans "Passkey prompt was cancelled." %}');
            }

            const credential = {
              id: created.id,
              rawId: encodeBytesToBase64Url(created.rawId),
              type: created.type,
              response: {
                clientDataJSON: encodeBytesToBase64Url(created.response.clientDataJSON),
                attestationObject: encodeBytesToBase64Url(created.response.attestationObject),
                transports: typeof created.response.getTransports === 'function' ? created.response.getTransports() : [],
              },
            };
            credentialField.value = JSON.stringify(credential);
            finishForm.submit();
          } catch (error) {
            errorNode.textContent = error.message || '{% trans "Unable to register passkey." %}';
            errorNode.style.display = 'block';
          } finally {
            button.disabled = false;
          }
        });
      }());
    </script>
  {% endif %}
</div>
{% endblock %}