<script setup>
import { ref } from 'vue';
import GuestLayout from '@/Layouts/GuestLayout.vue';
import AppModal from '@/Components/ui/AppModal.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';

const props = defineProps({
    referral: {
        type: Object,
        default: () => ({
            enabled: false,
            prefill_code: '',
            default_reward_amount: '0.00',
        }),
    },
    legal: {
        type: Object,
        default: () => ({
            terms_title: 'Terms and Conditions',
            terms_content: '',
            terms_version: 1,
        }),
    },
});

const form = useForm({
    name: '',
    email: '',
    phone: '',
    bvn: '',
    password: '',
    password_confirmation: '',
    transaction_pin: '',
    transaction_pin_confirmation: '',
    referral_code: props.referral?.prefill_code || '',
    terms_accepted: false,
});

const showTermsModal = ref(false);

const openTermsModal = () => {
    showTermsModal.value = true;
};

const acceptTerms = () => {
    form.terms_accepted = true;
    form.clearErrors('terms_accepted');
    showTermsModal.value = false;
};

const declineTerms = () => {
    form.terms_accepted = false;
    showTermsModal.value = false;
};

const submit = () => {
    if (!form.terms_accepted) {
        form.setError('terms_accepted', 'You must accept the Terms and Conditions before creating your account.');
        openTermsModal();
        return;
    }

    form.post(route('register'), {
        onFinish: () => form.reset('password', 'password_confirmation', 'transaction_pin', 'transaction_pin_confirmation'),
    });
};
</script>

<template>
    <GuestLayout>
        <Head title="Create Account" />

        <div class="space-y-5">
            <div class="rounded-2xl bg-gradient-to-br from-[var(--brand-primary)] via-[var(--brand-secondary)] to-[var(--brand-accent)] p-4 text-white">
                <div class="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">Create Account</div>
                <h1 class="mt-2 text-xl font-semibold">Get Started</h1>
                <p class="mt-1 text-xs text-slate-300">
                    Register, get a wallet, set your 4-digit transaction PIN, and start buying data/airtime.
                </p>
            </div>

            <form class="space-y-4" @submit.prevent="submit">
                <div>
                    <label for="name" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Full Name</label>
                    <input
                        id="name"
                        v-model="form.name"
                        type="text"
                        class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                        required
                        autofocus
                        autocomplete="name"
                        placeholder="Full Name"
                    />
                    <p v-if="form.errors.name" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.name }}</p>
                </div>

                <div>
                    <label for="email" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Email Address</label>
                    <input
                        id="email"
                        v-model="form.email"
                        type="email"
                        class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                        required
                        autocomplete="username"
                        placeholder="Email Address"
                    />
                    <p v-if="form.errors.email" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.email }}</p>
                </div>

                <div>
                    <label for="phone" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Phone Number</label>
                    <input
                        id="phone"
                        v-model="form.phone"
                        type="tel"
                        inputmode="numeric"
                        maxlength="15"
                        class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                        required
                        autocomplete="tel"
                        placeholder="Phone Number"
                    />
                    <p v-if="form.errors.phone" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.phone }}</p>
                </div>

                <div>
                    <label for="bvn" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">BVN (Optional)</label>
                    <input
                        id="bvn"
                        v-model="form.bvn"
                        type="text"
                        inputmode="numeric"
                        maxlength="11"
                        class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                        autocomplete="off"
                        placeholder="BVN"
                    />
                    <p v-if="form.errors.bvn" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.bvn }}</p>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="password" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Password</label>
                        <input
                            id="password"
                            v-model="form.password"
                            type="password"
                            class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                            required
                            autocomplete="new-password"
                            placeholder="Password"
                        />
                        <p v-if="form.errors.password" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.password }}</p>
                    </div>

                    <div>
                        <label for="password_confirmation" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Confirm Password</label>
                        <input
                            id="password_confirmation"
                            v-model="form.password_confirmation"
                            type="password"
                            class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                            required
                            autocomplete="new-password"
                            placeholder="Confirm Password"
                        />
                        <p v-if="form.errors.password_confirmation" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.password_confirmation }}</p>
                    </div>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                    <div class="text-sm font-semibold text-slate-900">Transaction PIN</div>
                    <p class="mt-1 text-xs text-slate-500">This 4-digit PIN is required before you can complete any purchase.</p>

                    <div class="mt-3 grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="transaction_pin" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">4-digit PIN</label>
                            <input
                                id="transaction_pin"
                                v-model="form.transaction_pin"
                                type="password"
                                inputmode="numeric"
                                maxlength="4"
                                class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                                required
                                autocomplete="off"
                                placeholder="4-digit PIN"
                            />
                            <p v-if="form.errors.transaction_pin" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.transaction_pin }}</p>
                        </div>

                        <div>
                            <label for="transaction_pin_confirmation" class="text-xs font-semibold uppercase tracking-[0.13em] text-slate-600">Confirm PIN</label>
                            <input
                                id="transaction_pin_confirmation"
                                v-model="form.transaction_pin_confirmation"
                                type="password"
                                inputmode="numeric"
                                maxlength="4"
                                class="mt-1.5 block w-full rounded-xl border-slate-300 bg-white px-3 py-2.5 text-sm shadow-sm"
                                required
                                autocomplete="off"
                                placeholder="Confirm PIN"
                            />
                            <p v-if="form.errors.transaction_pin_confirmation" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.transaction_pin_confirmation }}</p>
                        </div>
                    </div>
                </div>

                <div v-if="referral?.enabled" class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold text-emerald-900">Referral (Optional)</div>
                            <p class="mt-1 text-xs text-emerald-700">
                                Have a referral code? Enter it here. Admin may reward the referrer (default reward: NGN {{ referral?.default_reward_amount || '0.00' }}).
                            </p>
                        </div>
                        <span class="rounded-full border border-emerald-300 bg-white px-2 py-1 text-[11px] font-semibold text-emerald-800">Enabled</span>
                    </div>

                    <div class="mt-3">
                        <label for="referral_code" class="text-xs font-semibold uppercase tracking-[0.13em] text-emerald-900">Referral Code</label>
                        <input
                            id="referral_code"
                            v-model="form.referral_code"
                            type="text"
                            class="mt-1.5 block w-full rounded-xl border-emerald-300 bg-white px-3 py-2.5 text-sm uppercase shadow-sm"
                            placeholder="Referral Code"
                            autocomplete="off"
                        />
                        <p v-if="form.errors.referral_code" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.referral_code }}</p>
                    </div>
                </div>

                <div class="flex items-center justify-between gap-3 pt-1">
                    <div class="w-full rounded-2xl border border-slate-200 bg-slate-50 p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-sm font-semibold text-slate-900">{{ legal?.terms_title || 'Terms and Conditions' }}</div>
                            <span class="rounded-full border border-slate-300 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-700">v{{ legal?.terms_version || 1 }}</span>
                        </div>
                        <div class="mt-2 text-xs text-slate-600">
                            Tap below to read and accept the latest terms before creating your account.
                        </div>
                        <label
                            class="mt-3 inline-flex cursor-pointer items-start gap-2 text-xs text-slate-700"
                            @click.prevent="openTermsModal"
                        >
                            <input
                                :checked="form.terms_accepted"
                                type="checkbox"
                                class="mt-0.5 rounded border-gray-300"
                                @click.prevent="openTermsModal"
                            />
                            I have read and agree to the Terms and Conditions.
                        </label>
                        <p v-if="form.errors.terms_accepted" class="mt-1 text-xs font-medium text-rose-600">{{ form.errors.terms_accepted }}</p>
                    </div>
                </div>

                <div class="flex items-center justify-between gap-3 pt-1">
                    <Link
                        :href="route('login')"
                        class="text-sm font-medium text-slate-600 underline decoration-dotted underline-offset-4 hover:text-slate-900"
                    >
                        Already registered?
                    </Link>

                    <button
                        type="submit"
                        class="inline-flex items-center justify-center rounded-xl bg-[var(--brand-primary)] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-95 active:opacity-90 disabled:opacity-50"
                        :disabled="form.processing || !form.terms_accepted"
                    >
                        {{ form.processing ? 'Creating account...' : 'Create Account' }}
                    </button>
                </div>
            </form>

            <AppModal :show="showTermsModal" :centered="true" :title="legal?.terms_title || 'Terms and Conditions'" @close="declineTerms">
                <div class="space-y-3">
                    <div class="flex items-center justify-between gap-3">
                        <span class="text-xs text-slate-500">Version {{ legal?.terms_version || 1 }}</span>
                        <span class="text-[11px] text-slate-500">Please review before accepting</span>
                    </div>
                    <div class="max-h-[55vh] overflow-y-auto rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs leading-5 text-slate-700 whitespace-pre-line">
                        {{ legal?.terms_content || 'Terms are not available yet.' }}
                    </div>
                    <div class="flex items-center justify-end gap-2">
                        <button
                            type="button"
                            class="rounded-md border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700"
                            @click="declineTerms"
                        >
                            Decline
                        </button>
                        <button
                            type="button"
                            class="rounded-md bg-slate-900 px-3 py-2 text-xs font-semibold text-white"
                            @click="acceptTerms"
                        >
                            Accept
                        </button>
                    </div>
                </div>
            </AppModal>
        </div>
    </GuestLayout>
</template>
