<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import { 
    Package, HardDrive, Calendar, 
    Info, Clock, ShieldCheck
} from 'lucide-vue-next';

const props = defineProps<{
    assignments: any[];
}>();
</script>

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

    <EmployeeLayout>
        <div class="space-y-6 animate-fade-in max-w-5xl mx-auto">
            <!-- Header -->
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">{{ __('my_assets') }}</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __('view_all_hardware_and_equipment_assigned_to_you') }}</p>
                </div>
                <div class="p-3 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 rounded-2xl">
                    <ShieldCheck :size="24" />
                </div>
            </div>

            <!-- Assets Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div 
                    v-for="assignment in assignments" 
                    :key="assignment.id"
                    class="bg-white dark:bg-slate-900 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-800 relative overflow-hidden group"
                >
                    <div class="absolute -right-4 -top-4 w-32 h-32 bg-slate-50 dark:bg-slate-800/50 rounded-full group-hover:scale-110 transition-transform duration-500"></div>
                    
                    <div class="relative z-10">
                        <div class="flex items-start justify-between mb-8">
                            <div class="w-14 h-14 rounded-2xl bg-[var(--brand-primary)]/10 text-[var(--brand-primary)] flex items-center justify-center">
                                <HardDrive :size="28" />
                            </div>
                            <div class="px-3 py-1 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 text-[10px] font-black uppercase tracking-widest rounded-lg border border-emerald-100 dark:border-emerald-500/20">
                                {{ assignment.asset.status === 'assigned' ? __('active_assignment') : __('returned') }}
                            </div>
                        </div>

                        <div class="space-y-1 mb-8">
                            <h3 class="text-xl font-black text-slate-900 dark:text-white">{{ assignment.asset.name }}</h3>
                            <p class="text-xs font-mono text-slate-400 font-bold uppercase tracking-wider">{{ assignment.asset.serial_number }}</p>
                            <p class="text-xs text-slate-500 mt-2">{{ assignment.asset.category?.name }}</p>
                        </div>

                        <div class="grid grid-cols-2 gap-4 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl">
                            <div class="space-y-1">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('assigned_on') }}</p>
                                <p class="text-xs font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                                    <Clock :size="12" class="text-slate-400" />
                                    {{ assignment.assigned_at_formatted || assignment.assigned_at }}
                                </p>
                            </div>
                            <div class="space-y-1" v-if="assignment.returned_at">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('returned_on') }}</p>
                                <p class="text-xs font-bold text-emerald-600 flex items-center gap-1.5">
                                    <Calendar :size="12" class="text-emerald-400" />
                                    {{ assignment.returned_at_formatted || assignment.returned_at }}
                                </p>
                            </div>
                            <div class="space-y-1" v-else>
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('warranty') }}</p>
                                <p class="text-xs font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                                    <Info :size="12" class="text-slate-400" />
                                    {{ assignment.asset.warranty_expiry_formatted || __('no_warranty') }}
                                </p>
                            </div>
                        </div>

                        <div v-if="assignment.notes" class="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800">
                             <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">{{ __('handover_notes') }}</p>
                             <p class="text-xs text-slate-500 leading-relaxed italic">{{ assignment.notes }}</p>
                        </div>
                    </div>
                </div>

                <div v-if="assignments.length === 0" class="col-span-full py-20 text-center bg-white dark:bg-slate-900 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm">
                    <div class="w-20 h-20 bg-slate-50 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
                        <Package :size="40" class="text-slate-200" />
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('no_assets_assigned') }}</h3>
                    <p class="text-sm text-slate-500 mt-1">{{ __('you_do_not_have_any_company_assets_assigned_to_your_profile') }}</p>
                </div>
            </div>
        </div>
    </EmployeeLayout>
</template>
