{% extends "base.html" %}

{% block title %}Setup 2FA - Finance Tracker{% endblock %}

{% block content %}
<div class="form-container">
    <div class="glass-card form-card">
        <h1>🔐 Setup Two-Factor Authentication</h1>
        
        <div style="margin: 2rem 0;">
            <h3>Step 1: Scan QR Code</h3>
            <p style="color: var(--text-secondary); margin-bottom: 1rem;">
                Scan this QR code with your authenticator app (Google Authenticator, Authy, Microsoft Authenticator, etc.)
            </p>
            
            {% if qr_code %}
            <div style="text-align: center; padding: 2rem; background: white; border-radius: 15px; margin: 1rem 0;">
                <img src="data:image/png;base64,{{ qr_code }}" alt="2FA QR Code" style="max-width: 300px; display: block; margin: 0 auto;">
            </div>
            {% else %}
            <div style="padding: 2rem; background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); border-radius: 15px; margin: 1rem 0;">
                <p style="color: var(--danger); margin: 0;">❌ QR code generation failed. Please use manual entry below.</p>
            </div>
            {% endif %}
            
            <details style="margin-top: 1rem;">
                <summary style="cursor: pointer; color: var(--text-secondary); font-weight: 500;">Can't scan? Enter manually</summary>
                <div style="margin-top: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 10px;">
                    <p style="margin-bottom: 0.5rem;"><strong>Secret Key:</strong></p>
                    <code style="font-size: 1.2rem; color: #10b981; word-break: break-all; display: block; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">{{ secret }}</code>
                    <p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem;">
                        Enter this key manually in your authenticator app under "Enter a setup key" or "Manual entry"
                    </p>
                </div>
            </details>
        </div>
        
        <div style="margin: 2rem 0;">
            <h3>Step 2: Verify Code</h3>
            <p style="color: var(--text-secondary); margin-bottom: 1rem;">
                Enter the 6-digit code from your authenticator app to complete setup
            </p>
            
            <form method="POST" class="form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                
                <div class="form-group">
                    <label for="token">Authentication Code *</label>
                    <input type="text" id="token" name="token" required autofocus 
                           pattern="[0-9]{6}" maxlength="6" placeholder="000000"
                           style="font-size: 2rem; text-align: center; letter-spacing: 0.8rem; font-weight: 600;">
                </div>
                
                <div class="form-actions">
                    <a href="{{ url_for('settings.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">✅ Enable 2FA</button>
                </div>
            </form>
        </div>
        
        <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.1); border: 1px solid var(--primary); border-radius: 10px;">
            <p style="margin: 0;">
                <strong>💡 Important:</strong> Save your secret key in a secure location. You'll need it if you lose access to your authenticator app.
            </p>
        </div>
    </div>
</div>

<style>
details summary:hover {
    color: var(--text-primary);
}

input[type="text"]#token {
    background: rgba(255, 255, 255, 0.15);
}
</style>
{% endblock %}