<script setup lang="ts">
import type { MailFolderDto } from '~/services/dto/mail'

const props = defineProps<{
    /** Arbre de dossiers (getter folderTree du store) */
    folders: readonly MailFolderDto[]
    /** Chemin du dossier actuellement sélectionné */
    selectedPath: string | null
    /** Niveau de profondeur pour l'indentation (usage récursif interne) */
    depth?: number
}>()

const emit = defineEmits<{
    select: [path: string]
}>()

const { getFolderLabel, getFolderIcon } = useSystemFolderLabel()
const { t } = useI18n()

const currentDepth = computed(() => props.depth ?? 0)

function handleSelect(path: string): void {
    emit('select', path)
}

function paddingStyle(): Record<string, string> {
    const depth = currentDepth.value
    if (depth <= 0) return {}
    return { paddingLeft: `${0.75 + depth * 0.75}rem` }
}
</script>

<template>
    <div>
        <div
            v-if="folders.length === 0 && currentDepth === 0"
            class="px-3 py-4 text-sm text-neutral-400 italic"
        >
            {{ t('mail.empty.folder') }}
        </div>

        <template v-else>
            <div v-for="folder in folders" :key="folder.path">
                <button
                    type="button"
                    class="w-full text-left"
                    @click="handleSelect(folder.path)"
                >
                    <div
                        class="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors"
                        :class="
                            selectedPath === folder.path
                                ? 'bg-primary-100 text-primary-700 font-medium'
                                : 'text-neutral-700 hover:bg-neutral-100'
                        "
                        :style="paddingStyle()"
                    >
                        <Icon
                            :name="getFolderIcon(folder.path)"
                            size="16"
                            class="flex-shrink-0"
                            :class="selectedPath === folder.path ? 'text-primary-600' : 'text-neutral-400'"
                        />

                        <span class="flex-1 truncate">
                            {{ getFolderLabel(folder.path, folder.displayName) }}
                        </span>

                        <span
                            v-if="folder.unreadCount > 0"
                            class="ml-auto flex-shrink-0 rounded-full bg-primary-500 px-1.5 py-0.5 text-xs font-bold text-white"
                        >
                            {{ folder.unreadCount > 99 ? '99+' : folder.unreadCount }}
                        </span>
                    </div>
                </button>

                <MailFolderTree
                    v-if="folder.children && folder.children.length > 0"
                    :folders="folder.children"
                    :selected-path="selectedPath"
                    :depth="currentDepth + 1"
                    @select="handleSelect"
                />
            </div>
        </template>
    </div>
</template>
