<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { watch } from 'vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { RupiahInput } from '@/components/ui/rupiah-input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { parseRupiah } from '@/lib/rupiah';
import type { PayrollAdjustmentFormData, PayrollListItem, SelectOption } from '@/types/payroll';

const open = defineModel<boolean>('open', { default: false });

const props = defineProps<{
    payroll: PayrollListItem | null;
    adjustmentTypes: SelectOption[];
}>();

const form = useForm<PayrollAdjustmentFormData>({
    type: 'bonus',
    amount: '',
    description: '',
});

function resetForm() {
    form.reset();
    form.type = 'bonus';
    form.clearErrors();
}

watch(open, (isOpen) => {
    if (isOpen) {
        resetForm();
    }
});

function submit() {
    if (!props.payroll) {
        return;
    }

    form.transform((data) => ({
        ...data,
        amount: parseRupiah(data.amount),
    })).post(`/admin/finance/payroll/${props.payroll.id}/adjustments`, {
        preserveScroll: true,
        onSuccess: () => {
            open.value = false;
        },
        onError: () => {
            toast.error('Gagal menambahkan penyesuaian.');
        },
    });
}
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-w-md">
            <DialogHeader>
                <DialogTitle>Penyesuaian Gaji</DialogTitle>
            </DialogHeader>

            <form @submit.prevent="submit">
                <FieldSet>
                    <FieldGroup>
                        <Field v-if="payroll">
                            <FieldLabel>Pegawai</FieldLabel>
                            <p class="text-sm text-muted-foreground">{{ payroll.employee_name }}</p>
                        </Field>

                        <Field>
                            <FieldLabel for="type">Jenis</FieldLabel>
                            <Select v-model="form.type">
                                <SelectTrigger id="type">
                                    <SelectValue placeholder="Pilih jenis" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem v-for="option in adjustmentTypes" :key="option.value"
                                        :value="option.value">
                                        {{ option.label }}
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                            <FieldError :message="form.errors.type" />
                        </Field>

                        <Field>
                            <FieldLabel for="amount">Jumlah</FieldLabel>
                            <RupiahInput id="amount" v-model="form.amount" />
                            <FieldError :message="form.errors.amount" />
                        </Field>

                        <Field>
                            <FieldLabel for="description">Keterangan</FieldLabel>
                            <Textarea id="description" v-model="form.description" rows="3" />
                            <FieldError :message="form.errors.description" />
                        </Field>
                    </FieldGroup>
                </FieldSet>

                <DialogFooter class="mt-4">
                    <Button type="submit" :disabled="form.processing">
                        <Save class="size-4" />
                        Simpan
                    </Button>
                </DialogFooter>
            </form>
        </DialogContent>
    </Dialog>
</template>
