<script setup lang="ts">
import CardResult from '@/components/ui/card/CardResult.vue';
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { router } from '@inertiajs/vue3';
import axios from 'axios';
import { computed, onMounted, ref } from 'vue';

const goToBooking = () => {
    router.visit('/rendez-vous');
};

const cards = ref<Array<any>>([]);
const error = ref<string | null>(null);
const loading = ref(true);

const params = new URLSearchParams(window.location.search);
const clientSessionId = params.get('client_session_id');

const hasCards = computed(() => cards.value.length > 0);

onMounted(async () => {
    if (!clientSessionId) {
        error.value = 'No session ID provided. Please return to the payment page.';
        loading.value = false;
        return;
    }

    try {
        const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`);

        if (response.data.success) {
            cards.value = response.data.cards;
        } else {
            error.value = response.data.message || 'An error occurred while validating payment.';
        }
    } catch (err: any) {
        console.error('Card fetch error:', err);
        error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
    } finally {
        loading.value = false;
    }
});
</script>

<template>
    <LandingLayout>
        <main class="min-h-screen bg-gradient-to-br py-8">
            <div class="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                <!-- Header Section -->
                <div class="mt-10 mb-12 text-center md:mb-16">
                    <h1
                        class="mb-4 bg-gradient-to-r from-purple-300 via-purple-200 to-purple-100 bg-clip-text text-4xl font-black text-transparent md:text-5xl lg:text-6xl"
                    >
                        Votre Lecture Spirituelle
                    </h1>
                    <p class="mx-auto max-w-3xl text-lg leading-relaxed text-purple-300/80 md:text-xl">
                        Découvrez les messages que l'univers a préparés pour vous. Cette analyse détaillée vous guidera sur votre chemin.
                    </p>
                </div>

                <!-- Loading State -->
                <div v-if="loading" class="flex flex-col items-center justify-center py-20">
                    <div class="relative">
                        <div class="h-16 w-16 animate-spin rounded-full border-4 border-purple-700/30"></div>
                        <div
                            class="absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform animate-pulse rounded-full bg-gradient-to-r from-purple-400 to-purple-300"
                        ></div>
                    </div>
                    <p class="mt-6 font-medium text-purple-300/80">Chargement de votre lecture...</p>
                </div>

                <!-- Error State -->
                <div v-else-if="error" class="mx-auto mb-12 max-w-2xl">
                    <div
                        class="rounded-2xl border border-red-700/30 bg-gradient-to-br from-red-900/30 to-purple-900/40 p-8 text-center shadow-2xl backdrop-blur-sm"
                    >
                        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-red-700/20 bg-red-900/40">
                            <div class="text-2xl text-red-300">⚠️</div>
                        </div>
                        <h3 class="mb-2 text-xl font-bold text-red-200">Une erreur est survenue</h3>
                        <p class="mb-6 text-red-300/90">{{ error }}</p>
                        <button
                            @click="$router.back()"
                            class="transform rounded-full border border-red-500/20 bg-gradient-to-r from-red-600 to-purple-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
                        >
                            Retour à la page précédente
                        </button>
                    </div>
                </div>

                <!-- Empty State -->
                <div v-else-if="!hasCards" class="mx-auto max-w-2xl">
                    <div
                        class="rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-indigo-900/30 p-12 text-center shadow-2xl backdrop-blur-sm"
                    >
                        <div
                            class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-purple-600/20 bg-purple-800/30"
                        >
                            <div class="text-3xl text-purple-300">🔮</div>
                        </div>
                        <h3 class="mb-3 text-2xl font-bold text-purple-200">Aucune carte trouvée</h3>
                        <p class="mb-6 text-purple-300/80">Votre session n'a pas généré de lecture. Veuillez réessayer ou contacter le support.</p>
                        <button
                            @click="$router.back()"
                            class="rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:shadow-lg"
                        >
                            Nouvelle tentative
                        </button>
                    </div>
                </div>

                <!-- Cards Results -->
                <div v-else class="mb-12 md:mb-16">
                    <div class="grid gap-8 md:gap-10">
                        <div
                            v-for="(card, index) in cards"
                            :key="card.id || index"
                            class="transform transition-all duration-500 hover:scale-[1.02]"
                            :style="{ animationDelay: `${index * 100}ms` }"
                        >
                            <card-result
                                :card-number="card.id"
                                :name="card.name"
                                :image-url="card.image_url"
                                :orientation="card.orientation"
                                :description="card.description"
                            />
                        </div>
                    </div>
                </div>

                <!-- Consultation CTA -->
                <div
                    v-if="!loading && !error && hasCards"
                    class="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-purple-800/30 p-8 shadow-2xl backdrop-blur-sm md:p-12"
                >
                    <!-- Background decoration -->
                    <div
                        class="absolute top-0 right-0 h-32 w-32 translate-x-16 -translate-y-16 rounded-full bg-gradient-to-br from-purple-700/20 to-purple-600/10"
                    ></div>
                    <div
                        class="absolute bottom-0 left-0 h-24 w-24 -translate-x-12 translate-y-12 rounded-full bg-gradient-to-tr from-purple-700/20 to-purple-600/10"
                    ></div>
                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent"></div>

                    <div class="relative z-10 text-center">
                        <div
                            class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full border border-purple-400/30 bg-gradient-to-br from-purple-500 to-purple-400"
                        >
                            <div class="text-2xl text-purple-950">🌟</div>
                        </div>
                        <h3 class="mb-4 bg-gradient-to-r from-purple-300 to-purple-200 bg-clip-text text-2xl font-black text-transparent md:text-3xl">
                            Approfondissez Votre Voyage
                        </h3>
                        <p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-purple-300/80">
                            Pour une guidance personnalisée et une compréhension plus profonde de votre chemin de vie, réservez une consultation
                            privée avec Kris Saint Ange.
                        </p>
                        <button
                            @click="goToBooking"
                            class="group relative transform rounded-full border border-purple-400/30 bg-gradient-to-r from-purple-500 to-purple-400 px-8 py-4 text-lg font-bold tracking-wide text-purple-950 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:from-purple-400 hover:to-purple-300 hover:shadow-xl"
                        >
                            <span class="relative z-10 flex items-center justify-center">
                                Réserver une Consultation
                                <svg
                                    class="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                </svg>
                            </span>
                            <div
                                class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-purple-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                            ></div>
                        </button>
                        <p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
                    </div>
                </div>

                <!-- Success Message -->
                <div
                    v-if="!loading && !error && hasCards"
                    class="mx-auto mt-8 max-w-2xl rounded-2xl border border-green-700/30 bg-gradient-to-r from-green-900/30 to-emerald-900/20 p-6 text-center backdrop-blur-sm"
                >
                    <div class="flex items-center justify-center space-x-3">
                        <div class="flex h-8 w-8 items-center justify-center rounded-full border border-green-600/20 bg-green-800/40">
                            <div class="text-green-300">✓</div>
                        </div>
                        <p class="font-medium text-green-200">Votre lecture a été générée avec succès !</p>
                    </div>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>

<style scoped>
.container {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for cards */
.grid > * {
    animation: slideInLeft 0.6s ease-out both;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--muted);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Glow effects for interactive elements */
button {
    box-shadow: 0 4px 15px rgba(128, 90, 213, 0.3);
}

button:hover {
    box-shadow: 0 8px 25px rgba(128, 90, 213, 0.5);
}

/* Subtle background pattern */
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(199, 120, 221, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(128, 90, 213, 0.05) 0%, transparent 50%);
    pointer-events: none;
}
</style>
