<template>
    <div class="flex items-center gap-3">
        <MalioInputUpload
            v-model="fileName"
            class="flex-1"
            :label="$t('directory.documents.add')"
            :disabled="uploading"
            :reserve-message-space="false"
            @file-selected="onFile"
        />
        <span v-if="uploading" class="shrink-0 text-sm text-neutral-500">{{ $t('directory.documents.uploading') }}</span>
    </div>
</template>

<script setup lang="ts">
import { useReportDocumentService } from '~/modules/directory/services/report-documents'

const props = defineProps<{ reportId: number }>()
const emit = defineEmits<{ uploaded: [] }>()

const service = useReportDocumentService()
// Nom du fichier affiché par le champ Malio (v-model) ; réinitialisé après envoi.
const fileName = ref('')
const uploading = ref(false)

// L'upload se déclenche dès la sélection (event natif du composant Malio).
async function onFile(file: File): Promise<void> {
    uploading.value = true
    try {
        await service.upload(props.reportId, file)
        emit('uploaded')
    } finally {
        uploading.value = false
        fileName.value = ''
    }
}
</script>
