<script setup lang="ts">
/**
 * Красный баннер заморозки баланса (Billing v2 Spec C §3.6, Task 1.10).
 *
 * Показывается на всех страницах, когда tenant.frozen_by_balance_at !== null
 * (проп `frozen`). Источник данных — tenantStore, загружаемый глобально в
 * AppLayout. Чистый presentational-компонент.
 */
import { computed } from 'vue';

const props = defineProps<{
    frozen: boolean;
    /** Сколько ₽ не хватает на дневной заказ (строка scale 2). */
    deficitRub?: string;
    /** Сколько лидов превышают ёмкость баланса. */
    deficitLeads?: number;
}>();

const hasDeficit = computed(() => (props.deficitLeads ?? 0) > 0);
</script>

<template>
    <v-alert
        v-if="frozen"
        type="error"
        variant="tonal"
        density="comfortable"
        rounded="lg"
        class="balance-frozen-banner ma-4 mb-0"
        data-testid="balance-frozen-banner"
    >
        <div class="text-subtitle-2 font-weight-bold">Приём лидов приостановлен</div>
        <div class="text-body-2 mb-2">
            Не хватает баланса на дневной заказ.<span v-if="hasDeficit">
                Нужно ещё {{ deficitRub }}₽ (или сократи лимиты на {{ deficitLeads }} лидов).</span
            >
        </div>
        <RouterLink to="/billing" data-testid="banner-topup-link" class="banner-link"> Пополнить счёт </RouterLink>
        <RouterLink to="/projects" data-testid="banner-projects-link" class="banner-link ml-4">
            Перейти к проектам
        </RouterLink>
    </v-alert>
</template>

<style scoped>
.banner-link {
    font-weight: 600;
    color: rgb(var(--v-theme-error));
    text-decoration: underline;
}
</style>
