<script setup lang="ts">
/**
 * Публичная страница цен. Показывает текущую 7-ступенчатую тарифную сетку
 * из /api/public/pricing (single source — pricing_tiers). Требование ЮKassa:
 * цены должны быть публично доступны на сайте.
 */
import { onMounted, ref } from 'vue';
import { fetchPublicPricing, type PricingTierDto } from '../api/public';

const tiers = ref<PricingTierDto[]>([]);
const error = ref(false);

function bandLabel(t: PricingTierDto, idx: number): string {
    if (t.leads_in_tier === null) return 'свыше';
    const from = tiers.value.slice(0, idx).reduce((s, x) => s + (x.leads_in_tier ?? 0), 0) + 1;
    const to = from + t.leads_in_tier - 1;
    return `${from}–${to}`;
}

onMounted(async () => {
    try {
        tiers.value = await fetchPublicPricing();
    } catch {
        error.value = true;
    }
});
</script>

<template>
    <section class="pricing">
        <h1 class="text-h4 mb-2">Цены</h1>
        <p class="text-body-1 text-medium-emphasis mb-1">
            Лидерра — сервис получения лидов с оплатой за результат (pay-per-lead).
            Вы пополняете баланс и платите только за переданных лидов.
        </p>
        <p class="text-body-2 text-medium-emphasis mb-6">
            Чем больше лидов за месяц — тем ниже цена за лид. Оплата картой или СБП через ЮKassa.
        </p>

        <v-alert v-if="error" type="warning" variant="tonal" density="compact">
            Не удалось загрузить актуальные тарифы. Обновите страницу.
        </v-alert>

        <v-table v-else class="pricing-table" data-testid="pricing-table">
            <thead>
                <tr>
                    <th>Ступень</th>
                    <th>Лидов в месяц</th>
                    <th class="text-right">Цена за лид</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(t, i) in tiers" :key="t.tier_no">
                    <td>{{ t.tier_no }}</td>
                    <td>{{ bandLabel(t, i) }}</td>
                    <td class="text-right pricing-num">{{ t.price_rub }} ₽</td>
                </tr>
            </tbody>
        </v-table>

        <p class="text-caption text-medium-emphasis mt-4">
            Цены указаны в рублях за одного лида. Тарифные ступени применяются накопительно в течение месяца.
        </p>
    </section>
</template>

<style scoped>
.pricing {
    max-width: 760px;
    margin: 0 auto;
}
.pricing-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.pricing-table :deep(th) {
    font-weight: 600;
}
</style>
