<script setup lang="ts">
interface Stats {
    total: number;
    active: number;
    trial: number;
    overdue: number;
    monthlyRevenueRub: number;
}

defineProps<{
    stats: Stats;
    loading: boolean;
}>();

const emit = defineEmits<{
    refresh: [];
}>();

function formatRub(v: number): string {
    return new Intl.NumberFormat('ru-RU').format(v) + ' ₽';
}
</script>

<template>
    <header class="page-head">
        <div>
            <h1 class="text-h4 mb-2 page-title">Тенанты</h1>
            <div class="page-stats text-body-2 text-medium-emphasis">
                <span
                    ><span class="num">{{ stats.total }}</span> всего</span
                >
                <span class="sep">·</span>
                <span
                    ><span class="num text-success">{{ stats.active }}</span> активны</span
                >
                <span class="sep">·</span>
                <span
                    ><span class="num">{{ stats.trial }}</span> trial</span
                >
                <span class="sep">·</span>
                <span
                    ><span class="num text-warning">{{ stats.overdue }}</span> просрочка</span
                >
                <span class="sep">·</span>
                <span
                    >выручка месяц <span class="num text-primary">{{ formatRub(stats.monthlyRevenueRub) }}</span></span
                >
            </div>
        </div>
        <div class="d-flex ga-2">
            <v-btn
                variant="outlined"
                prepend-icon="mdi-refresh"
                :loading="loading"
                data-testid="reload-btn"
                @click="emit('refresh')"
            >
                Обновить
            </v-btn>
            <v-btn variant="outlined" prepend-icon="mdi-download">Экспорт</v-btn>
        </div>
    </header>
</template>

<style scoped>
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.page-title {
    font-variation-settings: 'opsz' 28;
    letter-spacing: -0.018em;
}
.page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.page-stats .sep {
    /* WCAG2AA 4.5:1 fix (was #92907b → 2.92:1 on ivory; #6b6356 → 5.33:1). */
    color: #6b6356;
}
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
</style>
