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

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Card Activity Logs</h3>
            <p class="mt-2 text-xs text-slate-500">
                Review card lifecycle events, status changes, and utilization.
            </p>

            <!-- Filters + Download -->
            <div class="mt-6 flex flex-wrap items-end gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                <div class="flex flex-wrap items-end gap-3">
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">From date</label>
                        <input
                            v-model="filterForm.date_from"
                            type="date"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        />
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">To date</label>
                        <input
                            v-model="filterForm.date_to"
                            type="date"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        />
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">Entity</label>
                        <select
                            v-model="filterForm.entity"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        >
                            <option value="">All</option>
                            <option value="cards">Cards</option>
                            <option value="card_print_jobs">Card print jobs</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">Action</label>
                        <select
                            v-model="filterForm.action"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        >
                            <option value="">All</option>
                            <option value="CREATE_CARD">Create card</option>
                            <option value="ACTIVATE_CARD">Activate card</option>
                            <option value="BLOCK_CARD">Block card</option>
                            <option value="CREATE_PERSONALIZED_CARD">Create personalized card</option>
                            <option value="PRINT_PERSONALIZED_CARD">Print personalized card</option>
                            <option value="ASSIGN_STOCK_CARD">Assign stock card</option>
                            <option value="QUEUE_PRINT_JOB">Queue print job</option>
                            <option value="PRINT_CARD">Print card</option>
                        </select>
                    </div>
                    <button
                        type="button"
                        class="rounded-lg bg-slate-700 px-4 py-2 text-xs font-medium text-white hover:bg-slate-600"
                        @click="applyFilters"
                    >
                        Apply
                    </button>
                </div>
                <div class="ml-auto flex items-center gap-2">
                    <span class="text-xs text-slate-500">Download:</span>
                    <a
                        :href="exportUrl('pdf')"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50"
                    >
                        PDF
                    </a>
                    <a
                        :href="exportUrl('xlsx')"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50"
                    >
                        Excel
                    </a>
                </div>
            </div>

            <!-- Card status summary -->
            <div v-if="cardStatusCounts?.length" class="mt-6">
                <h4 class="text-sm font-medium text-slate-700">Cards by status</h4>
                <div class="mt-2 flex flex-wrap gap-2">
                    <span
                        v-for="(row, i) in cardStatusCounts"
                        :key="i"
                        class="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-600"
                    >
                        {{ row.status }}: {{ row.total }}
                    </span>
                </div>
            </div>

            <!-- Activity table -->
            <div class="mt-6">
                <h4 class="text-sm font-medium text-slate-700">Recent activity</h4>
                <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">Entity 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 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 text-slate-700">
                                    {{ row.action }}
                                </td>
                                <td class="px-4 py-3 text-slate-500">
                                    {{ row.entity }}
                                </td>
                                <td class="px-4 py-3 font-mono text-slate-500">
                                    {{ row.entity_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="!activities?.length">
                                <td
                                    class="px-4 py-6 text-center text-slate-400"
                                    colspan="6"
                                >
                                    No card activity recorded yet.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    filters: { type: Object, default: () => ({}) },
    activities: { type: Array, default: () => [] },
    cardStatusCounts: { type: Array, default: () => [] },
    exportPath: { type: String, default: '' },
});

const filterForm = reactive({
    date_from: props.filters?.date_from ?? '',
    date_to: props.filters?.date_to ?? '',
    entity: props.filters?.entity ?? '',
    action: props.filters?.action ?? '',
});

watch(
    () => props.filters,
    (f) => {
        if (f) {
            filterForm.date_from = f.date_from ?? '';
            filterForm.date_to = f.date_to ?? '';
            filterForm.entity = f.entity ?? '';
            filterForm.action = f.action ?? '';
        }
    },
    { immediate: true }
);

function applyFilters() {
    router.get('/reports/card-activity', {
        date_from: filterForm.date_from || undefined,
        date_to: filterForm.date_to || undefined,
        entity: filterForm.entity || undefined,
        action: filterForm.action || undefined,
    });
}

function exportUrl(format) {
    const params = new URLSearchParams();
    params.set('format', format);
    if (filterForm.date_from) params.set('date_from', filterForm.date_from);
    if (filterForm.date_to) params.set('date_to', filterForm.date_to);
    if (filterForm.entity) params.set('entity', filterForm.entity);
    if (filterForm.action) params.set('action', filterForm.action);
    const qs = params.toString();
    return qs ? `${props.exportPath}?${qs}` : `${props.exportPath}?format=${format}`;
}
</script>
