<script setup>
import { usePage } from '@inertiajs/vue3'
import StatutBadge from './StatutBadge.vue'

defineProps({
    historique: { type: Array, required: true },
})

const page = usePage()
const statuts = page.props.config?.statuts ?? {}

function formatDate(dt) {
    if (!dt) return ''
    return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(dt))
}
</script>

<template>
    <div class="flow-root">
        <ul class="-mb-8">
            <li v-for="(entry, idx) in historique" :key="entry.id" class="relative pb-8">
                <!-- Vertical line (except last) -->
                <span v-if="idx !== historique.length - 1"
                    class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />

                <div class="relative flex items-start space-x-3">
                    <!-- Dot -->
                    <div class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white ring-8 ring-white">
                        <div class="h-3 w-3 rounded-full bg-blue-500 ring-2 ring-white" />
                    </div>

                    <!-- Content -->
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2 text-sm">
                            <span class="font-medium text-gray-900">{{ entry.user?.name ?? 'Système' }}</span>
                            <template v-if="entry.ancien_statut">
                                <StatutBadge :statut="entry.ancien_statut" size="sm" />
                                <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                            </template>
                            <StatutBadge :statut="entry.nouveau_statut" size="sm" />
                        </div>
                        <p v-if="entry.commentaire" class="mt-1 text-sm text-gray-600 italic">
                            "{{ entry.commentaire }}"
                        </p>
                        <time class="mt-0.5 block text-xs text-gray-400">{{ formatDate(entry.created_at) }}</time>
                    </div>
                </div>
            </li>
        </ul>

        <p v-if="!historique.length" class="text-sm text-gray-400 italic text-center py-4">
            Aucun historique disponible.
        </p>
    </div>
</template>
