<script setup>
definePageMeta({
  layout: 'blank', // Kein Menü, keine Sidebar
  middleware: [], // Keine Auth-Checks durch Nuxt
  auth: false     // Falls du das nuxt-auth Modul nutzt
})

const route = useRoute()
const token = route.params.token
const { $api } = useNuxtApp() // Dein Fetch-Wrapper
const toast = useToast()

// States
const status = ref('loading') // loading, pin_required, ready, error, success
const pin = ref('')
const context = ref(null)
const errorMsg = ref('')

// Daten laden
const loadContext = async () => {
  status.value = 'loading'
  errorMsg.value = ''

  try {
    const headers = {}
    if (pin.value) headers['x-public-pin'] = pin.value

    // Abruf an dein Fastify Backend
    // Pfad evtl. anpassen, wenn du Proxy nutzt
    const res = await $fetch(`http://localhost:3100/workflows/context/${token}`, { headers })

    context.value = res
    status.value = 'ready'
  } catch (err) {
    if (err.statusCode === 401) {
      status.value = 'pin_required' // PIN nötig (aber noch keine eingegeben)
    } else if (err.statusCode === 403) {
      status.value = 'pin_required'
      errorMsg.value = 'Falsche PIN'
      pin.value = ''
    } else {
      status.value = 'error'
      errorMsg.value = 'Link ungültig oder abgelaufen.'
    }
  }
}

// Initialer Aufruf
onMounted(() => {
  loadContext()
})

const handlePinSubmit = () => {
  if (pin.value.length >= 4) loadContext()
}

const handleFormSuccess = () => {
  status.value = 'success'
}
</script>

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">

    <div v-if="status === 'loading'" class="text-center">
      <UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
      <p class="mt-4 text-gray-500">Lade Formular...</p>
    </div>

    <UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
      <div class="text-center text-red-600 space-y-2">
        <UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
        <h3 class="font-bold text-lg">Fehler</h3>
        <p>{{ errorMsg }}</p>
      </div>
    </UCard>

    <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
      <div class="text-center mb-6">
        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
          <UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
        </div>
        <h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
        <p class="text-sm text-gray-500">Bitte PIN eingeben</p>
      </div>

      <form @submit.prevent="handlePinSubmit" class="space-y-4">
        <UInput
            v-model="pin"
            type="password"
            placeholder="PIN"
            input-class="text-center text-lg tracking-widest"
            autofocus
            icon="i-heroicons-key"
        />
        <div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
        <UButton type="submit" block label="Entsperren" size="lg" />
      </form>
    </UCard>

    <UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
      </div>
      <h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
      <p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
      <UButton variant="outline" @click="() => window.location.reload()">Neuen Eintrag erfassen</UButton>
    </UCard>

    <div v-else-if="status === 'ready'" class="w-full max-w-lg">
      <PublicDynamicForm
          v-if="context && token"
          :context="context"
          :token="token"
          :pin="pin"
          @success="handleFormSuccess"
      />
    </div>

  </div>
</template>