{% extends "_base.html" %}
{% block title %}Einladung – {{ app_name }}{% endblock %}
{% block content %}
<div class="auth-page">
  <div class="auth-card">
    <h1>{{ app_name }}</h1>
    {% if invalid %}
    <p class="auth-status">Diese Einladung ist abgelaufen oder ungültig. Bitte einen neuen Link anfordern.</p>
    {% else %}
    {% if known_user %}
    <p class="auth-status">
      Neue Passkey für {{ known_user.display_name or known_user.username }} anlegen
      {% if inviter %} (angestoßen von {{ inviter.display_name or inviter.username }}){% endif %}.
    </p>
    {% else %}
    <p class="auth-status">
      {% if inviter %}Eingeladen von {{ inviter.display_name or inviter.username }} —{% endif %}
      lege deine eigene Passkey an.
    </p>

    <input id="invite-username" type="text" placeholder="Name (z. B. &quot;alice&quot;)" class="auth-input" />
    <input id="invite-display-name" type="text" placeholder="Anzeigename (optional)" class="auth-input" />
    {% endif %}

    <div id="passkey-section" style="display:none;">
      <button id="passkey-register" type="button" class="btn btn-primary">Passkey einrichten</button>
      <p id="passkey-status" class="auth-status"></p>
    </div>
    <p id="passkey-hint" class="auth-status" style="display:none;">
      Passkeys benötigen HTTPS (oder localhost) -- über die aktuelle Verbindung nicht verfügbar.
    </p>

    <div class="auth-divider">oder</div>
    <form id="password-form" class="auth-form">
      <input id="invite-password" type="password" placeholder="Passwort (mind. 8 Zeichen)" class="auth-input" autocomplete="new-password" required />
      <input id="invite-password-confirm" type="password" placeholder="Passwort wiederholen" class="auth-input" autocomplete="new-password" required />
      <button type="submit" class="btn btn-primary">Passwort setzen</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 %}
{% if not invalid %}
<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(/=+$/, '');
}

if (window.isSecureContext && window.PublicKeyCredential) {
  document.getElementById('passkey-section').style.display = '';
} else {
  document.getElementById('passkey-hint').style.display = '';
}

document.getElementById('passkey-register').addEventListener('click', async () => {
  const status = document.getElementById('passkey-status');
  const knownUser = {{ 'true' if known_user else 'false' }};
  let body = '{}';
  if (!knownUser) {
    const username = document.getElementById('invite-username').value.trim();
    const displayName = document.getElementById('invite-display-name').value.trim();
    if (!username) {
      status.textContent = 'Bitte einen Namen angeben.';
      return;
    }
    body = JSON.stringify({ username, display_name: displayName });
  }
  status.textContent = 'Warte auf Passkey …';
  try {
    const optRes = await fetch('/auth/invite/{{ token }}/options', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body,
    });
    if (!optRes.ok) {
      const err = await optRes.json().catch(() => ({}));
      throw new Error(err.error || 'Einladung ungültig');
    }
    const opts = await optRes.json();
    opts.challenge = b64uToBuf(opts.challenge);
    opts.user.id = b64uToBuf(opts.user.id);
    if (opts.excludeCredentials) {
      opts.excludeCredentials = opts.excludeCredentials.map((c) => ({ ...c, id: b64uToBuf(c.id) }));
    }

    const credential = await navigator.credentials.create({ publicKey: opts });
    const payload = {
      label: 'Passkey',
      credential: {
        id: credential.id,
        rawId: bufToB64u(credential.rawId),
        type: credential.type,
        response: {
          clientDataJSON: bufToB64u(credential.response.clientDataJSON),
          attestationObject: bufToB64u(credential.response.attestationObject),
        },
      },
    };

    const verifyRes = await fetch('/auth/invite/{{ token }}/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 = result.error || 'Einrichtung fehlgeschlagen.';
    }
  } catch (e) {
    status.textContent = 'Fehler: ' + e.message;
  }
});

document.getElementById('password-form').addEventListener('submit', async (ev) => {
  ev.preventDefault();
  const status = document.getElementById('password-status');
  const password = document.getElementById('invite-password').value;
  const confirm = document.getElementById('invite-password-confirm').value;
  if (password !== confirm) {
    status.textContent = 'Passwörter stimmen nicht überein.';
    return;
  }
  const knownUser = {{ 'true' if known_user else 'false' }};
  const body = { password };
  if (!knownUser) {
    const username = document.getElementById('invite-username').value.trim();
    const displayName = document.getElementById('invite-display-name').value.trim();
    if (!username) {
      status.textContent = 'Bitte einen Namen angeben.';
      return;
    }
    body.username = username;
    body.display_name = displayName;
  }
  status.textContent = 'Setze Passwort …';
  try {
    const res = await fetch('/auth/invite/{{ token }}/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 = result.error || 'Einrichtung fehlgeschlagen.';
    }
  } catch (e) {
    status.textContent = 'Fehler: ' + e.message;
  }
});
</script>
{% endif %}
{% endblock %}