<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { 
    Users, 
    Plus, 
    Search,
    Filter,
    MoreVertical,
    FileText,
    Trash2,
    Edit
} from 'lucide-vue-next';
import { ref, watch } from 'vue';
import { debounce } from 'lodash';
import { index, create, destroy, edit, show } from '@/routes/admin/employees';
import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';

const props = defineProps<{
    employees: {
        data: any[];
        links: any[];
        meta: any;
    };
    departments: any[];
    filters: {
        search?: string;
        department?: string;
        status?: string;
    };
}>();

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

// Delete Confirmation
const showDeleteModal = ref(false);
const selectedEmployeeId = ref<number | null>(null);
const isDeleting = ref(false);

const handleSearch = debounce(() => {
    router.get(index.url(), { 
        search: search.value,
        department: department.value,
        status: status.value 
    }, { preserveState: true, preserveScroll: true });
}, 300);

watch([department, status], () => {
    handleSearch();
});

const handleDelete = (id: number) => {
    selectedEmployeeId.value = id;
    showDeleteModal.value = true;
};

const confirmDelete = () => {
    if (!selectedEmployeeId.value) return;
    
    isDeleting.value = true;
    router.delete(destroy.url(selectedEmployeeId.value), {
        onFinish: () => {
            isDeleting.value = false;
            showDeleteModal.value = false;
            selectedEmployeeId.value = null;
        }
    });
};
</script>

<template>
    <Head title="Employee Directory" />
    <AdminLayout>
        <div class="space-y-6">
            <!-- Header -->
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h1 class="text-xl font-extrabold text-slate-900 dark:text-white">{{ __('Employee Directory') }}</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __('Manage your team members and their employment details.') }}</p>
                </div>
                <Link :href="create.url()" 
                    class="inline-flex items-center px-4 py-2 bg-primary-600 text-white text-sm font-bold rounded-xl hover:bg-primary-700 transition-colors shadow-sm shadow-primary-600/20">
                    <Plus class="w-4 h-4 mr-2" />
                    {{ __('Add Employee') }}
                </Link>
            </div>

            <!-- Filters -->
            <div class="bg-white dark:bg-slate-800 rounded-[1.25rem] p-4 shadow-sm border border-slate-100 dark:border-slate-700">
                <div class="flex flex-col md:flex-row items-center justify-between gap-3">
                    <div class="relative w-full md:max-w-md">
                        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
                        <input 
                            v-model="search"
                            @input="handleSearch"
                            type="text" 
                            :placeholder="__('Search name, email, or title...')" 
                            class="w-full pl-9 pr-4 py-2 text-sm border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900 rounded-lg focus:ring-primary-500 focus:border-primary-500 transition-all dark:text-white dark:placeholder-slate-400"
                        >
                    </div>
                    <div class="flex flex-col md:flex-row gap-3 w-full md:w-auto">
                        <div class="w-full md:w-48">
                            <select v-model="department" class="w-full px-4 py-2 text-sm border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900 rounded-lg focus:ring-primary-500 focus:border-primary-500 transition-all dark:text-white">
                                <option value="">{{ __('All Departments') }}</option>
                                <option v-for="dept in departments" :key="dept.id" :value="dept.id">{{ dept.name }}</option>
                            </select>
                        </div>
                        <div class="w-full md:w-36">
                            <select v-model="status" class="w-full px-4 py-2 text-sm border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900 rounded-lg focus:ring-primary-500 focus:border-primary-500 transition-all dark:text-white">
                                <option value="">{{ __('All Status') }}</option>
                                <option value="active">{{ __('Active') }}</option>
                                <option value="inactive">{{ __('Inactive') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- List -->
            <div class="bg-white dark:bg-slate-800 rounded-[1.25rem] shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left">
                        <thead class="text-[10px] uppercase tracking-widest text-slate-500 dark:text-slate-400 bg-slate-50/50 dark:bg-slate-700/50 border-b border-slate-100 dark:border-slate-700">
                            <tr>
                                <th class="px-6 py-4 font-bold">{{ __('Employee') }}</th>
                                <th class="px-6 py-4 font-bold">{{ __('Role & Dept') }}</th>
                                <th class="px-6 py-4 font-bold">{{ __('Contact') }}</th>
                                <th class="px-6 py-4 font-bold">{{ __('Status') }}</th>
                                <th class="px-6 py-4 font-bold text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                            <tr v-for="employee in employees.data" :key="employee.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-700/50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center overflow-hidden shrink-0">
                                            <img v-if="employee.profile_image" :src="'/storage/' + employee.profile_image" :alt="employee.name" class="w-full h-full object-cover">
                                            <span v-else class="text-xs font-bold text-slate-500 dark:text-slate-400">{{ employee.name.substring(0,2).toUpperCase() }}</span>
                                        </div>
                                        <div>
                                            <div class="font-bold text-slate-900 dark:text-white">{{ employee.name }}</div>
                                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ employee.email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="font-medium text-slate-900 dark:text-white">{{ employee.employee_profile?.job_title || __('No Title') }}</div>
                                    <div class="text-xs text-slate-500 dark:text-slate-400">{{ employee.employee_profile?.department || __('No Dept') }}</div>
                                </td>
                                <td class="px-6 py-4">
                                    <div v-if="employee.employee_profile?.phone">{{ employee.employee_profile.phone }}</div>
                                    <div v-else class="text-slate-400 italic">{{ __('No phone') }}</div>
                                </td>
                                <td class="px-6 py-4">
                                    <span :class="[
                                        'px-2.5 py-1 rounded-full text-xs font-bold border',
                                        employee.status === 'active' 
                                            ? 'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-500/20 dark:text-emerald-400 dark:border-emerald-500/20' 
                                            : 'bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-700 dark:text-slate-400 dark:border-slate-600'
                                    ]">
                                        {{ __(employee.status.charAt(0).toUpperCase() + employee.status.slice(1)) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <Link :href="show.url(employee.id)" class="p-2 text-slate-400 hover:text-primary-600 transition-colors">
                                            <FileText class="w-4 h-4" />
                                        </Link>
                                        <Link :href="edit.url(employee.id)" class="p-2 text-slate-400 hover:text-primary-600 transition-colors">
                                            <Edit class="w-4 h-4" />
                                        </Link>
                                        <button @click="handleDelete(employee.id)" class="p-2 text-slate-400 hover:text-red-600 transition-colors">
                                            <Trash2 class="w-4 h-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="employees.data.length === 0">
                                <td colspan="5" class="px-6 py-12 text-center text-slate-500">
                                    {{ __('No employees found matching your criteria.') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div v-if="employees.links.length > 3" class="px-6 py-4 border-t border-slate-100 dark:border-slate-700 flex justify-center">
                    <div class="flex gap-1">
                        <Component 
                            :is="link.url ? Link : 'span'" 
                            v-for="link in employees.links" 
                            :key="link.label"
                            :href="link.url"
                            v-html="link.label"
                            :class="[
                                'px-3 py-1 text-xs rounded-lg transition-colors',
                                link.active 
                                    ? 'bg-primary-50 text-primary-700 font-bold' 
                                    : link.url ? 'text-slate-600 hover:bg-slate-50' : 'text-slate-400'
                            ]"
                        />
                    </div>
                </div>
            </div>

            <!-- Delete Confirmation Modal -->
            <ConfirmationModal 
                :show="showDeleteModal"
                :title="__('Delete Employee')"
                :message="__('Are you sure you want to delete this employee? This action cannot be undone.')"
                :confirm-text="__('Delete Employee')"
                type="danger"
                :processing="isDeleting"
                @close="showDeleteModal = false"
                @confirm="confirmDelete"
            />
        </div>
    </AdminLayout>
</template>
