<script setup lang="ts">
definePageMeta({
  layout: false,
});

const route = useRoute();
const uid = route.query.uid as string;

const email = ref("");
const sent = ref(false);
const loading = ref(false);
const error = ref("");

async function sendMagicLink() {
  if (!email.value || !uid) return;
  loading.value = true;
  error.value = "";

  try {
    await $fetch("/oidc/interaction/login", {
      method: "POST",
      body: { email: email.value, uid },
    });
    sent.value = true;
  } catch (e: any) {
    error.value = e?.data?.statusMessage || "Something went wrong. Please try again.";
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="wiki-login">
    <div class="wiki-login-card">
      <div class="wiki-login-header">
        <span class="wiki-login-overline">Ghost Guild</span>
        <h1 class="wiki-login-title">Wiki</h1>
      </div>

      <div class="wiki-login-divider" />

      <Transition name="wiki-fade" mode="out-in">
        <form v-if="!sent" key="form" @submit.prevent="sendMagicLink" class="wiki-login-form">
          <label for="email" class="wiki-login-label">Email address</label>
          <input
            id="email"
            v-model="email"
            type="email"
            required
            autocomplete="email"
            placeholder="you@example.com"
            class="wiki-login-input"
            :disabled="loading"
          />

          <p v-if="error" class="wiki-login-error">{{ error }}</p>

          <button
            type="submit"
            :disabled="loading || !email"
            class="wiki-login-button"
          >
            <span v-if="loading" class="wiki-login-spinner" />
            {{ loading ? "Sending" : "Continue" }}
          </button>

          <p class="wiki-login-hint">
            We'll email you a sign-in link. No password needed.
          </p>
        </form>

        <div v-else key="sent" class="wiki-login-sent">
          <p class="wiki-login-sent-heading">Check your inbox</p>
          <p class="wiki-login-sent-detail">
            A sign-in link was sent to <strong>{{ email }}</strong>
          </p>
          <button
            @click="sent = false; email = '';"
            class="wiki-login-link"
          >
            Try a different email
          </button>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.wiki-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(184, 135, 58, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(178, 104, 64, 0.04) 0%, transparent 60%),
    var(--color-guild-900);
}

.dark .wiki-login {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(224, 184, 110, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(218, 154, 114, 0.03) 0%, transparent 60%),
    var(--color-guild-900);
}

.wiki-login-card {
  width: 100%;
  max-width: 360px;
  padding: 2.5rem 2rem 2rem;
  background: var(--color-guild-800);
  border: 1px solid var(--color-guild-700);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

.dark .wiki-login-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.3);
}

.wiki-login-header {
  text-align: center;
}

.wiki-login-overline {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-guild-400);
}

.wiki-login-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-candlelight-400);
  margin-top: 0.25rem;
}

.wiki-login-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-guild-600),
    transparent
  );
  margin: 1.5rem 0;
}

.wiki-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wiki-login-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-guild-300);
}

.wiki-login-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-guild-100);
  background: var(--color-guild-900);
  border: 1px solid var(--color-guild-600);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wiki-login-input::placeholder {
  color: var(--color-guild-500);
}

.wiki-login-input:focus {
  border-color: var(--color-candlelight-500);
  box-shadow: 0 0 0 3px rgba(184, 135, 58, 0.15);
}

.wiki-login-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wiki-login-error {
  font-size: 0.8125rem;
  color: var(--color-ember-400);
  margin: 0;
}

.wiki-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-guild-50);
  background: var(--color-candlelight-500);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.wiki-login-button:hover:not(:disabled) {
  background: var(--color-candlelight-400);
}

.wiki-login-button:active:not(:disabled) {
  transform: scale(0.98);
}

.wiki-login-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wiki-login-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: wiki-spin 0.6s linear infinite;
}

@keyframes wiki-spin {
  to { transform: rotate(360deg); }
}

.wiki-login-hint {
  font-size: 0.75rem;
  color: var(--color-guild-500);
  text-align: center;
  margin: 0;
}

.wiki-login-sent {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.wiki-login-sent-heading {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-guild-100);
  margin: 0;
}

.wiki-login-sent-detail {
  font-size: 0.8125rem;
  color: var(--color-guild-400);
  line-height: 1.5;
  margin: 0;
}

.wiki-login-sent-detail strong {
  color: var(--color-guild-200);
  font-weight: 600;
}

.wiki-login-link {
  font-size: 0.8125rem;
  color: var(--color-candlelight-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 0.5rem;
  transition: color 0.15s;
}

.wiki-login-link:hover {
  color: var(--color-candlelight-400);
}

/* Transition */
.wiki-fade-enter-active,
.wiki-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wiki-fade-enter-from {
  opacity: 0;
  transform: translateY(6px);
}

.wiki-fade-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}
</style>
