<script setup lang="ts">
import FullCardItem from '@/components/ui/card/FullCardItem.vue'
import LandingLayout from '@/layouts/app/LandingLayout.vue'
import axios from 'axios'
import { computed, onMounted, ref } from 'vue'

const cards = ref<Array<any>>([])
const error = ref<string | null>(null)
const loading = ref(true)

const params = new URLSearchParams(window.location.search)
const clientSessionId = params.get('client_session_id')

const hasCards = computed(() => cards.value.length > 0)

onMounted(async () => {
  try {
    if (!clientSessionId) {
      error.value = 'No session ID provided. Please return to the payment page.'
      return
    }
    const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`)
    if (response.data.success) {
      cards.value = response.data.cards
    } else {
      error.value = response.data.message || 'An error occurred while validating payment.'
    }
  } catch (err: any) {
    console.error('Card fetch error:', err)
    error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <LandingLayout>
    <main class="min-h-screen bg-gradient-to-br from-[var(--background)] to-[var(--background)]/95 py-8">
      <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Title / meta -->
        <div class="mb-10 text-center md:mb-14">
          <h1 class="font-title bg-gradient-to-r from-[var(--c-purple)] to-[var(--c-purple)]/70 bg-clip-text text-3xl font-black text-transparent sm:text-4xl md:text-5xl">
            Lecture complète
          </h1>
          <p class="mt-2 text-[var(--muted-foreground)]">
            {{ hasCards ? `${cards.length} cartes révélées` : '' }}
          </p>
        </div>

        <!-- Loading -->
        <div v-if="loading" class="flex items-center justify-center py-24">
          <div class="h-12 w-12 animate-spin rounded-full border-2 border-[var(--c-purple)]/30 border-t-[var(--c-purple)]"></div>
        </div>

        <!-- Error -->
        <div v-else-if="error" class="mx-auto max-w-2xl rounded-2xl border border-red-500/30 bg-red-900/20 p-6 text-center">
          <p class="font-semibold text-red-200">{{ error }}</p>
        </div>

        <!-- Cards Grid -->
<div v-else-if="hasCards" class="grid justify-items-center gap-5 grid-cols-[repeat(auto-fit,minmax(160px,1fr))] sm:gap-6">
          <FullCardItem
            v-for="(card, index) in cards"
            :key="card.id || index"
            :card-number="card.id"
            :name="card.name"
            :image-url="card.image_url"
            :orientation="card.orientation"
            :description="card.description"
          />
        </div>

        <!-- Empty -->
        <div v-else class="mx-auto max-w-2xl rounded-2xl border border-[var(--color-border)]/40 bg-[var(--card)]/80 p-10 text-center">
          <p class="text-[var(--muted-foreground)]">Aucune carte trouvée</p>
        </div>
      </div>
    </main>
  </LandingLayout>
</template>
