<script setup lang="ts">
import type { AdminTenantDetail } from '../../../composables/mockTenantDetail';
import { formatRub, statusColor } from '../../../composables/adminTenantDetailFormatters';

defineProps<{
    tenant: AdminTenantDetail;
}>();

const emit = defineEmits<{
    back: [];
    impersonate: [];
    editBalance: [];
}>();
</script>

<template>
    <header class="page-head">
        <div class="head-top">
            <v-btn variant="text" prepend-icon="mdi-arrow-left" data-testid="back-btn" @click="emit('back')">
                К списку тенантов
            </v-btn>
        </div>
        <div class="head-main">
            <div>
                <h1 class="text-h4 mb-1 page-title">{{ tenant.name }}</h1>
                <div class="page-meta text-body-2 text-medium-emphasis">
                    <span>{{ tenant.code }}</span>
                    <template v-if="tenant.inn">
                        <span class="sep">·</span>
                        <span>ИНН {{ tenant.inn }}</span>
                    </template>
                    <template v-if="tenant.legal_address">
                        <span class="sep">·</span>
                        <span>{{ tenant.legal_address }}</span>
                    </template>
                </div>
                <div class="page-meta text-body-2 text-medium-emphasis mt-1">
                    <span>{{ tenant.contact_email }}</span>
                    <template v-if="tenant.contact_phone">
                        <span class="sep">·</span>
                        <span>{{ tenant.contact_phone }}</span>
                    </template>
                    <template v-if="tenant.created_at">
                        <span class="sep">·</span>
                        <span>создан {{ tenant.created_at }}</span>
                    </template>
                </div>
            </div>
            <div class="head-actions">
                <v-chip size="default" variant="tonal" :color="statusColor(tenant.status)">
                    {{ tenant.statusText }}
                </v-chip>
                <v-btn
                    color="warning"
                    variant="tonal"
                    prepend-icon="mdi-account-switch"
                    :disabled="tenant.status === 'suspended'"
                    data-testid="impersonate-btn"
                    @click="emit('impersonate')"
                >
                    Войти как клиент
                </v-btn>
            </div>
        </div>
    </header>

    <div class="kpi-row mt-4">
        <v-card variant="outlined" class="kpi-card pa-4" data-testid="kpi-balance">
            <div class="kpi-label text-caption text-medium-emphasis">Баланс</div>
            <div class="kpi-value num" :class="{ 'text-error': tenant.balanceRub < 0 }">
                {{ formatRub(tenant.balanceRub) }}
            </div>
            <div class="kpi-sub text-caption text-medium-emphasis">runway ~{{ tenant.runwayDays }} дн</div>
            <v-btn
                variant="text"
                size="small"
                density="comfortable"
                prepend-icon="mdi-pencil"
                class="mt-1 px-0"
                data-testid="edit-balance-btn"
                @click="emit('editBalance')"
            >
                Изменить
            </v-btn>
        </v-card>
        <v-card variant="outlined" class="kpi-card pa-4" data-testid="kpi-mrr">
            <div class="kpi-label text-caption text-medium-emphasis">Тариф / MRR</div>
            <div class="kpi-value num">{{ tenant.tariff }}</div>
            <div class="kpi-sub text-caption text-medium-emphasis">
                {{ tenant.mrrRub !== null ? formatRub(tenant.mrrRub) + '/мес' : 'без оплаты' }}
            </div>
        </v-card>
        <v-card variant="outlined" class="kpi-card pa-4" data-testid="kpi-leads">
            <div class="kpi-label text-caption text-medium-emphasis">Лиды</div>
            <div class="kpi-value num">{{ tenant.todayActual }} / {{ tenant.todayDesired }}</div>
            <div class="kpi-sub text-caption text-medium-emphasis">
                сегодня · {{ tenant.leadsThisWeek }} за неделю · {{ tenant.leadsThisMonth }} за месяц
            </div>
        </v-card>
        <v-card variant="outlined" class="kpi-card pa-4" data-testid="kpi-avg-cost">
            <div class="kpi-label text-caption text-medium-emphasis">Средняя цена лида</div>
            <div class="kpi-value num">{{ formatRub(tenant.avgLeadCost) }}</div>
            <div class="kpi-sub text-caption text-medium-emphasis">за последние 30 дней</div>
        </v-card>
    </div>
</template>

<style scoped>
.page-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.head-main {
    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-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.page-meta .sep {
    /* WCAG2AA 4.5:1 fix (was #92907b → 2.92:1 on ivory; #6b6356 → 5.33:1). */
    color: #6b6356;
}
.head-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 960px) {
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
.kpi-card {
    background: #fff;
}
.kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.kpi-value {
    font-size: 24px;
    margin-top: 4px;
    color: #081319;
}
.kpi-sub {
    margin-top: 4px;
}
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
</style>
