<script setup lang="ts">
const { loggedIn, user, fetch: refreshSession } = useUserSession();
import * as z from 'zod'
import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'

const toast = useToast()

const providers = [{
  label: 'Google',
  icon: 'i-simple-icons-google',
  onClick: () => {
    toast.add({ title: 'Google', description: 'Login with Google' })
  }
}, {
  label: 'GitHub',
  icon: 'i-simple-icons-github',
  onClick: () => {
    toast.add({ title: 'GitHub', description: 'Login with GitHub' })
  }
}]


const fields: AuthFormField[] = [{
  name: 'email',
  type: 'email',
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Enter your password',
  required: true
}, {
  name: 'remember',
  label: 'Remember me',
  type: 'checkbox'
}]

// actual login logic

const error_popup = ref(false)

async function sendLogin(u:string,p:string) {
  try {
    const r = await $fetch("/api/login", {
      method: "POST",
      body: {"email": u, "password": p}
    })
    await refreshSession()
    await navigateTo('/dashboard') // user home page
  } catch {
    error_popup.value = true // show popup
    }
  }

const schema = z.object({
  email: z.email('Invalid email'),
  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
})


function onSubmit(payload: FormSubmitEvent<schema>) {
  const data = payload.data.email
  console.log('Submitted', data)
  sendLogin(payload.data.email, payload.data.password)
}

</script>

<template>
    <div class="flex flex-col items-center justify-center gap-4 p-4">
      <UPageCard class="w-full max-w-md">
        <UAuthForm
            :schema="schema"
            title="Login"
            description="Enter your credentials to access your account."
            icon="i-lucide-user"
            :fields="fields"
            :providers="providers"
            @submit="onSubmit"
        >
          <template #validation>
            <UAlert v-if="error_popup" color="error" variant="subtle" icon="i-lucide-info" title="Error signing in" />
          </template>

        </UAuthForm>
      </UPageCard>
    </div>
</template>

<style scoped>

</style>