<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-10 py-16">
            <div class="layout-content-container flex w-full max-w-4xl flex-col items-center gap-12">
                <h1 class="text-center text-5xl font-bold text-[var(--midnight-blue)]">Réservez votre consultation</h1>
                <div class="flex w-full flex-wrap items-start justify-center gap-16">
                    <date-picker v-model:selectedDate="selectedDate" />
                    <div class="flex max-w-md min-w-[320px] flex-1 flex-col gap-6">
                        <p class="text-center text-lg text-[var(--midnight-blue)]">Entrez vos informations</p>
                        <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
                            <div>
                                <label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="name">Nom complet</label>
                                <input
                                    class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
                                    id="name"
                                    name="name"
                                    placeholder="Votre nom complet"
                                    type="text"
                                    v-model="userForm.fullname"
                                />
                            </div>
                            <div>
                                <label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="email">Adresse e-mail</label>
                                <input
                                    class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
                                    id="email"
                                    name="email"
                                    placeholder="Votre adresse e-mail"
                                    type="email"
                                    v-model="userForm.email"
                                />
                            </div>
                            <button
                                class="mt-6 flex h-14 w-full cursor-pointer items-center justify-center rounded-full bg-[var(--midnight-blue)] px-8 text-lg font-bold tracking-wide text-[var(--pure-white)] shadow-[var(--linen)] shadow-lg transition-colors duration-300 hover:bg-[var(--spiritual-earth)]"
                                type="submit"
                            >
                                <span class="truncate">Confirmer et Payer</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>
