<script setup lang="ts">
import { trans as __ } from '@/Core/i18n';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { edit, index } from '@/routes/admin/employees';
import { Head, Link } from '@inertiajs/vue3';
import { ArrowLeft, Briefcase, Calendar, Download, Edit, FileText, Mail, MapPin, Phone, Shield } from 'lucide-vue-next';

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

const formatDate = (date: string) => {
    if (!date) return __('N/A');
    return new Date(date).toLocaleDateString();
};

const isImage = (path: string | null) => {
    if (!path) return false;
    const ext = path.split('.').pop()?.toLowerCase();
    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext || '');
};

const isPdf = (path: string | null) => {
    if (!path) return false;
    const ext = path.split('.').pop()?.toLowerCase();
    return ext === 'pdf';
};
</script>

<template>
    <Head :title="employee.name" />
    <AdminLayout>
        <div class="mx-auto max-w-4xl space-y-6">
            <!-- Header -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <Link
                        :href="index.url()"
                        class="rounded-lg border border-slate-200 bg-white p-1.5 text-slate-500 transition-colors hover:border-slate-300 hover:text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:text-slate-200"
                    >
                        <ArrowLeft class="h-3.5 w-3.5" />
                    </Link>
                    <div>
                        <h1 class="text-lg font-extrabold text-slate-900 dark:text-white">{{ employee.name }}</h1>
                        <p class="text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-slate-500">{{ __('Employee Profile') }}</p>
                    </div>
                </div>
                <Link
                    :href="edit.url(employee.id)"
                    class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-3.5 py-1.5 text-[11px] font-bold text-slate-600 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                >
                    <Edit class="mr-1.5 h-3 w-3" />
                    {{ __('Edit Profile') }}
                </Link>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                <!-- Info Card -->
                <div class="space-y-6 md:col-span-1">
                    <div
                        class="flex flex-col items-center rounded-[1.25rem] border border-slate-100 bg-white p-5 text-center shadow-sm dark:border-slate-700 dark:bg-slate-800"
                    >
                        <div
                            class="mb-3 flex h-20 w-20 items-center justify-center overflow-hidden rounded-full bg-slate-100 ring-4 ring-slate-50 dark:bg-slate-700 dark:ring-slate-800/50"
                        >
                            <img
                                v-if="employee.profile_image"
                                :src="'/storage/' + employee.profile_image"
                                :alt="employee.name"
                                class="h-full w-full object-cover"
                            />
                            <span v-else class="text-xl font-bold text-slate-500 dark:text-slate-400">{{
                                employee.name.substring(0, 2).toUpperCase()
                            }}</span>
                        </div>
                        <h2 class="text-base font-bold text-slate-900 dark:text-white">{{ employee.name }}</h2>
                        <p class="text-[11px] text-slate-500 dark:text-slate-400">{{ employee.employee_profile?.job_title || __('No Title') }}</p>
                        <div class="mt-4 flex gap-2">
                            <span
                                :class="[
                                    'rounded-full border px-3 py-1 text-xs font-bold',
                                    employee.status === 'active'
                                        ? 'border-emerald-100 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400'
                                        : 'border-slate-200 bg-slate-100 text-slate-600 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-400',
                                ]"
                            >
                                {{ employee.status === 'active' ? __('Active') : __('Inactive') }}
                            </span>
                        </div>
                    </div>

                    <div class="space-y-3.5 rounded-[1.25rem] border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                        <h3 class="text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-slate-500">{{ __('Contact Info') }}</h3>
                        <div class="flex items-center gap-3 text-sm">
                            <Mail class="h-4 w-4 text-slate-400" />
                            <a :href="'mailto:' + employee.email" class="overflow-hidden text-ellipsis text-primary-600 hover:underline">{{
                                employee.email
                            }}</a>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <Phone class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                            <span class="dark:text-slate-300">{{ employee.employee_profile?.phone || __('N/A') }}</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <Mail class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                            <span class="dark:text-slate-300">{{ employee.employee_profile?.personal_email || __('N/A') }}</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <Phone class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                            <span class="dark:text-slate-300">{{ employee.employee_profile?.personal_phone || __('N/A') }}</span>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <Calendar class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                            <span class="dark:text-slate-300">{{ formatDate(employee.employee_profile?.date_of_birth) }}</span>
                        </div>
                        <div class="flex items-start gap-3 text-sm">
                            <MapPin class="mt-0.5 h-4 w-4 text-slate-400 dark:text-slate-500" />
                            <span class="dark:text-slate-300">{{ employee.employee_profile?.address || __('N/A') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Details -->
                <div class="space-y-6 md:col-span-2">
                    <!-- Employment -->
                    <div class="rounded-[1.25rem] border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                        <h3 class="mb-5 flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
                            <span class="h-4 w-1 rounded-full bg-blue-500"></span>
                            {{ __('Employment Details') }}
                        </h3>
                        <div class="grid grid-cols-2 gap-x-4 gap-y-6">
                            <div>
                                <label class="mb-1 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">{{
                                    __('Department')
                                }}</label>
                                <div class="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-200">
                                    <Briefcase class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                                    {{ employee.employee_profile?.department || __('N/A') }}
                                </div>
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">{{
                                    __('Joining Date')
                                }}</label>
                                <div class="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-200">
                                    <Calendar class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                                    {{ formatDate(employee.employee_profile?.joining_date) }}
                                </div>
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">{{
                                    __('Manager')
                                }}</label>
                                <div class="flex items-center gap-2 font-medium text-slate-900 dark:text-slate-200">
                                    <Shield class="h-4 w-4 text-slate-400 dark:text-slate-500" />
                                    {{ employee.employee_profile?.manager?.name || __('None') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Documents -->
                    <div class="rounded-[1.25rem] border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                        <h3 class="mb-5 flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
                            <span class="h-4 w-1 rounded-full bg-purple-500"></span>
                            {{ __('Documents') }}
                        </h3>
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                            <div
                                v-for="(path, label) in {
                                    'ID Card': employee.employee_profile?.id_card_path,
                                    Contract: employee.employee_profile?.contract_path,
                                    'Tax Form': employee.employee_profile?.tax_form_path,
                                }"
                                :key="label"
                                class="flex min-h-[180px] flex-col gap-2 rounded-xl border border-slate-200 p-3 dark:border-slate-700"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <FileText class="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
                                        <span class="text-[10px] font-extrabold tracking-wider text-slate-600 uppercase dark:text-slate-400">{{
                                            label
                                        }}</span>
                                    </div>
                                    <a
                                        v-if="path"
                                        :href="'/storage/' + path"
                                        target="_blank"
                                        class="rounded-lg p-1 text-primary-600 transition-colors hover:bg-primary-50 dark:hover:bg-primary-500/10"
                                    >
                                        <Download class="h-3.5 w-3.5" />
                                    </a>
                                </div>
                                <div
                                    v-if="path"
                                    class="flex h-32 w-full items-center justify-center overflow-hidden rounded-xl border border-slate-100 bg-slate-50 dark:border-slate-700 dark:bg-slate-900"
                                >
                                    <img v-if="isImage(path)" :src="'/storage/' + path" class="h-full w-full object-contain" />
                                    <embed v-else-if="isPdf(path)" :src="'/storage/' + path" type="application/pdf" class="h-full w-full" />
                                    <div v-else class="flex flex-col items-center">
                                        <FileText class="mb-1 h-8 w-8 text-primary-500" />
                                        <span class="text-[10px] font-bold tracking-tight text-slate-400 uppercase">{{ __('Document') }}</span>
                                    </div>
                                </div>
                                <div
                                    v-else
                                    class="flex h-32 w-full items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900"
                                >
                                    <span class="text-[10px] font-bold tracking-tight text-slate-400 uppercase italic dark:text-slate-500">{{
                                        __('No file attached')
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Emergency Contact -->
                    <div class="rounded-[1.25rem] border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                        <h3 class="mb-5 flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
                            <span class="h-4 w-1 rounded-full bg-red-500"></span>
                            {{ __('Emergency Contact') }}
                        </h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">{{
                                    __('Name')
                                }}</label>
                                <div class="font-medium text-slate-900 dark:text-slate-200">
                                    {{ employee.employee_profile?.emergency_contact_name || __('N/A') }}
                                </div>
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">{{
                                    __('Phone')
                                }}</label>
                                <div class="font-medium text-slate-900 dark:text-slate-200">
                                    {{ employee.employee_profile?.emergency_contact_phone || __('N/A') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
