<script setup lang="ts">
import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { preview as previewPayroll } from '@/actions/App/Http/Controllers/Admin/PayrollController';
import { Link, router } from '@inertiajs/vue3';
import { CalendarDays, Eye, Pencil, Send } from 'lucide-vue-next';
import { ref } from 'vue';

defineOptions({ layout: AdminLayout });

defineProps<{
    payrolls: Array<{
        id: number;
        month: string;
        total_amount: string;
        status: 'draft' | 'pending' | 'approved' | 'rejected';
        generated_by: { name: string };
        approved_by: { name: string } | null;
        approved_at: string | null;
    }>;
}>();

const selectedMonth = ref(new Date().toISOString().slice(0, 7));

const statusClass: Record<string, string> = {
    draft: 'bg-slate-100 text-slate-600',
    pending: 'bg-amber-50 text-amber-700',
    approved: 'bg-emerald-50 text-emerald-700',
    rejected: 'bg-red-50 text-red-700',
};

function generatePreview() {
    router.get(previewPayroll().url, { month: selectedMonth.value });
}

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/payroll/${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 flex-wrap items-center justify-between gap-3">
            <div>
                <h1 class="text-xl font-extrabold text-slate-800 dark:text-white">Payroll</h1>
                <p class="text-sm text-slate-500">Monthly payroll generation and approval</p>
            </div>
            <div class="flex items-center gap-3">
                <input
                    v-model="selectedMonth"
                    type="month"
                    class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm shadow-inner focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800"
                />
                <button
                    @click="generatePreview"
                    class="flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-bold text-white shadow-2xl shadow-indigo-900/30 transition-all hover:bg-indigo-700 active:scale-95"
                >
                    <CalendarDays class="h-4 w-4" /> Generate Payroll
                </button>
            </div>
        </div>

        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-slate-200 dark:border-slate-700">
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Month</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Total Amount</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Status</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Generated By</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Approved By</th>
                        <th class="px-5 py-3" />
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="p in payrolls"
                        :key="p.id"
                        class="border-b border-slate-100 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                    >
                        <td class="px-5 py-3 font-medium text-slate-800 dark:text-white">
                            {{ new Date(p.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-700 dark:text-slate-300">
                            {{ parseFloat(p.total_amount).toLocaleString() }}
                        </td>
                        <td class="px-5 py-3">
                            <span :class="statusClass[p.status]" class="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize">
                                {{ p.status }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-sm text-slate-500">{{ p.generated_by?.name }}</td>
                        <td class="px-5 py-3 text-sm text-slate-500">{{ p.approved_by?.name ?? '-' }}</td>
                        <td class="px-5 py-3">
                            <div class="flex items-center justify-end gap-2">
                                <button
                                    v-if="p.status === 'draft'"
                                    @click="sendForApproval(p.id)"
                                    class="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.5 w-3.5" /> Send for Approval
                                </button>
                                <Link
                                    v-if="p.status === 'draft'"
                                    :href="`/admin/payroll/generate?month=${p.month.substring(0, 7)}`"
                                    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.5 w-3.5" /> Edit
                                </Link>
                                <Link
                                    :href="`/admin/payroll/${p.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.5 w-3.5" /> View
                                </Link>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="!payrolls.length">
                        <td colspan="6" class="px-5 py-12 text-center text-sm text-slate-400">No payrolls generated yet.</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <ConfirmationModal
            :show="confirmState.show"
            title="Send for Approval"
            message="Are you sure you want to send this payroll 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>
