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

    <AdminLayout>
        <div class="animate-fade-in mx-auto max-w-4xl space-y-6 pb-8">
            <!-- Header -->
            <div class="flex items-center gap-4">
                <Link
                    :href="admin.assets.index.url()"
                    class="hover:text-brand-primary hover:bg-brand-primary/10 rounded-xl border border-slate-100 bg-white p-2 text-slate-400 shadow-sm transition-all dark:border-slate-800 dark:bg-slate-800"
                >
                    <ArrowLeft class="h-5 w-5" />
                </Link>
                <div>
                    <h1 class="text-xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                        {{ __('inventory_protocol') }}
                    </h1>
                    <p class="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
                        {{ __('register_company_hardware') }}
                    </p>
                </div>
            </div>

            <form @submit.prevent="submit" class="space-y-6">
                <!-- Primary Asset Information -->
                <div
                    class="overflow-hidden rounded-xl border border-slate-100 bg-white shadow-sm ring-1 ring-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:ring-white/5"
                >
                    <div class="flex items-center gap-3 border-b border-slate-50 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-800/20">
                        <div class="bg-brand-primary/10 rounded-lg p-2">
                            <HardDrive class="text-brand-primary h-5 w-5" />
                        </div>
                        <h2 class="text-base font-extrabold tracking-tight text-slate-900 dark:text-white">{{ __('asset_specification') }}</h2>
                    </div>

                    <div class="space-y-6 p-5">
                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase">
                                    <Tag class="h-3 w-3" />
                                    {{ __('nomenclature') }}
                                </label>
                                <div class="group relative">
                                    <input
                                        v-model="form.name"
                                        type="text"
                                        :placeholder="__('e_g_macbook_pro_m3_max_32gb')"
                                        class="focus:ring-brand-primary/10 focus:border-brand-primary w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium shadow-inner transition-all duration-300 placeholder:text-slate-400 focus:ring-4 dark:border-slate-800 dark:bg-slate-950 dark:text-white"
                                        required
                                    />
                                    <div
                                        class="border-brand-primary/0 group-hover:border-brand-primary/10 pointer-events-none absolute inset-0 rounded-xl border transition-colors"
                                    ></div>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase">
                                    <Box class="h-3 w-3" />
                                    {{ __('taxonomy') }}
                                </label>
                                <div class="relative">
                                    <SearchableSelect
                                        v-model="form.category_id"
                                        :options="categories"
                                        value-key="id"
                                        label-key="name"
                                        :placeholder="__('select_strategic_category')"
                                        class="w-full"
                                    />
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase">
                                    <Hash class="h-3 w-3" />
                                    {{ __('identification_serial') }}
                                </label>
                                <div class="group relative">
                                    <input
                                        v-model="form.serial_number"
                                        type="text"
                                        :placeholder="__('e_g_c02df6l3md6p')"
                                        class="focus:ring-brand-primary/10 focus:border-brand-primary w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 font-mono text-sm tracking-wider uppercase shadow-inner transition-all duration-300 placeholder:text-slate-400 focus:ring-4 dark:border-slate-800 dark:bg-slate-950 dark:text-white"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase">
                                    <Users class="h-3 w-3" />
                                    {{ __('responsible_employee') }}
                                </label>
                                <div class="relative">
                                    <SearchableSelect
                                        v-model="form.user_id"
                                        :options="users"
                                        value-key="id"
                                        label-key="name"
                                        :placeholder="__('unassigned')"
                                        class="w-full"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Procurement & Lifecycle -->
                <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                    <div
                        class="flex flex-col overflow-hidden rounded-xl border border-slate-100 bg-white shadow-sm ring-1 ring-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:ring-white/5"
                    >
                        <div class="flex items-center gap-3 border-b border-slate-50 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-800/20">
                            <div class="rounded-lg bg-emerald-500/10 p-2">
                                <Calendar class="h-5 w-5 text-emerald-600" />
                            </div>
                            <h2 class="text-base font-extrabold tracking-tight text-slate-900 uppercase dark:text-white">
                                {{ __('procurement_details') }}
                            </h2>
                        </div>
                        <div class="flex-1 space-y-6 p-5">
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase italic">{{
                                    __('procurement_date')
                                }}</label>
                                <div class="group relative">
                                    <input
                                        v-model="form.purchase_date"
                                        type="date"
                                        class="focus:ring-brand-primary/10 focus:border-brand-primary w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm shadow-inner transition-all focus:ring-4 dark:border-slate-800 dark:bg-slate-950 dark:text-white"
                                        required
                                    />
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase italic">{{
                                    __('warranty_expiration')
                                }}</label>
                                <div class="group relative">
                                    <input
                                        v-model="form.warranty_expiry"
                                        type="date"
                                        class="focus:ring-brand-primary/10 focus:border-brand-primary w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm shadow-inner transition-all focus:ring-4 dark:border-slate-800 dark:bg-slate-950 dark:text-white"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div
                        class="flex flex-col overflow-hidden rounded-xl border border-slate-100 bg-white shadow-sm ring-1 ring-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:ring-white/5"
                    >
                        <div class="flex items-center gap-3 border-b border-slate-50 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-800/20">
                            <div class="rounded-lg bg-blue-500/10 p-2">
                                <ShieldCheck class="h-5 w-5 text-blue-600" />
                            </div>
                            <h2 class="text-base font-extrabold tracking-tight text-slate-900 uppercase dark:text-white">
                                {{ __('current_condition') }}
                            </h2>
                        </div>
                        <div class="flex-1 space-y-6 p-5">
                            <label class="block px-1 text-[11px] font-bold tracking-widest text-slate-400 uppercase italic">{{
                                __('condition')
                            }}</label>
                            <div class="grid grid-cols-1 gap-3">
                                <button
                                    v-for="cond in ['new', 'good', 'damaged']"
                                    :key="cond"
                                    type="button"
                                    @click="form.condition = cond"
                                    :class="[
                                        'group flex items-center justify-between rounded-xl border px-4 py-3 transition-all duration-300',
                                        form.condition === cond
                                            ? 'border-slate-900 bg-slate-900 text-white shadow-xl shadow-slate-900/20 dark:border-white dark:bg-white dark:text-slate-900'
                                            : 'border-slate-100 bg-slate-50 text-slate-500 hover:border-slate-300 dark:border-slate-800 dark:bg-slate-950',
                                    ]"
                                >
                                    <span class="text-xs font-black tracking-widest uppercase">{{
                                        cond === 'new' ? __('pristine_new') : cond === 'good' ? __('well_maintained') : __('needs_attention')
                                    }}</span>
                                    <div
                                        class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors"
                                        :class="form.condition === cond ? 'border-white dark:border-slate-900' : 'border-slate-200'"
                                    >
                                        <div v-if="form.condition === cond" class="h-2 w-2 rounded-full bg-white dark:bg-slate-900"></div>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Actions -->
                <div class="flex items-center justify-between border-t border-slate-100 pt-8 dark:border-slate-800">
                    <button
                        type="button"
                        @click="router.visit(admin.assets.index.url())"
                        class="rounded-xl px-4 py-2 text-sm font-bold text-slate-400 transition-all hover:bg-slate-50 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-white"
                    >
                        {{ __('abort_process') }}
                    </button>
                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="group/btn relative flex items-center gap-3 overflow-hidden rounded-xl bg-slate-900 px-4 py-2 text-sm font-black tracking-widest text-white uppercase shadow-2xl shadow-slate-900/40 transition-all hover:bg-slate-800 active:scale-95 disabled:opacity-50 dark:bg-white dark:text-slate-900 dark:shadow-white/20 dark:hover:bg-slate-100"
                    >
                        <div
                            class="group-hover/btn:animate-shimmer absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent"
                        ></div>
                        <ShieldCheck class="relative z-10 h-4 w-4" />
                        <span class="relative z-10 text-sm">{{ __('finalize_registration') }}</span>
                        <div
                            class="relative z-10 h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white dark:border-slate-900/20 dark:border-t-slate-900"
                            v-if="form.processing"
                        ></div>
                    </button>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>

<script setup lang="ts">
import SearchableSelect from '@/Components/Common/SearchableSelect.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import admin from '@/routes/admin';
import { Head, Link, router, useForm } from '@inertiajs/vue3';
import { ArrowLeft, Box, Calendar, HardDrive, Hash, ShieldCheck, Tag, Users } from 'lucide-vue-next';

defineProps<{
    categories: any[];
    users: any[];
}>();

const form = useForm({
    name: '',
    category_id: '',
    serial_number: '',
    purchase_date: new Date().toISOString().split('T')[0],
    warranty_expiry: '',
    condition: 'new',
    status: 'available',
    user_id: '',
});

const submit = () => {
    form.post(admin.assets.store.url());
};
</script>

<style scoped>
.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>
