<script setup lang="ts">
import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Link, router } from '@inertiajs/vue3';
import { CalendarClock, CheckCircle, Eye, Files, Gift, Pencil, Plus, Send, XCircle } from 'lucide-vue-next';
import { ref } from 'vue';

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    generations: Array<any>;
}>();

function fmt(n: number) {
    return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

const confirmState = ref({
    show: false,
    id: 0,
    processing: false,
});

function sendForApproval(id: number) {
    confirmState.value.id = id;
    confirmState.value.show = true;
}

function executeSendForApproval() {
    confirmState.value.processing = true;
    router.post(
        `/admin/bonuses/generations/${confirmState.value.id}/send-for-approval`,
        {},
        {
            preserveScroll: true,
            onFinish: () => {
                confirmState.value.show = false;
                confirmState.value.processing = false;
            },
        },
    );
}
</script>

<template>
    <div class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="flex items-center gap-2 text-xl font-extrabold text-slate-800 dark:text-white">
                    <Files class="h-6 w-6 text-indigo-600" />
                    Bonus Generations
                </h1>
                <p class="mt-0.5 text-sm text-slate-500">List of generated bonuses, total employees, and amounts</p>
            </div>
            <Link
                href="/admin/bonuses/generate"
                class="flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-bold text-white transition-all hover:bg-indigo-700 active:scale-95"
            >
                <Plus class="h-4 w-4" /> Generate New Bonus
            </Link>
        </div>

        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm whitespace-nowrap">
                    <thead>
                        <tr
                            class="border-b border-slate-200 bg-slate-50/50 text-slate-500 dark:border-slate-800 dark:bg-slate-800/50 dark:text-slate-400"
                        >
                            <th class="px-5 py-4 font-semibold">Bonus Name</th>
                            <th class="px-5 py-4 font-semibold">Generate Month</th>
                            <th class="px-5 py-4 text-center font-semibold">Total Employees</th>
                            <th class="px-5 py-4 text-right font-semibold">Total Amount</th>
                            <th class="px-5 py-4 text-center font-semibold">Status</th>
                            <th class="px-5 py-4 text-right font-semibold">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        <tr v-for="gen in generations" :key="gen.id" class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="rounded-xl bg-indigo-50 p-2 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400">
                                        <Gift class="h-4 w-4" />
                                    </div>
                                    <div>
                                        <div class="font-bold text-slate-800 dark:text-white">{{ gen.bonus?.name }}</div>
                                        <div class="text-xs text-slate-400">Ref: #{{ gen.id.toString().padStart(4, '0') }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 text-slate-600 dark:text-slate-400">
                                <div class="flex items-center gap-2">
                                    <CalendarClock class="h-4 w-4 opacity-50" />
                                    {{ new Date(gen.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
                                </div>
                            </td>
                            <td class="px-5 py-4 text-center font-medium text-slate-700 dark:text-slate-300">
                                {{ gen.items_count }}
                            </td>
                            <td class="px-5 py-4 text-right">
                                <span class="font-mono font-bold text-slate-800 dark:text-slate-200">
                                    {{ fmt(gen.items_sum_bonus_amount ?? 0) }}
                                </span>
                            </td>
                            <td class="px-5 py-4 text-center">
                                <div
                                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold"
                                    :class="{
                                        'bg-slate-100 text-slate-600 dark:bg-slate-500/20 dark:text-slate-400': gen.status === 'draft',
                                        'bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-400': gen.status === 'pending',
                                        'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-400': gen.status === 'approved',
                                        'bg-rose-100 text-rose-800 dark:bg-rose-500/20 dark:text-rose-400': gen.status === 'rejected',
                                    }"
                                >
                                    <CheckCircle v-if="gen.status === 'approved'" class="h-3.5 w-3.5" />
                                    <XCircle v-else-if="gen.status === 'rejected'" class="h-3.5 w-3.5" />
                                    <Files v-else-if="gen.status === 'draft'" class="h-3.5 w-3.5" />
                                    <CalendarClock v-else class="h-3.5 w-3.5" />
                                    <span class="capitalize">{{ gen.status }}</span>
                                </div>
                            </td>
                            <td class="px-5 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button
                                        v-if="gen.status === 'draft'"
                                        @click="sendForApproval(gen.id)"
                                        class="inline-flex items-center gap-1 rounded-lg bg-indigo-50 px-2.5 py-1.5 text-xs font-bold text-indigo-700 transition-colors hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500/20"
                                    >
                                        <Send class="h-3 w-3" /> Send for Approval
                                    </button>

                                    <Link
                                        v-if="gen.status === 'draft'"
                                        :href="`/admin/bonuses/generate/preview?generation_id=${gen.id}`"
                                        class="flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-bold text-slate-700 transition-colors hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300"
                                    >
                                        <Pencil class="h-3 w-3" /> Edit
                                    </Link>

                                    <Link
                                        v-else
                                        :href="`/admin/bonuses/generate/preview?generation_id=${gen.id}`"
                                        class="flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-bold text-slate-700 transition-colors hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300"
                                    >
                                        <Eye class="h-3 w-3" /> View
                                    </Link>
                                </div>
                            </td>
                        </tr>

                        <tr v-if="!generations?.length">
                            <td colspan="6" class="px-5 py-12 text-center text-slate-400">
                                <div class="flex flex-col items-center justify-center gap-2">
                                    <Files class="h-8 w-8 opacity-20" />
                                    <p>No bonus generations found.</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <ConfirmationModal
            :show="confirmState.show"
            title="Send for Approval"
            message="Are you sure you want to send this bonus generation for approval? It will be locked for further edits."
            type="info"
            confirm-text="Send for Approval"
            :processing="confirmState.processing"
            @close="confirmState.show = false"
            @confirm="executeSendForApproval"
        />
    </div>
</template>
