<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 {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import AccountLayout from '@/layouts/AccountLayout.vue';
import type { PasswordFormData } from '@/types/account';

const form = useForm<PasswordFormData>({
    current_password: '',
    password: '',
    password_confirmation: '',
});

function submit() {
    form.put('/admin/account/password', {
        onSuccess: () => {
            form.reset();
        },
        onError: () => {
            toast.error('Gagal memperbarui kata sandi. Periksa kembali formulir.');
        },
    });
}
</script>

<template>

    <Head title="Kata Sandi" />

    <AccountLayout>
        <form @submit.prevent="submit">
            <div class="grid gap-6">
                <Card>
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-3">
                                <Field>
                                    <FieldLabel for="current_password" required>
                                        Kata Sandi Saat Ini
                                    </FieldLabel>
                                    <Input id="current_password" v-model="form.current_password" type="password"
                                        placeholder="********" autocomplete="current-password" />
                                    <FieldError
                                        :errors="form.errors.current_password ? [form.errors.current_password] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="password" required>
                                        Kata Sandi Baru
                                    </FieldLabel>
                                    <Input id="password" v-model="form.password" type="password" placeholder="********"
                                        autocomplete="new-password" />
                                    <FieldError :errors="form.errors.password ? [form.errors.password] : []" />
                                </Field>

                                <Field>
                                    <FieldLabel for="password_confirmation" required>
                                        Konfirmasi Kata Sandi Baru
                                    </FieldLabel>
                                    <Input id="password_confirmation" v-model="form.password_confirmation"
                                        type="password" placeholder="********" autocomplete="new-password" />
                                    <FieldError
                                        :errors="form.errors.password_confirmation ? [form.errors.password_confirmation] : []" />
                                </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>
    </AccountLayout>
</template>
