<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import { PhoneNumberInput } from '@/components/form/phone-number-input';
import MediaDropzone from '@/components/media/MediaDropzone.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { formErrors } from '@/lib/form';
import { update } from '@/routes/admin/system/settings/system';
import { createMediaUploadState } from '@/types/media';
import type { MediaUploadState } from '@/types/media';
import type { SystemSettingsData } from '@/types/setting';

const props = defineProps<{
    data: SystemSettingsData;
}>();

const form = useForm({
    app_name: props.data.app_name,
    about_app: props.data.about_app ?? '',
    email: props.data.email ?? '',
    phone: props.data.phone ?? '',
    address: props.data.address ?? '',
});

const logoState = ref<MediaUploadState>(createMediaUploadState());
const faviconState = ref<MediaUploadState>(createMediaUploadState());
const loginCoverState = ref<MediaUploadState>(createMediaUploadState());

function buildFormData(): FormData {
    const formData = new FormData();

    formData.append('app_name', form.app_name);
    formData.append('about_app', form.about_app);
    formData.append('email', form.email);
    formData.append('phone', form.phone);
    formData.append('address', form.address);

    logoState.value.newFiles.forEach((file) => {
        formData.append('logo', file);
    });

    faviconState.value.newFiles.forEach((file) => {
        formData.append('favicon', file);
    });

    loginCoverState.value.newFiles.forEach((file) => {
        formData.append('login_cover', file);
    });

    return formData;
}

function submit() {
    const payload = buildFormData();

    form.transform(() => payload).put(update.url(), {
        preserveScroll: true,
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <div class="grid gap-6">
            <Card>
                <CardContent>
                    <FieldSet>
                        <FieldGroup class="grid gap-4 sm:grid-cols-2">
                            <Field class="sm:col-span-2">
                                <FieldLabel for="app_name" required>
                                    Nama Aplikasi
                                </FieldLabel>
                                <Input id="app_name" v-model="form.app_name" placeholder="DST Collection" />
                                <FieldError :errors="formErrors(form, 'app_name')" />
                            </Field>

                            <Field class="sm:col-span-2">
                                <FieldLabel for="about_app" required>
                                    Tentang Aplikasi
                                </FieldLabel>
                                <Textarea id="about_app" v-model="form.about_app" rows="4"
                                    placeholder="Deskripsi singkat tentang bisnis atau aplikasi Anda." />
                                <FieldError :errors="formErrors(form, 'about_app')" />
                            </Field>

                            <Field class="sm:col-span-2">
                                <FieldLabel for="address" required>
                                    Alamat
                                </FieldLabel>
                                <Textarea id="address" v-model="form.address" rows="3"
                                    placeholder="Alamat toko yang ditampilkan di struk." />
                                <FieldError :errors="formErrors(form, 'address')" />
                            </Field>

                            <Field>
                                <FieldLabel for="email" required>
                                    Email
                                </FieldLabel>
                                <Input id="email" v-model="form.email" type="email" placeholder="info@perusahaan.com" />
                                <FieldError :errors="formErrors(form, 'email')" />
                            </Field>

                            <Field>
                                <FieldLabel for="phone" required>
                                    Nomor Telepon
                                </FieldLabel>
                                <PhoneNumberInput id="phone" v-model="form.phone" />
                                <FieldError :errors="formErrors(form, 'phone')" />
                            </Field>
                        </FieldGroup>

                        <FieldGroup class="grid gap-6 sm:grid-cols-3">
                            <MediaDropzone id="logo" v-model="logoState" label="Logo" required
                                description="Disarankan PNG transparan, maks. 2 MB." :max-files="1"
                                :errors="formErrors(form, 'logo')" />

                            <MediaDropzone id="favicon" v-model="faviconState" label="Favicon"
                                description="PNG/SVG, maks. 1 MB." :max-files="1"
                                :errors="formErrors(form, 'favicon')" />

                            <MediaDropzone id="login_cover" v-model="loginCoverState" label="Cover Login" required
                                description="Gambar latar halaman login, maks. 5 MB." :max-files="1"
                                :errors="formErrors(form, 'login_cover')" />
                        </FieldGroup>
                    </FieldSet>
                </CardContent>
            </Card>

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