<template>
  <div class="min-h-screen bg-gray-950 flex items-center justify-center">
    <div class="w-full max-w-sm rounded-xl border border-gray-800 bg-gray-900 p-8">
      <div class="mb-8 text-center">
        <p class="text-xs text-gray-600 uppercase tracking-widest mb-1">rebreak</p>
        <h1 class="text-lg font-semibold text-white">Admin Login</h1>
        <p class="text-sm text-gray-500 mt-1">Interner Zugang -- kein Public-Access</p>
      </div>

      <form @submit.prevent="handleLogin" class="space-y-4">
        <UFormField label="E-Mail" name="email">
          <UInput
            v-model="email"
            type="email"
            placeholder="admin@rebreak.org"
            autocomplete="email"
            class="w-full"
            :disabled="loading"
          />
        </UFormField>

        <UFormField label="Passwort" name="password">
          <UInput
            v-model="password"
            type="password"
            placeholder="Passwort"
            autocomplete="current-password"
            class="w-full"
            :disabled="loading"
          />
        </UFormField>

        <UButton
          type="submit"
          label="Einloggen"
          class="w-full justify-center"
          :loading="loading"
          :disabled="!email || !password"
        />

        <p v-if="error" class="text-sm text-red-400 text-center">{{ error }}</p>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
// Login-Page -- kein Layout (eigene vollstaendige Seite)
definePageMeta({
  layout: false,
})

const { loginWithPassword } = useAdminAuth()

const email = ref("")
const password = ref("")
const loading = ref(false)
const error = ref("")

async function handleLogin() {
  loading.value = true
  error.value = ""
  try {
    await loginWithPassword(email.value, password.value)
    await navigateTo("/")
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : "Login fehlgeschlagen"
  } finally {
    loading.value = false
  }
}
</script>
