<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>
        <!-- Background elements - all with pointer-events-none -->
        <div class="pointer-events-none absolute inset-0 overflow-hidden">
            <div class="absolute top-0 left-0 h-1/3 w-1/3 opacity-10">
                <img src="/background/IMG_2230.jpg" alt="Decorative background" class="h-full w-full rounded-full object-cover" />
            </div>
            <div class="absolute right-0 bottom-0 h-1/3 w-1/3 opacity-10">
                <img src="/background/IMG_2245.jpg" alt="Decorative background" class="h-full w-full rounded-full object-cover" />
            </div>
            <div
                v-for="i in 8"
                :key="'particle-' + i"
                class="animate-float absolute rounded-full opacity-20"
                :class="{
                    'bg-[var(--c-gold)]': i % 2 === 0,
                    'bg-[var(--c-purple)]': i % 2 === 1,
                }"
                :style="{
                    width: `${10 + i * 2}px`,
                    height: `${10 + i * 2}px`,
                    top: `${(i * 12) % 100}%`,
                    left: `${(i * 10) % 100}%`,
                    animationDelay: `${i * 0.5}s`,
                }"
            ></div>
        </div>

        <main class="relative z-10 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">
                <!-- Header with decorative elements -->
                <div class="relative text-center">
                    <h1 class="relative mb-4 text-4xl font-black text-white md:text-5xl">
                        <span class="relative z-10">Réservez votre consultation</span>
                        <span
                            class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"
                        ></span>
                    </h1>
                    <p class="mx-auto max-w-2xl text-lg text-white/80">
                        Choisissez une date et laissez-vous guider vers une consultation transformative
                    </p>

                    <!-- Decorative sparkles with pointer-events-none -->
                    <div class="pointer-events-none absolute -top-6 -right-6 text-2xl text-[var(--c-gold)] opacity-60">✦</div>
                    <div class="pointer-events-none absolute -bottom-4 -left-6 text-xl text-[var(--c-purple)] opacity-60">✦</div>
                </div>

                <div class="flex w-full flex-wrap items-start justify-center gap-10 md:gap-16">
                    <!-- Date Picker with decorative frame -->
                    <div class="relative">
                        <div
                            class="pointer-events-none absolute -inset-4 rounded-2xl bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 opacity-0 blur-sm transition-opacity duration-500 group-hover:opacity-100"
                        ></div>
                        <date-picker v-model:selectedDate="selectedDate" />
                    </div>

                    <!-- Form Container -->
                    <div
                        class="relative flex max-w-md min-w-[320px] flex-1 flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/90 to-[var(--card)]/80 p-6 shadow-xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-8"
                    >
                        <!-- Background glow effects with pointer-events-none -->
                        <div class="pointer-events-none absolute -top-16 -left-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>

                        <!-- Decorative corner images with pointer-events-none -->
                        <div class="pointer-events-none absolute top-4 left-4 h-12 w-12 opacity-20">
                            <img src="/background/IMG_2230.jpg" alt="Decorative corner" class="h-full w-full rounded-lg object-cover" />
                        </div>
                        <div class="pointer-events-none absolute right-4 bottom-4 h-12 w-12 opacity-20">
                            <img src="/background/IMG_2245.jpg" alt="Decorative corner" class="h-full w-full rounded-lg object-cover" />
                        </div>

                        <!-- Form header with icon -->
                        <div class="relative z-10 text-center">
                            <div
                                class="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)]/30 to-[var(--c-purple)]/20"
                            >
                                <svg class="h-6 w-6 text-[var(--c-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                                    ></path>
                                </svg>
                            </div>
                            <p class="text-lg font-black text-white">Entrez vos informations</p>
                        </div>

                        <form class="relative z-10 flex flex-col gap-6" @submit.prevent="handleAppointment">
                            <div>
                                <label class="mb-2 block flex items-center gap-2 text-sm font-black text-white" for="name">
                                    <span>Nom complet</span>
                                    <span class="text-[var(--c-gold)]">✦</span>
                                </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 ring-0 backdrop-blur-sm transition-colors outline-none 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 flex items-center gap-2 text-sm font-black text-white" for="email">
                                    <span>Adresse e-mail</span>
                                    <span class="text-[var(--c-gold)]">✦</span>
                                </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 ring-0 backdrop-blur-sm transition-colors outline-none 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="gold-trail-btn 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 flex items-center gap-2">
                                    <span>{{ loading ? 'Traitement...' : 'Confirmer et Payer' }}</span>
                                    <svg v-if="!loading" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </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>

                        <!-- Security badge -->
                        <div class="relative z-10 mt-4 flex items-center justify-center gap-2 text-xs text-white/60">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                                ></path>
                            </svg>
                            <span>Paiement sécurisé avec Stripe</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>

<style scoped>
/* Custom animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-5px) rotate(2deg);
    }
    66% {
        transform: translateY(3px) rotate(-2deg);
    }
}

.animate-float {
    animation: float 8s ease-in-out infinite;
}

/* Gold trail effect */
.gold-trail-btn {
    position: relative;
    overflow: hidden;
}

.gold-trail-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
    z-index: 1;
}

.gold-trail-btn:hover::before {
    transform: translateX(100%);
}

/* Custom color variables */
:root {
    --c-purple: #4c1d95;
    --c-gold: rgba(245, 158, 11, 0.9);
    --card: #1e1b4b;
}

/* Smooth transitions */
* {
    transition-property: color, background-color, transform, opacity, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
