<script setup lang="ts">
definePageMeta({
  layout: "notLoggedIn"
})

const auth = useAuthStore()
const toast = useToast()
const router = useRouter()

const platformIsNative = useCapacitor().getIsNative()


const doLogin = async (data:any) => {
  try {
    await auth.login(data.email, data.password)
    // Weiterleiten nach erfolgreichem Login
    toast.add({title:"Einloggen erfolgreich"})
    if(platformIsNative) {
      await router.push("/mobile")
    } else {
      await router.push("/")
    }
  } catch (err: any) {
    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"})
  }
}
</script>

<template>
  <UCard class="max-w-sm w-full mx-auto mt-5" v-if="!platformIsNative">

    <UColorModeImage
        light="/Logo.png"
        dark="/Logo_Dark.png"
    />

    <UAlert
        title="Achtung"
      description="Es wurden alle Benutzerkonten zurückgesetzt. Bitte fordert über Passwort vergessen ein neues Passwort an."
      color="rose"
        variant="outline"
        class="my-5"
    >
    </UAlert>

    <UAuthForm
        title="Login"
        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
        align="bottom"
        :fields="[{
            name: 'email',
            type: 'text',
            label: 'Email',
            placeholder: 'Deine E-Mail Adresse'
          }, {
            name: 'password',
            label: 'Passwort',
            type: 'password',
            placeholder: 'Dein Passwort'
          }]"
        :loading="false"
        @submit="doLogin"
        :submit-button="{label: 'Weiter'}"
        divider="oder"
    >
      <template #password-hint>
        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
      </template>
    </UAuthForm>
  </UCard>
  <div v-else class="mt-20 m-2 p-2">
    <UColorModeImage
        light="/Logo.png"
        dark="/Logo_Dark.png"
    />

    <UAuthForm
        title="Login"
        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
        align="bottom"
        :fields="[{
            name: 'email',
            type: 'text',
            label: 'Email',
            placeholder: 'Deine E-Mail Adresse'
          }, {
            name: 'password',
            label: 'Passwort',
            type: 'password',
            placeholder: 'Dein Passwort'
          }]"
        :loading="false"
        @submit="doLogin"
        :submit-button="{label: 'Weiter'}"
        divider="oder"
    >
      <template #password-hint>
        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
      </template>
    </UAuthForm>
  </div>
</template>