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

    <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-4">
                <div class="flex items-center gap-4">
                    <div class="p-2.5 bg-brand-primary/10 rounded-xl">
                        <Tag class="w-5 h-5 text-brand-primary" />
                    </div>
                    <div>
                        <h1 class="text-xl font-extrabold text-slate-900 dark:text-white tracking-tight">
                            {{ __('asset_categories') }}
                        </h1>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
                            {{ __('manage_and_organize_your_company_asset_taxonomy') }}
                        </p>
                    </div>
                </div>
                <button @click="openCreateModal" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-bold text-white bg-slate-900 dark:bg-white dark:text-slate-900 rounded-xl hover:bg-slate-800 dark:hover:bg-slate-100 transition-all shadow-md shadow-slate-900/20">
                    <Plus class="w-4 h-4" />
                    {{ __('new_category') }}
                </button>
            </div>

            <!-- Categories Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div v-for="category in categories" :key="category.id" class="group bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm hover:shadow-md transition-all flex flex-col justify-between">
                    <div>
                        <div class="flex justify-between items-start mb-3">
                            <div class="p-2 bg-slate-50 dark:bg-slate-900 rounded-lg group-hover:bg-brand-primary/10 transition-colors">
                                <Box class="w-4 h-4 text-slate-400 group-hover:text-brand-primary" />
                            </div>
                            <div class="flex items-center gap-1.5 transition-all">
                            <button @click="editCategory(category)" class="p-1.5 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-500/10 rounded-lg transition-all" :title="__('edit')">
                                <Edit2 class="w-4 h-4" />
                            </button>
                            <button @click="deleteCategory(category)" class="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-all" :title="__('delete')">
                                <Trash2 class="w-4 h-4" />
                            </button>
                        </div>
                        </div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white mb-1 leading-snug">{{ category.name }}</h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 leading-relaxed">{{ category.description || __('no_description') }}</p>
                    </div>

                    <div class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-700 flex justify-between items-center">
                        <div class="flex items-center gap-1.5">
                            <div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
                            <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">{{ category.assets_count }} {{ __('assets_count') }}</span>
                        </div>
                        <Link :href="`${admin.assets.index.url()}?category_id=${category.id}`" class="text-[11px] font-bold text-brand-primary hover:underline flex items-center gap-1">
                            {{ __('View All') }}
                            <ChevronRight class="w-3 h-3" />
                        </Link>
                    </div>
                </div>

                <!-- Empty State Card -->
                <div v-if="categories.length === 0" class="col-span-full bg-slate-50/50 dark:bg-slate-900/30 border-2 border-dashed border-slate-200 dark:border-slate-800 p-12 rounded-xl flex flex-col items-center justify-center text-center">
                    <div class="p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm mb-4">
                        <FolderOpen class="w-8 h-8 text-slate-300" />
                    </div>
                    <p class="text-sm font-bold text-slate-600 dark:text-slate-400">{{ __('no_categories_found') }}</p>
                    <button @click="openCreateModal" class="mt-3 text-xs font-bold text-brand-primary hover:underline">{{ __('create_your_first_category') }}</button>
                </div>
            </div>

            <!-- Premium Create/Edit Modal -->
            <Modal 
                :show="showModal" 
                @close="showModal = false" 
                :title="isEditing ? __('edit_category') : __('new_category')"
                max-width="md"
            >
                <div class="-mx-6 -mt-4 mb-4 px-6 py-3 bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800/50">
                    <p class="text-xs text-slate-500 font-medium">
                        {{ isEditing ? __('update_category_details') : __('define_a_new_asset_classification') }}
                    </p>
                </div>

                <form @submit.prevent="submit" class="space-y-6">
                    <div class="space-y-2">
                        <label class="flex shadow-sm items-center gap-2 px-1 text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                            <Tag class="w-3 h-3" />
                            {{ __('category_name') }}
                        </label>
                        <div class="group relative">
                            <input 
                                v-model="form.name"
                                type="text"
                                :placeholder="__('e_g_it_hardware')"
                                class="w-full px-4 py-2 text-sm bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all duration-300 shadow-inner dark:text-white placeholder:text-slate-400 font-medium"
                                required
                            />
                            <div class="absolute inset-0 rounded-xl border border-brand-primary/0 group-hover:border-brand-primary/10 pointer-events-none transition-colors"></div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="flex items-center gap-2 px-1 text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                            <AlignLeft class="w-3 h-3" />
                            {{ __('description') }}
                        </label>
                        <div class="group relative">
                            <textarea 
                                v-model="form.description"
                                rows="4"
                                :placeholder="__('e_g_laptops_monitors_etc')"
                                class="w-full px-4 py-2 text-sm bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all duration-300 shadow-inner dark:text-white placeholder:text-slate-400 font-medium resize-none"
                            ></textarea>
                            <div class="absolute inset-0 rounded-xl border border-brand-primary/0 group-hover:border-brand-primary/10 pointer-events-none transition-colors"></div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-50 dark:border-slate-800/60">
                        <button 
                            type="button" 
                            @click="showModal = false" 
                            class="px-5 py-2.5 text-sm font-bold text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-all"
                        >
                            {{ __('cancel') }}
                        </button>
                        <button 
                            type="submit" 
                            :disabled="form.processing"
                            class="relative overflow-hidden px-4 py-2 text-sm font-extrabold text-white bg-slate-900 dark:bg-white dark:text-slate-900 rounded-xl hover:bg-slate-800 dark:hover:bg-slate-100 transition-all shadow-xl shadow-slate-900/20 disabled:opacity-50 flex items-center gap-2 active:scale-95 group/btn"
                        >
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover/btn:animate-shimmer"></div>
                            <Save class="w-4 h-4 relative z-10" v-if="!form.processing" />
                            <div class="w-4 h-4 border-2 border-white/20 border-t-white dark:border-slate-900/20 dark:border-t-slate-900 rounded-full animate-spin relative z-10" v-else></div>
                            <span class="relative z-10">{{ isEditing ? __('update_category') : __('save_category') }}</span>
                        </button>
                    </div>
                </form>
            </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 { 
    Tag, Plus, Box, Edit2, Trash2, 
    ChevronRight, FolderOpen, AlertCircle,
    X, AlignLeft, Save
} from 'lucide-vue-next';
import { ref } from 'vue';
import admin from '@/routes/admin';

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

const showModal = ref(false);
const isEditing = ref(false);
const editingId = ref<number | null>(null);

const form = useForm({
    name: '',
    description: ''
});

const openCreateModal = () => {
    isEditing.value = false;
    editingId.value = null;
    form.reset();
    showModal.value = true;
};

const editCategory = (category: any) => {
    isEditing.value = true;
    editingId.value = category.id;
    form.name = category.name;
    form.description = category.description;
    showModal.value = true;
};

const submit = () => {
    if (isEditing.value && editingId.value) {
        form.put(admin.assets.categories.update.url({ asset_category: editingId.value }), {
            onSuccess: () => {
                showModal.value = false;
                form.reset();
            }
        });
    } else {
        form.post(admin.assets.categories.store.url(), {
            onSuccess: () => {
                showModal.value = false;
                form.reset();
            }
        });
    }
};

const deleteCategory = (category: any) => {
    if (confirm(__('are_you_sure_you_want_to_delete_this_category'))) {
        form.delete(admin.assets.categories.destroy.url({ asset_category: category.id }));
    }
};
</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>
