<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="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
            <div class="layout-content-container flex w-full max-w-4xl flex-col">
                <!-- Header Section -->
                <div class="mb-8 text-center md:mb-12">
                    <h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
                    <p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
                        Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
                    </p>
                </div>

                <!-- Loading State -->
                <div v-if="loading" class="flex items-center justify-center py-16">
                    <div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
                </div>

                <!-- Error State -->
                <div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
                    <div class="mb-2 font-medium text-red-700">Erreur</div>
                    <p class="text-red-600">{{ error }}</p>
                    <button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
                        Retour
                    </button>
                </div>

                <!-- Empty State -->
                <div v-else-if="!hasCards" class="rounded-lg bg-gray-50 p-8 text-center">
                    <p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
                </div>

                <!-- Cards Results -->
                <div v-else class="mb-8 md:mb-12">
                    <div class="space-y-6 md:space-y-8">
                        <card-result
                            v-for="(card, index) in cards"
                            :key="card.id || index"
                            :card-number="index + 1"
                            :name="card.name"
                            :image-url="card.image_url"
                            :orientation="card.orientation"
                            :description="card.description"
                        />
                    </div>
                </div>

                <!-- Consultation CTA -->
                <div
                    v-if="!loading && !error"
                    class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
                >
                    <div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
                    <p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
                    </p>
                    <button
                        @click="goToBooking"
                        class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
                    >
                        Réserver une Consultation
                    </button>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>

<style scoped>
.layout-content-container {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
