<script setup lang="ts">
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import { Head, useForm, Link } from '@inertiajs/vue3';
import { ref } from 'vue';
import { 
    CalendarRange, Plus, Files, Calendar, Info, 
    CheckCircle2, Clock, XCircle, AlertCircle
} from 'lucide-vue-next';
import Modal from '@/Components/Common/Modal.vue';
import employee from '@/routes/employee';

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

const showRequestModal = ref(false);

const form = useForm({
    leave_type_id: '',
    start_date: '',
    end_date: '',
    reason: '',
});

const submit = () => {
    form.post(employee.leave.store.url(), {
        onSuccess: () => {
            showRequestModal.value = false;
            form.reset();
        },
    });
};

const getStatusBadge = (status: string) => {
    const badges: Record<string, any> = {
        pending_manager: { label: 'Pending Manager', class: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', icon: Clock },
        pending_admin: { label: 'Pending Admin', class: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', icon: Clock },
        approved: { label: 'Approved', class: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', icon: CheckCircle2 },
        rejected_manager: { label: 'Rejected (Mgr)', class: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400', icon: XCircle },
        rejected_admin: { label: 'Rejected (Admin)', class: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400', 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_management')" />

    <EmployeeLayout>
        <div class="space-y-6 animate-fade-in">
            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('leave_management') }}</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">{{ __('request_and_track_your_absence') }}</p>
                </div>
                <button 
                    @click="showRequestModal = true"
                    class="flex items-center justify-center space-x-2 bg-[var(--brand-primary)] text-white px-4 py-2 rounded-xl font-bold text-sm hover:brightness-110 transition-all shadow-lg shadow-[var(--brand-primary)]/20"
                >
                    <Plus :size="18" />
                    <span>{{ __('request_leave') }}</span>
                </button>
            </div>

            <!-- Balances Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div 
                    v-for="balance in balances" 
                    :key="balance.id"
                    class="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm relative overflow-hidden group hover:shadow-md transition-shadow"
                >
                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-slate-50 dark:bg-slate-800/50 rounded-full group-hover:scale-110 transition-transform duration-500 opacity-50"></div>
                    
                    <div class="relative flex items-center space-x-4">
                        <div class="p-3 rounded-2xl" :style="{ backgroundColor: balance.color + '15', color: balance.color }">
                            <CalendarRange :size="24" />
                        </div>
                        <div>
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ balance.name }}</p>
                            <h3 class="text-2xl font-black text-slate-900 dark:text-white mt-1">
                                {{ balance.remaining }} <span class="text-xs font-bold text-slate-500">Days Left</span>
                            </h3>
                        </div>
                    </div>
                    
                    <div class="mt-6 flex items-center justify-between text-xs font-bold">
                        <div class="flex flex-col">
                            <span class="text-slate-400 uppercase">{{ __('total') }}</span>
                            <span class="text-slate-700 dark:text-slate-300">{{ balance.total_allowance }} Days</span>
                        </div>
                        <div class="flex flex-col text-right">
                            <span class="text-slate-400 uppercase">{{ __('used') }}</span>
                            <span class="text-slate-700 dark:text-slate-300">{{ balance.used }} Days</span>
                        </div>
                    </div>
                    
                    <div class="mt-3 h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                        <div 
                            class="h-full rounded-full transition-all duration-1000"
                            :style="{ 
                                width: (balance.used / balance.total_allowance * 100) + '%',
                                backgroundColor: balance.color
                            }"
                        ></div>
                    </div>
                </div>
            </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="p-6 border-b border-slate-50 dark:border-slate-800 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="p-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-lg">
                            <Files :size="20" />
                        </div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ __('your_requests') }}</h3>
                    </div>
                    <Link href="#" class="text-xs font-bold text-[var(--brand-primary)] hover:underline">{{ __('export_history') }}</Link>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-slate-800/30">
                                <th class="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest px-6 py-4">{{ __('leave_type') }}</th>
                                <th class="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest px-6 py-4">{{ __('duration') }}</th>
                                <th class="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest px-6 py-4">{{ __('total_days') }}</th>
                                <th class="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest px-6 py-4">{{ __('status') }}</th>
                                <th class="text-left text-[10px] font-black text-slate-400 uppercase tracking-widest px-6 py-4">{{ __('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-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 whitespace-nowrap">
                                    <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>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ request.total_days }} Days</span>
                                </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">
                                    <div class="flex flex-col items-center">
                                        <div class="w-12 h-12 bg-slate-50 dark:bg-slate-800/50 rounded-2xl flex items-center justify-center text-slate-300 mb-3">
                                            <Calendar :size="24" />
                                        </div>
                                        <p class="text-sm font-bold text-slate-500">{{ __('no_leave_requests_found') }}</p>
                                    </div>
                                </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">
                    <!-- Basic Pagination logic could go here -->
                </div>
            </div>
        </div>

        <!-- Request Leave Modal -->
        <Modal :show="showRequestModal" :title="__('request_leave')" @close="showRequestModal = false">
            <form @submit.prevent="submit" class="space-y-6 py-2">
                <div class="grid grid-cols-1 gap-6">
                    <!-- Leave Type -->
                    <div class="space-y-2 text-sm">
                        <label class="font-bold text-slate-700 dark:text-slate-300">{{ __('leave_type') }}</label>
                        <select 
                            v-model="form.leave_type_id"
                            class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-[var(--brand-primary)]"
                            required
                        >
                            <option value="">{{ __('select_leave_type') }}</option>
                            <option v-for="type in leaveTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
                        </select>
                        <p v-if="form.errors.leave_type_id" class="text-rose-500 text-xs font-bold mt-1">{{ form.errors.leave_type_id }}</p>
                    </div>

                    <!-- Dates -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-2 text-sm">
                            <label class="font-bold text-slate-700 dark:text-slate-300">{{ __('start_date') }}</label>
                            <input 
                                type="date" 
                                v-model="form.start_date"
                                class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-[var(--brand-primary)]"
                                required
                            />
                            <p v-if="form.errors.start_date" class="text-rose-500 text-xs font-bold mt-1">{{ form.errors.start_date }}</p>
                        </div>
                        <div class="space-y-2 text-sm">
                            <label class="font-bold text-slate-700 dark:text-slate-300">{{ __('end_date') }}</label>
                            <input 
                                type="date" 
                                v-model="form.end_date"
                                class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-[var(--brand-primary)]"
                                required
                            />
                            <p v-if="form.errors.end_date" class="text-rose-500 text-xs font-bold mt-1">{{ form.errors.end_date }}</p>
                        </div>
                    </div>

                    <!-- Reason -->
                    <div class="space-y-2 text-sm">
                        <label class="font-bold text-slate-700 dark:text-slate-300">{{ __('reason_for_leave') }}</label>
                        <textarea 
                            v-model="form.reason"
                            rows="4"
                            class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-[var(--brand-primary)]"
                            :placeholder="__('provide_a_detailed_reason_for_your_leave')"
                            required
                        ></textarea>
                        <p v-if="form.errors.reason" class="text-rose-500 text-xs font-bold mt-1">{{ form.errors.reason }}</p>
                    </div>
                </div>

                <div class="flex items-center space-x-3 pt-4">
                    <button 
                        type="button" 
                        @click="showRequestModal = false"
                        class="flex-1 px-4 py-3 rounded-xl font-bold text-sm bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 transition-all"
                    >
                        {{ __('cancel') }}
                    </button>
                    <button 
                        type="submit"
                        :disabled="form.processing"
                        class="flex-[2] px-8 py-3 rounded-xl font-bold text-sm bg-[var(--brand-primary)] text-white hover:brightness-110 transition-all shadow-lg shadow-[var(--brand-primary)]/20 disabled:opacity-50"
                    >
                        <div v-if="form.processing" class="flex items-center space-x-2">
                             <Clock class="animate-spin" :size="16" />
                             <span>{{ __('submitting') }}...</span>
                        </div>
                        <span v-else>{{ __('submit_request') }}</span>
                    </button>
                </div>
            </form>
        </Modal>
    </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>
