<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { settings as settingsRoute, updateStatus as updateStatusAction } from '@/actions/App/Http/Controllers/Admin/AttendanceController';
import { Head, Link, router } from '@inertiajs/vue3';
import debounce from 'lodash/debounce';
import { CheckCircle, Search, User, XCircle } from 'lucide-vue-next';
import { ref, watch } from 'vue';

const props = defineProps<{
    attendances: any;
    filters: any;
}>();

const search = ref(props.filters.search || '');
const status = ref(props.filters.status || '');

watch(
    [search, status],
    debounce(() => {
        router.get(
            window.location.pathname,
            {
                search: search.value,
                status: status.value,
            },
            {
                preserveState: true,
                replace: true,
                preserveScroll: true,
            },
        );
    }, 500),
);

const updateStatus = (attendance: any, newStatus: string) => {
    router.post(
        updateStatusAction.url(attendance.id),
        {
            status: newStatus,
        },
        {
            preserveScroll: true,
        },
    );
};

const getStatusColor = (status: string) => {
    switch (status) {
        case 'approved':
            return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-400';
        case 'pending':
            return 'bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-400';
        case 'rejected':
            return 'bg-rose-100 text-rose-800 dark:bg-rose-500/20 dark:text-rose-400';
        default:
            return 'bg-slate-100 text-slate-800';
    }
};
</script>

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

    <AdminLayout>
        <div class="animate-fade-in space-y-6">
            <!-- Header -->
            <div class="flex flex-col justify-between gap-4 md:flex-row md:items-center">
                <div>
                    <h2 class="text-xl font-extrabold text-slate-900 dark:text-white">{{ __('attendance_management') }}</h2>
                    <p class="text-sm text-slate-500">{{ __('review_and_manage_all_employee_timesheets') }}</p>
                </div>
                <Link
                    :href="settingsRoute.url()"
                    class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-bold text-slate-700 transition-all hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                >
                    {{ __('settings') }}
                </Link>
            </div>

            <!-- Filters -->
            <div
                class="flex flex-col items-center gap-4 rounded-[2rem] border border-slate-100 bg-white p-4 shadow-sm md:flex-row dark:border-slate-800 dark:bg-slate-900"
            >
                <div class="relative w-full flex-1">
                    <Search :size="16" class="absolute top-1/2 left-4 -translate-y-1/2 text-slate-400" />
                    <input
                        v-model="search"
                        type="text"
                        :placeholder="__('search_employees')"
                        class="w-full rounded-xl border-none bg-slate-50 py-2.5 pr-4 pl-11 text-sm font-bold transition-all focus:ring-2 focus:ring-sky-500/20 dark:bg-slate-800"
                    />
                </div>
                <select
                    v-model="status"
                    class="w-full rounded-xl border-none bg-slate-50 py-2.5 text-sm font-bold transition-all focus:ring-2 focus:ring-sky-500/20 md:w-48 dark:bg-slate-800"
                >
                    <option value="">{{ __('all_status') }}</option>
                    <option value="pending">{{ __('pending') }}</option>
                    <option value="approved">{{ __('approved') }}</option>
                    <option value="rejected">{{ __('rejected') }}</option>
                </select>
            </div>

            <!-- Table -->
            <div class="text-z overflow-hidden rounded-[2rem] 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">
                        <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">{{ __('date') }}</th>
                                <th class="px-6 py-4 text-left text-[10px] font-bold tracking-widest text-slate-500 uppercase">
                                    {{ __('punch_details') }}
                                </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>
                                <th class="px-6 py-4 text-right text-[10px] font-bold tracking-widest text-slate-500 uppercase">
                                    {{ __('actions') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50 dark:divide-slate-800/50">
                            <tr
                                v-for="entry in attendances.data"
                                :key="entry.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 space-x-3">
                                        <div
                                            class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-500 dark:bg-slate-800"
                                        >
                                            <User :size="14" />
                                        </div>
                                        <div>
                                            <div class="text-sm font-bold text-slate-900 dark:text-white">{{ entry.user.name }}</div>
                                            <div class="text-[10px] font-bold text-slate-500 uppercase">
                                                {{ entry.user.employee_profile?.job_title || 'Employee' }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm font-bold text-slate-600 dark:text-slate-400">
                                    {{ new Date(entry.date).toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) }}
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-col text-[10px] font-bold text-slate-400">
                                        <span
                                            >IN: {{ entry.clock_in ? new Date(entry.clock_in).toLocaleTimeString() : '-' }} ({{
                                                entry.in_type
                                            }})</span
                                        >
                                        <span
                                            >OUT: {{ entry.clock_out ? new Date(entry.clock_out).toLocaleTimeString() : '-' }} ({{
                                                entry.out_type
                                            }})</span
                                        >
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm font-black text-[var(--brand-primary)]">{{ entry.total_hours || '0.00' }}h</td>
                                <td class="px-6 py-4">
                                    <span
                                        :class="[
                                            'inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-bold',
                                            getStatusColor(entry.status),
                                        ]"
                                    >
                                        {{ __(entry.status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div v-if="entry.status === 'pending'" class="flex items-center justify-end space-x-2">
                                        <button
                                            @click="updateStatus(entry, 'approved')"
                                            class="rounded-lg p-2 text-emerald-500 transition-colors hover:bg-emerald-50"
                                            :title="__('approve')"
                                        >
                                            <CheckCircle :size="18" />
                                        </button>
                                        <button
                                            @click="updateStatus(entry, 'rejected')"
                                            class="rounded-lg p-2 text-rose-500 transition-colors hover:bg-rose-50"
                                            :title="__('reject')"
                                        >
                                            <XCircle :size="18" />
                                        </button>
                                    </div>
                                    <div v-else class="text-[10px] font-bold text-slate-400">
                                        {{ __('reviewed_by') }}: {{ entry.approved_by_user?.name || '-' }}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Assuming Pagination component exists or using standard -->
                <div v-if="attendances.links?.length > 3" class="border-t border-slate-50 p-6 dark:border-slate-800">
                    <!-- Simple pagination fallback if Pagination component is not found -->
                    <div class="flex items-center justify-center space-x-2">
                        <template v-for="link in attendances.links" :key="link.label">
                            <Link
                                v-if="link.url"
                                :href="link.url"
                                v-html="link.label"
                                class="rounded-lg px-3 py-1 text-xs font-bold transition-all"
                                :class="link.active ? 'bg-[var(--brand-primary)] text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
                            />
                            <span v-else v-html="link.label" class="px-3 py-1 text-xs font-bold text-slate-300"></span>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
