<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
    <div class="card w-full max-w-sm bg-base-100 shadow-2xl ring-1 ring-base-300 login-card">
      <div class="card-body">
        <h1 class="card-title justify-center text-2xl">HnH Map</h1>
        <p class="text-center text-base-content/70 text-sm">Log in to continue</p>
        <form @submit.prevent="submit" class="flex flex-col gap-4">
          <div class="form-control">
            <label class="label" for="user">User</label>
            <input
              id="user"
              v-model="user"
              type="text"
              class="input input-bordered"
              required
              autocomplete="username"
            />
          </div>
          <PasswordInput
            v-model="pass"
            label="Password"
            required
            autocomplete="current-password"
          />
          <p v-if="error" class="text-error text-sm">{{ error }}</p>
          <button type="submit" class="btn btn-primary transition-all duration-200 hover:scale-[1.02]" :disabled="loading">
            <span v-if="loading" class="loading loading-spinner loading-sm" />
            <span v-else>Log in</span>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// No auth required; auth.global skips this path

const user = ref('')
const pass = ref('')
const error = ref('')
const loading = ref(false)
const router = useRouter()
const api = useMapApi()

async function submit() {
  error.value = ''
  loading.value = true
  try {
    await api.login(user.value, pass.value)
    await router.push('/profile')
  } catch (e: unknown) {
    error.value = e instanceof Error ? e.message : 'Login failed'
  } finally {
    loading.value = false
  }
}
</script>
