<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import { 
    CalendarRange, Plus, Edit2, Trash2, 
    CheckCircle2, XCircle, Palette, Activity, Clock
} from 'lucide-vue-next';
import Modal from '@/Components/Common/Modal.vue';
import admin from '@/routes/admin';

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

const showTypeModal = ref(false);
const editingType = ref<any>(null);

const form = useForm({
    name: '',
    color: '#3b82f6',
    icon: 'CalendarRange',
    is_paid: true,
    default_allowance: 10,
    status: true,
});

const openCreateModal = () => {
    editingType.value = null;
    form.reset();
    showTypeModal.value = true;
};

const openEditModal = (type: any) => {
    editingType.value = type;
    form.name = type.name;
    form.color = type.color;
    form.icon = type.icon;
    form.is_paid = !!type.is_paid;
    form.default_allowance = type.default_allowance;
    form.status = !!type.status;
    showTypeModal.value = true;
};

const submit = () => {
    if (editingType.value) {
        form.put(admin.leave.types.update.url({ leave_type: editingType.value.id }), {
            onSuccess: () => {
                showTypeModal.value = false;
                form.reset();
            },
        });
    } else {
        form.post(admin.leave.types.store.url(), {
            onSuccess: () => {
                showTypeModal.value = false;
                form.reset();
            },
        });
    }
};

const deleteType = (id: number) => {
    if (confirm('Are you sure you want to delete this leave type?')) {
        form.delete(admin.leave.types.destroy.url({ leave_type: id }));
    }
};

const icons = [
    { name: 'CalendarRange', icon: CalendarRange },
    { name: 'Activity', icon: Activity },
    { name: 'Clock', icon: Clock },
];
</script>

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

    <AdminLayout>
        <div class="space-y-6 animate-fade-in">
            <!-- Header -->
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('leave_types') }}</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">{{ __('manage_available_leave_types_and_allowances') }}</p>
                </div>
                <button 
                    @click="openCreateModal"
                    class="flex items-center space-x-2 bg-[var(--brand-primary)] text-white px-4 py-2 rounded-xl font-bold text-sm hover:brightness-110 transition-all shadow-lg"
                >
                    <Plus :size="18" />
                    <span>{{ __('add_leave_type') }}</span>
                </button>
            </div>

            <!-- Types List -->
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                <div 
                    v-for="type in leaveTypes" 
                    :key="type.id"
                    class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm group hover:shadow-md transition-all"
                >
                    <div class="flex items-start justify-between mb-4">
                        <div class="p-4 rounded-2xl" :style="{ backgroundColor: type.color + '15', color: type.color }">
                            <CalendarRange :size="28" />
                        </div>
                        <div class="flex items-center space-x-1">
                            <button 
                                @click="openEditModal(type)"
                                class="p-2 text-slate-400 hover:text-sky-500 hover:bg-sky-50 dark:hover:bg-sky-900/20 rounded-lg transition-colors"
                            >
                                <Edit2 :size="16" />
                            </button>
                            <button 
                                @click="deleteType(type.id)"
                                class="p-2 text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"
                            >
                                <Trash2 :size="16" />
                            </button>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">{{ type.name }}</h3>
                        <p class="text-xs font-bold text-slate-500 mt-1 uppercase tracking-wider">
                            {{ type.is_paid ? __('paid_leave') : __('unpaid_leave') }}
                        </p>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl">
                        <div>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('allowance') }}</p>
                            <p class="text-sm font-bold text-slate-900 dark:text-white">{{ type.default_allowance }} {{ __('days') }}</p>
                        </div>
                        <div class="flex items-center px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-wider" :class="type.status ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-700'">
                            {{ type.status ? __('active') : __('inactive') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Create/Edit Modal -->
        <Modal :show="showTypeModal" :title="editingType ? __('edit_leave_type') : __('create_leave_type')" @close="showTypeModal = false">
            <form @submit.prevent="submit" class="space-y-6 py-2">
                <div class="grid grid-cols-1 gap-5">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('name') }}</label>
                        <input 
                            v-model="form.name"
                            type="text"
                            class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-[var(--brand-primary)]"
                            required
                        />
                        <p v-if="form.errors.name" class="text-rose-500 text-xs mt-1">{{ form.errors.name }}</p>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('color') }}</label>
                            <div class="flex items-center space-x-3">
                                <input 
                                    v-model="form.color"
                                    type="color"
                                    class="w-10 h-10 rounded-lg border-none p-0 overflow-hidden cursor-pointer"
                                />
                                <span class="text-xs font-mono text-slate-500">{{ form.color }}</span>
                            </div>
                        </div>
                        <div class="space-y-2 text-sm">
                            <label class="font-bold text-slate-700 dark:text-slate-300">{{ __('allowance') }} ({{ __('days') }})</label>
                            <input 
                                v-model="form.default_allowance"
                                type="number"
                                class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl px-4 py-3 text-sm"
                                min="0"
                                required
                            />
                        </div>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl">
                        <div class="flex items-center space-x-3">
                            <input v-model="form.is_paid" type="checkbox" class="w-4 h-4 rounded text-[var(--brand-primary)] border-slate-300 focus:ring-[var(--brand-primary)]" />
                            <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('it_is_paid_leave') }}</span>
                        </div>
                        <div v-if="editingType" class="flex items-center space-x-3">
                            <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('status') }}</span>
                            <input v-model="form.status" type="checkbox" class="w-4 h-4 rounded text-[var(--brand-primary)] border-slate-300 focus:ring-[var(--brand-primary)]" />
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-3 pt-4">
                    <button type="button" @click="showTypeModal = false" class="flex-1 px-4 py-3 rounded-xl font-bold text-sm bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 transition-all">{{ __('cancel') }}</button>
                    <button type="submit" :disabled="form.processing" class="flex-2 px-8 py-3 rounded-xl font-bold text-sm bg-[var(--brand-primary)] text-white hover:brightness-110 transition-all shadow-lg disabled:opacity-50">
                        {{ editingType ? __('update_type') : __('create_type') }}
                    </button>
                </div>
            </form>
        </Modal>
    </AdminLayout>
</template>
