{% extends 'microsys/base.html' %}
{% load static %}
{% block title %}{{ MS_TRANS.2fa_verify_title }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'microsys/users/css/login.css' %}">
{% endblock %}
{% block titlebar %}{% endblock %}

{% block layout %}
<div class="page">
    {% if messages %}
        <div class="alert-container position-absolute top-0 start-0 w-100" style="z-index: 2000;">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} text-center h4" style="opacity: 95%;">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="container">
      <div class="left">
        <div class="d-flex flex-column align-items-center mb-4 d-md-none">
            <div class="logo-frame">
                <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Login Logo" class="logo-img">
            </div>
        </div>
        <form method="post" action="" class="w-100">
            {% csrf_token %}
            
            <div class="form m-0 mx-auto text-center">
                {% if user_methods %}
                    <!-- Method Selector (Modern) -->
                    <div class="mb-4">
                        <label class="text-muted mb-2 small fw-bold">{{ MS_TRANS.2fa_select_method|default:"Select Verification Method" }}</label>
                        <div class="d-flex justify-content-center gap-2 flex-wrap mb-3" id="method-selector">
                            {% if user_methods.totp %}
                            <input type="radio" class="btn-check" name="method" id="method_totp" value="totp" autocomplete="off" onchange="updateInstruction('totp')" checked>
                            <label class="btn btn-outline-primary" for="method_totp">
                                <i class="bi bi-qr-code me-1"></i> App
                            </label>
                            {% endif %}

                            {% if user_methods.email %}
                            <input type="radio" class="btn-check" name="method" id="method_email" value="email" autocomplete="off" onchange="updateInstruction('email')" {% if not user_methods.totp %}checked{% endif %}>
                            <label class="btn btn-outline-primary" for="method_email">
                                <i class="bi bi-envelope me-1"></i> Email
                            </label>
                            {% endif %}

                            {% if user_methods.phone %}
                            <input type="radio" class="btn-check" name="method" id="method_phone" value="phone" autocomplete="off" onchange="updateInstruction('phone')" {% if not user_methods.totp and not user_methods.email %}checked{% endif %}>
                            <label class="btn btn-outline-primary" for="method_phone">
                                <i class="bi bi-phone me-1"></i> SMS
                            </label>
                            {% endif %}

                            <input type="radio" class="btn-check" name="method" id="method_backup" value="backup_code" autocomplete="off" onchange="updateInstruction('backup_code')">
                            <label class="btn btn-outline-secondary" for="method_backup">
                                <i class="bi bi-safe me-1"></i> Backup
                            </label>
                        </div>

                        <p class="text-muted small mt-2" id="otp-instruction-text" style="min-height: 20px;">
                            {{ MS_TRANS.2fa_verify_desc }}
                        </p>
                    </div>
                {% else %}
                    <p class="text-muted mb-4">{{ MS_TRANS.2fa_verify_desc }}</p>
                {% endif %}

                {% if error_message %}
                    <div class="alert alert-danger" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i> {{ error_message }}
                    </div>
                {% endif %}

                <div class="mb-4">
                    <label for="otp_code" class="visually-hidden">{{ MS_TRANS.2fa_code }}</label>
                    <input type="text" 
                           class="login-input text-center fw-bold" 
                           id="otp_code" 
                           name="otp_code" 
                           placeholder="XXXXXX" 
                           maxlength="8" 
                           autofocus 
                           required
                           style="letter-spacing: 0.5em; font-size: 1.5rem;">
                </div>
        
                <button type="submit" class="w-100 btn btn-lg mt-4" id="submit">{{ MS_TRANS.2fa_verify_btn }}</button>
                
                <div class="d-flex justify-content-between mt-4">
                    {% if intent == 'login' %}
                        <a href="{% url 'resend_otp_login' %}" class="text-muted text-decoration-none small">{{ MS_TRANS.2fa_resend_btn }}</a>
                        <a href="{% url 'login' %}" class="text-muted text-decoration-none small">Back to Login</a>
                    {% else %}
                        <a href="{% url 'resend_otp_enable' %}" class="text-muted text-decoration-none small">{{ MS_TRANS.2fa_resend_btn }}</a>
                        <a href="{% url 'user_profile' %}" class="text-muted text-decoration-none small">Cancel</a>
                    {% endif %}
                </div>
            </div>
        </form>
      </div>
      
      <div class="right d-none d-md-flex">
          <div class="logo-frame">
            <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Login Logo" class="logo-img">
          </div>
      </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function updateInstruction(method) {
        const textEl = document.getElementById('otp-instruction-text');
        const inputEl = document.getElementById('otp_code');
        if (!textEl) return;
        
        const instructions = {
            'totp': 'Enter the 6-digit code from your authenticator app.',
            'email': 'Enter the 6-digit code sent to your email.',
            'phone': 'Enter the 6-digit code sent to your phone.',
            'backup_code': '{{ MS_TRANS.2fa_backup_instruction|default:"Enter one of your 8-digit backup codes." }}'
        };
        
        if (instructions[method]) {
            textEl.textContent = instructions[method];
        }

        if (inputEl) {
            if (method === 'backup_code') {
                inputEl.setAttribute('maxlength', '8');
                inputEl.setAttribute('placeholder', 'XXXXXXXX');
            } else {
                inputEl.setAttribute('maxlength', '6');
                inputEl.setAttribute('placeholder', 'XXXXXX');
            }
        }
    }

    // Initialize on load
    document.addEventListener('DOMContentLoaded', function() {
        const checked = document.querySelector('input[name="method"]:checked');
        if (checked) {
            updateInstruction(checked.value);
        }
    });
</script>
{% endblock %}