<script setup>
import { computed } from 'vue';

const props = defineProps({
    activities: Array,
});

const formatEvent = (activity) => {
    const events = {
        'created': 'Création',
        'updated': 'Mise à jour',
        'deleted': 'Suppression',
    };
    return events[activity.description] || activity.description;
};

const getBadgeColor = (description) => {
    if (description === 'created') return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
    if (description === 'updated') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
    return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
};
</script>

<template>
    <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Historique d'activité</h3>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-6">
            <div class="flow-root">
                <ul role="list" class="-mb-8">
                    <li v-for="(activity, index) in activities" :key="activity.id">
                        <div class="relative pb-8">
                            <span v-if="index !== activities.length - 1" class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-700" aria-hidden="true"></span>
                            <div class="relative flex space-x-3">
                                <div>
                                    <span :class="[getBadgeColor(activity.description), 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white dark:ring-gray-800']">
                                        <svg v-if="activity.description === 'created'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                                        <svg v-else-if="activity.description === 'updated'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                                        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                            <span class="font-medium text-gray-900 dark:text-gray-100">{{ activity.causer?.name || 'Système' }}</span>
                                            {{ activity.description === 'created' ? ' a créé ' : ' a mis à jour ' }}
                                            <span class="font-medium text-gray-900 dark:text-gray-100">
                                                {{ activity.subject_type.split('\\').pop() }}
                                            </span>
                                        </p>
                                        <div v-if="activity.properties?.attributes" class="mt-2 text-xs text-gray-400 bg-gray-50 dark:bg-gray-900/50 p-2 rounded">
                                            <div v-for="(val, key) in activity.properties.attributes" :key="key">
                                                <span v-if="key === 'status'">Nouveau statut: <span class="font-bold text-blue-500">{{ val }}</span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400">
                                        <time :datetime="activity.created_at">{{ new Date(activity.created_at).toLocaleString() }}</time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li v-if="activities.length === 0" class="text-sm text-gray-500 italic pb-4">
                        Aucune activité enregistrée.
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
