<script setup lang="ts">
/**
 * Экран резервных кодов (RecoveryCodesView).
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_login.html секция #form-recovery.
 * Источник логики: ТЗ v8.5 §1.6 / Прил. Г.4.2 — 8 одноразовых 8-символьных кодов;
 * после использования код в БД удаляется (recovery_codes table); генерируются один
 * раз при включении 2FA, посмотреть повторно нельзя — только перегенерация.
 *
 * MVP: коды-заглушки. Реальные коды будут с backend через POST /2fa/recovery-codes.
 */
import { ref } from 'vue';

// TODO(phase2): получать из API после step1 настройки 2FA.
const codes = ref([
    'A4FX-91KZ',
    '9MRT-2P3D',
    'QH7B-XK4N',
    '5VLW-T8RY',
    'B2ZJ-N6FP',
    'D3WK-Q9MX',
    '7YHC-8GVB',
    'RP4S-K1NA',
]);

function downloadTxt() {
    const blob = new Blob([codes.value.join('\n') + '\n'], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'liderra-recovery-codes.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

async function copyAll() {
    try {
        await navigator.clipboard.writeText(codes.value.join('\n'));
    } catch {
        // Fallback на legacy execCommand добавим только если будут жалобы — у нас HTTPS-only.
    }
}

function handleContinue() {
    // TODO(phase2): редирект на /dashboard.
}
</script>

<template>
    <v-card variant="flat" :max-width="420" width="100%" color="transparent" class="recovery-card">
        <header class="recovery-header">
            <h1 class="text-h5 mb-1">Резервные коды</h1>
            <p class="text-body-2 text-medium-emphasis ma-0">
                Сохраните эти 8 одноразовых кодов в безопасном месте. Каждый можно использовать только раз вместо 2FA.
            </p>
        </header>

        <div class="codes-grid">
            <span v-for="code in codes" :key="code" class="code-item">{{ code }}</span>
        </div>

        <v-alert type="warning" variant="tonal" density="compact">
            <strong>После закрытия страницы коды нельзя посмотреть снова</strong>. Скачайте файл или сделайте скриншот.
        </v-alert>

        <div class="d-flex ga-2">
            <v-btn variant="outlined" prepend-icon="mdi-download" @click="downloadTxt"> Скачать .txt </v-btn>
            <v-btn variant="outlined" prepend-icon="mdi-content-copy" @click="copyAll"> Копировать </v-btn>
        </div>

        <v-btn color="primary" block size="large" variant="flat" @click="handleContinue"> Понятно — продолжить </v-btn>
    </v-card>
</template>

<style scoped>
.recovery-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recovery-header h1 {
    font-variation-settings: 'opsz' 26;
    letter-spacing: -0.018em;
}

.codes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.code-item {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #d9d5cd;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.04em;
}

/* WCAG2AA contrast fix for Vuetify warning tonal variant (2.03:1 → ≥4.5:1).
   Pa11y baseline 2026-05-14 — see docs/audit-baseline-pa11y.md. */
.recovery-card :deep(.v-alert--variant-tonal.bg-warning .v-alert__content),
.recovery-card :deep(.v-alert--variant-tonal.text-warning .v-alert__content) {
    color: #0a0700;
}
</style>
