<script setup lang="ts">
import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { router } from '@inertiajs/vue3';
import { BadgeCheck, CheckCircle, CheckSquare, Clock, ShieldCheck, X } from 'lucide-vue-next';
import { computed, ref, watch } from 'vue';

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    payrolls: Array<{
        id: number;
        month: string;
        total_amount: string;
        status: 'pending' | 'approved' | 'rejected';
        generated_by: { name: string } | null;
        approved_by: { name: string } | null;
        approved_at: string | null;
    }>;
    bonusGenerations: Array<{
        id: number;
        month: string;
        status: 'pending' | 'approved' | 'rejected';
        bonus: { name: string; amount_type: string; amount: string };
        generated_by: { name: string } | null;
        approved_by: { name: string } | null;
        items_count?: number;
        items_sum_bonus_amount?: string;
    }>;
    increments: Array<{
        id: number;
        previous_salary: string;
        new_salary: string;
        increment_percentage: string;
        effective_date: string;
        reason: string | null;
        status: 'pending' | 'approved' | 'rejected';
        employee: { id: number; name: string };
        approved_by: { name: string } | null;
        approved_at: string | null;
    }>;
    loanRequests: Array<{
        id: number;
        total_amount: string;
        installment_amount: string;
        start_month: string;
        status: 'pending' | 'approved' | 'rejected';
        employee: { id: number; name: string };
        approver: { name: string } | null;
        approved_at: string | null;
    }>;
}>();

const activeTab = ref<'payroll' | 'bonus' | 'increment' | 'loan'>('payroll');

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

const statusIcon: Record<string, any> = {
    pending: Clock,
    approved: CheckCircle,
    rejected: X,
};

// Modal State
const confirmState = ref({
    show: false,
    title: '',
    message: '',
    type: 'danger' as 'danger' | 'warning' | 'info',
    confirmText: 'Confirm',
    processing: false,
    action: null as (() => void) | null,
});

function closeConfirm() {
    confirmState.value.show = false;
    setTimeout(() => {
        confirmState.value.action = null;
        confirmState.value.processing = false;
    }, 300);
}

function executeConfirm() {
    if (confirmState.value.action) {
        confirmState.value.processing = true;
        confirmState.value.action();
    }
}

// Actions
function approvePayroll(id: number) {
    confirmState.value = {
        show: true,
        title: 'Approve Payroll',
        message: 'Are you sure you want to approve this payroll?',
        type: 'info',
        confirmText: 'Approve',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/payroll/${id}/approve`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}
function rejectPayroll(id: number) {
    confirmState.value = {
        show: true,
        title: 'Reject Payroll',
        message: 'Are you sure you want to reject this payroll? This action cannot be undone.',
        type: 'danger',
        confirmText: 'Reject',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/payroll/${id}/reject`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}
function approveBonus(id: number) {
    confirmState.value = {
        show: true,
        title: 'Approve Bonus',
        message: 'Are you sure you want to approve this bonus generation?',
        type: 'info',
        confirmText: 'Approve',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/bonus/${id}/approve`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}
function rejectBonus(id: number) {
    confirmState.value = {
        show: true,
        title: 'Reject Bonus',
        message: 'Are you sure you want to reject this bonus generation? This action cannot be undone.',
        type: 'danger',
        confirmText: 'Reject',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/bonus/${id}/reject`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}
function approveIncrement(id: number) {
    confirmState.value = {
        show: true,
        title: 'Approve Increment',
        message: 'Are you sure you want to approve this salary increment?',
        type: 'info',
        confirmText: 'Approve',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/increment/${id}/approve`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}
function rejectIncrement(id: number) {
    confirmState.value = {
        show: true,
        title: 'Reject Increment',
        message: 'Are you sure you want to reject this salary increment? This action cannot be undone.',
        type: 'danger',
        confirmText: 'Reject',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/increment/${id}/reject`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}

function approveLoan(id: number) {
    confirmState.value = {
        show: true,
        title: 'Approve Loan',
        message: 'Are you sure you want to approve this loan request?',
        type: 'info',
        confirmText: 'Approve',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/loan/${id}/approve`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}

function rejectLoan(id: number) {
    confirmState.value = {
        show: true,
        title: 'Reject Loan',
        message: 'Are you sure you want to reject this loan request? This action cannot be undone.',
        type: 'danger',
        confirmText: 'Reject',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/loan/${id}/reject`,
                {},
                {
                    preserveScroll: true,
                    onFinish: closeConfirm,
                },
            ),
    };
}

// Bulk Actions Logic
const selected = ref<{ payroll: number[]; bonus: number[]; increment: number[]; loan: number[] }>({
    payroll: [],
    bonus: [],
    increment: [],
    loan: [],
});

const pendingCounts = computed(() => ({
    payroll: props.payrolls.filter((p) => p.status === 'pending').length,
    bonus: props.bonusGenerations.filter((b) => b.status === 'pending').length,
    increment: props.increments.filter((i) => i.status === 'pending').length,
    loan: props.loanRequests.filter((l) => l.status === 'pending').length,
}));

function toggleSelectAll(type: 'payroll' | 'bonus' | 'increment' | 'loan') {
    const items =
        type === 'payroll'
            ? props.payrolls
            : type === 'bonus'
              ? props.bonusGenerations
              : type === 'increment'
                ? props.increments
                : props.loanRequests;
    const pendingItems = items.filter((i) => i.status === 'pending');

    if (selected.value[type].length === pendingItems.length && pendingItems.length > 0) {
        selected.value[type] = [];
    } else {
        selected.value[type] = pendingItems.map((i) => i.id);
    }
}

function bulkApprove() {
    const type = activeTab.value;
    const ids = selected.value[type];
    if (!ids.length) return;

    confirmState.value = {
        show: true,
        title: 'Approve Selected',
        message: `Are you sure you want to approve ${ids.length} selected items?`,
        type: 'info',
        confirmText: 'Approve All',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/${type}/bulk-approve`,
                { ids },
                {
                    preserveScroll: true,
                    onSuccess: () => {
                        selected.value[type] = [];
                    },
                    onFinish: closeConfirm,
                },
            ),
    };
}

function bulkReject() {
    const type = activeTab.value;
    const ids = selected.value[type];
    if (!ids.length) return;

    confirmState.value = {
        show: true,
        title: 'Reject Selected',
        message: `Are you sure you want to reject ${ids.length} selected items? This action cannot be undone.`,
        type: 'danger',
        confirmText: 'Reject All',
        processing: false,
        action: () =>
            router.post(
                `/admin/payroll/approvals/${type}/bulk-reject`,
                { ids },
                {
                    preserveScroll: true,
                    onSuccess: () => {
                        selected.value[type] = [];
                    },
                    onFinish: closeConfirm,
                },
            ),
    };
}

watch(activeTab, () => {
    // Clear selections when switching tabs
    selected.value.payroll = [];
    selected.value.bonus = [];
    selected.value.increment = [];
    selected.value.loan = [];
});
</script>

<template>
    <div class="space-y-6">
        <!-- Header -->
        <div>
            <h1 class="flex items-center gap-2 text-xl font-extrabold text-slate-800 dark:text-white">
                <ShieldCheck class="h-6 w-6 text-indigo-600" />
                Payroll Approvals
            </h1>
            <p class="mt-1 text-sm text-slate-500">Review and approve payroll, bonus generations, and salary increments</p>
        </div>

        <!-- Tabs and Bulk Actions -->
        <div class="flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
            <div class="hide-scrollbar flex w-full overflow-x-auto pb-1 sm:w-auto sm:pb-0">
                <div class="flex w-max gap-1 rounded-xl bg-slate-100 p-1 dark:bg-slate-800">
                    <button
                        v-for="tab in [
                            { key: 'payroll', label: 'Payroll', count: pendingCounts.payroll },
                            { key: 'bonus', label: 'Bonus Generations', count: pendingCounts.bonus },
                            { key: 'increment', label: 'Salary Increments', count: pendingCounts.increment },
                            { key: 'loan', label: 'Loan Requests', count: pendingCounts.loan },
                        ]"
                        :key="tab.key"
                        @click="activeTab = tab.key as any"
                        class="flex flex-none items-center justify-center gap-2 rounded-lg px-3 py-2.5 text-sm font-bold whitespace-nowrap transition-all sm:px-4"
                        :class="
                            activeTab === tab.key
                                ? 'bg-white text-slate-800 shadow-sm dark:bg-slate-700 dark:text-white'
                                : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
                        "
                    >
                        {{ tab.label }}
                        <span v-if="tab.count > 0" class="rounded-full bg-amber-500 px-1.5 py-0.5 text-[10px] font-black text-white">{{
                            tab.count
                        }}</span>
                    </button>
                </div>
            </div>

            <div v-if="selected[activeTab].length > 0" class="animate-fade-in flex items-center gap-2">
                <span class="mr-2 text-sm font-semibold text-slate-600 dark:text-slate-400"> {{ selected[activeTab].length }} selected </span>
                <button
                    @click="bulkReject"
                    class="flex items-center gap-1.5 rounded-lg border border-red-200 bg-white px-3 py-1.5 text-sm font-bold text-red-600 transition-all hover:bg-red-50 dark:border-red-900/50 dark:bg-slate-800 dark:hover:bg-red-900/20"
                >
                    <X class="h-4 w-4" /> Reject Selected
                </button>
                <button
                    @click="bulkApprove"
                    class="flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-bold text-white transition-all hover:bg-emerald-700"
                >
                    <CheckSquare class="h-4 w-4" /> Approve Selected
                </button>
            </div>
        </div>

        <!-- Payroll Tab -->
        <div v-if="activeTab === 'payroll'">
            <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="w-10 px-5 py-3 text-center">
                                <input
                                    type="checkbox"
                                    :checked="selected.payroll.length === pendingCounts.payroll && pendingCounts.payroll > 0"
                                    @change="toggleSelectAll('payroll')"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                    :disabled="pendingCounts.payroll === 0"
                                />
                            </th>
                            <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 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Actions</th>
                        </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 text-center">
                                <input
                                    v-if="p.status === 'pending'"
                                    type="checkbox"
                                    :value="p.id"
                                    v-model="selected.payroll"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                />
                            </td>
                            <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 v-if="p.status === 'pending'" class="flex items-center justify-end gap-2">
                                    <button
                                        @click="approvePayroll(p.id)"
                                        class="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white transition-all hover:bg-emerald-700"
                                    >
                                        <BadgeCheck class="h-3.5 w-3.5" /> Approve
                                    </button>
                                    <button
                                        @click="rejectPayroll(p.id)"
                                        class="flex items-center gap-1 rounded-lg bg-red-100 px-3 py-1.5 text-xs font-bold text-red-600 transition-all hover:bg-red-200"
                                    >
                                        <X class="h-3.5 w-3.5" /> Reject
                                    </button>
                                </div>
                                <span v-else class="text-xs text-slate-400 capitalize">{{ p.status }}</span>
                            </td>
                        </tr>
                        <tr v-if="!payrolls.length">
                            <td colspan="7" class="px-5 py-12 text-center text-sm text-slate-400">No payrolls yet.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Bonus Tab -->
        <div v-if="activeTab === 'bonus'">
            <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="w-10 px-5 py-3 text-center">
                                <input
                                    type="checkbox"
                                    :checked="selected.bonus.length === pendingCounts.bonus && pendingCounts.bonus > 0"
                                    @change="toggleSelectAll('bonus')"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                    :disabled="pendingCounts.bonus === 0"
                                />
                            </th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Gen ID</th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Bonus</th>
                            <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-center text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Total Employees</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-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="bg in bonusGenerations"
                            :key="bg.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 text-center">
                                <input
                                    v-if="bg.status === 'pending'"
                                    type="checkbox"
                                    :value="bg.id"
                                    v-model="selected.bonus"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                />
                            </td>
                            <td class="px-5 py-3 font-mono text-sm font-semibold text-slate-500 dark:text-slate-400">#{{ bg.id }}</td>
                            <td class="px-5 py-3 font-medium text-slate-800 dark:text-white">{{ bg.bonus?.name }}</td>
                            <td class="px-5 py-3 text-sm text-slate-600 dark:text-slate-400">
                                {{ new Date(bg.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
                            </td>
                            <td class="px-5 py-3 text-center font-medium text-slate-700 dark:text-slate-300">
                                {{ bg.items_count ?? 0 }}
                            </td>
                            <td class="px-5 py-3 text-right">
                                <span class="font-mono font-bold text-slate-800 dark:text-slate-200">
                                    {{
                                        parseFloat(bg.items_sum_bonus_amount ?? '0').toLocaleString(undefined, {
                                            minimumFractionDigits: 2,
                                            maximumFractionDigits: 2,
                                        })
                                    }}
                                </span>
                            </td>
                            <td class="px-5 py-3">
                                <span :class="statusClass[bg.status]" class="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize">
                                    {{ bg.status }}
                                </span>
                            </td>
                            <td class="px-5 py-3 text-sm text-slate-500">{{ bg.generated_by?.name ?? '-' }}</td>
                            <td class="px-5 py-3">
                                <div v-if="bg.status === 'pending'" class="flex items-center justify-end gap-2">
                                    <button
                                        @click="approveBonus(bg.id)"
                                        class="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white transition-all hover:bg-emerald-700"
                                    >
                                        <BadgeCheck class="h-3.5 w-3.5" /> Approve
                                    </button>
                                    <button
                                        @click="rejectBonus(bg.id)"
                                        class="flex items-center gap-1 rounded-lg bg-red-100 px-3 py-1.5 text-xs font-bold text-red-600 transition-all hover:bg-red-200"
                                    >
                                        <X class="h-3.5 w-3.5" /> Reject
                                    </button>
                                </div>
                                <span v-else class="text-xs text-slate-400 capitalize">{{ bg.status }}</span>
                            </td>
                        </tr>
                        <tr v-if="!bonusGenerations.length">
                            <td colspan="8" class="px-5 py-12 text-center text-sm text-slate-400">No bonus generations yet.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Loan Tab -->
        <div v-if="activeTab === 'loan'">
            <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="w-10 px-5 py-3 text-center">
                                <input
                                    type="checkbox"
                                    :checked="selected.loan.length === pendingCounts.loan && pendingCounts.loan > 0"
                                    @change="toggleSelectAll('loan')"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                    :disabled="pendingCounts.loan === 0"
                                />
                            </th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Employee</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-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Installment</th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Start Month</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-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="loan in loanRequests"
                            :key="loan.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 text-center">
                                <input
                                    v-if="loan.status === 'pending'"
                                    type="checkbox"
                                    :value="loan.id"
                                    v-model="selected.loan"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                />
                            </td>
                            <td class="px-5 py-3 font-medium text-slate-800 dark:text-white">{{ loan.employee?.name }}</td>
                            <td class="px-5 py-3 text-right font-mono text-sm text-slate-700 dark:text-slate-300">
                                {{ parseFloat(loan.total_amount).toLocaleString() }}
                            </td>
                            <td class="px-5 py-3 text-right font-mono text-sm text-slate-700 dark:text-slate-300">
                                {{ parseFloat(loan.installment_amount).toLocaleString() }}
                            </td>
                            <td class="px-5 py-3 text-sm text-slate-500">
                                {{ new Date(loan.start_month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
                            </td>
                            <td class="px-5 py-3">
                                <span :class="statusClass[loan.status]" class="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize">
                                    {{ loan.status }}
                                </span>
                            </td>
                            <td class="px-5 py-3">
                                <div v-if="loan.status === 'pending'" class="flex items-center justify-end gap-2">
                                    <button
                                        @click="approveLoan(loan.id)"
                                        class="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white transition-all hover:bg-emerald-700"
                                    >
                                        <BadgeCheck class="h-3.5 w-3.5" /> Approve
                                    </button>
                                    <button
                                        @click="rejectLoan(loan.id)"
                                        class="flex items-center gap-1 rounded-lg bg-red-100 px-3 py-1.5 text-xs font-bold text-red-600 transition-all hover:bg-red-200"
                                    >
                                        <X class="h-3.5 w-3.5" /> Reject
                                    </button>
                                </div>
                                <span v-else class="text-xs text-slate-400 capitalize">{{ loan.status }}</span>
                            </td>
                        </tr>
                        <tr v-if="!loanRequests.length">
                            <td colspan="7" class="px-5 py-12 text-center text-sm text-slate-400">No loan requests yet.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div v-if="activeTab === 'increment'">
            <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="w-10 px-5 py-3 text-center">
                                <input
                                    type="checkbox"
                                    :checked="selected.increment.length === pendingCounts.increment && pendingCounts.increment > 0"
                                    @change="toggleSelectAll('increment')"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                    :disabled="pendingCounts.increment === 0"
                                />
                            </th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Employee</th>
                            <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">From</th>
                            <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">New Salary</th>
                            <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Increment</th>
                            <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Effective</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-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="inc in increments"
                            :key="inc.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 text-center">
                                <input
                                    v-if="inc.status === 'pending'"
                                    type="checkbox"
                                    :value="inc.id"
                                    v-model="selected.increment"
                                    class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-600"
                                />
                            </td>
                            <td class="px-5 py-3 font-medium text-slate-800 dark:text-white">{{ inc.employee?.name }}</td>
                            <td class="px-5 py-3 text-right font-mono text-sm text-slate-400">
                                {{ parseFloat(inc.previous_salary).toLocaleString() }}
                            </td>
                            <td class="px-5 py-3 text-right font-mono text-sm font-semibold text-slate-700 dark:text-slate-300">
                                {{ parseFloat(inc.new_salary).toLocaleString() }}
                            </td>
                            <td class="px-5 py-3 text-right">
                                <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">
                                    +{{ parseFloat(inc.increment_percentage).toFixed(2) }}%
                                </span>
                            </td>
                            <td class="px-5 py-3 text-sm text-slate-500">
                                {{ inc.effective_date }}
                                <span class="ml-1 text-[10px] text-amber-600">(on approval)</span>
                            </td>
                            <td class="px-5 py-3">
                                <span :class="statusClass[inc.status]" class="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize">
                                    {{ inc.status }}
                                </span>
                            </td>
                            <td class="px-5 py-3">
                                <div v-if="inc.status === 'pending'" class="flex items-center justify-end gap-2">
                                    <button
                                        @click="approveIncrement(inc.id)"
                                        class="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-bold text-white transition-all hover:bg-emerald-700"
                                    >
                                        <BadgeCheck class="h-3.5 w-3.5" /> Approve
                                    </button>
                                    <button
                                        @click="rejectIncrement(inc.id)"
                                        class="flex items-center gap-1 rounded-lg bg-red-100 px-3 py-1.5 text-xs font-bold text-red-600 transition-all hover:bg-red-200"
                                    >
                                        <X class="h-3.5 w-3.5" /> Reject
                                    </button>
                                </div>
                                <span v-else class="text-xs text-slate-400 capitalize">{{ inc.status }}</span>
                            </td>
                        </tr>
                        <tr v-if="!increments.length">
                            <td colspan="8" class="px-5 py-12 text-center text-sm text-slate-400">No salary increments yet.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <ConfirmationModal
            :show="confirmState.show"
            :title="confirmState.title"
            :message="confirmState.message"
            :type="confirmState.type"
            :confirm-text="confirmState.confirmText"
            :processing="confirmState.processing"
            @close="closeConfirm"
            @confirm="executeConfirm"
        />
    </div>
</template>
