<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { ref, watch } from 'vue';
import { 
    CalendarRange, Filter, Users, Calendar, 
    CheckCircle2, Clock, XCircle, AlertCircle, ChevronLeft, ChevronRight
} from 'lucide-vue-next';
import debounce from 'lodash/debounce';
import admin from '@/routes/admin';

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

const statusFilter = ref(props.filters.status || '');
const typeFilter = ref(props.filters.leave_type_id || '');

const applyFilters = debounce(() => {
    router.get(admin.leave.index.url(), {
        status: statusFilter.value,
        leave_type_id: typeFilter.value,
    }, { preserveState: true, replace: true });
}, 300);

watch([statusFilter, typeFilter], () => applyFilters());

const getStatusBadge = (status: string) => {
    const badges: Record<string, any> = {
        pending_manager: { label: 'Pending Mgr', class: 'bg-amber-100 text-amber-700', icon: Clock },
        pending_admin: { label: 'Pending Admin', class: 'bg-blue-100 text-blue-700', icon: Clock },
        approved: { label: 'Approved', class: 'bg-emerald-100 text-emerald-700', icon: CheckCircle2 },
        rejected_manager: { label: 'Rejected (Mgr)', class: 'bg-rose-100 text-rose-700', icon: XCircle },
        rejected_admin: { label: 'Rejected (Admin)', class: 'bg-rose-100 text-rose-700', icon: XCircle },
    };
    return badges[status] || { label: status, class: 'bg-slate-100 text-slate-700', icon: AlertCircle };
};

const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric' 
    });
};
</script>

<template>
    <Head :title="__('leave_requests')" />

    <AdminLayout>
        <div class="space-y-6 animate-fade-in">
            <!-- Header -->
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('all_leave_requests') }}</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">{{ __('overview_of_all_employee_leave_applications') }}</p>
                </div>
                <div class="flex items-center space-x-3">
                    <Link 
                        :href="admin.leave.approvals.url()"
                        class="flex items-center space-x-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 px-4 py-2 rounded-xl font-bold text-sm hover:brightness-110 transition-all border border-indigo-100 dark:border-indigo-800"
                    >
                        <CheckCircle2 :size="18" />
                        <span>{{ __('pending_approvals') }}</span>
                    </Link>
                    <Link 
                        :href="admin.leave.calendar.url()"
                        class="flex items-center space-x-2 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-4 py-2 rounded-xl font-bold text-sm hover:brightness-110 transition-all"
                    >
                        <Calendar :size="18" />
                        <span>{{ __('calendar_view') }}</span>
                    </Link>
                </div>
            </div>

            <!-- Filters -->
            <div class="bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm flex flex-wrap items-center gap-4">
                <div class="flex items-center space-x-2 text-slate-400">
                    <Filter :size="18" />
                    <span class="text-xs font-bold uppercase tracking-widest">{{ __('filters') }}</span>
                </div>
                
                <select v-model="statusFilter" class="bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-2 text-xs font-bold text-slate-600 dark:text-slate-300 focus:ring-2 focus:ring-[var(--brand-primary)]">
                    <option value="">{{ __('all_statuses') }}</option>
                    <option value="pending_manager">Pending Manager</option>
                    <option value="pending_admin">Pending Admin</option>
                    <option value="approved">Approved</option>
                    <option value="rejected_manager">Rejected (Manager)</option>
                    <option value="rejected_admin">Rejected (Admin)</option>
                </select>

                <select v-model="typeFilter" class="bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-2 text-xs font-bold text-slate-600 dark:text-slate-300 focus:ring-2 focus:ring-[var(--brand-primary)]">
                    <option value="">{{ __('all_types') }}</option>
                    <option v-for="type in leaveTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
                </select>
            </div>

            <!-- Requests Table -->
            <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-slate-800/30">
                                <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('employee') }}</th>
                                <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('leave_type') }}</th>
                                <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('duration') }}</th>
                                <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('status') }}</th>
                                <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('applied_on') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
                            <tr v-for="request in requests.data" :key="request.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-800/50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center overflow-hidden">
                                            <img v-if="request.user.profile_image" :src="request.user.profile_image" class="w-full h-full object-cover" />
                                            <User v-else :size="16" class="text-slate-400" />
                                        </div>
                                        <span class="text-sm font-bold text-slate-900 dark:text-white">{{ request.user.name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: request.leave_type.color }"></div>
                                        <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ request.leave_type.name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-slate-900 dark:text-white">{{ formatDate(request.start_date) }} - {{ formatDate(request.end_date) }}</span>
                                        <span class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">{{ request.total_days }} {{ __('days') }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span 
                                        class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider"
                                        :class="getStatusBadge(request.status).class"
                                    >
                                        <component :is="getStatusBadge(request.status).icon" :size="12" class="mr-1.5" />
                                        {{ getStatusBadge(request.status).label }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-xs font-bold text-slate-500">{{ formatDate(request.created_at) }}</span>
                                </td>
                            </tr>
                            <tr v-if="requests.data.length === 0">
                                <td colspan="5" class="px-6 py-12 text-center text-slate-500 font-bold text-sm">
                                    {{ __('no_leave_requests_found') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination Placeholder -->
                <div v-if="requests.last_page > 1" class="p-6 border-t border-slate-50 dark:border-slate-800 flex items-center justify-between">
                     <p class="text-xs text-slate-500 font-bold">Showing {{ requests.from }} to {{ requests.to }} of {{ requests.total }} items</p>
                     <div class="flex items-center space-x-2">
                         <Link :href="requests.prev_page_url" class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-900" v-if="requests.prev_page_url"><ChevronLeft :size="16" /></Link>
                         <Link :href="requests.next_page_url" class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-900" v-if="requests.next_page_url"><ChevronRight :size="16" /></Link>
                     </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
