<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">
    <AuthCard>
      <h1 class="card-title justify-center">First-time setup</h1>
      <p class="text-sm text-base-content/80">
        This is the first run. Create the administrator account using the bootstrap password
        from the server configuration (e.g. <code class="text-xs">HNHMAP_BOOTSTRAP_PASSWORD</code>).
      </p>
      <form class="flex flex-col gap-4" @submit.prevent="submit">
        <PasswordInput
          v-model="pass"
          label="Bootstrap password"
          required
          autocomplete="current-password"
        />
        <p v-if="error" class="text-error text-sm">{{ error }}</p>
        <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
          <span v-if="loading" class="loading loading-spinner loading-sm" />
          <span v-else>Create and log in</span>
        </button>
      </form>
    </AuthCard>
    <NuxtLink to="/" class="btn btn-ghost btn-sm mt-4">Map</NuxtLink>
  </div>
</template>

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

useHead({ title: 'Setup – HnH Map' })

const pass = ref('')
const router = useRouter()
const api = useMapApi()
const { loading, error, run } = useFormSubmit('Setup failed')

onMounted(async () => {
  try {
    const { setupRequired: required } = await api.setupRequired()
    if (!required) await navigateTo('/login')
  } catch {
    // If API fails, stay on page
  }
})

async function submit() {
  const ok = await run(async () => {
    await api.login('admin', pass.value)
    await router.push('/profile')
  })
  if (!ok && error.value === 'Unauthorized') {
    error.value = 'Invalid bootstrap password.'
  }
}
</script>
