<script setup>
import { Head, Link } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';

const props = defineProps({
    logs: Object // Paginated object
});

const formatDate = (dateString) => {
    return format(new Date(dateString), 'PPP à HH:mm', { locale: fr });
};
</script>

<template>
    <Head title="Logs de connexion" />
    <AdminLayout>
        <template #header>Logs de connexion</template>
        
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-serif font-black text-primary capitalize tracking-tight flex items-center gap-3">
                <div class="w-1.5 h-8 bg-highlight rounded-full"></div>
                Historique des Connexions
            </h1>
        </div>

        <div class="bg-white rounded-3xl shadow-sm border border-anthracite/5 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-neutral/50 border-b border-anthracite/5">
                        <tr>
                            <th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Utilisateur</th>
                            <th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Structure</th>
                            <th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Adresse IP</th>
                            <th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Date & Heure</th>
                            <th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Appareil / Navigateur</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-anthracite/5">
                        <tr v-for="log in logs.data" :key="log.id" class="hover:bg-sand/30 transition-colors">
                            <td class="px-8 py-5">
                                <div class="font-bold text-primary">{{ log.user.name }}</div>
                                <div class="text-xs text-anthracite/50">{{ log.user.email }}</div>
                            </td>
                            <td class="px-8 py-5 text-xs font-bold text-anthracite">
                                {{ log.user.tenant ? log.user.tenant.name : 'Super Admin / Global' }}
                            </td>
                            <td class="px-8 py-5 text-xs font-mono text-anthracite/70">
                                {{ log.ip_address }}
                            </td>
                            <td class="px-8 py-5 text-xs font-bold text-anthracite">
                                {{ formatDate(log.login_at) }}
                            </td>
                            <td class="px-8 py-5 text-[10px] text-anthracite/50 max-w-xs truncate" :title="log.user_agent">
                                {{ log.user_agent }}
                            </td>
                        </tr>
                        <tr v-if="logs.data.length === 0">
                            <td colspan="5" class="px-8 py-16 text-center text-anthracite/40 italic">
                                Aucun log de connexion trouvé.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- Simple Pagination -->
            <div v-if="logs.links.length > 3" class="px-8 py-4 bg-neutral/30 border-t border-anthracite/5 flex justify-center gap-2">
                <Link 
                    v-for="link in logs.links" 
                    :key="link.label" 
                    :href="link.url || '#'" 
                    class="px-3 py-1 rounded-lg text-xs font-bold transition-all"
                    :class="[
                        link.active ? 'bg-primary text-white' : 'bg-white text-primary hover:bg-highlight hover:text-white',
                        !link.url ? 'opacity-50 cursor-not-allowed' : ''
                    ]"
                    v-html="link.label"
                />
            </div>
        </div>
        
        <div class="mt-6 p-4 bg-highlight/10 border border-highlight/20 rounded-2xl text-xs text-[#3a2800]/60 font-medium">
            <p><strong>Note :</strong> Les logs sont conservés pendant une période de 1 mois. Un nettoyage automatique est effectué quotidiennement.</p>
        </div>
    </AdminLayout>
</template>
