{% 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 %}
          {% if error %}
            <p class="mt-2 text-sm text-red-600 dark:text-red-500">
              <span class="font-medium">{{ error }}</span>
            </p>
          {% endif %}
          {% 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"
                  x-data="{ authMethod: '{{ selected_auth_method|default("local") }}' }">
              {% if ldap_enabled %}
                <div>
                  <label for="auth_method"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ _("Authentication Method") }}
                  </label>
                  <select name="auth_method"
                          id="auth_method"
                          x-model="authMethod"
                          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:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <option value="local">{{ _("Local Account") }}</option>
                    {% if ldap_enabled %}<option value="ldap">{{ _("LDAP") }}</option>{% endif %}
                  </select>
                </div>
              {% else %}
                <input type="hidden" name="auth_method" value="local">
              {% endif %}
              <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 %}