<script setup lang="ts">
import Modal from '@/Components/Common/Modal.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import admin from '@/routes/admin';
import { router } from '@inertiajs/vue3';
import { Check, Download, MessageSquare, X } from 'lucide-vue-next';
import { ref } from 'vue';

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    requests: {
        data: any[];
        links: any[];
    };
}>();

const rejectionModal = ref({
    show: false,
    request: null as any,
    reason: '',
});

const openRejectionModal = (request: any) => {
    rejectionModal.value.request = request;
    rejectionModal.value.reason = '';
    rejectionModal.value.show = true;
};

const approve = (request: any) => {
    router.post(
        admin.payroll.certificate.approve.url({ salaryCertificateRequest: request.id }),
        {},
        {
            preserveScroll: true,
        },
    );
};

const submitRejection = () => {
    router.post(
        admin.payroll.certificate.reject.url({ salaryCertificateRequest: rejectionModal.value.request.id }),
        {
            rejection_reason: rejectionModal.value.reason,
        },
        {
            preserveScroll: true,
            onSuccess: () => {
                rejectionModal.value.show = false;
            },
        },
    );
};

const getStatusClass = (status: string) => {
    switch (status) {
        case 'approved':
            return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400';
        case 'rejected':
            return 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400';
        default:
            return 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400';
    }
};
</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">{{ __('Salary Certificate Requests') }}</h1>
                <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('Manage and approve employee salary certificate requests.') }}</p>
            </div>
        </div>

        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
            <table class="w-full text-left text-sm">
                <thead>
                    <tr class="border-b border-slate-200 bg-slate-50/50 dark:border-slate-700 dark:bg-slate-800/50">
                        <th class="px-5 py-3 text-[10px] font-semibold tracking-widest text-slate-400 uppercase">{{ __('Employee') }}</th>
                        <th class="px-5 py-3 text-[10px] font-semibold tracking-widest text-slate-400 uppercase">{{ __('Reason') }}</th>
                        <th class="px-5 py-3 text-[10px] font-semibold tracking-widest text-slate-400 uppercase">{{ __('Requested At') }}</th>
                        <th class="px-5 py-3 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 class="divide-y divide-slate-100 dark:divide-slate-800">
                    <tr v-if="requests.data.length === 0">
                        <td colspan="5" class="px-5 py-12 text-center text-slate-400">
                            {{ __('No pending requests found.') }}
                        </td>
                    </tr>
                    <tr v-for="request in requests.data" :key="request.id" class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-3">
                                <div class="h-8 w-8 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                    <img
                                        :src="
                                            request.user.profile_image
                                                ? '/storage/' + request.user.profile_image
                                                : `https://ui-avatars.com/api/?name=${encodeURIComponent(request.user.name)}&background=random`
                                        "
                                        class="h-full w-full object-cover"
                                    />
                                </div>
                                <div>
                                    <p class="font-medium text-slate-800 dark:text-white">{{ request.user.name }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ request.user.employee_profile?.department_rel?.name || __('No Department') }}
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-slate-600 dark:text-slate-300">
                            <div class="max-w-xs truncate" :title="request.reason">
                                {{ request.reason }}
                            </div>
                        </td>
                        <td class="px-5 py-4 text-slate-500">
                            {{ new Date(request.created_at).toLocaleDateString() }}
                        </td>
                        <td class="px-5 py-4">
                            <span :class="['rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize', getStatusClass(request.status)]">
                                {{ __(request.status) }}
                            </span>
                        </td>
                        <td class="px-5 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <template v-if="request.status === 'pending'">
                                    <button
                                        @click="approve(request)"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 shadow-sm transition-all hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400"
                                        :title="__('Approve')"
                                    >
                                        <Check class="h-4 w-4" />
                                    </button>
                                    <button
                                        @click="openRejectionModal(request)"
                                        class="flex h-8 w-8 items-center justify-center rounded-lg bg-red-50 text-red-600 shadow-sm transition-all hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400"
                                        :title="__('Reject')"
                                    >
                                        <X class="h-4 w-4" />
                                    </button>
                                </template>
                                <a
                                    v-if="request.status === 'approved'"
                                    :href="admin.payroll.certificate.download.url({ employee: request.user_id })"
                                    class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 shadow-sm transition-all hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400"
                                    :title="__('Download')"
                                >
                                    <Download class="h-4 w-4" />
                                </a>
                                <button
                                    v-if="request.status === 'rejected'"
                                    class="flex h-8 w-8 cursor-help items-center justify-center rounded-lg bg-slate-100 text-slate-500"
                                    :title="request.rejection_reason"
                                >
                                    <MessageSquare class="h-4 w-4" />
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Rejection Modal -->
        <Modal :show="rejectionModal.show" @close="rejectionModal.show = false" max-width="md">
            <div class="p-6">
                <h2 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('Reject Request') }}</h2>
                <div class="mt-4">
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Rejection Reason') }}</label>
                    <textarea
                        v-model="rejectionModal.reason"
                        rows="3"
                        class="mt-1 block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-(--brand-primary) dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                        :placeholder="__('State the reason for rejection...')"
                    ></textarea>
                </div>
                <div class="mt-6 flex justify-end gap-3">
                    <button
                        @click="rejectionModal.show = false"
                        class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-bold text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                    >
                        {{ __('Cancel') }}
                    </button>
                    <button
                        @click="submitRejection"
                        :disabled="!rejectionModal.reason"
                        class="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-lg hover:bg-red-700 disabled:opacity-50"
                    >
                        {{ __('Reject Request') }}
                    </button>
                </div>
            </div>
        </Modal>
    </div>
</template>
