<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { ref } from 'vue';
import { CheckCircle, XCircle, Calendar, Clock, User } from 'lucide-vue-next';
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import Modal from '@/Components/Common/Modal.vue';

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

const showRejectModal = ref(false);
const selectedAttendance = ref<any>(null);
const rejectReason = ref('');

const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
};

const formatTime = (time: string) => {
    if (!time) return '-';
    return new Date(time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};

const approve = (attendance: any) => {
    router.post(`/employee/manager/attendance/${attendance.id}/approve`, {}, {
        preserveScroll: true,
        onSuccess: () => {
            // Success handled by flash message
        }
    });
};

const openRejectModal = (attendance: any) => {
    selectedAttendance.value = attendance;
    showRejectModal.value = true;
};

const reject = () => {
    if (!selectedAttendance.value || !rejectReason.value) return;

    router.post(`/employee/manager/attendance/${selectedAttendance.value.id}/reject`, {
        reason: rejectReason.value
    }, {
        preserveScroll: true,
        onSuccess: () => {
            showRejectModal.value = false;
            rejectReason.value = '';
            selectedAttendance.value = null;
        }
    });
};
</script>

<template>
    <EmployeeLayout>
        <div class="p-6">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ __('attendance_approvals') }}</h1>
                <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('review_and_approve_attendance_anomalies') }}</p>
            </div>

            <div v-if="approvals.length === 0" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-12 text-center">
                <CheckCircle class="mx-auto mb-4 text-emerald-500" :size="48" />
                <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">{{ __('no_pending_approvals') }}</h3>
                <p class="text-slate-500 dark:text-slate-400">{{ __('all_attendance_anomalies_reviewed') }}</p>
            </div>

            <div v-else class="space-y-4">
                <div v-for="approval in approvals" :key="approval.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-6 hover:shadow-md transition-shadow">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-3">
                                <User class="text-slate-400" :size="20" />
                                <h3 class="font-semibold text-slate-800 dark:text-slate-100">{{ approval.user.name }}</h3>
                                <span class="px-2 py-1 rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 text-xs font-medium">
                                    {{ approval.anomaly_type }}
                                </span>
                                <span v-if="approval.anomaly_duration?.late_duration" class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-medium">
                                    Late: {{ approval.anomaly_duration.late_duration }}
                                </span>
                                <span v-if="approval.anomaly_duration?.early_duration" class="px-2 py-1 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-medium">
                                    Early: {{ approval.anomaly_duration.early_duration }}
                                </span>
                            </div>
                            
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                                <div>
                                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mb-1">
                                        <Calendar :size="14" />
                                        {{ __('date') }}
                                    </div>
                                    <div class="font-medium text-slate-800 dark:text-slate-100">{{ formatDate(approval.date) }}</div>
                                </div>
                                <div>
                                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mb-1">
                                        <Clock :size="14" />
                                        {{ __('clock_in') }}
                                    </div>
                                    <div class="font-medium text-slate-800 dark:text-slate-100">{{ formatTime(approval.clock_in) }}</div>
                                </div>
                                <div>
                                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mb-1">
                                        <Clock :size="14" />
                                        {{ __('clock_out') }}
                                    </div>
                                    <div class="font-medium text-slate-800 dark:text-slate-100">{{ formatTime(approval.clock_out) }}</div>
                                </div>
                                <div>
                                    <div class="text-xs text-slate-500 dark:text-slate-400 mb-1">{{ __('department') }}</div>
                                    <div class="font-medium text-slate-800 dark:text-slate-100">{{ approval.user.employee_profile?.department || '-' }}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex gap-2 ml-4">
                            <button @click="approve(approval)" class="px-4 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium transition-colors flex items-center gap-2">
                                <CheckCircle :size="16" />
                                {{ __('approve') }}
                            </button>
                            <button @click="openRejectModal(approval)" class="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white font-medium transition-colors flex items-center gap-2">
                                <XCircle :size="16" />
                                {{ __('reject') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reject Modal -->
        <Modal :show="showRejectModal" @close="showRejectModal = false">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-4">{{ __('reject_attendance') }}</h3>
                <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">{{ __('provide_reason_for_rejection') }}</p>
                
                <textarea 
                    v-model="rejectReason" 
                    class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-emerald-500 outline-none" 
                    rows="4" 
                    :placeholder="__('enter_rejection_reason')"
                ></textarea>
                
                <div class="flex justify-end gap-2 mt-4">
                    <button @click="showRejectModal = false" class="px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                        {{ __('cancel') }}
                    </button>
                    <button @click="reject" :disabled="!rejectReason" class="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 disabled:bg-slate-300 disabled:cursor-not-allowed text-white font-medium transition-colors">
                        {{ __('reject') }}
                    </button>
                </div>
            </div>
        </Modal>
    </EmployeeLayout>
</template>
