<!-- app/components/Auth/LoginForm.vue -->

<script setup lang="ts">
import { z } from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

const { login } = useAuth()

// Validation schema
const loginSchema = toTypedSchema(
  z.object({
    email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein'),
    password: z.string().min(8, 'Passwort muss mindestens 8 Zeichen lang sein'),
  })
)

// Form state
const { handleSubmit, isSubmitting, errors } = useForm({
  validationSchema: loginSchema,
})

// Success/error state
const submitError = ref<string | null>(null)

// Form submit handler
const onSubmit = handleSubmit(async (values) => {
  submitError.value = null

  try {
    await login(values.email, values.password)
    // Redirect happens in login() function
  } catch (error: any) {
    console.error('Login error:', error)
    submitError.value = error.data?.message || 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
  }
})
</script>

<template>
  <form @submit="onSubmit" class="space-y-6">
    <!-- Error Alert -->
    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
      <AlertCircle class="h-5 w-5 text-destructive" />
      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
    </Alert>

    <!-- Email Field -->
    <FormField v-slot="{ componentField }" name="email">
      <FormItem>
        <FormLabel class="text-white/90 text-base font-medium">E-Mail-Adresse</FormLabel>
        <FormControl>
          <Input type="email" placeholder="ihre.email@beispiel.de" v-bind="componentField" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Password Field -->
    <FormField v-slot="{ componentField }" name="password">
      <FormItem>
        <FormLabel class="text-white/90 text-base font-medium">Passwort</FormLabel>
        <FormControl>
          <Input type="password" placeholder="••••••••" v-bind="componentField" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Submit Button -->
    <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting">
      <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />
      {{ isSubmitting ? 'Wird angemeldet...' : 'Anmelden' }}
    </Button>

    <!-- Info Text -->
    <p class="text-sm text-white/70 text-center">
      Anmeldung erfolgt verschlüsselt über unseren Partner Cidaas
    </p>
  </form>
</template>
