<script setup lang="ts">
import { useTarotStore } from '@/stores/tarot';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';
import { computed, ref } from 'vue';

const tarotStore = useTarotStore();
const isSelectionScreen = ref(true);
const loading = ref(false);

const drawCount = ref(0);

// Emits the draw selection back to parent
const emit = defineEmits<{
    (e: 'selectDraw', count: number): void;
}>();

const handleSelection = async (count: number) => {
    drawCount.value = count;

    if (count == 1 && tarotStore.freeDrawsRemaining <= 0) {
        alert('You have used your free draw. Please choose a paid option to unlock more.');
        return;
    }
    if (count > 1 && tarotStore.paidDrawsRemaining < count) {
        await redirectToStripeCheckout(count);
        return;
    }
    emit('selectDraw', count);
};

const redirectToStripeCheckout = async (count: number) => {
    loading.value = true;
    try {
        // 1. Send request to your Laravel backend to create a Stripe Checkout Session
        const res = await axios.post('/create-checkout-session', { count });
        const { sessionId } = res.data;

        // 2. Load Stripe.js with your publishable key
        const stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY!);

        // 3. Redirect to Stripe Checkout using the session ID from the backend
        if (stripe) {
            const { error } = await stripe.redirectToCheckout({ sessionId });

            if (error) {
                console.error('Stripe redirect error:', error.message);
                alert('Payment failed. Please try again.');
            }
        }
    } catch (error) {
        console.error('Error initiating Stripe checkout:', error);
        alert('Payment processing failed. Please try again.');
    } finally {
        loading.value = false;
    }
};

// Computed to disable the free draw button if used
const isFreeDrawUsed = computed(() => tarotStore.freeDrawsRemaining <= 0);

// Hover state for cards
const hoveredCard = ref(null);

const setHover = (index) => {
    hoveredCard.value = index;
};

const clearHover = () => {
    hoveredCard.value = null;
};
</script>
<template>
    <section class="px-4 py-16 sm:py-20">
        <h2 class="mb-12 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">
            Explorez Nos <span class="text-[var(--subtle-gold)]">Lectures</span>
        </h2>

        <p
            v-if="isFreeDrawUsed"
            class="mx-auto mb-8 max-w-2xl rounded-lg bg-[var(--light-ivory)] p-4 text-center text-lg font-semibold text-[var(--spiritual-earth)]"
        >
            Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
        </p>

        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
            <!-- Free draw -->
            <div
                class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
                :class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
                @mouseenter="setHover(1)"
                @mouseleave="clearHover"
            >
                <!-- Decorative elements -->
                <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>

                <div class="text-center">
                    <div class="mb-4 flex justify-center">
                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
                            <svg
                                xmlns="http://www.w3.org/2000/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="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
                                />
                            </svg>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
                    <p class="mt-4 text-sm text-gray-600 md:text-base">
                        Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
                    </p>
                </div>
                <button
                    :disabled="isFreeDrawUsed"
                    class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
                    @click="handleSelection(1)"
                >
                    <span>Commencer</span>
                    <svg
                        v-if="!isFreeDrawUsed"
                        xmlns="http://www.w3.org/2000/svg"
                        class="ml-2 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="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </button>
            </div>

            <!-- Premium option -->
            <div
                class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-b from-[var(--midnight-blue)] to-[#1a365d] p-6 shadow-xl transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl md:scale-105 md:p-8"
                @mouseenter="setHover(2)"
                @mouseleave="clearHover"
            >
                <!-- Premium badge -->
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
                    <span class="rounded-full bg-[var(--subtle-gold)] px-3 py-1 text-xs font-bold text-[var(--midnight-blue)] uppercase"
                        >Populaire</span
                    >
                </div>

                <!-- Shine effect on hover -->
                <div
                    class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
                    :class="{ 'opacity-100': hoveredCard === 2 }"
                ></div>

                <div class="relative z-10 text-center">
                    <div class="mb-4 flex justify-center">
                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
                            <svg
                                xmlns="http://www.w3.org/2000/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="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-[var(--pure-white)] md:text-2xl">Profilage</h3>
                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
                    <p class="mt-4 text-sm text-gray-200 md:text-base">
                        Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
                    </p>
                </div>
                <button
                    class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)] hover:shadow-lg"
                    @click="handleSelection(3)"
                >
                    <!-- Button shine effect -->
                    <span
                        class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
                    ></span>
                    <span class="relative z-10">Découvrir</span>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="relative z-10 ml-2 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="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </button>
            </div>

            <!-- Premium plus option -->
            <div
                class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
                @mouseenter="setHover(3)"
                @mouseleave="clearHover"
            >
                <!-- Gold corner accents -->
                <div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
                <div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
                <div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
                <div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>

                <div class="text-center">
                    <div class="mb-4 flex justify-center">
                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
                            <svg
                                xmlns="http://www.w3.org/2000/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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
                                />
                            </svg>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
                    <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
                    <p class="mt-4 text-sm text-gray-600 md:text-base">
                        Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
                    </p>
                </div>
                <button
                    class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-[#e8e0d5] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-[#8a7f6d] hover:text-[var(--pure-white)]"
                    @click="handleSelection(4)"
                >
                    <span>Explorer</span>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="ml-2 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="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                </button>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* Custom animations for cards */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
