<template>
  <div class="file-upload">
    <label :for="inputId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
      {{ label }}
    </label>
    
    <div 
      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed "
      :class="{ 'border-green-500 bg-green-50 dark:bg-green-900/20': isDragOver, 'hover:border-gray-400': !isDragOver }"
      @drop.prevent="handleDrop"
      @dragover.prevent="isDragOver = true"
      @dragleave.prevent="isDragOver = false"
    >
      <div class="space-y-1 text-center">
        <ArrowUpTrayIcon class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
        
        <div class="flex text-sm text-gray-600">
          <label 
            :for="inputId" 
            class="relative cursor-pointer font-medium text-green-600 hover:text-green-500"
          >
            <span>Sélectionner des fichiers</span>
            <input 
              :id="inputId"
              ref="fileInput"
              type="file" 
              class="sr-only" 
              :accept="accept"
              :multiple="multiple"
              @change="handleFileSelect"
            >
          </label>
          <p class="pl-1">ou glisser-déposer</p>
        </div>
        
        <p class="text-xs text-gray-500">
          {{ description }}
        </p>
        
        <div v-if="selectedFiles.length > 0" class="mt-4">
          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fichiers sélectionnés :</h4>
          <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
            <li v-for="file in selectedFiles" :key="file.name" class="flex justify-between items-center">
              <span class="truncate">{{ file.name }}</span>
              <span class="text-gray-400">{{ formatFileSize(file.size) }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowUpTrayIcon } from '@heroicons/vue/24/outline';
import { ref, computed, watch } from 'vue';

const props = defineProps({
  label: {
    type: String,
    default: 'Choisir des fichiers'
  },
  accept: {
    type: String,
    default: '.cbz,.cbr'
  },
  multiple: {
    type: Boolean,
    default: true
  },
  description: {
    type: String,
    default: 'CBZ ou CBR jusqu\'à 100MB chacun'
  },
  modelValue: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:modelValue', 'files-selected']);

const fileInput = ref(null);
const isDragOver = ref(false);
const selectedFiles = ref([]);

const inputId = computed(() => `file-upload-${Math.random().toString(36).substr(2, 9)}`);

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const handleFileSelect = (event) => {
  const files = Array.from(event.target.files);
  selectedFiles.value = files;
  emit('update:modelValue', files);
  emit('files-selected', files);
};

const handleDrop = (event) => {
  isDragOver.value = false;
  const files = Array.from(event.dataTransfer.files);
  selectedFiles.value = files;
  emit('update:modelValue', files);
  emit('files-selected', files);
};

// Watch for external changes to modelValue
watch(() => props.modelValue, (newFiles) => {
  selectedFiles.value = newFiles;
}, { deep: true });
</script> 