<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 container - only affects the main content -->
        <div class="relative min-h-screen">
            <!-- Background with mystical elements - only for main content -->
            <div class="absolute inset-0 z-0 overflow-hidden">
                <!-- Main background with gradient overlay -->
                <div class="absolute inset-0 bg-gradient-to-br from-[var(--light-ivory)]/95 via-white/90 to-[var(--linen)]/80"></div>

                <!-- Background image with very low opacity -->
                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-50" style="background-image: url('/aganda-back.jpg')"></div>

                <!-- Decorative floating elements -->
                <div class="absolute top-1/4 left-1/4 h-32 w-32 rounded-full bg-[var(--subtle-gold)]/10 blur-xl"></div>
                <div class="absolute right-1/4 bottom-1/3 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/5 blur-xl"></div>
                <div class="absolute top-1/3 right-1/3 h-24 w-24 rounded-full bg-[var(--spiritual-earth)]/8 blur-lg"></div>

                <!-- Subtle pattern overlay -->
                <div
                    class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:60px_60px] opacity-[0.02]"
                ></div>
            </div>

            <!-- Main content with background -->
            <main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
                <div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
                    <!-- Enhanced Header Section -->
                    <div class="max-w-3xl text-center">
                        <h1 class="mb-6 font-serif text-4xl font-bold text-[var(--midnight-blue)] sm:text-5xl lg:text-6xl">
                            Réservez votre consultation
                        </h1>
                        <p class="mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80 sm:text-xl">
                            Choisissez la date de votre consultation spirituelle et laissez-vous guider vers l'éclaircissement
                        </p>
                    </div>

                    <!-- Main Content Container -->
                    <div class="flex w-full flex-col items-center justify-center gap-12 lg:flex-row lg:items-start lg:gap-16 xl:gap-20">
                        <!-- Date Picker Card -->
                        <div class="w-full max-w-md lg:max-w-lg">
                            <div class="rounded-2xl border border-white/50 bg-white/80 p-6 shadow-xl backdrop-blur-sm">
                                <div class="mb-6 text-center">
                                    <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Choisissez votre date</h2>
                                    <p class="mt-2 text-[var(--midnight-blue)]/70">Sélectionnez le moment parfait pour votre guidance</p>
                                </div>
                                <date-picker v-model:selectedDate="selectedDate" />
                            </div>
                        </div>

                        <!-- Form Card -->
                        <div class="w-full max-w-md">
                            <div class="rounded-2xl border border-white/50 bg-white/80 p-8 shadow-xl backdrop-blur-sm">
                                <div class="mb-8 text-center">
                                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
                                        <svg class="h-6 w-6 text-[var(--subtle-gold)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <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"
                                            />
                                        </svg>
                                    </div>
                                    <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Vos informations</h2>
                                    <p class="mt-2 text-[var(--midnight-blue)]/70">Remplissez vos coordonnées pour finaliser la réservation</p>
                                </div>

                                <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
                                    <!-- Name Input -->
                                    <div class="group">
                                        <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="name"> Nom complet </label>
                                        <div class="relative">
                                            <input
                                                class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
                                                id="name"
                                                name="name"
                                                placeholder="Votre nom complet"
                                                type="text"
                                                v-model="userForm.fullname"
                                                required
                                            />
                                            <div
                                                class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
                                            ></div>
                                        </div>
                                    </div>

                                    <!-- Email Input -->
                                    <div class="group">
                                        <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="email">
                                            Adresse e-mail
                                        </label>
                                        <div class="relative">
                                            <input
                                                class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
                                                id="email"
                                                name="email"
                                                placeholder="Votre adresse e-mail"
                                                type="email"
                                                v-model="userForm.email"
                                                required
                                            />
                                            <div
                                                class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
                                            ></div>
                                        </div>
                                    </div>

                                    <!-- Selected Date Display -->
                                    <div class="rounded-xl border border-[var(--linen)] bg-[var(--light-ivory)]/50 p-4">
                                        <p class="mb-1 text-sm font-medium text-[var(--midnight-blue)]">Date sélectionnée :</p>
                                        <p class="text-lg font-semibold text-[var(--spiritual-earth)]">
                                            {{
                                                selectedDate.toLocaleDateString('fr-FR', {
                                                    weekday: 'long',
                                                    year: 'numeric',
                                                    month: 'long',
                                                    day: 'numeric',
                                                })
                                            }}
                                        </p>
                                    </div>

                                    <!-- Submit Button -->
                                    <button
                                        class="group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
                                        type="submit"
                                        :disabled="loading || !userForm.fullname || !userForm.email"
                                    >
                                        <!-- Shine effect -->
                                        <span
                                            class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
                                        ></span>

                                        <!-- Button content -->
                                        <span class="relative z-10 flex items-center gap-3">
                                            <svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path
                                                    class="opacity-75"
                                                    fill="currentColor"
                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                                ></path>
                                            </svg>
                                            <span>{{ loading ? 'Traitement...' : 'Confirmer et Payer' }}</span>
                                            <svg
                                                v-if="!loading"
                                                class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
                                                fill="none"
                                                viewBox="0 0 24 24"
                                                stroke="currentColor"
                                            >
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                            </svg>
                                        </span>
                                    </button>

                                    <!-- Security Note -->
                                    <p class="mt-4 text-center text-xs text-[var(--midnight-blue)]/60">
                                        🔒 Paiement sécurisé via Stripe. Vos informations sont protégées.
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="mt-8 max-w-2xl text-center">
                        <div
                            class="inline-flex items-center gap-4 rounded-2xl border border-white/50 bg-white/50 px-6 py-4 text-sm text-[var(--midnight-blue)]/70 backdrop-blur-sm"
                        >
                            <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                                />
                            </svg>
                            <span>Consultation confidentielle • Guidance personnalisée • Support après séance</span>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </LandingLayout>
</template>

<style scoped>
/* Custom animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Smooth transitions for form elements */
.form-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure the background doesn't leak into footer */
.relative.min-h-screen {
    background: transparent;
}

/* Custom scrollbar for date picker if needed */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--light-ivory);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--subtle-gold);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--spiritual-earth);
}
</style>
