<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { 
    ArrowLeft, 
    Calendar, 
    Clock, 
    User, 
    Briefcase, 
    CheckCircle2, 
    XCircle, 
    AlertCircle,
    MapPin,
    Monitor,
    LogIn,
    LogOut,
    Coffee
} from 'lucide-vue-next';
import { computed } from 'vue';

defineOptions({ layout: AdminLayout });

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

const statusColors: Record<string, string> = {
    approved: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/30',
    pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400 border-amber-200 dark:border-amber-500/30',
    rejected: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-400 border-rose-200 dark:border-rose-500/30',
};

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

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

const calculateDuration = (seconds?: number) => {
    if (!seconds) return '0h 0m';
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    return `${h}h ${m}m`;
};

const updateStatus = (newStatus: string) => {
    router.post(`/admin/attendance/${props.attendance.id}/status`, {
        status: newStatus
    }, {
        preserveScroll: true
    });
};
</script>

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

    <div class="max-w-7xl mx-auto space-y-6">
        <!-- Header with Back Button -->
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <Link href="/admin/attendance" class="p-2.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors border border-slate-200 dark:border-slate-700">
                    <ArrowLeft :size="20" class="text-slate-600 dark:text-slate-400" />
                </Link>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ __('attendance_details') }}</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{{ formatDate(attendance.date) }}</p>
                </div>
            </div>
            <span class="px-4 py-2 rounded-xl text-sm font-semibold border" :class="statusColors[attendance.status] || 'bg-slate-100 text-slate-600 border-slate-200'">
                {{ __(attendance.status) }}
            </span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Sidebar: Employee Info & Actions -->
            <div class="space-y-6">
                <!-- Employee Card -->
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                    <div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 p-6 border-b border-slate-200 dark:border-slate-700">
                        <div class="flex flex-col items-center text-center">
                            <div class="w-20 h-20 rounded-full bg-gradient-to-br from-[var(--brand-primary)] to-blue-600 flex items-center justify-center text-2xl font-bold text-white shadow-lg mb-4">
                                {{ attendance.user.name.substring(0, 2).toUpperCase() }}
                            </div>
                            <h2 class="text-lg font-bold text-slate-900 dark:text-white">{{ attendance.user.name }}</h2>
                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ attendance.user.email }}</p>
                        </div>
                    </div>
                    <div class="p-6 space-y-3">
                        <div class="flex items-center gap-3 text-sm">
                            <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
                                <Briefcase :size="16" class="text-slate-600 dark:text-slate-400" />
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">{{ __('department') }}</p>
                                <p class="font-semibold text-slate-900 dark:text-white">{{ attendance.user.employeeProfile?.departmentRel?.name || 'N/A' }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
                                <User :size="16" class="text-slate-600 dark:text-slate-400" />
                            </div>
                            <div class="flex-1">
                                <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">{{ __('employee_id') }}</p>
                                <p class="font-semibold text-slate-900 dark:text-white">#{{ attendance.user.id }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-200 dark:border-slate-800">
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wide mb-4">{{ __('actions') }}</h3>
                    <div class="space-y-3">
                        <button 
                            @click="updateStatus('approved')"
                            :disabled="attendance.status === 'approved'"
                            class="w-full py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all text-sm"
                            :class="attendance.status === 'approved' ? 'bg-emerald-50 text-emerald-400 cursor-not-allowed dark:bg-emerald-500/10' : 'bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50'"
                        >
                            <CheckCircle2 :size="18"/>
                            {{ __('approve') }}
                        </button>
                        <button 
                            @click="updateStatus('rejected')"
                            :disabled="attendance.status === 'rejected'"
                            class="w-full py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all text-sm"
                            :class="attendance.status === 'rejected' ? 'bg-rose-50 text-rose-400 cursor-not-allowed dark:bg-rose-500/10' : 'bg-rose-500 hover:bg-rose-600 text-white shadow-lg shadow-rose-500/30 hover:shadow-rose-500/50'"
                        >
                            <XCircle :size="18"/>
                            {{ __('reject') }}
                        </button>
                    </div>
                </div>
            </div>

            <!-- Main Content: Stats & Timeline -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Quick Stats Grid -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <div class="bg-white dark:bg-slate-900 p-5 rounded-2xl border border-slate-200 dark:border-slate-800">
                        <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 mb-2">
                            <Clock :size="16" />
                            <span class="text-xs font-bold uppercase tracking-wide">{{ __('total_hours') }}</span>
                        </div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ attendance.total_hours || 0 }}<span class="text-sm text-slate-500">h</span></p>
                    </div>
                    <div class="bg-white dark:bg-slate-900 p-5 rounded-2xl border border-slate-200 dark:border-slate-800">
                        <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 mb-2">
                            <Coffee :size="16" />
                            <span class="text-xs font-bold uppercase tracking-wide">{{ __('break') }}</span>
                        </div>
                        <p class="text-2xl font-bold text-slate-900 dark:text-white">{{ calculateDuration(attendance.total_break_seconds) }}</p>
                    </div>
                    <div class="bg-white dark:bg-slate-900 p-5 rounded-2xl border border-slate-200 dark:border-slate-800">
                        <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 mb-2">
                            <Monitor :size="16" />
                            <span class="text-xs font-bold uppercase tracking-wide">{{ __('mode') }}</span>
                        </div>
                        <p class="text-lg font-bold text-slate-900 dark:text-white capitalize">{{ attendance.work_mode || 'Office' }}</p>
                    </div>
                    <div class="bg-white dark:bg-slate-900 p-5 rounded-2xl border border-slate-200 dark:border-slate-800">
                        <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 mb-2">
                            <MapPin :size="16" />
                            <span class="text-xs font-bold uppercase tracking-wide">{{ __('location') }}</span>
                        </div>
                        <p class="text-xs font-mono text-slate-600 dark:text-slate-400 truncate">{{ attendance.ip_address || 'N/A' }}</p>
                    </div>
                </div>

                <!-- Timeline Card -->
                <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                    <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50">
                        <h3 class="font-bold text-slate-900 dark:text-white flex items-center gap-2">
                            <Clock :size="20" />
                            {{ __('activity_timeline') }}
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="space-y-6">
                            <!-- Clock In Event -->
                            <div class="flex gap-4">
                                <div class="flex flex-col items-center">
                                    <div class="w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shadow-sm">
                                        <LogIn :size="18" />
                                    </div>
                                    <div class="w-0.5 flex-1 bg-gradient-to-b from-slate-200 to-transparent dark:from-slate-700 my-2"></div>
                                </div>
                                <div class="flex-1 pb-6">
                                    <div class="flex items-center justify-between mb-2">
                                        <p class="font-bold text-slate-900 dark:text-white">{{ __('clock_in') }}</p>
                                        <span class="text-sm font-mono font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-1.5 rounded-lg">
                                            {{ formatTime(attendance.clock_in) }}
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">
                                        <span class="capitalize font-medium">{{ attendance.in_type || 'auto' }}</span>
                                    </p>
                                    <div v-if="attendance.in_note" class="mt-3 p-4 bg-slate-50 dark:bg-slate-800 rounded-xl text-sm text-slate-600 dark:text-slate-300 border border-slate-100 dark:border-slate-700">
                                        <p class="italic">"{{ attendance.in_note }}"</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Clock Out Event -->
                            <div class="flex gap-4" v-if="attendance.clock_out">
                                <div class="flex flex-col items-center">
                                    <div class="w-10 h-10 rounded-xl bg-rose-100 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 flex items-center justify-center shadow-sm">
                                        <LogOut :size="18" />
                                    </div>
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-2">
                                        <p class="font-bold text-slate-900 dark:text-white">{{ __('clock_out') }}</p>
                                        <span class="text-sm font-mono font-bold text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 px-3 py-1.5 rounded-lg">
                                            {{ formatTime(attendance.clock_out) }}
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">
                                        <span class="capitalize font-medium">{{ attendance.out_type || 'auto' }}</span>
                                    </p>
                                    <div v-if="attendance.out_note" class="mt-3 p-4 bg-slate-50 dark:bg-slate-800 rounded-xl text-sm text-slate-600 dark:text-slate-300 border border-slate-100 dark:border-slate-700">
                                        <p class="italic">"{{ attendance.out_note }}"</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Active Status -->
                            <div v-else class="flex gap-4">
                                <div class="flex flex-col items-center">
                                    <div class="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 flex items-center justify-center shadow-sm animate-pulse">
                                        <Clock :size="18" />
                                    </div>
                                </div>
                                <div class="flex-1 pt-2">
                                    <p class="font-semibold text-blue-600 dark:text-blue-400">{{ __('currently_active') }}</p>
                                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __('employee_still_clocked_in') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
