<script setup>
const upload = useUploadStore()
const isDragging = ref(false)
const fileInput = ref(null)

function onDragOver(e) { e.preventDefault(); isDragging.value = true }
function onDragLeave() { isDragging.value = false }
function onDrop(e) {
  e.preventDefault()
  isDragging.value = false
  const file = e.dataTransfer?.files?.[0]
  if (file) upload.scan(file)
}
function onFileChange(e) {
  const file = e.target.files?.[0]
  if (file) upload.scan(file)
}
function openFilePicker() { fileInput.value?.click() }
</script>

<template>
  <div class="w-full max-w-[680px] mx-auto">
    <div
      @dragover="onDragOver"
      @dragleave="onDragLeave"
      @drop="onDrop"
      @click="openFilePicker"
      :class="[
        'bg-white border-2 border-dashed rounded-xl px-10 py-16 flex flex-col items-center gap-5 cursor-pointer transition-all duration-150',
        isDragging
          ? 'border-[#1a56db] bg-blue-50 scale-[1.01]'
          : 'border-gray-200 hover:border-[#1a56db] hover:bg-blue-50',
      ]"
    >
      <input ref="fileInput" type="file" accept=".json" class="hidden" @change="onFileChange" />

      <!-- File icon -->
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <rect x="10" y="6" width="36" height="52" rx="4" fill="#EEF3FF" stroke="#1a56db" stroke-width="2"/>
        <path d="M38 6v12h12" stroke="#1a56db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="18" y="28" width="20" height="2.5" rx="1.25" fill="#1a56db"/>
        <rect x="18" y="34" width="16" height="2.5" rx="1.25" fill="#1a56db"/>
        <rect x="18" y="40" width="12" height="2.5" rx="1.25" fill="#1a56db"/>
      </svg>

      <button
        class="bg-[#1a56db] text-white text-base font-medium px-8 py-3 rounded-md hover:bg-[#1648c0] transition-colors pointer-events-none"
      >
        Select export file
      </button>
      <p class="text-xs text-gray-400">or drop idconvert_export.json here</p>
    </div>

    <!-- Trust line -->
    <p class="text-center text-xs text-gray-400 mt-4 flex items-center justify-center gap-1.5">
      <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
      </svg>
      Run IDexport.jsx in InDesign to generate your export file · Files deleted after 1 hour
    </p>
  </div>
</template>
