<script setup lang="ts">
import { Search, Filter, Download, Eye, X, Clock, Calendar, MapPin, FileText } from 'lucide-vue-next';
import { ref, watch } from 'vue';
import { router } from '@inertiajs/vue3';
import Modal from '@/Components/Common/Modal.vue';

const props = defineProps<{
    history: any[];
    filters?: any;
}>();

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

watch(startDate, (value) => {
    router.get('/employee/dashboard', { date: value }, {
        preserveState: true,
        replace: true,
        preserveScroll: true
    });
});

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 downloadExport = () => {
    const url = '/employee/attendance/export?format=csv';
    window.location.href = url;
};

const selectedLog = ref<any>(null);
const showDetailsModal = ref(false);

const openDetails = (log: any) => {
    selectedLog.value = log;
    showDetailsModal.value = true;
};
</script>

<template>
    <section class="rounded-xl border bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden transition-all duration-300">
        <div class="px-6 py-4 border-b border-inherit flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <h3 class="font-bold text-slate-800 dark:text-slate-100">{{ __('log_history') }}</h3>
                <span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-[10px] font-bold text-slate-500">{{ new Date().toLocaleDateString([], { month: 'short', year: 'numeric' }).toUpperCase() }}</span>
            </div>
            <div class="flex items-center gap-2">
                <div class="relative">
                    <Calendar class="absolute start-2.5 top-1/2 -translate-y-1/2 text-slate-400" :size="14" />
                    <input 
                        type="date" 
                        v-model="startDate"
                        class="ps-8 pe-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 bg-transparent text-xs focus:ring-1 focus:ring-emerald-500 outline-none w-40 text-slate-700 dark:text-slate-200 placeholder-slate-400" 
                    />
                </div>
                <button class="p-1.5 rounded border border-slate-200 dark:border-slate-700 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                    <Filter :size="16" />
                </button>
                <button @click="downloadExport" class="flex items-center gap-2 px-3 py-1.5 bg-[var(--brand-primary)] text-white rounded-md text-xs font-bold hover:opacity-90 transition-opacity shadow-sm">
                    <Download :size="14" /> {{ __('export') }}
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-start border-collapse">
                <thead>
                    <tr class="text-[10px] uppercase tracking-widest font-black border-b text-slate-400 border-slate-100 bg-slate-50/50 dark:text-slate-500 dark:border-slate-800 dark:bg-slate-800/20">
                        <th class="px-6 py-3 text-start">{{ __('date') }}</th>
                        <th class="px-6 py-3 text-start">{{ __('shift_details') }}</th>
                        <th class="px-6 py-3 text-start">{{ __('clock_in') }}</th>
                        <th class="px-6 py-3 text-start">{{ __('clock_out') }}</th>
                        <th class="px-6 py-3 text-start">{{ __('break') }}</th>
                        <th class="px-6 py-3 font-bold text-start">{{ __('total_work') }}</th>
                        <th class="px-6 py-3 text-start">{{ __('status') }}</th>
                        <th class="px-6 py-3 text-end">{{ __('action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y text-xs divide-slate-100 dark:divide-slate-800">
                    <tr v-for="row in history" :key="row.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-800/50 transition-colors">
                        <td class="px-6 py-4 font-bold text-slate-700 dark:text-slate-200">{{ formatDate(row.date) }}</td>
                        <td class="px-6 py-4 text-slate-500 font-medium">09:00 - 18:00</td>
                        <td class="px-6 py-4 font-mono text-slate-600 dark:text-slate-300">
                            {{ formatTime(row.clock_in) }}
                            <div v-if="row.is_late" class="mt-1 flex items-center gap-1.5">
                                <span class="px-1.5 py-0.5 rounded text-[10px] bg-rose-100 text-rose-600 font-bold uppercase tracking-wide">{{ __('late') }}</span>
                                <span class="text-[10px] font-bold text-rose-500">{{ row.late_time }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 font-mono text-slate-600 dark:text-slate-300">
                            {{ formatTime(row.clock_out) }}
                            <div v-if="row.is_early_out" class="mt-1 flex items-center gap-1.5">
                                <span class="px-1.5 py-0.5 rounded text-[10px] bg-orange-100 text-orange-600 font-bold uppercase tracking-wide">{{ __('early') }}</span>
                                <span class="text-[10px] font-bold text-orange-500">{{ row.early_out_time }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-slate-500">{{ row.total_break_seconds ? Math.floor(row.total_break_seconds / 60) + 'm' : '-' }}</td>
                        <td class="px-6 py-4 font-bold text-slate-900 dark:text-slate-100">{{ row.total_hours }}h</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold uppercase border"
                                :class="{
                                    'bg-emerald-50 text-emerald-600 border-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20': row.anomaly_status === 'approved_admin' || (!row.anomaly_status && row.status === 'approved'),
                                    'bg-rose-50 text-rose-600 border-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:border-rose-500/20': row.anomaly_status === 'rejected_manager' || row.anomaly_status === 'rejected_admin' || row.status === 'rejected',
                                    'bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-500/10 dark:text-orange-400 dark:border-orange-500/20': row.anomaly_status === 'pending_manager',
                                    'bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20': row.anomaly_status === 'pending_admin' || row.anomaly_status === 'approved_manager',
                                    'bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700': !row.anomaly_status && row.status === 'pending'
                                }"
                            >
                                {{ __(row.anomaly_status || row.status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-end">
                            <button @click="selectedLog = row; showDetailsModal = true" class="p-1.5 rounded hover:bg-sky-50 dark:hover:bg-sky-500/10 text-sky-500 transition-colors" :title="__('view_details')">
                                <Eye :size="16" />
                            </button>
                        </td>
                    </tr>
                    <tr v-if="history.length === 0">
                        <td colspan="8" class="px-6 py-8 text-center text-slate-400 italic">{{ __('no_history_found') }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Details Modal -->
        <Modal :show="showDetailsModal" @close="showDetailsModal = false" max-width="lg">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('attendance_details') }}</h3>
                    <button @click="showDetailsModal = false" class="text-slate-400 hover:text-slate-600 transition-colors">
                        <X :size="20" />
                    </button>
                </div>

                <div v-if="selectedLog" class="space-y-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700">
                            <div class="flex items-center gap-2 text-slate-400 mb-1">
                                <Calendar :size="14" />
                                <span class="text-[10px] font-bold uppercase tracking-wider">{{ __('date') }}</span>
                            </div>
                            <div class="text-sm font-bold text-slate-900 dark:text-white">{{ formatDate(selectedLog.date) }}</div>
                        </div>
                        <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700">
                            <div class="flex items-center gap-2 text-slate-400 mb-1">
                                <Clock :size="14" />
                                <span class="text-[10px] font-bold uppercase tracking-wider">{{ __('total_hours') }}</span>
                            </div>
                            <div class="text-sm font-black text-sky-600 dark:text-sky-400">{{ selectedLog.total_hours }}h</div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 flex items-center justify-center">
                                <Clock :size="18" />
                            </div>
                            <div>
                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('clock_in') }}</p>
                                <p class="text-sm font-bold text-slate-900 dark:text-white">{{ formatTime(selectedLog.clock_in) }}</p>
                                <p class="text-[10px] text-slate-500 mt-0.5 capitalize">{{ selectedLog.in_type || 'auto' }}</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-rose-100 dark:bg-rose-500/20 text-rose-600 flex items-center justify-center">
                                <Clock :size="18" />
                            </div>
                            <div>
                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('clock_out') }}</p>
                                <p class="text-sm font-bold text-slate-900 dark:text-white">{{ formatTime(selectedLog.clock_out) || '-' }}</p>
                                <p class="text-[10px] text-slate-500 mt-0.5 capitalize">{{ selectedLog.out_type || 'auto' }}</p>
                            </div>
                        </div>
                    </div>

                    <div v-if="selectedLog.work_mode || selectedLog.in_note" class="pt-4 border-t border-slate-100 dark:border-slate-800 space-y-4">
                        <div v-if="selectedLog.work_mode" class="flex items-center gap-3">
                            <MapPin :size="16" class="text-slate-400" />
                            <span class="text-xs font-medium text-slate-600 dark:text-slate-400 capitalize">{{ selectedLog.work_mode }}</span>
                        </div>
                        <div v-if="selectedLog.in_note" class="flex items-start gap-3">
                            <FileText :size="16" class="text-slate-400 mt-0.5" />
                            <p class="text-xs italic text-slate-500 dark:text-slate-400 leading-relaxed">"{{ selectedLog.in_note }}"</p>
                        </div>
                    </div>
                </div>

                <div class="mt-8 flex justify-end">
                    <button @click="showDetailsModal = false" class="px-6 py-2.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all">
                        {{ __('close') }}
                    </button>
                </div>
            </div>
        </Modal>
    </section>
</template>
