<template>
    <div v-if="documents.length" class="mt-3">
        <p class="mb-2 text-sm font-medium text-neutral-700">
            {{ $t('taskDocuments.title') }} ({{ documents.length }})
        </p>
        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
            <div
                v-for="doc in documents"
                :key="doc.id"
                class="group relative flex cursor-pointer items-center gap-2 rounded-lg border border-neutral-200 p-2 transition-colors hover:bg-neutral-50"
                @click="$emit('preview', doc)"
            >
                <!-- Thumbnail or icon -->
                <div class="relative h-10 w-10 shrink-0">
                    <div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded">
                        <img
                            v-if="isImage(doc.mimeType)"
                            :src="getDownloadUrl(doc.id)"
                            :alt="doc.originalName"
                            class="h-10 w-10 object-cover"
                        />
                        <Icon
                            v-else
                            :name="getIconForMime(doc.mimeType)"
                            class="h-6 w-6 text-neutral-400"
                        />
                    </div>
                    <!-- Pastille : document lié depuis le partage SMB -->
                    <span
                        v-if="doc.sharePath"
                        class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 ring-2 ring-white"
                        :title="$t('taskDocuments.shareLinkBadge')"
                    >
                        <Icon name="heroicons:link" class="h-2.5 w-2.5 text-white" />
                    </span>
                </div>

                <!-- File info -->
                <div class="min-w-0 flex-1">
                    <p class="truncate text-xs font-medium text-neutral-700">{{ doc.originalName }}</p>
                    <p class="text-xs text-neutral-400">
                        <span v-if="doc.sharePath" class="font-medium text-primary-500">{{ $t('taskDocuments.shareLinkLabel') }}</span>
                        <span v-if="doc.sharePath"> · </span>{{ formatFileSize(doc.size) }}
                    </p>
                </div>

                <!-- Delete button -->
                <MalioButtonIcon
                    v-if="isAdmin"
                    icon="heroicons:x-mark"
                    aria-label="Supprimer"
                    variant="ghost"
                    icon-size="16"
                    button-class="absolute right-1 top-1 hidden text-neutral-400 hover:bg-red-50 hover:text-red-500 group-hover:block"
                    @click.stop="$emit('delete', doc)"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { TaskDocument } from '~/modules/project-management/services/dto/task-document'
import { useTaskDocumentService } from '~/modules/project-management/services/task-documents'
import { formatFileSize } from '~/utils/format'

defineProps<{
    documents: TaskDocument[]
    isAdmin: boolean
}>()

defineEmits<{
    preview: [doc: TaskDocument]
    delete: [doc: TaskDocument]
}>()

const { getDownloadUrl } = useTaskDocumentService()

function isImage(mimeType: string): boolean {
    return mimeType.startsWith('image/')
}

function getIconForMime(mimeType: string): string {
    if (mimeType === 'text/markdown') return 'mdi:language-markdown'
    if (mimeType === 'application/pdf') return 'heroicons:document-text'
    if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'heroicons:table-cells'
    if (mimeType.includes('word') || mimeType.includes('document')) return 'heroicons:document'
    if (mimeType.includes('zip') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar')) return 'heroicons:archive-box'
    return 'heroicons:paper-clip'
}

</script>
