<script setup lang="ts">
const email = ref("");
const sent = ref(false);
const error = ref<string | null>(null);
const client = useSupabaseClient();

async function sendMagicLink() {
  error.value = null;
  const { error: authError } = await client.auth.signInWithOtp({ email: email.value });
  if (authError) {
    error.value = authError.message;
    return;
  }
  sent.value = true;
}
</script>

<template>
  <div class="login">
    <h1>Sign in to Continuum</h1>
    <form v-if="!sent" @submit.prevent="sendMagicLink">
      <input v-model="email" type="email" placeholder="you@farm.com" required />
      <button type="submit">Send magic link</button>
    </form>
    <p v-else>Check your inbox for a sign-in link.</p>
    <p v-if="error" class="login__error">{{ error }}</p>
  </div>
</template>

<style scoped>
.login {
  max-width: 320px;
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login__error {
  color: #f2604c;
}
</style>
