<script setup lang="ts">
import DatePicker from '@/components/DatePicker.vue';
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';
import { ref } from 'vue';

interface UserForm {
    fullname: string;
    email: string;
}

const userForm = ref<UserForm>({
    fullname: '',
    email: '',
});
const selectedDate = ref(new Date());

const loading = ref<boolean>(false);

const handleAppointment = () => {
    redirectToStipeCheckout();
};

const redirectToStipeCheckout = async () => {
    loading.value = true;
    try {
        const res = await axios.post('/checkout-rendez-vous', {
            userForm: userForm.value,
            selectedDate: selectedDate.value,
        });
        const sessionId = res.data.sessionId;
        const stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY!);
        if (stripe) {
            const { error } = await stripe.redirectToCheckout({ sessionId });

            if (error) {
                console.error('Stripe redirect error:', error.message);
            }
        }
    } catch (error) {
        console.error('Error initiating Stripe checkout:', error);
    } finally {
        loading.value = false;
    }
};
</script>

<template>
    <LandingLayout>
        <main class="flex flex-1 justify-center px-6 py-16 sm:px-8 lg:px-10">
            <div class="layout-content-container flex w-full max-w-5xl flex-col items-center gap-12">
                <h1 class="text-center text-4xl font-black text-white md:text-5xl">Réservez votre consultation</h1>
                <div class="flex w-full flex-wrap items-start justify-center gap-10 md:gap-16">
                    <date-picker v-model:selectedDate="selectedDate" />
                    <div class="relative flex min-w-[320px] max-w-md flex-1 flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-xl ring-1 ring-[var(--c-purple)]/40 md:p-8">
                        <div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
                        <div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
                        <p class="relative z-10 text-center text-lg font-black text-white">Entrez vos informations</p>
                        <form class="relative z-10 flex flex-col gap-6" @submit.prevent="handleAppointment">
                            <div>
                                <label class="mb-2 block text-sm font-black text-white" for="name">Nom complet</label>
                                <input
                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
                                    id="name"
                                    name="name"
                                    placeholder="Votre nom complet"
                                    type="text"
                                    v-model="userForm.fullname"
                                />
                            </div>
                            <div>
                                <label class="mb-2 block text-sm font-black text-white" for="email">Adresse e-mail</label>
                                <input
                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
                                    id="email"
                                    name="email"
                                    placeholder="Votre adresse e-mail"
                                    type="email"
                                    v-model="userForm.email"
                                />
                            </div>
                            <button
                                class="group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-lg font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:opacity-60"
                                type="submit"
                                :disabled="loading"
                            >
                                <span class="relative z-10">Confirmer et Payer</span>
                                <span class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"></span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>
