<template>
  <v-container class="fill-height">
    <v-card class="recipe-card auth-card pa-10 mx-auto" elevation="10">
      
      <v-fade-transition mode="out-in">
        <div :key="isLogin">
          <header class="text-center mb-8">
            <h1 class="auth-title">{{ isLogin ? 'Sign In' : 'Join Us' }}</h1>
            <p class="brand-subtitle">The Seasoned Ledger</p>
          </header>

          <v-form @submit.prevent="handleAuth">
            <v-text-field
              v-if="!isLogin"
              label="Name"
              placeholder="Your name"
              class="custom-input auth-input mb-4"
              variant="flat"
              prepend-inner-icon="mdi-account-outline"
            ></v-text-field>

            <v-text-field
              label="Email"
              placeholder="email@example.com"
              class="custom-input auth-input mb-4"
              variant="flat"
              prepend-inner-icon="mdi-email-outline"
            ></v-text-field>

            <v-text-field
              label="Password"
              type="password"
              placeholder="••••••••"
              class="custom-input auth-input mb-6"
              variant="flat"
              prepend-inner-icon="mdi-lock-outline"
            ></v-text-field>

            <v-btn
              block
              class="analyze-btn mb-4"
              size="large"
              elevation="0"
              type="submit"
            >
              {{ isLogin ? 'Open Ledger' : 'Create Account' }}
            </v-btn>

            <div class="text-center">
              <span class="auth-toggle-btn" @click="isLogin = !isLogin">
                {{ isLogin ? "New here? Register an account" : "Already a member? Sign in" }}
              </span>
            </div>
          </v-form>
        </div>
      </v-fade-transition>

      <v-divider class="my-6 separator"></v-divider>

      <v-btn to="/" variant="text" color="#6d5e4a" block class="view-recipe-btn">
        <v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
        Return to Kitchen
      </v-btn>
    </v-card>
  </v-container>
</template>

<script setup>
const isLogin = ref(true)
const email = ref('')
const password = ref('')

const authUrl = '/api/auth/login?useCookies=false'

const handleAuth = async () => {
  try {
    const response = await $fetch(isLogin.value ? authUrl : '/api/auth/register', {
      method: 'POST',
      body: {
        email: email.value,
        password: password.value
      }
    })

    if (isLogin.value && response.accessToken) {
      const token = useCookie('seasoned_token', {
        maxAge: response.expiresIn,
        sameSite: 'lax',
        secure: true,
        path: '/'
      })

      token.value = response.accessToken

      navigateTo('/gallery')
    } else if (!isLogin.value) {
      isLogin.value = true
      alert("Account created. Please sign in to open your ledger.")
    }
  } catch (err) {
    console.error("Authentication failed:", err.data?.errors || err)
  }
}
</script>