<script setup lang="ts">
import { destroy, store, update } from '@/actions/App/Http/Controllers/Admin/SalaryComponentController';
import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { router, useForm } from '@inertiajs/vue3';
import { Pencil, PlusCircle, Trash2, X } from 'lucide-vue-next';
import { ref } from 'vue';

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    components: Array<{
        id: number;
        name: string;
        type: 'earning' | 'deduction';
        status: 'active' | 'inactive';
    }>;
}>();

const editing = ref<number | null>(null);
const showForm = ref(false);

const form = useForm({
    name: '',
    type: 'earning' as 'earning' | 'deduction',
    status: 'active' as 'active' | 'inactive',
});

function openCreate() {
    editing.value = null;
    form.reset();
    showForm.value = true;
}

function openEdit(component: (typeof props.components)[0]) {
    editing.value = component.id;
    form.name = component.name;
    form.type = component.type;
    form.status = component.status;
    showForm.value = true;
}

function submit() {
    if (editing.value) {
        form.put(update({ salary_component: editing.value }).url, {
            preserveScroll: true,
            onSuccess: () => {
                showForm.value = false;
                form.reset();
            },
        });
    } else {
        form.post(store().url, {
            preserveScroll: true,
            onSuccess: () => {
                showForm.value = false;
                form.reset();
            },
        });
    }
}

const confirmState = ref({
    show: false,
    id: 0,
    processing: false,
});

function deleteComponent(id: number) {
    confirmState.value.id = id;
    confirmState.value.show = true;
}

function executeDelete() {
    confirmState.value.processing = true;
    router.delete(destroy({ salary_component: confirmState.value.id }).url, {
        preserveScroll: true,
        onFinish: () => {
            confirmState.value.show = false;
            confirmState.value.processing = false;
        },
    });
}
</script>

<template>
    <div class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-extrabold text-slate-800 dark:text-white">Salary Components</h1>
                <p class="text-sm text-slate-500">Define earnings and deductions used in payroll structures</p>
            </div>
            <button
                @click="openCreate"
                class="flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-bold text-white shadow-2xl shadow-indigo-900/30 transition-all hover:bg-indigo-700 active:scale-95"
            >
                <PlusCircle class="h-4 w-4" />
                New Component
            </button>
        </div>

        <!-- Slide-over Form -->
        <Teleport to="body">
            <!-- Backdrop -->
            <Transition
                enter-active-class="transition-opacity ease-linear duration-300"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition-opacity ease-linear duration-200"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div v-if="showForm" class="fixed inset-0 z-9999 bg-black/30 backdrop-blur-sm" @click="showForm = false" />
            </Transition>

            <!-- Slide-over Panel -->
            <Transition
                enter-active-class="transition ease-in-out duration-300 transform"
                enter-from-class="translate-x-full"
                enter-to-class="translate-x-0"
                leave-active-class="transition ease-in-out duration-200 transform"
                leave-from-class="translate-x-0"
                leave-to-class="translate-x-full"
            >
                <div
                    v-if="showForm"
                    class="fixed inset-y-0 right-0 z-10000 flex h-screen w-full max-w-md flex-col bg-white shadow-2xl dark:bg-slate-900"
                >
                    <div class="flex items-center justify-between border-b border-slate-200 p-5 dark:border-slate-700">
                        <h2 class="text-base font-bold text-slate-800 dark:text-white">
                            {{ editing ? 'Edit Component' : 'New Salary Component' }}
                        </h2>
                        <button @click="showForm = false"><X class="h-5 w-5 text-slate-400" /></button>
                    </div>
                    <div class="flex-1 space-y-4 overflow-y-auto p-5">
                        <div>
                            <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Name</label>
                            <input
                                v-model="form.name"
                                type="text"
                                placeholder="e.g. Basic Salary, HRA, PF"
                                class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm shadow-inner focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800"
                            />
                            <p v-if="form.errors.name" class="mt-1 text-xs text-red-500">{{ form.errors.name }}</p>
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Type</label>
                            <select
                                v-model="form.type"
                                class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm shadow-inner focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800"
                            >
                                <option value="earning">Earning</option>
                                <option value="deduction">Deduction</option>
                            </select>
                            <p v-if="form.errors.type" class="mt-1 text-xs text-red-500">{{ form.errors.type }}</p>
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Status</label>
                            <select
                                v-model="form.status"
                                class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm shadow-inner focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800"
                            >
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex gap-3 border-t border-slate-200 p-5 dark:border-slate-700">
                        <button
                            @click="showForm = false"
                            class="flex-1 rounded-xl bg-slate-100 px-4 py-2 text-sm font-bold text-slate-600 transition-colors hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300"
                        >
                            Cancel
                        </button>
                        <button
                            @click="submit"
                            :disabled="form.processing"
                            class="flex-1 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-black tracking-widest text-white uppercase shadow-2xl shadow-indigo-900/30 transition-all hover:bg-indigo-700 active:scale-95 disabled:opacity-50"
                        >
                            {{ form.processing ? 'Saving…' : 'Save' }}
                        </button>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <!-- Table -->
        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-slate-200 dark:border-slate-700">
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Name</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Type</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Status</th>
                        <th class="px-5 py-3" />
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="c in components"
                        :key="c.id"
                        class="border-b border-slate-100 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                    >
                        <td class="px-5 py-3 font-medium text-slate-800 dark:text-white">{{ c.name }}</td>
                        <td class="px-5 py-3">
                            <span
                                :class="c.type === 'earning' ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'"
                                class="rounded-full px-2 py-0.5 text-xs font-semibold capitalize"
                            >
                                {{ c.type }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            <span
                                :class="c.status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500'"
                                class="rounded-full px-2 py-0.5 text-xs font-semibold capitalize"
                            >
                                {{ c.status }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            <div class="flex items-center justify-end gap-2">
                                <button @click="openEdit(c)" class="rounded-lg p-1.5 transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
                                    <Pencil class="h-4 w-4 text-slate-500" />
                                </button>
                                <button
                                    @click="deleteComponent(c.id)"
                                    class="rounded-lg p-1.5 transition-colors hover:bg-red-50 dark:hover:bg-red-900/20"
                                >
                                    <Trash2 class="h-4 w-4 text-red-500" />
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="!components.length">
                        <td colspan="4" class="px-5 py-10 text-center text-sm text-slate-400">No salary components yet.</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <ConfirmationModal
            :show="confirmState.show"
            title="Delete Component"
            message="Are you sure you want to delete this salary component? This action cannot be undone."
            type="danger"
            confirm-text="Delete"
            :processing="confirmState.processing"
            @close="confirmState.show = false"
            @confirm="executeDelete"
        />
    </div>
</template>
