<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import axios from 'axios';
import { onMounted, ref } from 'vue';

const checking = ref(true);
const paymentStatus = ref<'pending' | 'succeeded' | 'failed' | null>(null);
const errorMessage = ref('');
const clientSessionId = ref('');

// Check payment status
const checkPayment = async () => {
    try {
        // Get client session ID from sessionStorage
        const storedSessionId = sessionStorage.getItem('wise_client_session_id');

        if (!storedSessionId) {
            errorMessage.value = 'Session non trouvée. Veuillez recommencer le processus de paiement.';
            checking.value = false;
            return;
        }

        clientSessionId.value = storedSessionId;

        // Check payment status via API
        const response = await axios.get('/wise/validate-payment', {
            params: { client_session_id: storedSessionId },
        });

        if (response.data.success) {
            paymentStatus.value = 'succeeded';

            // Clear session storage
            sessionStorage.removeItem('wise_client_session_id');

            // Redirect to success page after 2 seconds
            setTimeout(() => {
                window.location.href = `/success?client_session_id=${storedSessionId}`;
            }, 2000);
        } else {
            paymentStatus.value = response.data.status || 'pending';
            errorMessage.value = response.data.message || 'Le paiement est en cours de vérification...';
        }
    } catch (error: any) {
        console.error('Error checking payment:', error);
        paymentStatus.value = 'failed';
        errorMessage.value = error.response?.data?.message || 'Erreur lors de la vérification du paiement.';
    } finally {
        checking.value = false;
    }
};

const retryCheck = () => {
    checking.value = true;
    paymentStatus.value = null;
    errorMessage.value = '';
    setTimeout(checkPayment, 1000);
};

const goHome = () => {
    sessionStorage.removeItem('wise_client_session_id');
    router.visit('/');
};

onMounted(() => {
    // Check payment status after 1 second
    setTimeout(checkPayment, 1000);
});
</script>

<template>
    <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-[var(--light-ivory)] via-white to-[var(--linen)] px-4">
        <div class="w-full max-w-md rounded-2xl border border-[var(--linen)] bg-white/90 p-8 shadow-xl backdrop-blur-sm">
            <!-- Loading State -->
            <div v-if="checking" class="text-center">
                <div class="mb-6 flex justify-center">
                    <div class="relative h-20 w-20">
                        <svg class="animate-spin text-[var(--subtle-gold)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path
                                class="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                        </svg>
                    </div>
                </div>
                <h1 class="mb-4 text-2xl font-bold text-[var(--midnight-blue)]">Vérification du paiement...</h1>
                <p class="text-[var(--spiritual-earth)]">Veuillez patienter pendant que nous vérifions votre paiement Wise.</p>
            </div>

            <!-- Success State -->
            <div v-else-if="paymentStatus === 'succeeded'" class="text-center">
                <div class="mb-6 flex justify-center">
                    <div class="flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
                        <svg class="h-12 w-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                </div>
                <h1 class="mb-4 text-2xl font-bold text-green-600">Paiement réussi ! 🎉</h1>
                <p class="text-[var(--spiritual-earth)]">Votre paiement a été confirmé. Vous allez être redirigé vers vos cartes...</p>
            </div>

            <!-- Pending State -->
            <div v-else-if="paymentStatus === 'pending'" class="text-center">
                <div class="mb-6 flex justify-center">
                    <div class="flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100">
                        <svg class="h-12 w-12 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
                <h1 class="mb-4 text-2xl font-bold text-yellow-600">Paiement en cours</h1>
                <p class="mb-6 text-[var(--spiritual-earth)]">
                    {{ errorMessage || 'Votre paiement est en cours de traitement. Cela peut prendre quelques minutes.' }}
                </p>
                <div class="flex flex-col gap-3">
                    <button
                        @click="retryCheck"
                        class="w-full rounded-full bg-[var(--subtle-gold)] px-6 py-3 font-semibold text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
                    >
                        Vérifier à nouveau
                    </button>
                    <button
                        @click="goHome"
                        class="w-full rounded-full border-2 border-[var(--midnight-blue)] bg-transparent px-6 py-3 font-semibold text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--midnight-blue)] hover:text-white"
                    >
                        Retour à l'accueil
                    </button>
                </div>
            </div>

            <!-- Failed State -->
            <div v-else-if="paymentStatus === 'failed'" class="text-center">
                <div class="mb-6 flex justify-center">
                    <div class="flex h-20 w-20 items-center justify-center rounded-full bg-red-100">
                        <svg class="h-12 w-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>
                </div>
                <h1 class="mb-4 text-2xl font-bold text-red-600">Erreur de paiement</h1>
                <p class="mb-6 text-[var(--spiritual-earth)]">
                    {{ errorMessage || 'Une erreur est survenue lors de la vérification du paiement.' }}
                </p>
                <div class="flex flex-col gap-3">
                    <button
                        @click="retryCheck"
                        class="w-full rounded-full bg-[var(--subtle-gold)] px-6 py-3 font-semibold text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
                    >
                        Réessayer
                    </button>
                    <button
                        @click="goHome"
                        class="w-full rounded-full border-2 border-[var(--midnight-blue)] bg-transparent px-6 py-3 font-semibold text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--midnight-blue)] hover:text-white"
                    >
                        Retour à l'accueil
                    </button>
                </div>
            </div>

            <!-- Session ID Info -->
            <div v-if="clientSessionId && !checking" class="mt-6 rounded-lg bg-gray-50 p-3">
                <p class="text-center text-xs text-gray-600">
                    ID de session:
                    <br />
                    <code class="block font-mono text-[10px] break-all">{{ clientSessionId }}</code>
                </p>
            </div>
        </div>
    </div>
</template>

<style scoped>
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}
</style>
