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

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <h2 class="text-lg font-semibold">Pre-Generated Card Batches</h2>
                    <p class="text-sm text-slate-500">
                        Generate batch cards, download Perso files, and stock inventory.
                    </p>
                </div>
            </div>

            <form class="mt-6 grid gap-4 md:grid-cols-4" @submit.prevent="submit">
                <div>
                    <label class="text-sm font-medium">Institution</label>
                    <select
                        v-model="form.institution_id"
                        class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                    >
                        <option value="">Select institution</option>
                        <option
                            v-for="institution in institutions"
                            :key="institution.id"
                            :value="institution.id"
                        >
                            {{ institution.name }} • {{ institution.bin }}
                        </option>
                    </select>
                    <p v-if="form.errors.institution_id" class="mt-1 text-xs text-red-600">
                        {{ form.errors.institution_id }}
                    </p>
                </div>
                <div>
                    <label class="text-sm font-medium">Product</label>
                    <select
                        v-model="form.product_id"
                        class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                    >
                        <option value="">Select product</option>
                        <option
                            v-for="product in filteredProducts"
                            :key="product.id"
                            :value="product.id"
                        >
                            {{ product.name }} • {{ product.product_code }}
                        </option>
                    </select>
                    <p v-if="form.errors.product_id" class="mt-1 text-xs text-red-600">
                        {{ form.errors.product_id }}
                    </p>
                </div>
                <div>
                    <label class="text-sm font-medium">Quantity</label>
                    <input
                        v-model.number="form.quantity"
                        type="number"
                        min="1"
                        class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        placeholder="100"
                    />
                    <p v-if="form.errors.quantity" class="mt-1 text-xs text-red-600">
                        {{ form.errors.quantity }}
                    </p>
                </div>
                <div class="flex items-end">
                    <button
                        class="w-full rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white"
                        type="submit"
                        :disabled="form.processing"
                    >
                        Generate Batch
                    </button>
                </div>
            </form>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Batch History</h3>
            <p class="mt-2 text-xs text-slate-500">
                Review batch status and download Perso files.
            </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">Batch</th>
                            <th class="px-4 py-3">Institution</th>
                            <th class="px-4 py-3">Product</th>
                            <th class="px-4 py-3">Cards</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Created</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="batch in batches"
                            :key="batch.id"
                            class="border-t border-slate-100"
                        >
                            <td class="px-4 py-3 font-medium">#{{ batch.id }}</td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ batch.institution?.name || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ batch.product?.name || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ batch.total_cards }}
                            </td>
                            <td class="px-4 py-3">
                                <span
                                    class="rounded-full bg-amber-100 px-2 py-1 text-[10px] font-semibold text-amber-700"
                                >
                                    {{ batch.status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ batch.created_at || '—' }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <button
                                    class="rounded-lg border border-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700 hover:bg-slate-50"
                                    type="button"
                                    @click="downloadBatch(batch)"
                                >
                                    Download Perso File
                                </button>
                            </td>
                        </tr>
                        <tr v-if="batches.length === 0">
                            <td
                                class="px-4 py-6 text-center text-xs text-slate-400"
                                colspan="7"
                            >
                                No batches generated yet.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    batches: {
        type: Array,
        default: () => [],
    },
    institutions: {
        type: Array,
        default: () => [],
    },
    products: {
        type: Array,
        default: () => [],
    },
});

const form = useForm({
    institution_id: '',
    product_id: '',
    quantity: 1,
});

const filteredProducts = computed(() => {
    if (!form.institution_id) {
        return props.products;
    }
    return props.products.filter(
        (product) => product.institution_id === form.institution_id
    );
});

const submit = () => {
    form.post('/cards/batches', {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();
        },
    });
};

const downloadBatch = (batch) => {
    window.location.href = `/cards/batches/${batch.id}/perso-file`;
};
</script>
