<template>
  <div
    class="relative border-3 border-dashed rounded-2xl p-8 sm:p-12 text-center cursor-pointer group overflow-hidden"
    :class="{
      'border-blue-400 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/40': isDragging,
      'border-gray-300 bg-gray-50/50 hover:border-blue-400 hover:bg-blue-50/80 dark:border-gray-600 dark:bg-gray-800/30 dark:hover:border-blue-400 dark:hover:bg-blue-900/30': !isDragging,
    }"
    @dragenter.prevent="isDragging = true"
    @dragleave.prevent="isDragging = false"
    @dragover.prevent
    @drop.prevent="handleDrop"
    @click="openFileDialog"
    data-rybbit-event="file-upload-area"
  >
    <div class="absolute inset-0 bg-blue-400/0 group-hover:bg-blue-400/5"></div>

    <input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />

    <div class="relative z-10">
      <div class="mb-6" :class="isDragging ? 'scale-110' : ''">
        <div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/50 rounded-2xl flex items-center justify-center shadow-lg">
          <i class="fas fa-cloud-upload-alt text-4xl sm:text-5xl text-blue-600 dark:text-blue-400"></i>
        </div>
      </div>

      <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3">
        <span v-if="isDragging">Drop your files here</span>
        <span v-else>Upload Your Sprites</span>
      </h3>
      <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 mb-2">Drag and drop sprite images or JSON files</p>
      <p class="text-sm text-gray-500 dark:text-gray-400 mb-8">Supports PNG, JPG, GIF, and JSON</p>

      <div class="flex items-center justify-center gap-4 mb-6">
        <div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">or</span>
        <div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
      </div>

      <button class="px-8 py-3.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl flex items-center justify-center gap-3 mx-auto" data-rybbit-event="select-files">
        <i class="fas fa-folder-open text-lg"></i>
        <span>Browse Files</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const emit = defineEmits<{
    (e: 'uploadSprites', files: File[]): void;
  }>();

  const fileInput = ref<HTMLInputElement | null>(null);
  const isDragging = ref(false);

  const openFileDialog = () => {
    fileInput.value?.click();
  };

  const handleFileChange = (event: Event) => {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      const files = Array.from(input.files);
      emit('uploadSprites', files);
      // Reset input value so uploading the same file again will trigger the event
      if (fileInput.value) fileInput.value.value = '';
    }
  };

  const handleDrop = (event: DragEvent) => {
    isDragging.value = false;

    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
      const files = Array.from(event.dataTransfer.files).filter(file => {
        return file.type.startsWith('image/') || file.type === 'application/json' || file.name.endsWith('.json');
      });

      if (files.length > 0) {
        emit('uploadSprites', files);
      }
    }
  };
</script>
