<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { toast } from 'vue-sonner';
import ImageUploadField from '@/components/admin/setting/ImageUploadField.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
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 { Textarea } from '@/components/ui/textarea';
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 ?? '',
    logo: null as File | null,
    login_cover: null as File | null,
});

function submit() {
    form.post('/admin/system/setting/system', {
        forceFormData: true,
        preserveScroll: true,
        onError: () => {
            toast.error('Gagal menyimpan pengaturan sistem.');
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <div class="grid gap-6">
            <Card>
                <CardHeader>
                    <CardTitle>Informasi Aplikasi</CardTitle>
                    <CardDescription>
                        Nama, deskripsi, dan kontak yang ditampilkan di aplikasi.
                    </CardDescription>
                </CardHeader>
                <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="form.errors.app_name ? [form.errors.app_name] : []" />
                            </Field>

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

                            <Field>
                                <FieldLabel for="email">
                                    Email
                                </FieldLabel>
                                <Input id="email" v-model="form.email" type="email" placeholder="info@perusahaan.com" />
                                <FieldError :errors="form.errors.email ? [form.errors.email] : []" />
                            </Field>

                            <Field>
                                <FieldLabel for="phone">
                                    Nomor Telepon
                                </FieldLabel>
                                <PhoneNumberInput id="phone" v-model="form.phone" />
                                <FieldError :errors="form.errors.phone ? [form.errors.phone] : []" />
                            </Field>
                        </FieldGroup>
                    </FieldSet>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Branding</CardTitle>
                    <CardDescription>
                        Logo aplikasi dan gambar latar halaman login.
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <FieldGroup class="grid gap-6 sm:grid-cols-2">
                        <ImageUploadField id="logo" v-model="form.logo" label="Logo"
                            description="Disarankan PNG transparan, maks. 2 MB." :current-url="data.logo_url"
                            :errors="form.errors.logo ? [form.errors.logo] : []" />

                        <ImageUploadField id="login_cover" v-model="form.login_cover" label="Cover Login"
                            description="Gambar latar halaman login, maks. 5 MB." :current-url="data.login_cover_url"
                            :errors="form.errors.login_cover ? [form.errors.login_cover] : []" />
                    </FieldGroup>
                </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>
