<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.</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>
                </div>

                <!-- Empty State -->
                <div v-else-if="!hasCard" 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>

                <!-- Single Card Display -->
                <div v-else class="mb-8 md:mb-12">
                    <div class="overflow-hidden rounded-lg border border-gray-100 bg-white shadow-md">
                        <!-- Card Header -->
                        <div class="bg-[var(--midnight-blue)] p-6 text-center text-white">
                            <h2 class="text-2xl font-bold">{{ card.name }}</h2>
                            <div v-if="card.orientation" class="mt-2 text-sm opacity-80">
                                <div v-html="card.orientation === 'reversed' ? 'Inversée' : 'Droite'"></div>
                            </div>
                        </div>

                        <!-- Card Content -->
                        <div class="p-6">
                            <!-- Card Image -->
                            <div class="mb-6 flex justify-center">
                                <img
                                    :src="card.image_url || `/cards/${card.id + 1}.png`"
                                    :alt="card.name"
                                    class="w-full max-w-xs rounded-lg shadow-md"
                                />
                            </div>

                            <!-- General description (if available) -->
                            <div v-if="card.description" class="mb-6">
                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Description</h3>

                                <div class="leading-relaxed text-gray-700" v-html="card.description"></div>
                            </div>

                            <!-- Description based on orientation -->
                            <div class="mb-6">
                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
                                    {{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
                                </h3>
                                <div
                                    class="leading-relaxed text-gray-700"
                                    v-html="card.orientation === 'reversed' ? card.description_reversed : card.description_upright"
                                ></div>
                            </div>

                            <!-- Alternative meaning -->
                            <div class="mb-6">
                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
                                    {{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
                                </h3>
                                <div
                                    class="leading-relaxed text-gray-700"
                                    v-html="card.orientation === 'reversed' ? card.description_upright : card.description_reversed"
                                ></div>
                            </div>

                            <!-- Symbolism -->
                            <div v-if="card.symbolism && Object.keys(card.symbolism).length > 0" class="mb-6">
                                <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Symbolisme</h3>
                                <ul class="space-y-2 text-gray-700">
                                    <li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
                                        <strong class="text-[var(--midnight-blue)]">{{ key }}:</strong> {{ value }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </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>

                    <!-- Nouveau contenu -->
                    <div class="space-y-6 text-left">
                        <!-- En-tête -->
                        <div class="text-center">
                            <h3 class="text-midnight-blue mb-4 font-heading text-xl font-bold md:text-2xl">Cher.e Explorateur des Symboles,</h3>
                        </div>

                        <!-- Grilles de lecture -->
                        <div class="space-y-3">
                            <p class="text-midnight-blue/80 font-medium">Votre tirage en ligne vous a offert 3 grilles de lecture :</p>
                            <div class="space-y-2 pl-4">
                                <div class="flex items-start space-x-2">
                                    <span class="text-subtle-gold mt-1">✦</span>
                                    <p class="text-midnight-blue/80"><strong>La carte-miroir :</strong> votre reflet immédiat</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <span class="text-subtle-gold mt-1">✦</span>
                                    <p class="text-midnight-blue/80"><strong>Les résonances croisées :</strong> interactions énergétiques</p>
                                </div>
                                <div class="flex items-start space-x-2">
                                    <span class="text-subtle-gold mt-1">✦</span>
                                    <p class="text-midnight-blue/80"><strong>Les flux prospectifs :</strong> potentialités à modeler</p>
                                </div>
                            </div>
                        </div>

                        <!-- Explication consultation -->
                        <div class="space-y-3">
                            <p class="text-midnight-blue/80">
                                Ces révélations ne sont qu'un prélude à ce que nous pourrions accomplir en consultation directe. Parce que les arcanes
                                :
                            </p>
                            <div class="space-y-1 pl-4">
                                <p class="text-midnight-blue/80">• S'adaptent à votre voix et à vos micro-expressions</p>
                                <p class="text-midnight-blue/80">• Se densifient grâce au dialogue intuitif en temps réel</p>
                                <p class="text-midnight-blue/80">• Se transmuent en plan d'action sur-mesure</p>
                            </div>
                        </div>

                        <!-- Offre Éclaireur -->
                    </div>

                    <!-- Bouton CTA et informations -->
                </div>
            </div>
        </main>
    </LandingLayout>
</template>
<script setup lang="ts">
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 card = ref<any>(null);
const error = ref<string | null>(null);
const loading = ref(true);

const params = new URLSearchParams(window.location.search);
const cardId = params.get('id');

const hasCard = computed(() => card.value !== null);

onMounted(async () => {
    try {
        const response = await axios.get(`/api/get-card/${cardId}`);
        card.value = response.data.cards;
    } 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>
