<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import debounce from 'lodash/debounce';
import { Building2, Calendar, CheckCircle2, Clock, Users } from 'lucide-vue-next';
import { ref, watch } from 'vue';
import { index as myTeamIndex } from '@/actions/App/Http/Controllers/Employee/MyTeamController';
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';

defineOptions({ layout: EmployeeLayout });

interface TeamMemberRow {
    id: number;
    name: string;
    email: string;
    department: string | null;
    clock_in: string | null;
    clock_out: string | null;
    total_hours: number | string;
    status: 'present' | 'late' | 'leave' | 'absent' | string;
}

const props = defineProps<{
    team: TeamMemberRow[];
    stats: {
        employees: number;
        present: number;
        late: number;
        leave: number;
        absent: number;
    };
    filters: {
        date: string;
    };
}>();

const selectedDate = ref(props.filters.date || '');

watch(selectedDate, debounce((value: string) => {
    router.get(
        myTeamIndex.url({
            query: {
                date: value || undefined,
            },
        }),
        {},
        {
            preserveState: true,
            preserveScroll: true,
            replace: true,
        },
    );
}, 350));

const formatTime = (value: string | null) => {
    if (!value) {
        return '-';
    }

    return new Date(value).toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit',
    });
};

const getStatusClass = (status: string) => {
    if (status === 'present') {
        return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-400';
    }

    if (status === 'late') {
        return 'bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-400';
    }

    if (status === 'leave') {
        return 'bg-purple-100 text-purple-800 dark:bg-purple-500/20 dark:text-purple-400';
    }

    return 'bg-slate-100 text-slate-700 dark:bg-slate-700/50 dark:text-slate-300';
};
</script>

<template>
    <Head title="My Team Attendance" />

    <div class="animate-fade-in space-y-6">
        <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
            <div>
                <h1 class="text-2xl font-extrabold text-slate-900 dark:text-white">My Team Attendance</h1>
                <p class="text-sm text-slate-500">View daily attendance for your direct reports.</p>
            </div>

            <div class="relative">
                <Calendar :size="16" class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400" />
                <input
                    v-model="selectedDate"
                    type="date"
                    class="w-[190px] rounded-xl border border-slate-200 bg-white py-2.5 pr-3 pl-10 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-sky-500/20 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
                />
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
            <div class="rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 to-blue-100 p-5 shadow-sm dark:border-blue-800/50 dark:from-blue-900/20 dark:to-blue-800/20">
                <div class="mb-3 flex items-center justify-between">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500 text-white shadow-lg"><Users :size="19" /></div>
                    <span class="text-[10px] font-bold tracking-wider text-blue-600 uppercase">{{ __('employees') }}</span>
                </div>
                <p class="text-3xl font-black text-blue-900 dark:text-blue-100">{{ stats.employees }}</p>
            </div>

            <div class="rounded-2xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-emerald-100 p-5 shadow-sm dark:border-emerald-800/50 dark:from-emerald-900/20 dark:to-emerald-800/20">
                <div class="mb-3 flex items-center justify-between">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500 text-white shadow-lg"><CheckCircle2 :size="19" /></div>
                    <span class="text-[10px] font-bold tracking-wider text-emerald-600 uppercase">{{ __('present') }}</span>
                </div>
                <p class="text-3xl font-black text-emerald-900 dark:text-emerald-100">{{ stats.present }}</p>
            </div>

            <div class="rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-amber-100 p-5 shadow-sm dark:border-amber-800/50 dark:from-amber-900/20 dark:to-amber-800/20">
                <div class="mb-3 flex items-center justify-between">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500 text-white shadow-lg"><Clock :size="19" /></div>
                    <span class="text-[10px] font-bold tracking-wider text-amber-600 uppercase">{{ __('late') }}</span>
                </div>
                <p class="text-3xl font-black text-amber-900 dark:text-amber-100">{{ stats.late }}</p>
            </div>

            <div class="rounded-2xl border border-purple-200 bg-gradient-to-br from-purple-50 to-purple-100 p-5 shadow-sm dark:border-purple-800/50 dark:from-purple-900/20 dark:to-purple-800/20">
                <div class="mb-3 flex items-center justify-between">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-500 text-white shadow-lg"><Calendar :size="19" /></div>
                    <span class="text-[10px] font-bold tracking-wider text-purple-600 uppercase">{{ __('leave') }}</span>
                </div>
                <p class="text-3xl font-black text-purple-900 dark:text-purple-100">{{ stats.leave }}</p>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 p-5 shadow-sm dark:border-slate-700 dark:from-slate-800 dark:to-slate-700/70">
                <div class="mb-3 flex items-center justify-between">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-500 text-white shadow-lg"><Building2 :size="19" /></div>
                    <span class="text-[10px] font-bold tracking-wider text-slate-600 uppercase">{{ __('absent') }}</span>
                </div>
                <p class="text-3xl font-black text-slate-900 dark:text-slate-100">{{ stats.absent }}</p>
            </div>
        </div>

        <div class="overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-slate-800/50">
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('employee') }}</th>
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('department') }}</th>
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('clock_in') }}</th>
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('clock_out') }}</th>
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('hours') }}</th>
                            <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">{{ __('status') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/80">
                        <tr v-for="member in team" :key="member.id" class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/30">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                        {{ member.name.substring(0, 2).toUpperCase() }}
                                    </div>
                                    <div>
                                        <p class="font-bold text-slate-900 dark:text-white">{{ member.name }}</p>
                                        <p class="text-xs text-slate-500">{{ member.email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ member.department || __('unassigned') }}</td>
                            <td class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">{{ formatTime(member.clock_in) }}</td>
                            <td class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">{{ formatTime(member.clock_out) }}</td>
                            <td class="px-6 py-4 font-black text-sky-600 dark:text-sky-400">{{ member.total_hours || 0 }}h</td>
                            <td class="px-6 py-4">
                                <span :class="['inline-flex rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide', getStatusClass(member.status)]">
                                    {{ __(member.status) }}
                                </span>
                            </td>
                        </tr>

                        <tr v-if="team.length === 0">
                            <td colspan="6" class="px-6 py-16 text-center">
                                <div class="mx-auto max-w-md">
                                    <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800">
                                        <Users :size="28" class="text-slate-400" />
                                    </div>
                                    <h3 class="text-base font-bold text-slate-800 dark:text-slate-200">No team members found</h3>
                                    <p class="mt-1 text-sm text-slate-500">No direct reports are assigned or there is no attendance data for the selected date.</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
