<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-5xl flex-col">
                <!-- Header Section -->
                <div class="mb-8 text-center md:mb-12">
                    <h1 class="mb-2 text-3xl font-black text-white sm:text-4xl md:text-5xl">Votre Lecture</h1>
                    <p class="mx-auto max-w-2xl text-base text-white/70 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="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-2xl ring-1 ring-[var(--c-purple)]/40 md:p-10"
                    >
                        <!-- Ambient glows -->
                        <div class="pointer-events-none absolute -top-20 -left-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
                        <div class="pointer-events-none absolute -right-20 -bottom-20 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>

                        <!-- Card Header -->
                        <div class="relative z-10 mb-6 text-center">
                            <h2 class="text-3xl font-black text-white md:text-4xl">{{ card.name }}</h2>
                            <div v-if="card.orientation" class="mt-2 text-sm text-white/70">
                                <div v-html="card.orientation === 'reversed' ? 'Inversée' : 'Droite'"></div>
                            </div>
                        </div>

                        <!-- Card Content -->
                        <div class="relative z-10 p-0 md:p-2">
                            <!-- Card Image -->
                            <div class="mb-8 flex justify-center">
                                <div class="relative h-[420px] w-[280px] overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 shadow-xl">
                                    <img
                                        :src="card.image_url || `/cards/${card.id + 1}.png`"
                                        :alt="card.name"
                                        class="absolute inset-0 h-full w-full rounded-2xl object-cover"
                                    />
                                    <div
                                        class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center"
                                    >
                                        <p class="text-sm font-bold text-white">{{ card.name }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Descriptions -->
                            <div v-if="card.description" class="mb-8">
                                <h3 class="mb-3 text-lg font-black text-white">Description</h3>
                                <div class="prose prose-invert max-w-none text-white/80" v-html="card.description"></div>
                            </div>

                            <div class="mb-8">
                                <h3 class="mb-3 text-lg font-black text-white">
                                    {{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
                                </h3>
                                <div
                                    class="prose prose-invert max-w-none text-white/80"
                                    v-html="card.orientation === 'reversed' ? card.description_reversed : card.description_upright"
                                ></div>
                            </div>

                            <div class="mb-6">
                                <h3 class="mb-3 text-lg font-black text-white">
                                    {{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
                                </h3>
                                <div
                                    class="prose prose-invert max-w-none text-white/80"
                                    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-black text-white">Symbolisme</h3>
                                <ul class="space-y-2 text-white/80">
                                    <li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
                                        <strong class="text-white">{{ key }}:</strong> {{ value }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Consultation CTA -->
                <div
                    v-if="!loading && !error"
                    class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
                >
                    <!-- Animated background -->
                    <div
                        class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
                    ></div>

                    <div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
                    <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>

                    <div class="relative z-10">
                        <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
                            <span class="text-2xl">💫</span>
                            <span class="text-lg font-bold text-white">Guidance Approfondie</span>
                        </div>
                        <p class="relative z-10 mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">
                            Pour une analyse personnalisée et une guidance plus approfondie, réservez une consultation privée avec Kris Saint Ange.
                        </p>
                        <button
                            @click="goToBooking"
                            class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
                        >
                            <span class="relative z-10">Réserver une Consultation</span>
                            <span
                                class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
                            ></span>
                        </button>
                    </div>
                </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>
<style scoped>
/* Button styles */
.mystic-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.mystic-btn-primary {
    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
    box-shadow: 0 0 25px rgba(125, 91, 166, 0.7);
}

.mystic-btn-primary:hover {
    box-shadow: 0 0 35px rgba(125, 91, 166, 0.9);
}

.mystic-btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.mystic-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

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

.mystic-btn:hover::before {
    transform: translateX(100%);
}
</style>
