<script setup lang="ts">
import ShuffleCardPresentation from '@/components/organism/ShuffleCard/ShuffleCardPresentation.vue';
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { useTarotStore } from '@/stores/tarot';
import axios from 'axios';
import { ref } from 'vue';

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

// This variable will hold the number of cards to draw
const drawCount = ref(0);

// This function will be called from the "offer" buttons
const handleSelection = (count: number) => {
    drawCount.value = count;

    // Check if the draw is free or requires payment
    if (count === 1) {
        // Free draw
        if (tarotStore.freeDrawsRemaining > 0) {
            tarotStore.useFreeDraw();
            isSelectionScreen.value = false; // Switch to the shuffle screen
        } else {
            alert('You have used your free draw. Please choose a paid option to unlock more.');
        }
    } else {
        // Paid draw
        // This is where you'd trigger your Stripe payment component
        alert(`Initiating payment process for a ${count}-card draw.`);
        // For now, let's simulate a successful payment and then proceed
        tarotStore.unlockNewDraws().then(() => {
            isSelectionScreen.value = false;
        });
    }
};

const getCard = async () => {
    loading.value = true;
    try {
        const res = await axios.post('/draw-card', { count: drawCount.value });
        if (res.data) {
            cardComponent.value.setDrawnCards(res.data.card);
        }
    } catch (error) {
        console.error(error);
    } finally {
        loading.value = false;
    }
};
</script>

<template>
    <LandingLayout>
        <section v-if="isSelectionScreen" class="py-20 sm:py-24">
            <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
            <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
                <div
                    class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
                >
                    <div class="text-center">
                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
                        <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
                    </div>
                    <button
                        class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
                        @click="handleSelection(1)"
                    >
                        Commencer
                    </button>
                </div>
                <div
                    class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
                >
                    <div class="text-center">
                        <h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
                        <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
                    </div>
                    <button
                        class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
                        @click="handleSelection(3)"
                    >
                        Découvrir
                    </button>
                </div>
                <div
                    class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
                >
                    <div class="text-center">
                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
                        <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
                    </div>
                    <button
                        class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
                        @click="handleSelection(4)"
                    >
                        Explorer
                    </button>
                </div>
            </div>
        </section>
        <ShuffleCardPresentation v-else ref="cardComponent" @draw-card="getCard" />
    </LandingLayout>
</template>
