<template>
  <div class="min-h-screen w-full flex flex-col items-center justify-center px-4">
    <h1 class="text-display-xl font-bold mb-2 font-sans">Ghost Guild</h1>
    <p v-if="!isAuthenticated" class="text-display-sm text-guild-400 mb-10 font-sans">Coming Soon</p>

    <!-- Logged-in state -->
    <div v-if="isAuthenticated" class="w-full max-w-sm space-y-4 text-center mt-8">
      <p class="text-guild-200 font-sans">
        Welcome, <strong class="text-guild-100">{{ memberData.name || memberData.email }}</strong>
        <button
          class="text-sm text-guild-400 hover:text-guild-200 underline transition-colors ml-2"
          @click="handleLogout">
          Sign out
        </button>
      </p>
      <a
        href="https://wiki.ghostguild.org"
        class="block w-full py-3 px-4 bg-candlelight-500 hover:bg-candlelight-400 text-guild-900 font-semibold rounded-lg text-center transition-colors font-sans">
        Go to Wiki
      </a>
    </div>

    <!-- Login form -->
    <div v-else class="w-full max-w-sm">
      <!-- Success state -->
      <div v-if="loginSuccess" class="text-center py-4">
        <div
          class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
          <UIcon name="i-heroicons-check-circle" class="w-10 h-10 text-candlelight-400" />
        </div>
        <h3 class="text-lg font-semibold text-guild-100 mb-2">
          Check your email
        </h3>
        <p class="text-guild-300">
          We've sent a magic link to
          <strong class="text-guild-100">{{ email }}</strong>.
          Click the link to sign in.
        </p>
      </div>

      <!-- Form -->
      <UForm v-else :state="{ email }" @submit="handleLogin">
        <UFormField label="Email Address" name="email" required class="mb-4">
          <UInput
            v-model="email"
            type="email"
            size="lg"
            class="w-full"
            placeholder="your.email@example.com" />
        </UFormField>

        <div v-if="loginError" class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
          <p class="text-ember-400 text-sm">{{ loginError }}</p>
        </div>

        <UButton
          type="submit"
          :loading="isLoggingIn"
          :disabled="!isFormValid"
          size="lg"
          class="w-full">
          Send Magic Link
        </UButton>

        <div class="text-center pt-6 border-t border-guild-700 mt-6">
          <p class="text-guild-400 text-sm">
            Don't have an account?
            <a
              href="https://babyghosts.fund/ghost-guild/"
              class="text-candlelight-400 hover:text-candlelight-300 font-medium">
              Join Ghost Guild
            </a>
          </p>
        </div>
      </UForm>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "coming-soon",
});

const { isAuthenticated, memberData, checkMemberStatus, logout } = useAuth();

const email = ref("");
const isLoggingIn = ref(false);
const loginSuccess = ref(false);
const loginError = ref("");

const isFormValid = computed(() => email.value && email.value.includes("@"));

const handleLogin = async () => {
  if (isLoggingIn.value) return;

  isLoggingIn.value = true;
  loginError.value = "";

  try {
    const response = await $fetch("/api/auth/login", {
      method: "POST",
      body: { email: email.value },
    });

    if (response.success) {
      loginSuccess.value = true;
    }
  } catch (err) {
    if (err.statusCode === 500) {
      loginError.value = "Failed to send login email. Please try again later.";
    } else {
      loginError.value =
        err.statusMessage || "Something went wrong. Please try again.";
    }
  } finally {
    isLoggingIn.value = false;
  }
};

const handleLogout = async () => {
  await logout();
};
</script>
