{% extends "base.html" %}
{% block title %}{% trans %}Two-Factor Authentication{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto px-4 py-10">

    <div class="mb-6 flex items-center gap-3">
        <a href="{{ full_url('/dashboard') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-all text-sm"><i class="fa fa-arrow-left"></i></a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-2fa">{% trans %}Two-Factor Authentication{% endtrans %}</h1>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    {% if user.user_totp_enabled %}
    <!-- 2FA is enabled — show disable form -->
    <div class="rounded-2xl border border-green-200 dark:border-green-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-green-100 dark:border-green-900/50 bg-green-50 dark:bg-green-900/20 flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
                <i class="fa fa-shield-halved text-green-600 dark:text-green-400"></i>
            </div>
            <div>
                <div class="font-bold text-green-800 dark:text-green-300">{% trans %}2FA is Enabled{% endtrans %}</div>
                <div class="text-xs text-green-600 dark:text-green-400">{% trans %}Your account is protected with two-factor authentication.{% endtrans %}</div>
            </div>
            <span class="ml-auto inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 text-xs font-bold" data-testid="badge-2fa-enabled">
                <i class="fa fa-check text-[10px]"></i> {% trans %}Active{% endtrans %}
            </span>
        </div>
        <div class="p-6">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">{% trans %}To disable two-factor authentication, enter the current 6-digit code from your authenticator app to confirm.{% endtrans %}</p>
            <form method="POST" action="{{ full_url('/account/2fa/disable') }}">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Authenticator Code{% endtrans %}</label>
                <div class="flex gap-3">
                    <input type="text" name="code" maxlength="6" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}"
                        class="flex-1 px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-center text-xl font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-400"
                        placeholder="000000" required data-testid="input-2fa-disable-code">
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-red-500 hover:bg-red-600 text-white font-semibold text-sm transition-all" data-testid="btn-disable-2fa"
                        onclick="return confirm('{% trans %}Are you sure you want to disable 2FA? Your account will be less secure.{% endtrans %}')">
                        {% trans %}Disable 2FA{% endtrans %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    {% else %}
    <!-- 2FA setup — show QR code -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <h2 class="font-bold text-gray-900 dark:text-white">{% trans %}Set Up Two-Factor Authentication{% endtrans %}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Use Google Authenticator, Authy, or any TOTP app.{% endtrans %}</p>
        </div>
        <div class="p-6 space-y-6">
            <div class="flex flex-col sm:flex-row gap-6 items-center">
                {% if qr_data_url %}
                <div class="flex-shrink-0">
                    <div class="p-3 bg-white rounded-xl border-2 border-gray-200 dark:border-gray-700 shadow-inner inline-block">
                        <img src="{{ qr_data_url }}" alt="QR Code" class="w-40 h-40 block" data-testid="img-2fa-qr">
                    </div>
                </div>
                {% endif %}
                <div class="flex-1 space-y-3">
                    <div class="p-3 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Manual Setup Key{% endtrans %}</div>
                        <code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all select-all" data-testid="text-2fa-secret">{{ user.user_totp_secret }}</code>
                    </div>
                    <ol class="text-sm text-gray-600 dark:text-gray-400 space-y-1.5 list-decimal list-inside">
                        <li>{% trans %}Open your authenticator app{% endtrans %}</li>
                        <li>{% trans %}Scan the QR code or enter the key manually{% endtrans %}</li>
                        <li>{% trans %}Enter the 6-digit code below to confirm{% endtrans %}</li>
                    </ol>
                </div>
            </div>
            <form method="POST" action="{{ full_url('/account/2fa/enable') }}">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Verification Code{% endtrans %}</label>
                <div class="flex gap-3">
                    <input type="text" name="code" maxlength="6" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}"
                        class="flex-1 px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-center text-2xl font-mono tracking-[0.5em] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        placeholder="000000" required autofocus data-testid="input-2fa-enable-code">
                    <button type="submit" class="px-6 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold transition-all shadow-lg shadow-primary/20" data-testid="btn-enable-2fa">
                        <i class="fa fa-shield-halved mr-1"></i> {% trans %}Enable 2FA{% endtrans %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}