<template>
    <div class="space-y-6">
        <Head title="Transaction Monitor" />

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Transaction Monitor</h3>
            <p class="mt-2 text-xs text-slate-500">
                Live view of ISSUER (on-us authorizations) and ACQUIRER (forwarded) transactions.
            </p>

            <!-- Stat cards -->
            <div class="mt-6 grid grid-cols-2 gap-3 md:grid-cols-6">
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                    <div class="text-xs text-slate-500">Total</div>
                    <div class="text-lg font-semibold">{{ stats.total }}</div>
                </div>
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                    <div class="text-xs text-slate-500">Issuer</div>
                    <div class="text-lg font-semibold">{{ stats.issuer }}</div>
                </div>
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-3">
                    <div class="text-xs text-slate-500">Acquirer</div>
                    <div class="text-lg font-semibold">{{ stats.acquirer }}</div>
                </div>
                <div class="rounded-xl border border-emerald-100 bg-emerald-50/50 p-3">
                    <div class="text-xs text-emerald-600">Approved</div>
                    <div class="text-lg font-semibold text-emerald-700">{{ stats.approved }}</div>
                </div>
                <div class="rounded-xl border border-rose-100 bg-rose-50/50 p-3">
                    <div class="text-xs text-rose-600">Rejected</div>
                    <div class="text-lg font-semibold text-rose-700">{{ stats.rejected }}</div>
                </div>
                <div class="rounded-xl border border-amber-100 bg-amber-50/50 p-3">
                    <div class="text-xs text-amber-600">Reversal</div>
                    <div class="text-lg font-semibold text-amber-700">{{ stats.reversal }}</div>
                </div>
            </div>

            <!-- Filters -->
            <div class="mt-6 flex flex-wrap items-end gap-3 rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Direction</label>
                    <select v-model="filterForm.direction" class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs">
                        <option value="">All</option>
                        <option value="ISSUER">Issuer</option>
                        <option value="ACQUIRER">Acquirer</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Status</label>
                    <select v-model="filterForm.status" class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs">
                        <option value="">All</option>
                        <option value="APPROVED">Approved</option>
                        <option value="REJECTED">Rejected</option>
                        <option value="REVERSAL">Reversal</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Search</label>
                    <input v-model="filterForm.search" type="text" placeholder="RRN / STAN / PAN / Terminal"
                        class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs" />
                </div>
                <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" />
                </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" />
                </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>
                <button type="button" class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-medium text-slate-600 hover:bg-slate-100" @click="resetFilters">
                    Reset
                </button>
            </div>

            <!-- Table -->
            <div class="mt-6 overflow-x-auto">
                <table class="min-w-full text-left text-xs">
                    <thead class="text-slate-500">
                        <tr>
                            <th class="px-3 py-3">Date</th>
                            <th class="px-3 py-3">Direction</th>
                            <th class="px-3 py-3">Type</th>
                            <th class="px-3 py-3">Mode</th>
                            <th class="px-3 py-3">PAN</th>
                            <th class="px-3 py-3">RRN / STAN</th>
                            <th class="px-3 py-3 text-right">Amount</th>
                            <th class="px-3 py-3 text-right">Balance</th>
                            <th class="px-3 py-3">Terminal</th>
                            <th class="px-3 py-3">RC</th>
                            <th class="px-3 py-3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in transactions.data" :key="row.id" class="border-t border-slate-100">
                            <td class="px-3 py-3 text-slate-500">{{ row.created_at || '—' }}</td>
                            <td class="px-3 py-3">
                                <span class="rounded-full px-2 py-0.5 text-[11px] font-medium"
                                    :class="row.direction === 'ISSUER' ? 'bg-indigo-50 text-indigo-700' : 'bg-cyan-50 text-cyan-700'">
                                    {{ row.direction }}
                                </span>
                            </td>
                            <td class="px-3 py-3 font-medium text-slate-700">{{ row.txn_type || '—' }}</td>
                            <td class="px-3 py-3 text-slate-500">{{ row.entry_mode || '—' }}</td>
                            <td class="px-3 py-3 font-mono text-slate-500">{{ row.cardno || '—' }}</td>
                            <td class="px-3 py-3 font-mono text-slate-500">{{ row.rrn || '—' }} / {{ row.stan || '—' }}</td>
                            <td class="px-3 py-3 text-right text-slate-700">{{ formatMoney(row.amount) }}</td>
                            <td class="px-3 py-3 text-right text-slate-500">{{ row.running_balance != null ? formatMoney(row.running_balance) : '—' }}</td>
                            <td class="px-3 py-3 text-slate-500">{{ row.device_no || row.terminal_id || '—' }}</td>
                            <td class="px-3 py-3 font-mono text-slate-500">{{ row.response_code || '—' }}</td>
                            <td class="px-3 py-3">
                                <span class="rounded-full px-2 py-0.5 text-[11px] font-medium" :class="statusClass(row.status)">
                                    {{ row.status }}
                                </span>
                            </td>
                        </tr>
                        <tr v-if="!transactions.data?.length">
                            <td class="px-4 py-6 text-center text-slate-400" colspan="11">No transactions found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div v-if="transactions.links?.length > 3" class="mt-4 flex flex-wrap gap-1">
                <component
                    :is="link.url ? Link : 'span'"
                    v-for="(link, i) in transactions.links"
                    :key="i"
                    :href="link.url || undefined"
                    class="rounded-lg px-3 py-1 text-xs"
                    :class="link.active ? 'bg-slate-700 text-white' : 'border border-slate-200 text-slate-600 hover:bg-slate-100'"
                    v-html="link.label"
                />
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    filters: { type: Object, default: () => ({}) },
    stats: { type: Object, default: () => ({}) },
    transactions: { type: Object, default: () => ({ data: [], links: [] }) },
});

const filterForm = reactive({
    direction: props.filters?.direction ?? '',
    status: props.filters?.status ?? '',
    search: props.filters?.search ?? '',
    date_from: props.filters?.date_from ?? '',
    date_to: props.filters?.date_to ?? '',
});

function applyFilters() {
    router.get('/transactions', {
        direction: filterForm.direction || undefined,
        status: filterForm.status || undefined,
        search: filterForm.search || undefined,
        date_from: filterForm.date_from || undefined,
        date_to: filterForm.date_to || undefined,
    }, { preserveState: true, replace: true });
}

function resetFilters() {
    filterForm.direction = '';
    filterForm.status = '';
    filterForm.search = '';
    filterForm.date_from = '';
    filterForm.date_to = '';
    applyFilters();
}

function statusClass(status) {
    if (status === 'APPROVED') return 'bg-emerald-50 text-emerald-700';
    if (status === 'REVERSAL') return 'bg-amber-50 text-amber-700';
    return 'bg-rose-50 text-rose-700';
}

function formatMoney(value) {
    const n = Number(value ?? 0);
    return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
</script>
