<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent } 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 { PhoneNumberInput } from '@/components/ui/phone-number-input';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import SettingsLayout from '@/layouts/SettingsLayout.vue';
import type { EnumOption, ProfileFormData, ProfileUser } from '@/types/settings';

const props = defineProps<{
    user: ProfileUser;
    genders: EnumOption[];
}>();

const form = useForm<ProfileFormData>({
    email: props.user.email ?? '',
    username: props.user.username ?? '',
    full_name: props.user.profile?.full_name ?? '',
    phone_number: props.user.profile?.phone_number ?? '',
    gender: props.user.profile?.gender ?? '',
    birth_date: props.user.profile?.birth_date_input ?? '',
    address: props.user.profile?.address ?? '',
});

function submit() {
    form.put('/admin/setting/profile', {
        onError: () => {
            toast.error('Gagal menyimpan profil. Periksa kembali formulir.');
        },
    });
}
</script>

<template>

    <Head title="Profil" />

    <SettingsLayout>
        <form @submit.prevent="submit">
            <div class="grid gap-6">
                <Card>
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm: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="form.errors.email ? [form.errors.email] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="username" required>
                                        Username
                                    </FieldLabel>
                                    <Input id="username" v-model="form.username" type="text" placeholder="username" />
                                    <FieldError :errors="form.errors.username ? [form.errors.username] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="full_name" required>
                                        Nama Lengkap
                                    </FieldLabel>
                                    <Input id="full_name" v-model="form.full_name" type="text"
                                        placeholder="Nama lengkap" />
                                    <FieldError :errors="form.errors.full_name ? [form.errors.full_name] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="phone_number">
                                        Nomor Telepon
                                    </FieldLabel>
                                    <PhoneNumberInput id="phone_number" v-model="form.phone_number" />
                                    <FieldError :errors="form.errors.phone_number ? [form.errors.phone_number] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="birth_date">
                                        Tanggal Lahir
                                    </FieldLabel>
                                    <DatePicker id="birth_date" v-model="form.birth_date" />
                                    <FieldError :errors="form.errors.birth_date ? [form.errors.birth_date] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel>
                                        Jenis Kelamin
                                    </FieldLabel>
                                    <RadioGroup v-model="form.gender" class="flex flex-wrap gap-4 pt-1">
                                        <div v-for="gender in genders" :key="gender.value"
                                            class="flex items-center gap-2">
                                            <RadioGroupItem :id="`gender-${gender.value}`" :value="gender.value" />
                                            <label :for="`gender-${gender.value}`" class="text-sm">
                                                {{ gender.label }}
                                            </label>
                                        </div>
                                    </RadioGroup>
                                    <FieldError :errors="form.errors.gender ? [form.errors.gender] : []" />
                                </Field>

                                <Field class="sm:col-span-3">
                                    <FieldLabel for="address">
                                        Alamat
                                    </FieldLabel>
                                    <Textarea id="address" v-model="form.address" placeholder="Alamat lengkap"
                                        rows="3" />
                                    <FieldError :errors="form.errors.address ? [form.errors.address] : []" />
                                </Field>
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

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