<script setup>
import { reactive, ref } from 'vue';
import { Head, router } from '@inertiajs/vue3';
import AppCard from '@/Components/ui/AppCard.vue';
import MobileAppLayout from '@/Layouts/MobileAppLayout.vue';
import StatusBadge from '@/Components/ui/StatusBadge.vue';
import TransactionReceiptModal from '@/Components/app/TransactionReceiptModal.vue';

const props = defineProps({
    transactions: Object,
    filters: Object,
    statuses: Array,
});

const query = reactive({
    status: props.filters?.status || '',
});

const showReceiptModal = ref(false);
const selectedReceipt = ref(null);

const applyFilters = () => {
    router.get(route('app.transactions.history'), query, { preserveState: true, replace: true });
};

const openReceipt = (transaction) => {
    selectedReceipt.value = transaction?.receipt || null;
    showReceiptModal.value = true;
};

const closeReceiptModal = () => {
    showReceiptModal.value = false;
};
</script>

<template>
    <Head title="Transaction History" />

    <MobileAppLayout title="History" subtitle="Receipts and transaction status timeline">
        <div class="space-y-4">
            <AppCard title="Filter Transactions">
                <div class="flex gap-2">
                    <select v-model="query.status" class="flex-1 rounded-xl border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-400">
                        <option value="">All statuses</option>
                        <option v-for="status in statuses" :key="status" :value="status">{{ status }}</option>
                    </select>
                    <button type="button" class="rounded-xl border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700" @click="applyFilters">
                        Apply
                    </button>
                </div>
            </AppCard>

            <div class="space-y-2">
                <button
                    v-for="transaction in transactions.data"
                    :key="transaction.id"
                    type="button"
                    class="w-full rounded-2xl border border-slate-200 bg-white p-3 text-left shadow-sm transition hover:border-slate-300"
                    @click="openReceipt(transaction)"
                >
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <div class="truncate text-sm font-semibold text-slate-900">
                                {{ transaction.category?.name }} {{ transaction.plan?.name ? `• ${transaction.plan.name}` : '' }}
                            </div>
                            <div class="truncate text-[11px] text-slate-500">{{ transaction.internal_reference }}</div>
                        </div>
                        <StatusBadge :status="transaction.status" />
                    </div>

                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                        <div class="rounded-xl bg-slate-50 px-2 py-1.5">
                            <div class="text-slate-500">Amount</div>
                            <div class="font-semibold text-slate-900">NGN {{ transaction.amount_charged }}</div>
                        </div>
                        <div class="rounded-xl bg-slate-50 px-2 py-1.5">
                            <div class="text-slate-500">Vendor Ref</div>
                            <div class="truncate font-medium text-slate-700">{{ transaction.vendor_reference || '-' }}</div>
                        </div>
                    </div>

                    <div class="mt-2 text-[11px] text-slate-500">{{ transaction.created_at }}</div>
                </button>

                <div v-if="transactions.data.length === 0" class="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">
                    No transactions found.
                </div>
            </div>
        </div>

        <TransactionReceiptModal
            :show="showReceiptModal"
            :receipt="selectedReceipt"
            @close="closeReceiptModal"
        />
    </MobileAppLayout>
</template>
