<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import Pagination from '@/Components/Pagination.vue'
import { Head, Link, router } from '@inertiajs/vue3'

defineProps({ users: Object, services: Array, roles: Array })

const roleLabels = { admin: 'Administrateur', responsable: 'Responsable', acheteur: 'Acheteur', lecteur: 'Lecteur' }

function toggleActive(user) {
    router.patch(route('users.toggle-active', user.id))
}
</script>

<template>
    <Head title="Utilisateurs" />
    <AuthenticatedLayout>
        <template #header>
            <h1 class="text-xl font-semibold text-gray-900">Utilisateurs</h1>
        </template>

        <div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rôle</th>
                        <th class="px-5 py-3 text-center text-xs font-medium text-gray-500 uppercase">Statut</th>
                        <th class="px-5 py-3 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <tr v-for="u in users.data" :key="u.id" :class="['hover:bg-gray-50', !u.active ? 'opacity-60' : '']">
                        <td class="px-5 py-3 font-medium text-gray-900">{{ u.name }}</td>
                        <td class="px-5 py-3 text-gray-500">{{ u.email }}</td>
                        <td class="px-5 py-3 text-gray-500">{{ u.service?.nom ?? '—' }}</td>
                        <td class="px-5 py-3">
                            <span class="rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700">
                                {{ roleLabels[u.roles?.[0]?.name] ?? u.roles?.[0]?.name ?? 'Aucun' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-center">
                            <button @click="toggleActive(u)"
                                :class="['rounded-full px-2.5 py-1 text-xs font-medium transition-colors', u.active ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-gray-100 text-gray-600 hover:bg-gray-200']">
                                {{ u.active ? 'Actif' : 'Inactif' }}
                            </button>
                        </td>
                        <td class="px-5 py-3 text-center">
                            <Link :href="route('users.edit', u.id)" class="text-gray-400 hover:text-indigo-600 transition-colors">
                                <svg class="h-4 w-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                            </Link>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="border-t border-gray-100 px-5 py-3">
                <Pagination :links="users.links" :meta="users.meta" />
            </div>
        </div>
    </AuthenticatedLayout>
</template>
