{% extends "_base.html" %}
{% block title %}Anmelden – {{ app_name }}{% endblock %}
{% block content %}
<div class="auth-page">
  <div class="auth-card">
    <h1>{{ app_name }}</h1>

    <div id="passkey-section" style="display:none;">
      <p id="auth-status" class="auth-status">Mit Passkey anmelden</p>
      <button id="passkey-login" type="button" class="btn btn-primary">Mit Passkey anmelden</button>
      {% if password_fallback %}<div class="auth-divider">oder</div>{% endif %}
    </div>

    {% if password_fallback %}
    <form id="password-form" class="auth-form">
      {% if multi_user %}
      <input id="username-input" type="text" placeholder="Nutzername" class="auth-input" autocomplete="username" required />
      {% endif %}
      <input id="password-input" type="password" placeholder="Passwort" class="auth-input" autocomplete="current-password" required />
      <button type="submit" class="btn btn-primary">Anmelden</button>
      <p id="password-status" class="auth-status"></p>
    </form>
    {% endif %}
  </div>
</div>
<style>
.auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card { max-width:360px; width:100%; padding:2rem; text-align:center; }
.auth-card h1 { margin-bottom:.5rem; }
.auth-status { color:var(--text-muted, #888); margin:.5rem 0 1rem; min-height:1.2em; }
.auth-input { width:100%; margin-bottom:1rem; padding:8px 12px; border-radius:8px; border:1px solid var(--border, #444); background:var(--bg-2, transparent); color:inherit; }
.auth-divider { color:var(--text-muted, #888); margin:1rem 0; font-size:12px; text-transform:uppercase; }
.auth-form .btn { width:100%; }
</style>
{% endblock %}
{% block extra_js %}
<script>
function b64uToBuf(s) {
  s = s.replace(/-/g, '+').replace(/_/g, '/');
  while (s.length % 4) s += '=';
  const bin = atob(s);
  const buf = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
  return buf.buffer;
}
function bufToB64u(buf) {
  const bytes = new Uint8Array(buf);
  let bin = '';
  for (const b of bytes) bin += String.fromCharCode(b);
  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

const hasPasskey = {{ 'true' if has_passkey else 'false' }};
if (hasPasskey && window.isSecureContext && window.PublicKeyCredential) {
  document.getElementById('passkey-section').style.display = '';
}

document.getElementById('passkey-login').addEventListener('click', async () => {
  const status = document.getElementById('auth-status');
  status.textContent = 'Warte auf Passkey …';
  try {
    const optRes = await fetch('/auth/login/options', { method: 'POST' });
    if (!optRes.ok) throw new Error('Server nicht erreichbar');
    const opts = await optRes.json();
    opts.challenge = b64uToBuf(opts.challenge);
    if (opts.allowCredentials) {
      opts.allowCredentials = opts.allowCredentials.map((c) => ({ ...c, id: b64uToBuf(c.id) }));
    }

    const assertion = await navigator.credentials.get({ publicKey: opts });
    const payload = {
      id: assertion.id,
      rawId: bufToB64u(assertion.rawId),
      type: assertion.type,
      response: {
        clientDataJSON: bufToB64u(assertion.response.clientDataJSON),
        authenticatorData: bufToB64u(assertion.response.authenticatorData),
        signature: bufToB64u(assertion.response.signature),
        userHandle: assertion.response.userHandle ? bufToB64u(assertion.response.userHandle) : null,
      },
    };

    const verifyRes = await fetch('/auth/login/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const result = await verifyRes.json();
    if (result.ok) {
      window.location.href = result.redirect || '/';
    } else {
      status.textContent = 'Anmeldung fehlgeschlagen.';
    }
  } catch (e) {
    status.textContent = 'Fehler: ' + e.message;
  }
});

const passwordForm = document.getElementById('password-form');
if (passwordForm) {
  passwordForm.addEventListener('submit', async (ev) => {
    ev.preventDefault();
    const status = document.getElementById('password-status');
    const password = document.getElementById('password-input').value;
    const usernameInput = document.getElementById('username-input');
    const body = usernameInput ? { username: usernameInput.value, password } : { password };
    status.textContent = 'Prüfe …';
    try {
      const res = await fetch('/auth/login/password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const result = await res.json();
      if (result.ok) {
        window.location.href = result.redirect || '/';
      } else {
        status.textContent = 'Falsches Passwort.';
      }
    } catch (e) {
      status.textContent = 'Fehler: ' + e.message;
    }
  });
}
</script>
{% endblock %}