<template>
    <div class="space-y-6">
        <Head title="Audit Logs" />

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Audit Logs</h3>
            <p class="mt-2 text-xs text-slate-500">
                Review privileged actions across the platform.
            </p>
            <div class="mt-4 overflow-hidden rounded-xl border border-slate-100">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50 text-slate-500">
                        <tr>
                            <th class="px-4 py-3">Time</th>
                            <th class="px-4 py-3">Action</th>
                            <th class="px-4 py-3">Entity Type</th>
                            <th class="px-4 py-3">Entity ID</th>
                            <th class="px-4 py-3">User ID</th>
                            <th class="px-4 py-3">User</th>
                            <th class="px-4 py-3">IP</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="row in logs"
                            :key="row.id"
                            class="border-t border-slate-100"
                        >
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.timestamp || '—' }}
                            </td>
                            <td class="px-4 py-3 font-medium">
                                {{ row.action }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.entity_type }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.entity_id || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.user_id || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.user }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.ip_address || '—' }}
                            </td>
                        </tr>
                        <tr v-if="logs.length === 0">
                            <td
                                class="px-4 py-6 text-center text-xs text-slate-400"
                                colspan="7"
                            >
                                No audit logs have been recorded yet.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Head } from '@inertiajs/vue3';
import AuthenticatedLayout from '../../Layouts/AuthenticatedLayout.vue';

defineOptions({
    layout: (h, page) =>
        h(AuthenticatedLayout, { title: 'Audit Logs' }, () => page),
});

defineProps({
    logs: {
        type: Array,
        default: () => [],
    },
});
</script>
