<template>
  <div
    class="relative border-2 border-dashed rounded-xl p-10 text-center transition-colors"
    :class="dragging
      ? 'border-indigo-400 bg-indigo-50'
      : 'border-gray-300 bg-white hover:border-indigo-300 hover:bg-gray-50'"
    @dragover.prevent="dragging = true"
    @dragleave.prevent="dragging = false"
    @drop.prevent="onDrop"
    @click="triggerInput"
  >
    <input
      ref="inputRef"
      type="file"
      class="hidden"
      multiple
      accept=".pdf,.docx,.doc,.txt,.md,.png,.jpg,.jpeg,.tiff,.webp"
      @change="onFileChange"
    />

    <div class="flex flex-col items-center gap-3">
      <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
      </svg>
      <div>
        <p class="text-sm font-medium text-gray-700">Drop files here or <span class="text-indigo-600 underline cursor-pointer">browse</span></p>
        <p class="text-xs text-gray-400 mt-1">PDF, DOCX, TXT, MD, PNG, JPG supported</p>
      </div>

      <label class="flex items-center gap-2 mt-2 cursor-pointer" @click.stop>
        <input type="checkbox" v-model="autoClassify" class="rounded border-gray-300 text-indigo-600" />
        <span class="text-sm text-gray-600">Auto-classify with AI after upload</span>
      </label>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['files-selected'])
const dragging = ref(false)
const inputRef = ref(null)
const autoClassify = ref(true)

function triggerInput() {
  inputRef.value?.click()
}

function onDrop(e) {
  dragging.value = false
  const files = Array.from(e.dataTransfer?.files || [])
  if (files.length) emit('files-selected', { files, autoClassify: autoClassify.value })
}

function onFileChange(e) {
  const files = Array.from(e.target.files || [])
  if (files.length) emit('files-selected', { files, autoClassify: autoClassify.value })
  e.target.value = ''
}
</script>
