{% extends 'layout.html' %}
{% from "security/_macros.html" import render_field_errors %}

{% block content %}
<v-container fluid class="pa-4">
    <v-card max-width="600" class="mx-auto">
        <v-card-title class="text-headline-small">
            <i class="ti ti-lifebuoy mr-2"></i>
            Recovery Codes
        </v-card-title>
        <v-card-subtitle>
            Backup codes for account recovery when you can't use your authenticator
        </v-card-subtitle>

        <v-card-text>
            {% include "security/_messages.html" %}

            {% if recovery_codes %}
            <v-alert type="success" variant="tonal" class="mb-4">
                <strong>Save these codes!</strong> Each can only be used once. Store them securely.
            </v-alert>

            <v-card variant="outlined" class="mb-4">
                <v-card-text class="d-flex flex-wrap ga-2 justify-center py-4">
                    {% for rc in recovery_codes %}
                    <v-chip size="large" label variant="outlined" class="text-title-large font-weight-mono">{{ rc }}</v-chip>
                    {% endfor %}
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn variant="text" @click="copyAll">
                        <i class="ti ti-copy mr-1"></i>
                        Copy
                    </v-btn>
                    <v-btn variant="text" @click="download">
                        <i class="ti ti-download mr-1"></i>
                        Download
                    </v-btn>
                </v-card-actions>
            </v-card>
            {% elif has_codes %}
            <v-card variant="outlined" class="mb-4">
                <v-card-text class="text-center pa-6">
                    <i class="ti ti-eye-off mb-3" style="font-size: 48px; opacity: 0.5;"></i>
                    <div class="text-body-large">Recovery codes are active</div>
                    <div class="text-body-small text-medium-emphasis">Codes are shown only once when generated. Lost them? Regenerate below.</div>
                </v-card-text>
            </v-card>
            {% else %}
            <v-card variant="outlined" class="mb-4">
                <v-card-text class="text-center pa-6">
                    <i class="ti ti-shield-off mb-3" style="font-size: 48px; opacity: 0.5;"></i>
                    <div class="text-body-large">No recovery codes generated yet</div>
                    <div class="text-body-small text-medium-emphasis mb-4">Generate codes below to use as backup when you can't access your authenticator</div>
                </v-card-text>
            </v-card>
            {% endif %}

            <v-divider class="my-4"></v-divider>

            <v-card variant="outlined">
                <v-card-text class="d-flex align-center">
                    <div class="flex-grow-1">
                        <div class="font-weight-medium">{{ 'Regenerate Codes' if has_codes else 'Generate Codes' }}</div>
                        <div class="text-body-small text-medium-emphasis">{{ 'This will invalidate existing codes' if has_codes else 'Create backup recovery codes' }}</div>
                    </div>
                    <form action="{{ url_for_security('mf_recovery_codes') }}" method="POST">
                        {{ mf_recovery_codes_form.hidden_tag() }}
                        {{ render_field_errors(mf_recovery_codes_form.csrf_token) }}
                        <v-btn color="{{ 'warning' if has_codes else 'primary' }}" variant="tonal" type="submit">
                            <i class="ti ti-refresh mr-1"></i>
                            Generate
                        </v-btn>
                    </form>
                </v-card-text>
            </v-card>
        </v-card-text>

        <v-card-actions class="pa-4">
            <v-btn variant="text" href="{{ url_for_security('two_factor_setup') }}">
                <i class="ti ti-chevron-left mr-1"></i>
                Back to 2FA Settings
            </v-btn>
        </v-card-actions>
    </v-card>
</v-container>
{% endblock %}

{% block js %}
<script>
    const codes = [{% for rc in recovery_codes %}'{{ rc }}'{% if not loop.last %},{% endif %}{% endfor %}];

    const { createApp } = Vue;
    const { createVuetify } = Vuetify;
    const vuetify = createVuetify(config.vuetifyConfig);

    const app = createApp({
        mixins: [layoutMixin],
        methods: {
            copyAll() {
                navigator.clipboard.writeText(codes.join('\n'));
            },
            download() {
                const text = {{ (config.APP_NAME ~ ' Recovery Codes')|tojson }} + '\n======================\n\n' + codes.join('\n');
                const blob = new Blob([text], { type: 'text/plain' });
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = 'recovery-codes.txt';
                a.click();
            }
        },
        delimiters: ['${', '}']
    });

    registerStkComponents(app);
    app.use(vuetify).mount('#app');
</script>
{% endblock %}