<template>
    <div class="space-y-8">
        <Head title="Card Management" />

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <StatCard
                title="Total Cards"
                :value="stats.totalCards"
                hint="All generated and stored cards."
            />
            <StatCard
                title="Active Cards"
                :value="stats.activeCards"
                hint="Cards ready for transactions."
            />
            <StatCard
                title="In Stock Cards"
                :value="stats.inStockCards"
                hint="Pre-generated cards available for assignment."
            />
            <StatCard
                title="Cards for Printing"
                :value="stats.queuedForPrinting"
                hint="Queued for personalization."
            />
        </section>

        <section class="grid gap-6 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">
                                Recent Card Activities
                            </h3>
                            <p class="text-xs text-slate-500">
                                Last recorded issuance and printing actions.
                            </p>
                        </div>
                    </div>
                    <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</th>
                                    <th class="px-4 py-3">Reference</th>
                                    <th class="px-4 py-3">User</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="row in activities"
                                    :key="row.id"
                                    class="border-t border-slate-100"
                                >
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.created_at || '—' }}
                                    </td>
                                    <td class="px-4 py-3 font-medium">
                                        {{ row.action }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.entity }}
                                    </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 }}
                                    </td>
                                </tr>
                                <tr v-if="activities.length === 0">
                                    <td
                                        class="px-4 py-6 text-center text-xs text-slate-400"
                                        colspan="5"
                                    >
                                        No card activities have been logged yet.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <h3 class="text-lg font-semibold">
                        Issuance Oversight
                    </h3>
                    <p class="mt-2 text-xs text-slate-500">
                        Monitor card lifecycle metrics and prioritize queues for
                        printing.
                    </p>
                    <div class="mt-4 space-y-3 text-xs text-slate-500">
                        <div class="flex items-center justify-between">
                        <span>Active vs In Stock</span>
                            <span class="font-semibold text-slate-700">
                            {{ stats.activeCards }} / {{ stats.inStockCards }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span>Queued for Printing</span>
                            <span class="font-semibold text-slate-700">
                                {{ stats.queuedForPrinting }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span>Total Inventory</span>
                            <span class="font-semibold text-slate-700">
                                {{ stats.totalCards }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

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

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

defineProps({
    stats: {
        type: Object,
        default: () => ({
            totalCards: 0,
            activeCards: 0,
            inStockCards: 0,
            queuedForPrinting: 0,
        }),
    },
    activities: {
        type: Array,
        default: () => [],
    },
});
</script>
