<template>
  <div class="max-w-md mx-auto px-4 py-16">
    <div class="hms-card p-8">
      <div class="text-center mb-6">
        <HmsLogo :size="48" />
        <h1 class="text-xl font-bold mt-4" style="color: var(--text)">Admin-Login</h1>
        <p class="text-sm mt-1" style="color: var(--secondary)">Equipment-Sync Verwaltungsbereich</p>
      </div>
      <div v-if="loggedIn" class="text-center py-8" role="status">
        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" :style="{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div>
        <p class="font-medium" style="color: var(--text)">Eingeloggt</p>
        <p class="text-xs mt-1" style="color: var(--secondary)">(Prototyp – keine echte Session)</p>
      </div>
      <form v-else @submit.prevent="login" novalidate>
        <div class="space-y-4">
          <div><label for="admin-user" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Benutzername</label><input id="admin-user" v-model="username" type="text" class="hms-input" placeholder="admin" :aria-invalid="!!error" /></div>
          <div><label for="admin-pass" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Passwort</label><input id="admin-pass" v-model="password" type="password" class="hms-input" placeholder="••••••••" :aria-invalid="!!error" /></div>
          <p v-if="error" class="text-xs" style="color: var(--color-error)" role="alert">{{ error }}</p>
          <button type="submit" :disabled="loading" class="hms-btn hms-btn-primary w-full py-3"><span v-if="loading" class="hms-spinner" style="width:18px;height:18px;border-width:2px"></span><span v-else>Einloggen</span></button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const loggedIn = ref(false)

function login() {
  error.value = ''
  if (!username.value || !password.value) {
    error.value = 'Bitte Benutzername und Passwort eingeben'
    return
  }
  loading.value = true
  setTimeout(() => {
    loading.value = false
    loggedIn.value = true
  }, 1200)
}
</script>
