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

const props = defineProps<{
    approvals: any[];
}>();

const selectedRequest = ref<any>(null);
const showApproveModal = ref(false);
const showRejectModal = ref(false);

const approveForm = useForm({
    comment: '',
});

const rejectForm = useForm({
    reason: '',
});

const openApproveModal = (request: any) => {
    selectedRequest.value = request;
    showApproveModal.value = true;
};

const openRejectModal = (request: any) => {
    selectedRequest.value = request;
    showRejectModal.value = true;
};

const submitApprove = () => {
    approveForm.post(employee.manager.leave.approve.url({ leaveRequest: selectedRequest.value.id }), {
        onSuccess: () => {
            showApproveModal.value = false;
            approveForm.reset();
        },
    });
};

const submitReject = () => {
    rejectForm.post(employee.manager.leave.reject.url({ leaveRequest: selectedRequest.value.id }), {
        onSuccess: () => {
            showRejectModal.value = false;
            rejectForm.reset();
        },
    });
};

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

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

    <EmployeeLayout>
        <div class="space-y-6 animate-fade-in">
            <!-- Header -->
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('leave_approvals') }} ({{ __('manager') }})</h2>
                <p class="text-slate-500 dark:text-slate-400 text-sm">{{ __('review_and_approve_direct_reports_leave_requests') }}</p>
            </div>

            <!-- Approvals 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 space-x-3">
                    <div class="p-2 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 rounded-lg">
                        <CheckSquare :size="20" />
                    </div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ __('pending_approvals') }}</h3>
                </div>

                <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 text-right">{{ __('actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
                            <tr v-for="request in approvals" :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>
                                        <div>
                                            <p class="text-sm font-bold text-slate-900 dark:text-white">{{ request.user.name }}</p>
                                            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">{{ request.user.email }}</p>
                                        </div>
                                    </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-black uppercase tracking-widest mt-1">{{ request.total_days }} {{ __('days') }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end space-x-2">
                                        <button 
                                            @click="openRejectModal(request)"
                                            class="p-2 text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"
                                            title="Reject"
                                        >
                                            <XCircle :size="18" />
                                        </button>
                                        <button 
                                            @click="openApproveModal(request)"
                                            class="p-2 text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg transition-colors"
                                            title="Approve"
                                        >
                                            <CheckCircle2 :size="18" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="approvals.length === 0">
                                <td colspan="4" class="px-6 py-12 text-center text-slate-500 font-bold text-sm">
                                    {{ __('no_pending_leave_requests_to_approve') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Approve Modal -->
        <Modal :show="showApproveModal" :title="__('approve_leave_request')" @close="showApproveModal = false">
            <div v-if="selectedRequest" class="space-y-4">
                <div class="p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl flex items-start space-x-3">
                    <Info class="text-sky-500 mt-0.5" :size="18" />
                    <div>
                        <p class="text-xs font-bold text-slate-400 uppercase">{{ selectedRequest.user.name }}'s {{ __('request') }}</p>
                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300 mt-1">{{ selectedRequest.reason }}</p>
                    </div>
                </div>
                <form @submit.prevent="submitApprove" class="space-y-4">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase">{{ __('add_comment') }} ({{ __('optional') }})</label>
                        <textarea 
                            v-model="approveForm.comment"
                            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-emerald-500"
                            rows="3"
                        ></textarea>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button type="button" @click="showApproveModal = false" class="flex-1 px-4 py-3 rounded-xl font-bold text-sm bg-slate-100 dark:bg-slate-800">{{ __('cancel') }}</button>
                        <button type="submit" :disabled="approveForm.processing" class="flex-2 px-8 py-3 rounded-xl font-bold text-sm bg-emerald-500 text-white hover:brightness-110 disabled:opacity-50">
                            {{ __('approve_request') }}
                        </button>
                    </div>
                </form>
            </div>
        </Modal>

        <!-- Reject Modal -->
        <Modal :show="showRejectModal" :title="__('reject_leave_request')" @close="showRejectModal = false">
            <div v-if="selectedRequest" class="space-y-4">
                <form @submit.prevent="submitReject" class="space-y-4">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase">{{ __('reason_for_rejection') }}</label>
                        <textarea 
                            v-model="rejectForm.reason"
                            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-rose-500"
                            rows="3"
                            required
                        ></textarea>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button type="button" @click="showRejectModal = false" class="flex-1 px-4 py-3 rounded-xl font-bold text-sm bg-slate-100 dark:bg-slate-800">{{ __('cancel') }}</button>
                        <button type="submit" :disabled="rejectForm.processing" class="flex-2 px-8 py-3 rounded-xl font-bold text-sm bg-rose-500 text-white hover:brightness-110 disabled:opacity-50">
                            {{ __('reject_request') }}
                        </button>
                    </div>
                </form>
            </div>
        </Modal>
    </EmployeeLayout>
</template>
