<template>
    <Head :title="`${__('asset_details')}: ${asset.name}`" />

    <AdminLayout>
        <div class="space-y-6 animate-fade-in pb-8">
            <!-- Header Section -->
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
                <div class="flex items-center gap-5">
                    <Link :href="admin.assets.index.url()" class="p-2 text-slate-400 hover:text-brand-primary hover:bg-brand-primary/10 rounded-xl transition-all border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-800 shadow-sm hover:scale-105 active:scale-95">
                        <ArrowLeft class="w-5 h-5" />
                    </Link>
                    <div>
                        <div class="flex items-center gap-2.5 mb-1.5 focus-within:ring-2">
                            <span class="px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-500 rounded-lg text-[10px] font-black uppercase tracking-widest border border-slate-200/50 dark:border-slate-700">
                                {{ asset.category?.name }}
                            </span>
                            <span :class="['inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-black uppercase tracking-tight border', getStatusClass(asset.status)]">
                                <div class="w-1.5 h-1.5 rounded-full bg-current mr-2 animate-pulse"></div>
                                {{ __(asset.status) }}
                            </span>
                        </div>
                        <h1 class="text-xl font-black text-slate-900 dark:text-white tracking-tight leading-none">
                            {{ asset.name }}
                        </h1>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <Link 
                        :href="admin.assets.edit.url({ asset: asset.id })" 
                        class="relative overflow-hidden group/btn inline-flex items-center gap-3 px-4 py-2 text-sm font-black text-white bg-slate-900 dark:bg-white dark:text-slate-900 rounded-xl transition-all shadow-xl shadow-slate-900/20 dark:shadow-white/10 hover:-translate-y-0.5 active:translate-y-0"
                    >
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover/btn:animate-shimmer"></div>
                        <Edit2 class="w-4 h-4 relative z-10" />
                        <span class="relative z-10 uppercase tracking-widest text-[11px]">{{ __('edit_asset') }}</span>
                    </Link>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Left Column: Specs & Info -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Technical Specifications Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden">
                        <div class="p-5 border-b border-slate-50 dark:border-slate-700 flex items-center gap-3 bg-slate-50/10">
                            <Monitor class="w-4 h-4 text-brand-primary" />
                            <h2 class="text-base font-bold text-slate-900 dark:text-white">{{ __('asset_specifications') }}</h2>
                        </div>
                        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-y-5 gap-x-8">
                            <div v-for="(val, label) in technicalSpecs" :key="label" class="flex flex-col gap-1">
                                <span class="text-[10px] uppercase tracking-widest font-bold text-slate-400">{{ label }}</span>
                                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">{{ val || __('N/A') }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Assignment History Timeline -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden">
                        <div class="p-5 border-b border-slate-50 dark:border-slate-700 flex items-center justify-between bg-slate-50/10">
                            <div class="flex items-center gap-3">
                                <History class="w-4 h-4 text-brand-primary" />
                                <h2 class="text-base font-bold text-slate-900 dark:text-white">{{ __('custodial_history') }}</h2>
                            </div>
                            <span class="text-[10px] uppercase font-bold text-slate-400">{{ asset.assignments?.length || 0 }} {{ __('events') }}</span>
                        </div>
                        <div class="p-5">
                            <div v-if="asset.assignments?.length" class="space-y-6 relative before:absolute before:inset-y-0 before:left-3.5 before:w-px before:bg-slate-100 dark:before:bg-slate-700">
                                <div v-for="(assignment, index) in asset.assignments" :key="index" class="relative pl-10">
                                    <div class="absolute left-0 top-0.5 w-7 h-7 rounded-full bg-white dark:bg-slate-800 border-2 flex items-center justify-center z-10" :class="assignment.returned_at ? 'border-slate-100 dark:border-slate-700' : 'border-brand-primary'">
                                        <User :size="12" :class="assignment.returned_at ? 'text-slate-400' : 'text-brand-primary'" />
                                    </div>
                                    <div>
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1.5">
                                            <span class="text-sm font-bold text-slate-900 dark:text-white">{{ assignment.user?.name }}</span>
                                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tight">{{ assignment.assigned_at_formatted }}</span>
                                        </div>
                                        <div class="p-3 bg-slate-50 dark:bg-slate-900/50 rounded-lg border border-slate-100 dark:border-slate-800">
                                            <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">{{ assignment.notes || __('no_notes_recorded') }}</p>
                                        </div>
                                        <div v-if="assignment.returned_at" class="flex items-center gap-2 mt-2">
                                            <div class="h-px w-4 bg-slate-200 dark:bg-slate-700"></div>
                                            <span class="text-[10px] font-bold text-slate-400 italic">Returned {{ assignment.returned_at_formatted }}</span>
                                            <span class="text-[10px] px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded font-bold uppercase tracking-tight text-slate-500">{{ assignment.return_condition }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="text-center py-8">
                                <div class="w-12 h-12 rounded-full bg-slate-50 dark:bg-slate-900 flex items-center justify-center mx-auto mb-3">
                                    <History class="w-6 h-6 text-slate-200" />
                                </div>
                                <p class="text-xs text-slate-400">{{ __('no_history_recorded') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Status & Quick Actions -->
                <div class="space-y-6">
                    <!-- Current Status Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden divide-y divide-slate-50 dark:divide-slate-700">
                        <div class="p-5 bg-glass">
                            <span class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-3 block">{{ __('current_status') }}</span>
                            <div v-if="asset.current_assignment" class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-brand-primary/10 flex items-center justify-center border border-brand-primary/20">
                                    <span class="text-sm font-bold text-brand-primary">{{ asset.current_assignment.user?.name.charAt(0) }}</span>
                                </div>
                                <div>
                                    <p class="text-[13px] font-bold text-slate-900 dark:text-white">{{ asset.current_assignment.user?.name }}</p>
                                    <p class="text-[10px] text-slate-400 mt-0.5">{{ __('deployed_since') }} {{ asset.current_assignment.assigned_at_formatted }}</p>
                                </div>
                            </div>
                            <div v-else class="flex flex-col items-center py-2">
                                <div class="w-12 h-12 rounded-full bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center mb-3 border border-emerald-100 dark:border-emerald-500/20">
                                    <ShieldCheck class="w-6 h-6 text-emerald-500" />
                                </div>
                                <p class="text-sm font-bold text-slate-900 dark:text-white">{{ __('ready_for_use') }}</p>
                                <p class="text-[11px] text-slate-400 mt-1 text-center">{{ __('this_asset_is_currently_in_unassigned_inventory') }}</p>
                            </div>
                        </div>

                        <div class="p-5 space-y-3">
                            <button v-if="!asset.current_assignment && asset.status === 'available'" @click="showAssignModal = true" class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 text-white dark:bg-white dark:text-slate-900 text-sm font-bold rounded-xl hover:bg-slate-800 dark:hover:bg-slate-100 transition-all shadow-md shadow-slate-900/20">
                                <UserPlus class="w-4 h-4" />
                                {{ __('assign_now') }}
                            </button>
                            <button v-if="asset.current_assignment" @click="showReturnModal = true" class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 text-white text-sm font-bold rounded-xl hover:bg-amber-600 transition-all shadow-md shadow-amber-500/20">
                                <RotateCcw class="w-4 h-4" />
                                {{ __('recall_asset') }}
                            </button>
                        </div>

                        <div class="p-5">
                            <div class="flex items-center gap-2 mb-4">
                                <div class="w-1 h-4 bg-brand-primary rounded-full"></div>
                                <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">{{ __('procurement_details') }}</h3>
                            </div>
                            <div class="space-y-4">
                                <div class="flex justify-between items-center group">
                                    <span class="text-[11px] font-bold text-slate-400">{{ __('purchase_date') }}</span>
                                    <span class="text-[11px] font-bold text-slate-700 dark:text-slate-200">{{ asset.purchase_date_formatted }}</span>
                                </div>
                                <div class="flex justify-between items-center group">
                                    <span class="text-[11px] font-bold text-slate-400">{{ __('warranty_expiry') }}</span>
                                    <span class="text-[11px] font-bold text-slate-700 dark:text-slate-200">{{ asset.warranty_expiry_formatted || __('N/A') }}</span>
                                </div>
                                <div class="flex justify-between items-center group">
                                    <span class="text-[11px] font-bold text-slate-400">{{ __('initial_condition') }}</span>
                                    <span class="text-[11px] font-bold text-sky-500 uppercase tracking-widest">{{ asset.condition }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Guidelines Card (Compact) -->
                    <div class="bg-brand-primary/5 dark:bg-brand-primary/10 rounded-xl border border-brand-primary/10 p-5">
                        <div class="flex items-center gap-2 mb-3">
                            <ShieldAlert class="w-4 h-4 text-brand-primary" />
                            <h3 class="text-xs font-bold text-brand-primary uppercase tracking-widest">{{ __('usage_guidelines') }}</h3>
                        </div>
                        <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed font-medium">
                            {{ __('ensure_all_assets_are_handled_according_to_company_hardware_policy') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Modals -->
            <Modal :show="showAssignModal" @close="showAssignModal = false" max-width="md">
                <div class="p-5">
                    <h2 class="text-lg font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                        <UserPlus class="w-5 h-5 text-brand-primary" />
                        {{ __('assign_asset') }}
                    </h2>
                    <form @submit.prevent="assignAsset" class="space-y-5">
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('select_employee') }}</label>
                            <select v-model="assignForm.user_id" class="w-full px-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all shadow-sm" required>
                                <option value="">{{ __('select_employee') }}</option>
                                <option v-for="user in users" :key="user.id" :value="user.id">{{ user.name }} ({{ user.email }})</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('assignment_date') }}</label>
                            <input v-model="assignForm.assigned_at" type="date" class="w-full px-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all shadow-sm" required />
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('notes') }}</label>
                            <textarea v-model="assignForm.notes" rows="3" class="w-full px-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all shadow-sm" :placeholder="__('handover_notes')"></textarea>
                        </div>
                        <div class="flex justify-end gap-3 pt-4">
                            <button type="button" @click="showAssignModal = false" class="px-4 py-2 text-xs font-bold text-slate-500 hover:text-slate-900 transition-colors">{{ __('cancel') }}</button>
                            <button type="submit" :disabled="assignForm.processing" class="px-4 py-2 bg-slate-900 text-white dark:bg-white dark:text-slate-900 text-sm font-bold rounded-xl hover:bg-slate-800 dark:hover:bg-slate-100 transition-all shadow-md shadow-slate-900/20 disabled:opacity-50">
                                {{ __('confirm_assignment') }}
                            </button>
                        </div>
                    </form>
                </div>
            </Modal>

            <Modal :show="showReturnModal" @close="showReturnModal = false" max-width="md">
                <div class="p-5">
                    <h2 class="text-lg font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                        <RotateCcw class="w-5 h-5 text-amber-500" />
                        {{ __('recall_asset') }}
                    </h2>
                    <form @submit.prevent="returnAsset" class="space-y-5">
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('return_date') }}</label>
                            <input v-model="returnForm.returned_at" type="date" class="w-full px-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all shadow-sm" required />
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('return_condition') }}</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button v-for="cond in ['pristine', 'good', 'broken']" :key="cond" type="button" @click="returnForm.return_condition = cond" :class="['px-3 py-2 text-[10px] font-bold rounded-lg border transition-all uppercase tracking-widest', returnForm.return_condition === cond ? 'bg-slate-900 dark:bg-white border-slate-900 dark:border-white text-white dark:text-slate-900 shadow-md shadow-slate-900/20' : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-500']">
                                    {{ cond }}
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-1.5 px-1">{{ __('notes') }}</label>
                            <textarea v-model="returnForm.notes" rows="3" class="w-full px-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all shadow-sm" :placeholder="__('return_notes')"></textarea>
                        </div>
                        <div class="flex justify-end gap-3 pt-4">
                            <button type="button" @click="showReturnModal = false" class="px-4 py-2 text-xs font-bold text-slate-500 hover:text-slate-900 transition-colors">{{ __('cancel') }}</button>
                            <button type="submit" :disabled="returnForm.processing" class="px-4 py-2 bg-amber-500 text-white text-sm font-bold rounded-xl hover:bg-amber-600 transition-all shadow-md shadow-amber-500/20 disabled:opacity-50">
                                {{ __('confirm_recall') }}
                            </button>
                        </div>
                    </form>
                </div>
            </Modal>
        </div>
    </AdminLayout>
</template>

<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import Modal from '@/Components/Common/Modal.vue';
import { 
    ArrowLeft, Edit2, HardDrive, User, Calendar, 
    History, Monitor, ShieldCheck, ShieldAlert, 
    RotateCcw, UserPlus
} from 'lucide-vue-next';
import { ref, computed } from 'vue';
import admin from '@/routes/admin';
import { wTrans } from '@/Core/i18n';

const props = defineProps<{
    asset: any;
    users: any[];
}>();

const showAssignModal = ref(false);
const showReturnModal = ref(false);

const assignForm = useForm({
    asset_id: props.asset.id,
    user_id: '',
    assigned_at: new Date().toISOString().split('T')[0],
    notes: ''
});

const returnForm = useForm({
    returned_at: new Date().toISOString().split('T')[0],
    return_condition: 'good',
    notes: ''
});

const technicalSpecs = computed(() => ({
    [wTrans('model_name')]: props.asset.name,
    [wTrans('serial_number_full')]: props.asset.serial_number,
    [wTrans('category')]: props.asset.category?.name,
    [wTrans('initial_condition')]: props.asset.condition,
    [wTrans('warranty_status')]: props.asset.warranty_expiry ? (new Date(props.asset.warranty_expiry) > new Date() ? wTrans('in_warranty') : wTrans('warranty_expired')) : wTrans('warranty_not_provided')
}));

const assignAsset = () => {
    assignForm.post(admin.assets.assignments.store.url(), {
        onSuccess: () => {
            showAssignModal.value = false;
            assignForm.reset('user_id', 'notes');
        }
    });
};

const returnAsset = () => {
    returnForm.post(admin.assets.assignments.return.url({ assignment: props.asset.current_assignment.id }), {
        onSuccess: () => {
            showReturnModal.value = false;
            returnForm.reset();
        }
    });
};

const getStatusClass = (status: string) => {
    switch (status) {
        case 'available': return 'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20';
        case 'assigned': return 'bg-sky-50 text-sky-700 border-sky-100 dark:bg-sky-500/10 dark:text-sky-400 dark:border-sky-500/20';
        case 'maintenance': return 'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20';
        case 'retired': return 'bg-slate-50 text-slate-500 border-slate-200 dark:bg-slate-700/50 dark:text-slate-400 dark:border-slate-600';
        default: return 'bg-slate-50 text-slate-500 border-slate-200';
    }
};
</script>

<style scoped>
.bg-glass {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(10px);
}
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>
