<script setup>
const props = defineProps({
  modelValue: Boolean,
  files: Array,
  fileError: String,
  activeModelColor: String,
});
const emit = defineEmits(["update:modelValue", "triggerInput", "remove", "done"]);
</script>

<template>
  <VDialog :model-value="modelValue" max-width="500" @update:modelValue="emit('update:modelValue', $event)">
    <VCard>
      <VCardTitle class="pb-2 pt-4">
        <span class="text-h5">Upload Files</span>
      </VCardTitle>

      <VCardText>
        <div class="text-subtitle-2 mb-4">
          Select files to upload (Max 5 files, 5MB each)
        </div>

        <div
          class="upload-area pa-6 border-dashed rounded d-flex flex-column align-center justify-center"
          @click="emit('triggerInput')"
          @dragover.prevent
          @drop.prevent="$event => emit('triggerInput', $event)"
        >
          <VIcon :icon="'tabler-upload'" :size="36" :color="activeModelColor" class="mb-3" />
          <div class="text-body-1 mb-1">Drag files here or click to upload</div>
          <div class="text-caption text-grey">Supported formats: Images, PDF, DOC, DOCX, TXT</div>
        </div>

        <div v-if="fileError" class="text-error mt-2">{{ fileError }}</div>

        <div v-if="files.length > 0">
          <div class="text-subtitle-2 mt-4 mb-2">Selected files:</div>
          <VList density="compact" class="bg-grey-lighten-5 rounded">
            <VListItem v-for="(file, index) in files" :key="index">
              <template v-slot:prepend>
                <VIcon :icon="file.type.startsWith('image/') ? 'tabler-photo' : file.type.includes('pdf') ? 'tabler-file-type-pdf' : file.type.includes('word') ? 'tabler-file-type-doc' : file.type.includes('text') ? 'tabler-file-text' : 'tabler-file'" />
              </template>
              <VListItemTitle>{{ file.name }}</VListItemTitle>
              <VListItemSubtitle>{{ (file.size / (1024 * 1024)).toFixed(1) }} MB</VListItemSubtitle>
              <template v-slot:append>
                <VBtn icon size="small" variant="text" @click="emit('remove', index)">
                  <VIcon icon="tabler-x" />
                </VBtn>
              </template>
            </VListItem>
          </VList>
        </div>
      </VCardText>

      <VCardActions class="pb-4 px-4">
        <VSpacer></VSpacer>
        <VBtn color="grey-darken-1" variant="text" @click="emit('update:modelValue', false)">Cancel</VBtn>
        <VBtn :color="activeModelColor" variant="tonal" @click="emit('done')" :disabled="files.length === 0">Done</VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
</template>

<style scoped>
.border-dashed {
  border: 2px dashed rgba(var(--v-theme-on-surface), 0.2);
}

.upload-area {
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  background-color: rgba(var(--v-theme-on-surface), 0.05);
  border-color: rgba(var(--v-theme-on-surface), 0.4);
}
</style>
