<script setup lang="ts">
import CardShuffleTemplate from '@/components/template/CardShuffleTemplate.vue';
import { Card } from '@/types/cart';
import { router } from '@inertiajs/vue3';
import { ref, watchEffect } from 'vue';

const props = defineProps<{
    drawCount?: number; // Optional prop for the shuffle animation
    drawnCards?: Card[]; // Optional prop to directly display cards
}>();

defineEmits(['drawCard']);

const isClicked = ref(false);
const isDrawing = ref(false);
const showResult = ref(false);
const isFlipped = ref<boolean[]>([]);

const handleClick = () => {
    setTimeout(() => {
        showResult.value = true;
    }, 800);
};

// This function is still needed for when the user clicks to draw on the /tirage page
const setDrawnCards = (cardData: Card[]) => {
    // This method is called by the parent component after an API call
    if (cardData) {
        // Here, we assign the cards to a local state to be displayed
        showResult.value = true;
        isDrawing.value = false;
        isFlipped.value = new Array(cardData.length).fill(false);
        // The confetti and card data will be handled by the component that consumes this one
    }
};

const flipCard = (index: number) => {
    isFlipped.value[index] = !isFlipped.value[index];
};

// Use watchEffect to react to the `drawnCards` prop changing
watchEffect(() => {
    if (props.drawnCards && props.drawnCards.length > 0) {
        showResult.value = false;
        isFlipped.value = new Array(props.drawnCards.length).fill(false);
        // The confetti and other logic is also triggered here.
    } else {
        showResult.value = false;
    }
});

const goToSelection = () => {
    router.visit('/tirage');
};

defineExpose({ setDrawnCards });
</script>

<template>
    <CardShuffleTemplate>
        <template #card-shuffle-slot>
            <div class="card-container">
                <!-- Always show the card stack -->
                <transition class="card-stack-fade">
                    <div
                        class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
                        :class="{ clicked: isClicked, drawing: isDrawing }"
                        @click="handleClick"
                        v-show="!showResult"
                    >
                        <div v-for="i in 8" :key="i" class="card" :style="{ transform: `rotate(${-3 + i}deg) translateZ(-${10 * i}px);` }">
                            <div class="card-back">
                                <div class="card-back-design">
                                    <svg
                                        class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                                        <path
                                            d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="0.5"
                                        ></path>
                                        <path
                                            d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="0.5"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
                <!-- Show result only after clicking and when drawnCards is available -->
                <transition class="card-result-slide">
                    <div v-if="showResult && drawnCards" class="cards-result-container">
                        <div v-for="(card, index) in drawnCards" :key="index" class="card-result-wrapper">
                            <div class="result-card" :class="{ flipped: isFlipped[index] }" @click="flipCard(index)">
                                <div class="card-face card-unknown-front">
                                    <div class="card-back-design">
                                        <svg
                                            class="h-16 w-16 text-[var(--subtle-gold)] opacity-80"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path d="M12 4v16m8-8H4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                                            <path
                                                d="M14.828 7.172a4 4 0 015.656 5.656l-5.656 5.657a4 4 0 01-5.657-5.657l5.657-5.656z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="0.5"
                                            ></path>
                                            <path
                                                d="M9.172 7.172a4 4 0 00-5.657 5.656l5.657 5.657a4 4 0 005.656-5.657L9.172 7.172z"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="0.5"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                                <div class="card-face card-known-back">
                                    <img :src="card.image_url!" :alt="card.name" class="card-image" />
                                    <div class="card-description-overlay">
                                        <h3>{{ card.name }}</h3>
                                        <p class="description">{{ card.description }}</p>
                                        <p v-if="card.orientation" class="orientation">
                                            {{ card.orientation === 'reversed' ? 'Inversée' : 'Droite' }}
                                        </p>
                                        <div v-if="card.symbolism" class="symbolism">
                                            <p><strong>Numéro:</strong> {{ card.symbolism.numéro }}</p>
                                            <p><strong>Planète:</strong> {{ card.symbolism.planète }}</p>
                                            <p><strong>Élément:</strong> {{ card.symbolism.élément }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button
                            @click="goToSelection"
                            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">Retourner à la sélection des cartes</span>
                        </button>
                    </div>
                </transition>
            </div>
        </template>
    </CardShuffleTemplate>
</template>

<style scoped>
.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card {
    width: 250px;
    height: 400px;
    background: linear-gradient(145deg, var(--pure-white), var(--linen));
    border-radius: 16px;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 6px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    transition:
        transform 0.5s ease-in-out,
        box-shadow 0.5s ease-in-out;
    cursor: pointer;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Animation stack globale */
.card-stack {
    transition: transform 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px; /* ajoute profondeur */
}

/* Hover sur la pile */
.card-stack:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
}

.card-stack:hover .card:nth-child(1) {
    transform: rotateY(-5deg) rotateX(5deg) translateZ(30px) translateX(-20px);
}
.card-stack:hover .card:nth-child(2) {
    transform: rotateY(0deg) rotateX(2deg) translateZ(20px);
}
.card-stack:hover .card:nth-child(3) {
    transform: rotateY(5deg) rotateX(5deg) translateZ(10px) translateX(20px);
}

/* Glow doré subtil au hover */
.card-stack:hover .card-back {
    box-shadow: 0 0 20px rgba(215, 186, 141, 0.6);
    transition: box-shadow 0.6s ease-in-out;
}

/* Animation click */
@keyframes card-click-tilt {
    0% {
        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
    }
    30% {
        transform: translateY(-5px) rotateX(-4deg) rotateY(4deg);
    }
    60% {
        transform: translateY(-12px) rotateX(3deg) rotateY(-3deg);
    }
    100% {
        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
    }
}

/* Drawing animation */
@keyframes card-drawing {
    0% {
        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
    }
    25% {
        transform: translateY(-30px) rotateX(10deg) rotateY(-10deg);
    }
    50% {
        transform: translateY(-40px) rotateX(-5deg) rotateY(5deg);
    }
    75% {
        transform: translateY(-30px) rotateX(5deg) rotateY(-5deg);
    }
    100% {
        transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
    }
}

/* Active sur clic */
.card-stack.clicked {
    animation: card-click-tilt 0.4s ease-in-out;
}

.card-stack.drawing {
    animation: card-drawing 1.5s ease-in-out;
}

/* Back des cartes */
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--subtle-gold);
    background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
}

.card-result-wrapper {
    width: 250px;
    height: 400px;
    perspective: 1000px;
}

.card-back-design-wrapper {
    background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-design {
    width: 80%;
    height: 80%;
    border: 2px solid var(--subtle-gold);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-back-design::before,
.card-back-design::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    border-color: var(--subtle-gold);
    opacity: 0.5;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* This is crucial for the flip effect */
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* To keep content within borders */
}

.card-unknown-front {
    background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--subtle-gold);
}

.card-known-back {
    transform: rotateY(180deg); /* This face starts rotated, so it's hidden */
    position: relative;
}

.card-back-design::before {
    top: -2px;
    left: -2px;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-left-radius: 8px;
}
.card-back-design::after {
    bottom: -2px;
    right: -2px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-bottom-style: solid;
    border-right-style: solid;
    border-bottom-right-radius: 8px;
}

/* Result card styles */
.cards-result-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.card-result-container {
    perspective: 1000px;
}

.result-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    cursor: pointer;
}

.result-card.flipped {
    transform: rotateY(180deg);
}

.card-front,
.card-back-info {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow-y: auto;
}

.card-back-info p {
    color: var(--midnight-blue); /* Adjust color if needed */
}

.card-front {
    background: linear-gradient(145deg, var(--pure-white), var(--linen));
    color: var(--midnight-blue);
}

.card-back-info {
    background: linear-gradient(145deg, var(--midnight-blue), #121a2c);
    color: var(--pure-white);
    transform: rotateY(180deg);
    text-align: center;
    overflow-y: auto;
}

.card-content-wrapper {
    background: linear-gradient(145deg, var(--pure-white), var(--linen));
    color: var(--midnight-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transform: rotateY(180deg); /* This is the key part to make it the 'back' of the card */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

.card-description-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay for readability */
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.card-description-overlay h3,
.card-description-overlay p {
    margin: 0.2rem 0;
}

.orientation {
    font-style: italic;
    margin-top: 0.5rem;
    color: var(--spiritual-earth);
}

.description {
    margin: 1rem 0;
    font-size: 0.9rem;
}

.symbolism {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.symbolism p {
    margin: 0.3rem 0;
}

.click-hint {
    margin-top: 1rem;
    font-size: 0.7rem;
    opacity: 0.7;
}

.card-stack-fade-leave-active {
    transition: all 0.8s ease;
}
.card-stack-fade-leave-to {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
}

.cards-result-slide-enter-active {
    transition: all 0.8s ease;
    transition-delay: 0.3s;
}
.cards-result-slide-enter-from {
    opacity: 0;
    transform: translateY(50px);
}
</style>
