<script setup>
useSeoMeta({
  title: 'IDconvert — Convert InDesign to Word',
  description: 'Convert IDML files to editable Word documents. No InDesign required. Pre-conversion scan report included.',
})

const upload = useUploadStore()
const auth = useAuthStore()

onMounted(async () => {
  await auth.fetchMe()
})
</script>

<template>
  <div class="min-h-[calc(100vh-60px)] bg-gray-100 px-4 py-12">
    <div class="max-w-[680px] mx-auto">

      <!-- Hero -->
      <div v-if="upload.status === 'idle' || upload.status === 'error'" class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-3">Convert InDesign to Word.</h1>
        <p class="text-lg text-gray-500">Upload your <span class="font-mono text-sm bg-gray-200 px-1.5 py-0.5 rounded">idconvert_export.json</span> to start.</p>
      </div>

      <!-- Upload zone -->
      <template v-if="upload.status === 'idle' || upload.status === 'error'">
        <UploadZone />

        <!-- Validation error -->
        <Transition name="fade">
          <div v-if="upload.status === 'error' && upload.error !== 'INSUFFICIENT_CREDITS'"
            class="mt-4 bg-red-50 border border-red-200 rounded-lg px-4 py-3 flex items-start gap-3">
            <span class="text-red-500 flex-shrink-0 mt-0.5">✕</span>
            <div class="flex-1 text-sm text-gray-800">{{ upload.error }}</div>
            <button @click="upload.reset()" class="text-sm text-[#1a56db] hover:underline flex-shrink-0">Try again</button>
          </div>
        </Transition>
      </template>

      <!-- Scanning / Scanned -->
      <ScanReport v-if="['scanning', 'scanned', 'converting'].includes(upload.status)" />

      <!-- Processing overlay -->
      <ProcessingState v-if="upload.status === 'converting'" />

      <!-- Download -->
      <DownloadState v-if="upload.status === 'complete'" />

    </div>
  </div>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
