<template>
  <section id="pricing" class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
      Прозрачные тарифы
    </h2>

    <!-- Переключатель периода -->
    <div class="flex justify-center gap-2 mb-10">
      <button
        v-for="period in availablePeriods"
        :key="period.value"
        @click="selectedPeriod = period.value"
        class="px-5 py-2 rounded-full text-sm font-medium transition hover:cursor-pointer"
        :class="selectedPeriod === period.value
          ? 'bg-blue-600 text-white shadow-md'
          : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'"
      >
        {{ period.label }}
      </button>
    </div>

    <!-- Сетка тарифов -->
    <div class="grid md:grid-cols-2 gap-12">
      <div
        v-for="tariff in tariffCards"
        :key="tariff.key"
        class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border transition"
        :class="[
          tariff.isPopular
            ? 'border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20'
            : 'border border-gray-200 dark:border-gray-800 hover:border-blue-600'
        ]"
      >
        <span
          v-if="tariff.isPopular"
          class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl"
        >
          ПОПУЛЯРНЫЙ
        </span>

        <h3 class="text-xl font-semibold mb-2">{{ tariff.name }}</h3>
        <p class="text-4xl font-extrabold mb-4">
          {{ tariff.price }}<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span>
        </p>

        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
          <li v-for="feature in tariff.features" :key="feature" class="flex items-center gap-2">
            <Check class="w-4 h-4 text-green-400" /> {{ feature }}
          </li>
        </ul>

        <button
          class="w-full transition py-3 rounded-xl font-medium text-white"
          :class="tariff.isPopular
            ? 'bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 font-bold'
            : 'bg-gray-800 hover:bg-gray-700'"
        >
          {{ tariff.isPopular ? 'Выбрать тариф' : 'Выбрать' }}
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Check } from '@lucide/vue'

// Исходный конфиг
const pricingConfig = {
  default_tariff: "premium",
  tariffs: [
    {
      key: "standard",
      names: { ru: "Standard", en: "Standard" },
      descriptions: { ru: "До 3 устройств", en: "up to 3 devices" },
      prices_rub: { "1": 179.0, "3": 387.0, "6": 594.0, "12": 996.0 },
      hwid_device_limit: 2,
      monthly_gb: 0.0
    },
    {
      key: "premium",
      names: { ru: "Premium", en: "Premium"},
      descriptions: { ru: "До 10 устройств, сервера РФ и США", en: "Up to 10 devices, RU, USA servers" },
      prices_rub: { "1": 349.0, "3": 987.0, "6": 1734.0, "12": 1992.0 },
      hwid_device_limit: 10,
      monthly_gb: 0.0
    }
  ]
}

// Доступные периоды
const availablePeriods = [
  { value: 1, label: '1 мес' },
  { value: 3, label: '3 мес' },
  { value: 6, label: '6 мес' },
  { value: 12, label: '12 мес' }
]

// Выбранный период (по умолчанию 1 месяц)
const selectedPeriod = ref(1)

// Функция для получения цены за месяц
const getMonthlyPrice = (tariff, period) => {
  const total = tariff.prices_rub[String(period)]
  if (!total) return '—'
  const monthly = total / period
  return Number.isInteger(monthly) ? monthly : monthly.toFixed(2)
}

// Подготовка данных для карточек
const tariffCards = computed(() => {
  const tariffs = pricingConfig.tariffs
  const defaultKey = pricingConfig.default_tariff

  // Разделяем тарифы: популярный (премиум) и остальные
  const premiumTariff = tariffs.find(t => t.key === defaultKey)
  const otherTariffs = tariffs.filter(t => t.key !== defaultKey)

  // Порядок: первый обычный, премиум, второй обычный
  const ordered = [
    { ...otherTariffs[0], isPopular: false },
    { ...premiumTariff, isPopular: true },
  ]

  return ordered.map(tariff => {
    const price = getMonthlyPrice(tariff, selectedPeriod.value)

    // Фичи: разбиваем описание по запятой и добавляем общие пункты
    const descriptionFeatures = tariff.descriptions.ru
      .split(',')
      .map(s => s.trim())
      .filter(Boolean)
    const staticFeatures = ['Безлимитный трафик', 'Поддержка 24/7']
    const features = [...new Set([...descriptionFeatures, ...staticFeatures])]

    return {
      key: tariff.key,
      name: tariff.names.ru,
      price: `${price} ₽`,
      features,
      isPopular: tariff.isPopular
    }
  })
})
</script>