<script setup>
const upload = useUploadStore()
const auth = useAuthStore()
const ui = useUiStore()

function handleConvert() {
  if (!auth.isLoggedIn) { ui.openAuthModal('login'); return }
  if (!auth.canConvert) { ui.openPurchaseModal(); return }
  upload.convert()
}
</script>

<template>
  <div class="w-full max-w-[680px] mx-auto mt-6">

    <!-- Scanning spinner -->
    <div v-if="upload.status === 'scanning'" class="bg-white border border-gray-200 rounded-xl p-12 flex flex-col items-center gap-4">
      <BaseSpinner size="md" />
      <p class="text-sm text-gray-500">Scanning your file...</p>
    </div>

    <!-- Scan result panel -->
    <div v-else-if="upload.scanReport" class="bg-white border border-gray-200 rounded-xl p-8 space-y-6">

      <!-- File name -->
      <div class="flex items-center gap-2 pb-4 border-b border-gray-100">
        <svg class="w-4 h-4 text-[#1a56db] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        <span class="text-sm font-mono text-gray-700 truncate">{{ upload.file?.name }}</span>
      </div>

      <StatCards
        :pages="upload.scanReport.pages"
        :stories="upload.scanReport.stories"
        :images="upload.scanReport.images"
        :tables="upload.scanReport.tables"
      />

      <FontReport :fonts="upload.scanReport.fonts" />
      <WarningList :warnings="upload.scanReport.warnings" />

      <!-- Action row -->
      <div class="pt-4 border-t border-gray-100">

        <!-- No credits block -->
        <div v-if="auth.isLoggedIn && !auth.canConvert"
          class="flex items-center justify-between bg-red-50 border border-red-200 rounded-lg px-4 py-3 mb-4">
          <span class="text-sm text-gray-800">You have no credits remaining.</span>
          <button @click="ui.openPurchaseModal()" class="text-sm text-[#1a56db] font-medium hover:underline ml-3 flex-shrink-0">
            Buy credits
          </button>
        </div>

        <!-- Credit info line -->
        <p v-else-if="auth.isLoggedIn" class="text-xs text-gray-400 mb-4">
          This conversion will use 1 credit<template v-if="!auth.freeUsed"> · Your free conversion</template><template v-else> · {{ auth.creditsBalance }} credit{{ auth.creditsBalance !== 1 ? 's' : '' }} remaining</template>
        </p>
        <p v-else class="text-xs text-gray-400 mb-4">Sign in to convert your file</p>

        <div class="flex items-center justify-between gap-3">
          <BaseButton variant="ghost" @click="upload.reset()">Cancel</BaseButton>
          <BaseButton
            variant="primary"
            size="lg"
            :loading="upload.status === 'converting'"
            :disabled="upload.status === 'converting'"
            @click="handleConvert"
          >
            <template v-if="!auth.isLoggedIn">Sign in to convert</template>
            <template v-else-if="!auth.canConvert">Buy credits to convert</template>
            <template v-else-if="upload.status === 'converting'">Converting...</template>
            <template v-else>Convert to Word →</template>
          </BaseButton>
        </div>
      </div>
    </div>
  </div>
</template>
