<script setup>
definePageMeta({
  layout: 'blank',
  middleware: [],
  auth: false
})

const config = useRuntimeConfig()
const route = useRoute()
const token = route.params.token
const status = ref('loading') // loading, pin_required, ready, error, success
const pin = ref('')
const context = ref(null)
const errorMsg = ref('')

// Hilfs-Key um die Form-Komponente bei Reset komplett neu zu initialisieren
const formKey = ref(0)

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

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

    const res = await $fetch(`${config.public.apiBase}/workflows/context/${token}`, { headers })
    context.value = res
    status.value = 'ready'
  } catch (err) {
    if (err.statusCode === 401 || err.statusCode === 403) {
      status.value = 'pin_required'
      if (err.statusCode === 403) {
        errorMsg.value = 'Falsche PIN'
        pin.value = ''
      }
    } else {
      status.value = 'error'
      errorMsg.value = 'Link ungültig oder abgelaufen.'
    }
  }
}

onMounted(() => {
  loadContext()
})

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

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

const resetForm = () => {
  // PIN wird NICHT geleert
  errorMsg.value = ''
  formKey.value++ // Erzwingt Neu-Initialisierung der Kind-Komponente
  loadContext()   // Lädt Daten neu (Status geht auf loading -> ready)
}
</script>

<template>
  <div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(var(--ui-primary-rgb),0.12),_transparent_35%),linear-gradient(180deg,var(--ui-bg)_0%,color-mix(in_oklab,var(--ui-bg)_92%,white)_100%)] px-4 py-10">
    <div class="mx-auto flex min-h-[calc(100vh-5rem)] w-full max-w-5xl items-center justify-center">

      <div v-if="status === 'loading'" class="space-y-4 text-center">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-primary/10 text-primary ring-1 ring-primary/15">
          <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin" />
        </div>
        <div>
          <p class="text-base font-medium text-highlighted">Lade Formular...</p>
          <p class="text-sm text-muted">Der Workflow wird vorbereitet.</p>
        </div>
      </div>

      <UCard v-else-if="status === 'error'" class="w-full max-w-md border-error/20 shadow-xl">
        <div class="space-y-3 text-center text-error">
          <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-error/10 ring-1 ring-error/15">
            <UIcon name="i-heroicons-exclamation-circle" class="h-8 w-8" />
          </div>
          <div>
            <h3 class="text-lg font-semibold">Fehler</h3>
            <p class="text-sm text-toned">{{ errorMsg }}</p>
          </div>
        </div>
      </UCard>

      <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl ring-1 ring-black/5">
        <div class="mb-6 text-center">
          <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
            <UIcon name="i-heroicons-lock-closed" class="h-6 w-6" />
          </div>
          <h2 class="text-xl font-semibold text-highlighted">Geschützter Bereich</h2>
          <p class="text-sm text-muted">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"
              class="w-full"
              size="lg"
          />
          <div v-if="errorMsg" class="text-center text-xs font-medium text-error">{{ errorMsg }}</div>
          <UButton type="submit" block label="Entsperren" size="lg" />
        </form>
      </UCard>

      <UCard v-else-if="status === 'success'" class="w-full max-w-md py-10 text-center shadow-xl ring-1 ring-black/5">
        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-success/10 text-success ring-1 ring-success/15">
          <UIcon name="i-heroicons-check" class="h-8 w-8" />
        </div>
        <h2 class="mb-2 text-2xl font-semibold text-highlighted">Gespeichert!</h2>
        <p class="mb-6 text-sm text-muted">Die Daten wurden erfolgreich übertragen.</p>
        <UButton variant="outline" @click="resetForm">Neuen Eintrag erfassen</UButton>
      </UCard>

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