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

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <h3 class="text-lg font-semibold">Created Cards</h3>
                    <p class="text-xs text-slate-500">
                        Assign printers and queue created cards for
                        personalization.
                    </p>
                </div>
                <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-500">
                    Cards listed:
                    <span class="font-semibold text-slate-700">Created</span>
                </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">Assign Printer</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="card in issuedCards"
                            :key="card.uuid"
                            class="border-t border-slate-100"
                        >
                            <td class="px-4 py-3 font-medium">
                                {{ card.card_number || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ card.client_name || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ card.account_number || '—' }}
                            </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"
                                >
                                    {{ card.status }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <select
                                    v-model="printerSelections[card.uuid]"
                                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs"
                                >
                                    <option value="">Select printer</option>
                                    <option
                                        v-for="printer in printers"
                                        :key="printer.id"
                                        :value="printer.id"
                                    >
                                        {{ printer.name }}
                                    </option>
                                </select>
                                <p
                                    v-if="queueErrors[card.uuid]"
                                    class="mt-1 text-[11px] text-red-600"
                                >
                                    {{ queueErrors[card.uuid] }}
                                </p>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <button
                                    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="!canQueuePrint || queueForm.processing"
                                    @click="queueCard(card)"
                                >
                                    Queue for Printing
                                </button>
                            </td>
                        </tr>
                        <tr v-if="issuedCards.length === 0">
                            <td
                                class="px-4 py-6 text-center text-xs text-slate-400"
                                colspan="6"
                            >
                                No created cards are ready for printing.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <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">Queued Print Jobs</h3>
                    <p class="text-xs text-slate-500">
                        Pending personalization jobs awaiting print approval.
                    </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">Printer</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="row in queue"
                            :key="row.id"
                            class="border-t border-slate-100"
                        >
                            <td class="px-4 py-3 font-medium">
                                {{ row.card?.card_number || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.card?.client_name || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.card?.account_number || '—' }}
                            </td>
                            <td class="px-4 py-3 text-slate-500">
                                {{ row.printer?.name || 'Unassigned' }}
                            </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"
                                >
                                    {{ row.status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <button
                                    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="!canMarkPrinted || printForm.processing"
                                    @click="markPrinted(row)"
                                >
                                    Mark Printed
                                </button>
                            </td>
                        </tr>
                        <tr v-if="queue.length === 0">
                            <td
                                class="px-4 py-6 text-center text-xs text-slate-400"
                                colspan="6"
                            >
                                No cards are waiting in the printing queue.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    issuedCards: {
        type: Array,
        default: () => [],
    },
    queue: {
        type: Array,
        default: () => [],
    },
    printers: {
        type: Array,
        default: () => [],
    },
    canQueuePrint: {
        type: Boolean,
        default: false,
    },
    canMarkPrinted: {
        type: Boolean,
        default: false,
    },
});

const printerSelections = reactive({});
const queueErrors = reactive({});

const queueForm = useForm({
    card_uuid: '',
    printer_id: '',
});

const printForm = useForm({});

const queueCard = (card) => {
    queueErrors[card.uuid] = '';

    if (!props.canQueuePrint) {
        queueErrors[card.uuid] = 'You do not have permission to queue prints.';
        return;
    }

    const printerId = printerSelections[card.uuid];
    if (!printerId) {
        queueErrors[card.uuid] = 'Select a printer to continue.';
        return;
    }

    queueForm.card_uuid = card.uuid;
    queueForm.printer_id = printerId;
    queueForm.post(`/cards/${card.uuid}/printers/${printerId}/print-jobs`, {
        preserveScroll: true,
        onSuccess: () => {
            queueForm.reset();
            printerSelections[card.uuid] = '';
        },
    });
};

const markPrinted = (row) => {
    if (!props.canMarkPrinted) {
        return;
    }

    printForm.put(`/card-print-jobs/${row.id}/printed`, {
        preserveScroll: true,
    });
};
</script>
