<template>
  <div
    class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group card-container"
  >
    <!-- Card Image Container -->
    <div class="relative">
      <!-- Card Image with Glow Effect -->
      <div
        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden card-image"
        :style="{
          'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
          transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
        }"
      >
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>

        <!-- Glow Effect -->
        <div
          class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          :style="{
            'box-shadow': '0 0 30px 10px rgba(168, 85, 247, 0.4)'
          }"
        ></div>
      </div>

      <!-- Orientation Badge -->
      <div
        v-if="orientation === 'reversed'"
        class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
      >
        Reversed
      </div>
      <div
        v-else
        class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
      >
        Upright
      </div>

      <!-- Card Number Badge -->
      <div
        class="absolute -bottom-2 -left-2 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg card-number bg-gradient-to-r from-purple-700 to-indigo-700"
      >
        {{ cardNumber }}
      </div>
    </div>

    <!-- Card Content -->
    <div class="flex flex-col gap-6 text-center md:text-left flex-1 w-full">
      <!-- Card Header -->
      <div class="space-y-2">
        <p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
          Card #{{ cardNumber }}
        </p>

        <h3
          class="text-2xl sm:text-3xl font-black bg-clip-text text-transparent leading-tight bg-gradient-to-r from-purple-200 to-purple-100"
        >
          {{ name }}
        </h3>
      </div>

      <!-- Description Content -->
      <div class="space-y-4">
        <!-- Description Header -->
        <div class="flex items-center gap-2">
          <div class="text-lg font-bold flex items-center gap-2 text-purple-200">
            <span class="text-purple-400">
              {{ orientation === 'reversed' ? '🔄' : '📖' }}
            </span>
            {{ orientation === 'reversed' ? 'Reversed Meaning' : 'Upright Meaning' }}
          </div>
          <span class="text-xs px-2 py-1 rounded-full bg-purple-800/30 text-purple-300">
            {{ orientation === 'reversed' ? 'Challenge' : 'Positive' }}
          </span>
        </div>

        <!-- Description Content -->
        <div class="min-h-[200px] max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
          <div class="space-y-4 animate-fadeIn">
            <div
              class="text-purple-300/90 leading-relaxed font-medium pl-4 border-l-2 border-purple-600/50 p-3 rounded-r-lg bg-gradient-to-r from-purple-900/10 to-transparent"
              v-html="orientation === 'reversed' ? description_reversed : description_upright"
            ></div>

            <!-- Key Points -->
            <div class="space-y-2">
              <h4 class="font-semibold text-sm opacity-80 text-purple-300">
                Key Points:
              </h4>
              <ul class="space-y-1 text-sm pl-4 text-purple-300/80">
                <li v-if="orientation === 'reversed'">
                  • Represents challenges or blockages
                </li>
                <li v-if="orientation === 'reversed'">
                  • Indicates reversed or delayed energy
                </li>
                <li v-if="orientation !== 'reversed'">
                  • Represents the card's natural energy
                </li>
                <li v-if="orientation !== 'reversed'">
                  • Indicates direct manifestation
                </li>
                <li>
                  • Traditional tarot interpretation
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- Decorative Divider -->
      <div class="w-16 h-0.5 rounded-full mt-2 bg-gradient-to-r from-purple-600 to-transparent"></div>

      <!-- Footer Note -->
      <p class="text-xs opacity-70 italic text-purple-300/70">
        {{ orientation === 'reversed'
          ? 'This reversed card suggests special attention is needed'
          : 'This upright card indicates smooth, manifested energy' }}
      </p>
    </div>

    <!-- Hover Effect Background -->
    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  cardNumber: number;
  name: string;
  imageUrl: string;
  orientation?: string;
  description_upright: string;
  description_reversed: string;
}

const props = withDefaults(defineProps<Props>(), {
  orientation: 'upright'
});
</script>

<style scoped>
.card-container {
  animation: cardAppear 0.6s ease-out;
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.shadow-3xl {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(168, 85, 247, 0.3);
}

.custom-scrollbar {
  scrollbar-width: thin;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(168, 85, 247, 0.1);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.6);
}

/* Smooth transitions */
.card-container * {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Card hover effects */
.card-image:hover {
  transform: scale(1.05);
}
:deep(strong),
:deep(b) {
    font-weight: 700 !important; /* Forces bold weight */
    color: white; /* Optional: Makes it fully white vs the 80% opacity body text */
}

/* Optional: If you want to style lists inside description too */
:deep(ul),
:deep(ol) {
    padding-left: 1.5rem;
    list-style-type: disc;
}

:deep(li) {
    margin-bottom: 0.5rem;
}
</style>
