<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DatePicker } from '@/components/ui/date-picker';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { PhoneNumberInput } from '@/components/ui/phone-number-input';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { RupiahInput } from '@/components/ui/rupiah-input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { formErrors } from '@/lib/form';
import type { EmployeeFormData, EnumOption } from '@/types/employee';

const props = withDefaults(
    defineProps<{
        genders: EnumOption[];
        employmentStatuses: EnumOption[];
        roles: EnumOption[];
        initialData?: Partial<EmployeeFormData>;
        submitUrl: string;
        method?: 'post' | 'put';
        submitLabel?: string;
        employeeId?: number;
        employeeName?: string | null;
    }>(),
    {
        method: 'post',
        submitLabel: 'Simpan',
    },
);

const form = useForm<EmployeeFormData>({
    email: props.initialData?.email ?? '',
    username: props.initialData?.username ?? '',
    full_name: props.initialData?.full_name ?? '',
    phone_number: props.initialData?.phone_number ?? '',
    gender: props.initialData?.gender ?? '',
    birth_date: props.initialData?.birth_date ?? '',
    address: props.initialData?.address ?? '',
    join_date: props.initialData?.join_date ?? '',
    employment_status: props.initialData?.employment_status ?? 'full_time',
    base_salary: props.initialData?.base_salary ?? '',
    role: props.initialData?.role ?? '',
});

function submit() {
    const options = {
        onError: () => {
            toast.error('Gagal menyimpan data. Periksa kembali formulir.');
        },
    };

    if (props.method === 'put') {
        form.put(props.submitUrl, options);
    } else {
        form.post(props.submitUrl, options);
    }
}
</script>

<template>
    <form @submit.prevent="submit">
        <div class="grid gap-6">
            <Card>
                <CardHeader class="flex flex-row items-start justify-between gap-4">
                    <div class="space-y-1">
                        <CardTitle>Data Akun</CardTitle>
                    </div>
                </CardHeader>
                <CardContent>
                    <FieldGroup>
                        <FieldSet class="grid gap-4 md:grid-cols-3">
                            <Field>
                                <FieldLabel for="email" required>Email</FieldLabel>
                                <Input id="email" v-model="form.email" type="email" placeholder="nama@perusahaan.com" />
                                <FieldError :errors="formErrors(form, 'email')" />
                            </Field>
                            <Field>
                                <FieldLabel for="username" required>Username</FieldLabel>
                                <Input id="username" v-model="form.username" type="text" placeholder="username" />
                                <FieldError :errors="formErrors(form, 'username')" />
                            </Field>
                            <Field>
                                <FieldLabel for="role" required>Role</FieldLabel>
                                <Select v-model="form.role">
                                    <SelectTrigger id="role" class="w-full">
                                        <SelectValue placeholder="Pilih role" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem v-for="option in roles" :key="option.value" :value="option.value">
                                            {{ option.label }}
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                <FieldError :errors="formErrors(form, 'role')" />
                            </Field>
                        </FieldSet>
                    </FieldGroup>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Data Pribadi</CardTitle>
                </CardHeader>
                <CardContent>
                    <FieldGroup>
                        <FieldSet class="grid gap-4 md:grid-cols-3">
                            <Field class="md:col-span-3">
                                <FieldLabel for="full_name" required>Nama Lengkap</FieldLabel>
                                <Input id="full_name" v-model="form.full_name" type="text"
                                    placeholder="Nama lengkap pegawai" />
                                <FieldError :errors="formErrors(form, 'full_name')" />
                            </Field>
                            <Field>
                                <FieldLabel for="phone_number">Nomor Telepon</FieldLabel>
                                <PhoneNumberInput id="phone_number" v-model="form.phone_number" />
                                <FieldError :errors="formErrors(form, 'phone_number')" />
                            </Field>
                            <Field>
                                <FieldLabel for="birth_date">Tanggal Lahir</FieldLabel>
                                <DatePicker id="birth_date" v-model="form.birth_date"
                                    placeholder="Pilih tanggal lahir" />
                                <FieldError :errors="formErrors(form, 'birth_date')" />
                            </Field>
                            <Field>
                                <FieldLabel>Jenis Kelamin</FieldLabel>
                                <RadioGroup v-model="form.gender" class="flex flex-wrap gap-4 pt-1">
                                    <div v-for="option in genders" :key="option.value" class="flex items-center gap-2">
                                        <RadioGroupItem :id="`gender-${option.value}`" :value="option.value" />
                                        <Label :for="`gender-${option.value}`" class="font-normal">
                                            {{ option.label }}
                                        </Label>
                                    </div>
                                </RadioGroup>
                                <FieldError :errors="formErrors(form, 'gender')" />
                            </Field>
                            <Field class="md:col-span-3">
                                <FieldLabel for="address">Alamat</FieldLabel>
                                <Textarea id="address" v-model="form.address" placeholder="Alamat lengkap" rows="3" />
                                <FieldError :errors="formErrors(form, 'address')" />
                            </Field>
                        </FieldSet>
                    </FieldGroup>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Data Kepegawaian</CardTitle>
                </CardHeader>
                <CardContent>
                    <FieldGroup>
                        <FieldSet class="grid gap-4 md:grid-cols-3">
                            <Field>
                                <FieldLabel for="join_date" required>Tanggal Bergabung</FieldLabel>
                                <DatePicker id="join_date" v-model="form.join_date"
                                    placeholder="Pilih tanggal bergabung" />
                                <FieldError :errors="formErrors(form, 'join_date')" />
                            </Field>
                            <Field>
                                <FieldLabel for="base_salary" required>Gaji Pokok</FieldLabel>
                                <RupiahInput id="base_salary" v-model="form.base_salary" />
                                <FieldError :errors="formErrors(form, 'base_salary')" />
                            </Field>
                            <Field>
                                <FieldLabel for="employment_status" required>Status Kepegawaian</FieldLabel>
                                <Select v-model="form.employment_status">
                                    <SelectTrigger id="employment_status" class="w-full">
                                        <SelectValue placeholder="Pilih status kepegawaian" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem v-for="option in employmentStatuses" :key="option.value"
                                            :value="option.value">
                                            {{ option.label }}
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                <FieldError :errors="formErrors(form, 'employment_status')" />
                            </Field>
                        </FieldSet>
                    </FieldGroup>
                </CardContent>
            </Card>

            <div class="flex items-center justify-end gap-2">
                <Button type="submit" :disabled="form.processing">
                    <Save class="size-4" />
                    {{ form.processing ? 'Menyimpan...' : submitLabel }}
                </Button>
            </div>
        </div>
    </form>
</template>
