{% load static %}

<form hx-post="{% url 'accounts:two_factor_setup' %}" 
      hx-trigger="submit"
      hx-swap="none">
    {% csrf_token %}
    
    <div class="mb-3">
        <label for="device_type" class="form-label">Device Type</label>
        <select class="form-select" id="device_type" name="device_type" required>
            <option value="">Select device type...</option>
            <option value="TOTP">Authenticator App (TOTP)</option>
            <option value="SMS">SMS Text Message</option>
            <option value="EMAIL">Email</option>
            <option value="BACKUP_CODES">Backup Codes</option>
        </select>
        <div class="form-text">Choose how you want to receive verification codes.</div>
    </div>
    
    <div class="mb-3">
        <label for="device_name" class="form-label">Device Name</label>
        <input type="text" class="form-control" id="device_name" name="device_name" 
               placeholder="e.g., My iPhone, Work Phone" required>
        <div class="form-text">Give this device a memorable name.</div>
    </div>
    
    <div id="phone-field" class="mb-3" style="display: none;">
        <label for="phone_number" class="form-label">Phone Number</label>
        <input type="tel" class="form-control" id="phone_number" name="phone_number" 
               placeholder="+1 (555) 123-4567">
        <div class="form-text">Required for SMS verification.</div>
    </div>
    
    <div id="email-field" class="mb-3" style="display: none;">
        <label for="email_address" class="form-label">Email Address</label>
        <input type="email" class="form-control" id="email_address" name="email_address" 
               placeholder="your@email.com">
        <div class="form-text">Required for email verification.</div>
    </div>
    
    <div id="totp-instructions" class="alert alert-info" style="display: none;">
        <h6><i class="fas fa-mobile-alt me-2"></i>Authenticator App Setup</h6>
        <p class="mb-2">To use an authenticator app:</p>
        <ol class="mb-0">
            <li>Download an authenticator app like Google Authenticator, Authy, or Microsoft Authenticator</li>
            <li>Click "Setup Device" below to get your QR code</li>
            <li>Scan the QR code with your authenticator app</li>
            <li>Enter the 6-digit code from your app to verify</li>
        </ol>
    </div>
    
    <div id="sms-instructions" class="alert alert-info" style="display: none;">
        <h6><i class="fas fa-sms me-2"></i>SMS Setup</h6>
        <p class="mb-0">You'll receive verification codes via text message to the phone number you provide.</p>
    </div>
    
    <div id="email-instructions" class="alert alert-info" style="display: none;">
        <h6><i class="fas fa-envelope me-2"></i>Email Setup</h6>
        <p class="mb-0">You'll receive verification codes via email to the address you provide.</p>
    </div>
    
    <div id="backup-instructions" class="alert alert-warning" style="display: none;">
        <h6><i class="fas fa-key me-2"></i>Backup Codes</h6>
        <p class="mb-0">Backup codes are one-time use codes that can be used if you lose access to your other two-factor devices. Store them securely!</p>
    </div>
    
    <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Setup Device
        </button>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const deviceTypeSelect = document.getElementById('device_type');
    const phoneField = document.getElementById('phone-field');
    const emailField = document.getElementById('email-field');
    const totpInstructions = document.getElementById('totp-instructions');
    const smsInstructions = document.getElementById('sms-instructions');
    const emailInstructions = document.getElementById('email-instructions');
    const backupInstructions = document.getElementById('backup-instructions');
    
    deviceTypeSelect.addEventListener('change', function() {
        // Hide all conditional fields and instructions
        phoneField.style.display = 'none';
        emailField.style.display = 'none';
        totpInstructions.style.display = 'none';
        smsInstructions.style.display = 'none';
        emailInstructions.style.display = 'none';
        backupInstructions.style.display = 'none';
        
        // Show relevant fields based on selection
        switch(this.value) {
            case 'SMS':
                phoneField.style.display = 'block';
                smsInstructions.style.display = 'block';
                document.getElementById('phone_number').required = true;
                break;
            case 'EMAIL':
                emailField.style.display = 'block';
                emailInstructions.style.display = 'block';
                document.getElementById('email_address').required = true;
                break;
            case 'TOTP':
                totpInstructions.style.display = 'block';
                break;
            case 'BACKUP_CODES':
                backupInstructions.style.display = 'block';
                break;
        }
    });
    
    // Handle form submission
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.target.tagName === 'FORM' && event.detail.xhr.status === 200) {
            const response = JSON.parse(event.detail.xhr.responseText);
            if (response.status === 'created') {
                // Close modal and refresh the page
                const modal = bootstrap.Modal.getInstance(document.getElementById('two-factor-modal'));
                modal.hide();
                location.reload();
            }
        }
    });
});
</script>