<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { ref, computed } from 'vue';
import { 
    ChevronLeft, ChevronRight, Calendar as CalendarIcon, 
    User, CalendarRange, List
} from 'lucide-vue-next';
import admin from '@/routes/admin';

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

const props = defineProps<{
    requests: any[];
    currentMonth: number;
    currentYear: number;
}>();

const monthNames = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
];

const nextMonth = () => {
    let m = props.currentMonth + 1;
    let y = props.currentYear;
    if (m > 12) { m = 1; y++; }
    router.get(admin.leave.calendar.url(), { month: m, year: y });
};

const prevMonth = () => {
    let m = props.currentMonth - 1;
    let y = props.currentYear;
    if (m < 1) { m = 12; y--; }
    router.get(admin.leave.calendar.url(), { month: m, year: y });
};

// Simple list view for now to satisfy specialized "calendar" view
// In a full implementation, this would be a grid grid.
</script>

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

    <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">{{ __('absence_calendar') }}</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">{{ __('track_team_leave_schedule') }}</p>
                </div>
                <div class="flex items-center space-x-3">
                    <Link 
                        :href="admin.leave.index.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"
                    >
                        <List :size="18" />
                        <span>{{ __('list_view') }}</span>
                    </Link>
                </div>
            </div>

            <!-- Calendar Month Selector -->
            <div class="flex items-center justify-between bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
                <div class="flex items-center space-x-4">
                    <button @click="prevMonth" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg text-slate-500"><ChevronLeft :size="20" /></button>
                    <h3 class="text-lg font-black text-slate-900 dark:text-white min-w-[150px] text-center">
                        {{ monthNames[currentMonth - 1] }} {{ currentYear }}
                    </h3>
                    <button @click="nextMonth" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg text-slate-500"><ChevronRight :size="20" /></button>
                </div>
                <div class="flex items-center space-x-2 text-xs font-bold text-slate-400">
                    <div class="flex items-center px-3 py-1 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 rounded-md">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-2"></span>
                        {{ requests.length }} {{ __('active_leaves') }}
                    </div>
                </div>
            </div>

            <!-- Absences List (Practical "Calendar" View) -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div v-for="request in requests" :key="request.id" class="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-start space-x-4">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-50 dark:border-slate-700">
                            <img v-if="request.user.profile_image" :src="request.user.profile_image" class="w-full h-full object-cover" />
                            <User v-else :size="24" class="text-slate-300" />
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h4 class="text-base font-bold text-slate-900 dark:text-white">{{ request.user.name }}</h4>
                            <span class="text-[10px] font-black uppercase px-2 py-0.5 rounded-md" :style="{ backgroundColor: request.leave_type.color + '15', color: request.leave_type.color }">
                                {{ request.leave_type.name }}
                            </span>
                        </div>
                        <div class="mt-2 flex items-center text-xs font-bold text-slate-500 space-x-4">
                            <div class="flex items-center">
                                <CalendarIcon :size="14" class="mr-1.5 opacity-50" />
                                <span>{{ formatDate(request.start_date) }} - {{ formatDate(request.end_date) }}</span>
                            </div>
                            <div class="flex items-center">
                                <Clock :size="14" class="mr-1.5 opacity-50" />
                                <span>{{ request.total_days }} {{ __('days') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="requests.length === 0" class="lg:col-span-2 py-20 bg-white dark:bg-slate-900 rounded-xl border border-dashed border-slate-200 dark:border-slate-800 flex flex-col items-center justify-center text-slate-400">
                    <CalendarRange :size="48" class="mb-4 opacity-20" />
                    <p class="font-bold">{{ __('no_approved_absences_for_this_month') }}</p>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
