<script setup>
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { useForm } from '@inertiajs/vue3';

const props = defineProps({
    hasTransactionPin: {
        type: Boolean,
        default: false,
    },
});

const form = useForm({
    current_transaction_pin: '',
    transaction_pin: '',
    transaction_pin_confirmation: '',
});

const submit = () => {
    form.patch(route('profile.transaction-pin.update'), {
        preserveScroll: true,
        onSuccess: () => form.reset(),
        onError: () => {
            form.reset('current_transaction_pin', 'transaction_pin', 'transaction_pin_confirmation');
        },
    });
};
</script>

<template>
    <section>
        <header>
            <h2 class="text-lg font-medium text-gray-900">Transaction PIN</h2>
            <p class="mt-1 text-sm text-gray-600">
                Set a 4-digit PIN required before completing wallet purchases.
            </p>
        </header>

        <form class="mt-6 space-y-6" @submit.prevent="submit">
            <div v-if="hasTransactionPin">
                <InputLabel for="current_transaction_pin" value="Current Transaction PIN" />
                <TextInput
                    id="current_transaction_pin"
                    v-model="form.current_transaction_pin"
                    type="password"
                    inputmode="numeric"
                    maxlength="4"
                    class="mt-1 block w-full"
                    autocomplete="off"
                    placeholder="Current 4-digit PIN"
                />
                <InputError :message="form.errors.current_transaction_pin" class="mt-2" />
            </div>

            <div>
                <InputLabel for="transaction_pin" :value="hasTransactionPin ? 'New Transaction PIN' : 'Transaction PIN'" />
                <TextInput
                    id="transaction_pin"
                    v-model="form.transaction_pin"
                    type="password"
                    inputmode="numeric"
                    maxlength="4"
                    class="mt-1 block w-full"
                    autocomplete="off"
                    placeholder="4-digit PIN"
                />
                <InputError :message="form.errors.transaction_pin" class="mt-2" />
            </div>

            <div>
                <InputLabel for="transaction_pin_confirmation" value="Confirm Transaction PIN" />
                <TextInput
                    id="transaction_pin_confirmation"
                    v-model="form.transaction_pin_confirmation"
                    type="password"
                    inputmode="numeric"
                    maxlength="4"
                    class="mt-1 block w-full"
                    autocomplete="off"
                    placeholder="Repeat 4-digit PIN"
                />
                <InputError :message="form.errors.transaction_pin_confirmation" class="mt-2" />
            </div>

            <div class="flex items-center gap-4">
                <PrimaryButton :disabled="form.processing">{{ hasTransactionPin ? 'Update PIN' : 'Set PIN' }}</PrimaryButton>
                <Transition enter-active-class="transition ease-in-out" enter-from-class="opacity-0" leave-active-class="transition ease-in-out" leave-to-class="opacity-0">
                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600">Saved.</p>
                </Transition>
            </div>
        </form>
    </section>
</template>
