<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { startAuthentication } from '@simplewebauthn/browser';

const loading = ref(false);
const error = ref<string | null>(null);

async function handlePasskeyLogin() {
  loading.value = true;
  error.value = null;

  try {
    // 1. Get options from server
    const resp = await fetch('/api/auth/passkey/login/start');

    if (!resp.ok) {
      throw new Error('Failed to start passkey login');
    }

    const options = await resp.json();

    // 2. Browser handles interaction
    let asseResp;
    try {
      asseResp = await startAuthentication(options);
    } catch (err) {
      if ((err as any).name === 'NotAllowedError') {
        // User cancelled or timed out
        return;
      }
      console.error(err);
      error.value = 'Failed to authenticate with passkey';
      return;
    }

    // 3. Verify with server
    const verificationResp = await fetch('/api/auth/passkey/login/finish', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(asseResp),
    });

    const verificationJSON = await verificationResp.json();
    if (verificationJSON.verified) {
      window.location.href = '/dashboard';
    } else {
      error.value = 'Login failed. Please try again.';
    }
  } catch (err) {
    console.error('Error during passkey login:', err);
    error.value = 'An error occurred during login';
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div>
    <button
      class="btn btn-secondary w-full"
      @click="handlePasskeyLogin"
      :disabled="loading"
    >
      <span v-if="loading" class="loading loading-spinner loading-sm"></span>
      <Icon v-else icon="heroicons:finger-print" class="w-5 h-5 mr-2" />
      Sign in with Passkey
    </button>

    <div v-if="error" role="alert" class="alert alert-error mt-4">
      <Icon icon="heroicons:exclamation-circle" class="w-6 h-6" />
      <span>{{ error }}</span>
    </div>
  </div>
</template>
