<template>
    <div class="space-y-6">
        <Head title="PIN Mailers" />

        <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">PIN Mailer Queue</h3>
                    <p class="mt-2 text-xs text-slate-500">
                        Generate and dispatch PIN mailers for activated cards.
                    </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">Card Number</th>
                            <th class="px-4 py-3">Client</th>
                            <th class="px-4 py-3">Account</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Generated</th>
                            <th class="px-4 py-3">Dispatched</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="mailer in mailers"
                            :key="mailer.id"
                            class="border-t border-slate-100"
                        >
                            <td class="px-4 py-3 font-medium">
                                {{ mailer.card?.card_number || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ mailer.card?.client_name || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ mailer.card?.account_number || '—' }}
                            </td>
                            <td class="px-4 py-3">
                                <span
                                    class="rounded-full px-2 py-1 text-[10px] font-semibold"
                                    :class="statusBadge(mailer.status)"
                                >
                                    {{ mailer.status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ mailer.generated_at || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ mailer.dispatched_at || '—' }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex flex-col items-end gap-2">
                                    <button
                                        v-if="mailer.status === 'queued'"
                                        type="button"
                                        class="rounded-lg border border-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700 hover:bg-slate-50"
                                        :disabled="!canManage || generateForm.processing"
                                        @click="generate(mailer)"
                                    >
                                        Generate PIN Mailer
                                    </button>
                                    <button
                                        v-else-if="mailer.status === 'generated'"
                                        type="button"
                                        class="rounded-lg border border-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700 hover:bg-slate-50"
                                        :disabled="!canManage || dispatchForm.processing"
                                        @click="dispatch(mailer)"
                                    >
                                        Mark Dispatched
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr v-if="mailers.length === 0">
                            <td
                                class="px-4 py-6 text-center text-xs text-slate-400"
                                colspan="7"
                            >
                                No PIN mailers queued yet.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    mailers: {
        type: Array,
        default: () => [],
    },
    canManage: {
        type: Boolean,
        default: false,
    },
});

const generateForm = useForm({});
const dispatchForm = useForm({});

const generate = (mailer) => {
    if (!props.canManage || mailer.status !== 'queued') {
        return;
    }

    generateForm.put(`/pin-mailers/${mailer.id}/generate`, {
        preserveScroll: true,
    });
};

const dispatch = (mailer) => {
    if (!props.canManage || mailer.status !== 'generated') {
        return;
    }

    dispatchForm.put(`/pin-mailers/${mailer.id}/dispatch`, {
        preserveScroll: true,
    });
};

const statusBadge = (status) => {
    if (status === 'queued') {
        return 'bg-amber-100 text-amber-700';
    }
    if (status === 'generated') {
        return 'bg-sky-100 text-sky-700';
    }
    if (status === 'dispatched') {
        return 'bg-emerald-100 text-emerald-700';
    }
    return 'bg-slate-100 text-slate-600';
};
</script>
