<script setup lang="ts">
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import employee from '@/routes/employee';
import { ref } from 'vue';
import RequestCertificateModal from './RequestCertificateModal.vue';

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

const showRequestModal = ref(false);

const getStatusClass = (status: string) => {
    switch (status) {
        case 'approved':
            return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
        case 'rejected':
            return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
        default:
            return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
    }
};
</script>

<template>
    <EmployeeLayout>
        <div class="animate-fade-in mx-auto max-w-4xl space-y-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('Salary Certificates') }}</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('Request and download your salary certificates.') }}</p>
                </div>
                <button
                    @click="showRequestModal = true"
                    class="rounded-xl bg-(--brand-primary) px-4 py-2 text-sm font-bold text-white shadow-lg transition-all hover:brightness-110"
                >
                    {{ __('Request Certificate') }}
                </button>
            </div>

            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <table class="w-full text-left text-sm">
                    <thead
                        class="border-b border-slate-200 bg-slate-50/50 text-xs font-bold text-slate-500 uppercase dark:border-slate-800 dark:bg-slate-800/50 dark:text-slate-400"
                    >
                        <tr>
                            <th class="px-6 py-4">{{ __('Request Date') }}</th>
                            <th class="px-6 py-4">{{ __('Reason') }}</th>
                            <th class="px-6 py-4">{{ __('Status') }}</th>
                            <th class="px-6 py-4 text-right">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                        <tr v-if="requests.data.length === 0">
                            <td colspan="4" class="px-6 py-10 text-center text-slate-500 dark:text-slate-400">
                                {{ __('No salary certificate requests found.') }}
                            </td>
                        </tr>
                        <tr v-for="request in requests.data" :key="request.id" class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
                            <td class="px-6 py-4 text-slate-900 dark:text-white">
                                {{ new Date(request.created_at).toLocaleDateString() }}
                            </td>
                            <td class="max-w-50 truncate px-6 py-4 text-slate-600 dark:text-slate-300" :title="request.reason">
                                {{ request.reason }}
                            </td>
                            <td class="px-6 py-4">
                                <span :class="['rounded-full px-2.5 py-1 text-xs font-bold capitalize', getStatusClass(request.status)]">
                                    {{ __(request.status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <a
                                    v-if="request.status === 'approved'"
                                    :href="employee.salaryCertificates.download.url({ salaryCertificateRequest: request.id })"
                                    class="text-sm font-bold text-(--brand-primary) hover:underline"
                                >
                                    {{ __('Download') }}
                                </a>
                                <span v-else-if="request.status === 'rejected'" class="text-xs text-red-500" :title="request.rejection_reason">
                                    {{ __('Rejected') }}
                                </span>
                                <span v-else class="text-xs text-slate-400">
                                    {{ __('Processing') }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <RequestCertificateModal :show="showRequestModal" @close="showRequestModal = false" />
    </EmployeeLayout>
</template>

<style scoped>
.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
