<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import Button from '@/Shared/Button.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft, Plus, Trash2 } from 'lucide-vue-next';

const props = defineProps<{
    tax?: {
        id: number;
        name: string;
        type: 'fixed' | 'slab';
        status: 'active' | 'inactive';
        slabs: Array<{
            id: number;
            min_income: string;
            max_income: string | null;
            percentage: string;
        }>;
        fixed_amount: string | null;
        fixed_amount_type: 'percentage' | 'fixed' | null;
    };
}>();

const isEditing = !!props.tax;

const form = useForm({
    name: props.tax?.name ?? '',
    type: props.tax?.type ?? 'slab',
    status: props.tax?.status ?? 'active',
    fixed_amount: props.tax?.fixed_amount ?? '',
    fixed_amount_type: props.tax?.fixed_amount_type ?? 'fixed',
    slabs: props.tax?.slabs
        ? [...props.tax.slabs]
        : ([{ id: null, min_income: '0', max_income: null, percentage: '0' }] as Array<{
              id: number | null;
              min_income: string;
              max_income: string | null;
              percentage: string;
          }>),
});

const addSlab = () => {
    form.slabs.push({
        id: null,
        min_income: '0',
        max_income: null,
        percentage: '0',
    });
};

const removeSlab = (index: number) => {
    if (form.slabs.length > 1) {
        form.slabs.splice(index, 1);
    }
};

const submit = () => {
    if (isEditing) {
        form.put(`/admin/taxes/${props.tax!.id}`);
    } else {
        form.post('/admin/taxes');
    }
};
</script>

<template>
    <Head :title="isEditing ? 'Edit Tax' : 'Create Tax'" />

    <AdminLayout>
        <div class="space-y-6">
            <div class="flex items-center gap-4">
                <Link
                    href="/admin/taxes"
                    class="flex h-10 w-10 items-center justify-center rounded-xl text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
                >
                    <ArrowLeft class="h-5 w-5" />
                </Link>
                <div>
                    <h2 class="text-2xl font-semibold tracking-tight text-slate-800 dark:text-white">
                        {{ isEditing ? 'Edit Tax Configuration' : 'New Tax Configuration' }}
                    </h2>
                    <p class="text-sm text-slate-500">Define settings, calculation methodology, and slabs.</p>
                </div>
            </div>

            <form @submit.prevent="submit" class="max-w-4xl space-y-6">
                <!-- Basic Settings Panel -->
                <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4 dark:border-slate-800 dark:bg-slate-800/30">
                        <h3 class="font-bold text-slate-800 dark:text-white">Basic Settings</h3>
                        <p class="mt-0.5 text-xs text-slate-500">General information about this tax policy.</p>
                    </div>
                    <div class="space-y-6 p-6">
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 dark:text-slate-300">Tax Name</label>
                            <input
                                type="text"
                                v-model="form.name"
                                placeholder="e.g. National Income Tax"
                                class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-700 dark:bg-slate-800"
                                autofocus
                            />
                            <p v-if="form.errors.name" class="mt-1 text-xs text-rose-500">{{ form.errors.name }}</p>
                        </div>

                        <div class="grid gap-6 pt-2 sm:grid-cols-2">
                            <div class="space-y-3">
                                <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Tax Type</label>
                                <div class="flex flex-col space-y-2">
                                    <label
                                        class="flex cursor-pointer items-center gap-3 rounded-lg border border-slate-100 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                                    >
                                        <input
                                            type="radio"
                                            v-model="form.type"
                                            value="slab"
                                            class="h-4 w-4 border-slate-300 bg-slate-100 text-indigo-600 focus:ring-indigo-500"
                                        />
                                        <span class="text-sm text-slate-700 dark:text-slate-300">Progressive Slab Base</span>
                                    </label>
                                    <label
                                        class="flex cursor-pointer items-center gap-3 rounded-lg border border-slate-100 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                                    >
                                        <input
                                            type="radio"
                                            v-model="form.type"
                                            value="fixed"
                                            class="h-4 w-4 border-slate-300 bg-slate-100 text-indigo-600 focus:ring-indigo-500"
                                        />
                                        <span class="text-sm text-slate-700 dark:text-slate-300">Fixed Amount (Per Assignment)</span>
                                    </label>
                                </div>
                                <p v-if="form.errors.type" class="text-xs text-rose-500">{{ form.errors.type }}</p>
                            </div>

                            <div class="space-y-3">
                                <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Status</label>
                                <div class="flex flex-col space-y-2">
                                    <label
                                        class="flex cursor-pointer items-center gap-3 rounded-lg border border-slate-100 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                                    >
                                        <input
                                            type="radio"
                                            v-model="form.status"
                                            value="active"
                                            class="h-4 w-4 border-slate-100 bg-slate-100 text-emerald-600 focus:ring-emerald-500"
                                        />
                                        <span class="text-sm font-bold text-emerald-600">Active</span>
                                    </label>
                                    <label
                                        class="flex cursor-pointer items-center gap-3 rounded-lg border border-slate-100 p-3 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50"
                                    >
                                        <input
                                            type="radio"
                                            v-model="form.status"
                                            value="inactive"
                                            class="h-4 w-4 border-slate-100 bg-slate-100 text-slate-600 focus:ring-slate-500"
                                        />
                                        <span class="text-sm font-medium text-slate-500">Inactive</span>
                                    </label>
                                </div>
                                <p v-if="form.errors.status" class="text-xs text-rose-500">{{ form.errors.status }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fixed Amount Settings -->
                <div
                    v-if="form.type === 'fixed'"
                    class="animate-in fade-in slide-in-from-top-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm duration-300 dark:border-slate-700 dark:bg-slate-900"
                >
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4 dark:border-slate-800 dark:bg-slate-800/30">
                        <h3 class="font-bold text-slate-800 dark:text-white">Fixed Amount Configuration</h3>
                        <p class="mt-0.5 text-xs text-slate-500">Define the default amount or percentage for this tax policy.</p>
                    </div>
                    <div class="grid gap-6 p-6 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 dark:text-slate-300">Amount Type</label>
                            <select
                                v-model="form.fixed_amount_type"
                                class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-700 dark:bg-slate-800"
                            >
                                <option value="fixed">Flat Amount</option>
                                <option value="percentage">Percentage (%)</option>
                            </select>
                            <p v-if="form.errors.fixed_amount_type" class="mt-1 text-xs text-rose-500">{{ form.errors.fixed_amount_type }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-slate-700 dark:text-slate-300">
                                {{ form.fixed_amount_type === 'percentage' ? 'Percentage (e.g. 5)' : 'Fixed Amount' }}
                            </label>
                            <div class="relative">
                                <span v-if="form.fixed_amount_type === 'percentage'" class="absolute top-2.5 right-3 font-bold text-slate-400"
                                    >%</span
                                >
                                <input
                                    type="number"
                                    v-model="form.fixed_amount"
                                    step="0.01"
                                    placeholder="0.00"
                                    class="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-700 dark:bg-slate-800"
                                />
                            </div>
                            <p v-if="form.errors.fixed_amount" class="mt-1 text-xs text-rose-500">{{ form.errors.fixed_amount }}</p>
                        </div>
                    </div>
                </div>

                <!-- Dynamic Slabs Area -->
                <div
                    v-if="form.type === 'slab'"
                    class="animate-in fade-in slide-in-from-top-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm duration-300 dark:border-slate-700 dark:bg-slate-900"
                >
                    <div
                        class="flex items-center justify-between border-b border-slate-100 bg-slate-50/50 px-6 py-4 dark:border-slate-800 dark:bg-slate-800/30"
                    >
                        <div>
                            <h3 class="font-bold text-slate-800 dark:text-white">Tax Slabs</h3>
                            <p class="mt-0.5 text-xs text-slate-500">Define annual income ranges. Leave Max null for final slab.</p>
                        </div>
                        <button
                            type="button"
                            @click="addSlab"
                            class="flex items-center gap-2 rounded-xl border border-slate-200 px-4 py-2 text-sm font-bold text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800"
                        >
                            <Plus class="mr-2 h-4 w-4" />
                            Add Slab
                        </button>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            <div
                                v-for="(slab, index) in form.slabs"
                                :key="index"
                                class="group relative flex flex-wrap items-end gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40"
                            >
                                <div class="grid min-w-[140px] flex-1 gap-2">
                                    <label class="text-[10px] font-bold tracking-widest text-slate-400 uppercase">Min Annual Inc.</label>
                                    <input
                                        type="number"
                                        v-model="slab.min_income"
                                        class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-sm outline-none dark:border-slate-700 dark:bg-slate-800"
                                        placeholder="0.00"
                                    />
                                    <p v-if="form.errors[`slabs.${index}.min_income`]" class="text-[10px] text-rose-500">
                                        {{ form.errors[`slabs.${index}.min_income`] }}
                                    </p>
                                </div>
                                <div class="grid min-w-[140px] flex-1 gap-2">
                                    <label class="text-[10px] font-bold tracking-widest text-slate-400 uppercase">Max Annual Inc.</label>
                                    <input
                                        type="number"
                                        v-model="slab.max_income"
                                        class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-sm outline-none dark:border-slate-700 dark:bg-slate-800"
                                        placeholder="Infinity (Optional)"
                                    />
                                    <p v-if="form.errors[`slabs.${index}.max_income`]" class="text-[10px] text-rose-500">
                                        {{ form.errors[`slabs.${index}.max_income`] }}
                                    </p>
                                </div>
                                <div class="grid w-24 shrink-0 gap-2">
                                    <label class="text-[10px] font-bold tracking-widest text-slate-400 uppercase">Rate (%)</label>
                                    <input
                                        type="number"
                                        v-model="slab.percentage"
                                        class="h-10 rounded-lg border border-slate-200 bg-white px-3 text-center text-sm font-bold outline-none dark:border-slate-700 dark:bg-slate-800"
                                        placeholder="0"
                                    />
                                    <p v-if="form.errors[`slabs.${index}.percentage`]" class="text-[10px] text-rose-500">
                                        {{ form.errors[`slabs.${index}.percentage`] }}
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
                                    @click="removeSlab(index)"
                                    :disabled="form.slabs.length <= 1"
                                >
                                    <Trash2 class="h-4 w-4" />
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end pt-4">
                    <Button type="submit" class="px-8 shadow-xl shadow-indigo-500/20" :processing="form.processing">
                        {{ isEditing ? 'Update Tax Policy' : 'Create Tax Policy' }}
                    </Button>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>
