<!-- components/PlanBadge.vue -->
<template>
  <div class="plan-badge-wrapper relative inline-flex">
    <NuxtLink 
      :to="'/rules'" 
      class="plan-badge group" 
      :class="badgeClass"
      @click.prevent="navigateToRules"
    >
      <span class="text-sm font-semibold">{{ planLabel }}</span>
      
      <!-- CSS Tooltip -->
      <div class="tooltip">
        {{ tooltipText }}
      </div>
    </NuxtLink>
  </div>
</template>

<script setup>
const props = defineProps({
  plan: {
    type: String,
    default: 'start',
    validator: (value) => ['start', 'pro', 'vip'].includes(value)
  },
  isCurrentPlan: {
    type: Boolean,
    default: false
  }
})

const planLabels = {
  start: 'Старт',
  pro: 'Профи', 
  vip: 'VIP'
}

const planDescriptions = {
  start: 'Базовый план для начала работы',
  pro: 'Расширенные возможности для профессионалов',
  vip: 'Премиум решение для максимального роста'
}

const planColors = {
  start: 'bg-green-100 text-green-800 border-green-200 hover:bg-green-200',
  pro: 'bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-200',
  vip: 'bg-purple-100 text-purple-800 border-purple-200 hover:bg-purple-200'
}

const planLabel = computed(() => planLabels[props.plan])
const badgeClass = computed(() => `inline-flex items-center px-3 py-1 rounded-full border cursor-pointer transition-colors duration-200 ${planColors[props.plan]}`)

// Текст подсказки
const tooltipText = computed(() => {
  if (props.isCurrentPlan) {
    return `Это ваш тарифный план: ${planDescriptions[props.plan]}`
  }
  return planDescriptions[props.plan]
})

// Навигация на страницу правил
const navigateToRules = () => {
  navigateTo('/rules')
}
</script>

<style scoped>
.plan-badge-wrapper {
  display: inline-flex;
}

.plan-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Стили для CSS tooltip (всплывает вниз) */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #1f2937; /* gray-800 */
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  min-width: 180px;
  text-align: center;
}

/* Стрелка для tooltip (теперь сверху) */
.tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1f2937; /* gray-800 */
}

/* Показываем tooltip при наведении */
.plan-badge:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

/* Альтернативный вариант - подсказка появляется сразу без задержки */
.plan-badge .tooltip {
  transition-delay: 0s;
}
</style>