{% extends "base.html" %}
{% block title %}
  Login
{% endblock title %}
{% block main %}
  <section class="bg-gray-50 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
      <a href="#"
         class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">{{ _(server_name) }}</a>
      <div class="w-full bg-white rounded-lg shadow-sm dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
          <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
            {% if show_2fa %}
              {{ _("Two-Factor Authentication") }}
            {% else %}
              {{ _("Login") }}
            {% endif %}
          </h1>
          {% if not show_2fa %}
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ _("This is the administrator login page.") }}
              {% if media_server_url %}
                <a href="{{ media_server_url }}"
                   class="text-primary hover:underline">{{ _("Go to your media server instead") }}</a>
              {% endif %}
            </p>
          {% endif %}
          <p class="mt-2 text-sm text-red-600 dark:text-red-500">
            <span class="font-medium">{{ error }}
            </p>
            {% if show_2fa %}
              <div class="mb-4 p-4 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-lg">
                <div class="flex items-center">
                  <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                    </path>
                  </svg>
                  <div>
                    <p class="text-sm text-blue-800 dark:text-blue-200">{{ _("Welcome back, {}!").format(username) }}</p>
                    <p class="text-sm text-blue-600 dark:text-blue-400">
                      {{ _("Please authenticate with your passkey to complete login.") }}
                    </p>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if not show_2fa %}
              <form class="space-y-4 md:space-y-6"
                    action="{{ url_for('auth.login') }}"
                    method="post">
                <div>
                  <label for="username"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ _("Username") }}
                  </label>
                  <input type="username"
                         name="username"
                         id="username"
                         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                         placeholder="marvin"
                         required="">
                </div>
                <div id="password-section">
                  <label for="password"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ _("Password") }}
                  </label>
                  <input type="password"
                         name="password"
                         id="password"
                         placeholder="••••••••"
                         class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                         required="">
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-start">
                    <div class="flex items-center h-5">
                      <input name="remember"
                             id="remember"
                             aria-describedby="remember"
                             type="checkbox"
                             class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-amber-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary dark:ring-offset-gray-800">
                    </div>
                    <div class="ml-3 text-sm">
                      <label for="remember" class="text-gray-500 dark:text-gray-300">{{ _("Remember me") }}</label>
                    </div>
                  </div>
                </div>
                <button type="submit"
                        id="password-login"
                        class="w-full text-white bg-primary hover:bg-primary_hover focus:ring-4 focus:outline-hidden focus:ring-amber-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary_hover dark:focus:ring-primary_hover">
                  {{ _("Sign in") }}
                </button>
              </form>
            {% endif %}
            {% if show_2fa or has_passkeys %}
              <div class="mt-4">
                {% if show_2fa %}
                  <!-- 2FA Mode: Only show passkey authentication -->
                  <button type="button"
                          id="passkey-login"
                          class="w-full flex items-center justify-center px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-lg text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900 hover:bg-blue-100 dark:hover:bg-blue-800">
                    <svg class="w-5 h-5 mr-2"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                      </path>
                    </svg>
                    {{ _("Authenticate with Passkey") }}
                  </button>
                  <!-- Back to login button -->
                  <button type="button"
                          id="back-to-login"
                          class="mt-2 w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <svg class="w-5 h-5 mr-2"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    {{ _("Back to Login") }}
                  </button>
                {% elif has_passkeys %}
                  <!-- Normal Mode: Show "Or" divider and passkey option -->
                  <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                      <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                      <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">{{ _("Or") }}</span>
                    </div>
                  </div>
                  <button type="button"
                          id="passkey-login"
                          class="mt-4 w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <svg class="w-5 h-5 mr-2"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                      </path>
                    </svg>
                    {{ _("Sign in with Passkey") }}
                  </button>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const passkeyLoginBtn = document.getElementById('passkey-login');
            const usernameInput = document.getElementById('username');
            const backToLoginBtn = document.getElementById('back-to-login');

            // Handle back to login button
            if (backToLoginBtn) {
                backToLoginBtn.addEventListener('click', function() {
                    window.location.href = '/login';
                });
            }

            passkeyLoginBtn.addEventListener('click', async function() {
                try {
                    passkeyLoginBtn.disabled = true;
                    passkeyLoginBtn.innerHTML = `
                <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"></div>
                {{ _("Authenticating...") }}
            `;

                    // Begin authentication (usernameless)
                    const beginResponse = await fetch('/webauthn/authenticate/begin', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({})
                    });

                    if (!beginResponse.ok) {
                        const error = await beginResponse.json();
                        throw new Error(error.error || '{{ _("Authentication failed") }}');
                    }

                    const options = await beginResponse.json();

                    // Convert base64url to Uint8Array for WebAuthn API
                    options.challenge = base64urlToUint8Array(options.challenge);
                    if (options.allowCredentials) {
                        options.allowCredentials = options.allowCredentials.map(cred => ({
                            ...cred,
                            id: base64urlToUint8Array(cred.id)
                        }));
                    }

                    // Get credential
                    const credential = await navigator.credentials.get({
                        publicKey: options
                    });

                    // Convert ArrayBuffer values to base64url
                    // The webauthn library expects both id and rawId to be the same base64url value
                    const credentialId = uint8ArrayToBase64url(new Uint8Array(credential.rawId));

                    // Complete authentication
                    const completeResponse = await fetch('/webauthn/authenticate/complete', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            credential: {
                                id: credentialId, // Both fields must have the same value
                                rawId: credentialId, // Both fields must have the same value
                                response: {
                                    clientDataJSON: uint8ArrayToBase64url(new Uint8Array(credential.response.clientDataJSON)),
                                    authenticatorData: uint8ArrayToBase64url(new Uint8Array(credential.response.authenticatorData)),
                                    signature: uint8ArrayToBase64url(new Uint8Array(credential.response.signature)),
                                    userHandle: credential.response.userHandle ? uint8ArrayToBase64url(new Uint8Array(credential.response.userHandle)) : null
                                },
                                type: credential.type,
                                transports: credential.response.getTransports ? credential.response.getTransports() : []
                            }
                        })
                    });

                    if (completeResponse.ok) {
                        const result = await completeResponse.json();
                        if (result.verified && result.redirect) {
                            // For 2FA completion, we need to make a POST request to complete the login
                            if (result.redirect.includes('complete-2fa')) {
                                const completeLoginResponse = await fetch(result.redirect, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    }
                                });
                                if (completeLoginResponse.ok) {
                                    window.location.href = '/';
                                } else {
                                    throw new Error('{{ _("Failed to complete 2FA login") }}');
                                }
                            } else {
                                window.location.href = result.redirect;
                            }
                        } else {
                            throw new Error('{{ _("Authentication failed") }}');
                        }
                    } else {
                        const error = await completeResponse.json();
                        throw new Error(error.error || '{{ _("Authentication failed") }}');
                    }

                } catch (error) {
                    console.error('Passkey authentication failed:', error);
                    alert(error.message || '{{ _("Passkey authentication failed. Please try again or use your password.") }}');
                } finally {
                    passkeyLoginBtn.disabled = false;
                    passkeyLoginBtn.innerHTML = `
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
                {{ _("Sign in with Passkey") }}
            `;
                }
            });

            function base64urlToUint8Array(base64url) {
                const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
                const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
                const binary = atob(padded);
                const bytes = new Uint8Array(binary.length);
                for (let i = 0; i < binary.length; i++) {
                    bytes[i] = binary.charCodeAt(i);
                }
                return bytes;
            }

            function uint8ArrayToBase64url(array) {
                // Process in chunks to avoid "Maximum call stack size exceeded" for large arrays
                const chunkSize = 8192;
                let binary = '';
                for (let i = 0; i < array.length; i += chunkSize) {
                    const chunk = array.slice(i, i + chunkSize);
                    binary += String.fromCharCode.apply(null, chunk);
                }
                const base64 = btoa(binary);
                return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
            }
        });
    </script>
  {% endblock main %}