Lesstime/frontend/modules/mail/components/MailLinkTaskModal.vue

<script setup lang="ts">
import type { Task } from '~/modules/project-management/services/dto/task'
import type { Project } from '~/modules/project-management/services/dto/project'
import { useMailService } from '~/modules/mail/services/mail'
import { useTaskService } from '~/modules/project-management/services/tasks'
import { useProjectService } from '~/modules/project-management/services/projects'

const props = defineProps<{
    modelValue: boolean
    /** ID BDD du message à lier */
    messageId: number
}>()

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    /** Émis après liaison réussie — payload = id de la tâche liée */
    linked: [taskId: number]
}>()

const { t } = useI18n()
const mailService = useMailService()
const taskService = useTaskService()
const projectService = useProjectService()

// ─── État recherche ───────────────────────────────────────────────────────

const searchQuery = ref('')
const filterProjectId = ref<number | null>(null)
const results = ref<Task[]>([])
const selectedTask = ref<Task | null>(null)
const isLoading = ref(false)
const isSubmitting = ref(false)

// ─── Projets pour le filtre ───────────────────────────────────────────────

const projects = ref<Project[]>([])

const projectFilterOptions = computed(() =>
    projects.value.map(p => ({ label: p.name, value: p.id })),
)

onMounted(async () => {
    projects.value = await projectService.getAll({ archived: false })
})

// ─── Debounce recherche ───────────────────────────────────────────────────

let debounceTimer: ReturnType<typeof setTimeout> | null = null

watch([searchQuery, filterProjectId], () => {
    selectedTask.value = null
    if (debounceTimer) clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
        void runSearch()
    }, 300)
})

async function runSearch(): Promise<void> {
    const q = searchQuery.value.trim()
    if (!q && !filterProjectId.value) {
        results.value = []
        return
    }
    isLoading.value = true
    try {
        const params: Record<string, string | number | boolean | string[]> = {
            archived: false,
        }
        if (q) params['title'] = q
        if (filterProjectId.value) params['project'] = `/api/projects/${filterProjectId.value}`
        results.value = await taskService.getFiltered(params)
    } finally {
        isLoading.value = false
    }
}

// ─── Reset à l'ouverture ──────────────────────────────────────────────────

watch(() => props.modelValue, (open) => {
    if (open) {
        searchQuery.value = ''
        filterProjectId.value = null
        results.value = []
        selectedTask.value = null
    }
})

onBeforeUnmount(() => {
    if (debounceTimer) clearTimeout(debounceTimer)
})

// ─── Actions ──────────────────────────────────────────────────────────────

function close(): void {
    emit('update:modelValue', false)
}

function selectTask(task: Task): void {
    selectedTask.value = task
}

async function handleSubmit(): Promise<void> {
    if (!selectedTask.value) return
    isSubmitting.value = true
    try {
        await mailService.linkTask(props.messageId, selectedTask.value.id)
        emit('linked', selectedTask.value.id)
        close()
    } finally {
        isSubmitting.value = false
    }
}
</script>

<template>
    <Teleport v-if="modelValue" to="body">
        <Transition name="mail-modal" appear>
            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
                <div
                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
                    @click="close"
                />

                <div
                    class="relative z-10 w-full max-w-lg rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 overflow-hidden"
                    style="max-height: min(90vh, 640px)"
                >
                    <!-- Header -->
                    <div class="flex items-center justify-between border-b border-neutral-100 bg-neutral-50/80 px-6 py-4">
                        <h2 class="text-base font-bold text-neutral-900">
                            {{ t('mail.linkTaskModal.title') }}
                        </h2>
                        <MalioButtonIcon
                            icon="mdi:close"
                            aria-label="Fermer"
                            variant="ghost"
                            icon-size="20"
                            @click="close"
                        />
                    </div>

                    <!-- Corps -->
                    <div class="overflow-y-auto px-6 py-5 space-y-4">
                        <!-- Filtre projet -->
                        <MalioSelect
                            v-model="filterProjectId"
                            :options="projectFilterOptions"
                            :label="t('mail.linkTaskModal.projectFilter')"
                            :empty-option-label="t('mail.linkTaskModal.projectAll')"
                            group-class="w-full"
                        />

                        <!-- Recherche tâche -->
                        <div>
                            <label class="mb-1 block text-sm font-medium text-neutral-700">
                                {{ t('mail.linkTaskModal.title') }}
                            </label>
                            <input
                                v-model="searchQuery"
                                type="text"
                                :placeholder="t('mail.linkTaskModal.searchPlaceholder')"
                                class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                            />
                        </div>

                        <!-- Résultats -->
                        <div class="max-h-64 overflow-y-auto rounded-md border border-neutral-200">
                            <!-- Chargement -->
                            <div
                                v-if="isLoading"
                                class="flex items-center justify-center py-6 text-sm text-neutral-400"
                            >
                                <Icon name="material-symbols:progress-activity" size="18" class="mr-2 animate-spin" />
                                {{ t('mail.linkTaskModal.loading') }}
                            </div>

                            <!-- Vide -->
                            <div
                                v-else-if="!isLoading && results.length === 0 && (searchQuery.trim() || filterProjectId)"
                                class="py-6 text-center text-sm text-neutral-400 italic"
                            >
                                {{ t('mail.linkTaskModal.empty') }}
                            </div>

                            <!-- Liste résultats -->
                            <button
                                v-for="task in results"
                                :key="task.id"
                                type="button"
                                class="flex w-full items-start gap-3 px-4 py-3 text-left text-sm transition-colors hover:bg-neutral-50"
                                :class="selectedTask?.id === task.id
                                    ? 'bg-primary-50 border-l-2 border-primary-500'
                                    : 'border-l-2 border-transparent'"
                                @click="selectTask(task)"
                            >
                                <Icon
                                    name="material-symbols:task-outline"
                                    size="16"
                                    class="mt-0.5 flex-shrink-0 text-neutral-400"
                                />
                                <div class="min-w-0 flex-1">
                                    <p class="truncate font-medium text-neutral-800">
                                        {{ task.title }}
                                    </p>
                                    <p
                                        v-if="task.project"
                                        class="truncate text-xs text-neutral-500"
                                    >
                                        {{ task.project.name }}
                                        <span v-if="task.project.code && task.number">
                                            — {{ task.project.code }}-{{ task.number }}
                                        </span>
                                    </p>
                                </div>
                                <Icon
                                    v-if="selectedTask?.id === task.id"
                                    name="material-symbols:check-circle"
                                    size="16"
                                    class="flex-shrink-0 text-primary-500"
                                />
                            </button>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="flex justify-end gap-3 border-t border-neutral-100 px-6 py-4">
                        <MalioButton
                            variant="tertiary"
                            label="Annuler"
                            button-class="w-auto px-4"
                            @click="close"
                        />
                        <MalioButton
                            :label="t('mail.linkTaskModal.submit')"
                            button-class="w-auto px-6"
                            :disabled="!selectedTask || isSubmitting"
                            @click="handleSubmit"
                        />
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<style scoped>
.mail-modal-enter-active,
.mail-modal-leave-active {
    transition: opacity 0.2s ease;
}

.mail-modal-enter-active > div:last-child,
.mail-modal-leave-active > div:last-child {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.mail-modal-enter-from,
.mail-modal-leave-to {
    opacity: 0;
}

.mail-modal-enter-from > div:last-child {
    transform: scale(0.95) translateY(8px);
    opacity: 0;
}
</style>