<script setup>
const upload = useUploadStore()
const API_BASE = 'http://localhost:8000'

const downloadUrl = computed(() => {
  if (!upload.conversionResult?.download_url) return null
  const url = upload.conversionResult.download_url
  return url.startsWith('http') ? url : `${API_BASE}${url}`
})

onMounted(() => {
  // Auto-trigger download
  if (downloadUrl.value) {
    const a = document.createElement('a')
    a.href = downloadUrl.value
    a.download = upload.conversionResult?.filename || 'document.docx'
    a.click()
  }
})
</script>

<template>
  <div class="w-full max-w-[680px] mx-auto mt-6 bg-white border border-gray-200 rounded-xl p-12 flex flex-col items-center gap-6 text-center">
    <div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center">
      <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
      </svg>
    </div>

    <h2 class="text-xl font-bold text-gray-900">Your file is ready to download</h2>

    <a :href="downloadUrl" :download="upload.conversionResult?.filename || 'document.docx'">
      <BaseButton variant="success" size="lg">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
        Download DOCX
      </BaseButton>
    </a>

    <button @click="upload.reset()" class="text-sm text-[#1a56db] hover:underline">
      Convert another file
    </button>
  </div>
</template>
