<template>
    <LandingLayout>
        <main class="flex flex-grow items-center justify-center">
            <div class="w-full max-w-2xl px-4 py-20 sm:px-6 lg:px-8">
                <div class="flex flex-col items-center rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-12 text-center shadow-xl">
                    <div class="mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-[var(--subtle-gold)] shadow-lg">
                        <svg
                            class="h-10 w-10 text-[var(--midnight-blue)]"
                            fill="currentColor"
                            viewBox="0 0 256 256"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path>
                        </svg>
                    </div>
                    <h1 class="text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Paiement Réussi</h1>
                    <p class="mx-auto mt-4 max-w-md text-lg text-[var(--midnight-blue)]/80">
                        Votre transaction a été complétée avec succès. L'univers vous attend.
                    </p>
                    <div class="mt-10 w-full border-t border-[var(--linen)]"></div>
                    <p v-if="loading" class="mt-10 text-lg font-medium text-[var(--midnight-blue)]/90">Vérification de votre paiement...</p>
                    <p v-else class="mt-10 text-lg font-medium text-[var(--midnight-blue)]/90">
                        Vous pouvez maintenant procéder à votre tirage de cartes.
                    </p>
                    <button
                        @click="proceedToDraw"
                        :disabled="loading"
                        class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
                    >
                        <span class="truncate">Tirer les cartes</span>
                    </button>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>

<script setup lang="ts">
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { useTarotStore } from '@/stores/tarot';
import { router } from '@inertiajs/vue3';
import axios from 'axios';
import { onMounted, ref } from 'vue';

const tarotStore = useTarotStore();
const loading = ref(true);
const params = new URLSearchParams(window.location.search);
const clientSessionId = params.get('client_session_id');

onMounted(async () => {
    if (clientSessionId) {
        try {
            const response = await axios.get(`/api/validate-payment?client_session_id=${clientSessionId}`);
            if (response.data.success) {
                // Mettez à jour le store avec les tirages payés
                tarotStore.addPaidDraws(response.data.drawCount);
            } else {
                // Gérer le cas où le paiement n'est pas validé
                alert('Paiement non validé. Veuillez réessayer.');
                router.visit('/cancel');
            }
        } catch (error) {
            console.error('Erreur lors de la validation du paiement:', error);
            alert('Erreur de validation. Veuillez réessayer.');
            router.visit('/cancel');
        } finally {
            loading.value = false;
        }
    } else {
        // Rediriger si l'ID de session est manquant
        // router.visit('/cancel');
    }
});

const proceedToDraw = () => {
    // Redirige vers la page principale
    router.visit(`/tirage?client_session_id=${clientSessionId}`);
};
</script>
