<?php
/**
 * Frontend 2FA Management Template
 * 
 * Template for [vmpfence_2fa] shortcode
 * 
 * Available variables:
 * - $current_user: WP_User object
 * - $is_enabled: boolean - whether 2FA is currently enabled
 * - $api_key: string - API key for backend calls
 * 
 * @package VMPFence
 * @since 2.1.0
 * @since 2.2.1 Updated text-domain to vmpfence-security
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Enqueue necessary scripts and styles
wp_enqueue_style('vmpfence-frontend-2fa', VMPFENCE_PLUGIN_URL . 'admin/assets/css/login-security.css', array(), VMPFENCE_VERSION);
wp_enqueue_script('vmpfence-frontend-2fa', VMPFENCE_PLUGIN_URL . 'admin/assets/js/frontend-2fa.js', array('jquery'), VMPFENCE_VERSION, true);

// Pass data to JavaScript
wp_localize_script('vmpfence-frontend-2fa', 'vmpfenceFrontend2FA', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('vmpfence_2fa_nonce'),
    'user_id' => $current_user->ID,
    'is_enabled' => $is_enabled
));
?>

<div class="vmpfence-2fa-shortcode vmpfence-frontend-2fa-container">
    <div class="vmpfence-2fa-status-card">
        <h3><?php esc_html_e('Two-Factor Authentication', 'vmpfence-security'); ?></h3>
        
        <div class="vmpfence-2fa-status">
            <span class="status-label"><?php esc_html_e('Status:', 'vmpfence-security'); ?></span>
            <span class="status-value <?php echo $is_enabled ? 'enabled' : 'disabled'; ?>">
                <?php echo $is_enabled ? __('Enabled', 'vmpfence-security') : __('Disabled', 'vmpfence-security'); ?>
            </span>
        </div>
        
        <?php if ($is_enabled): ?>
            <!-- 2FA is currently enabled -->
            <div class="vmpfence-2fa-enabled-section">
                <p><?php esc_html_e('Two-Factor Authentication is currently protecting your account. You will need to enter a verification code when logging in.', 'vmpfence-security'); ?></p>
                
                <div class="vmpfence-2fa-actions">
                    <button type="button" class="button button-secondary vmpfence-regenerate-backup-codes">
                        <?php esc_html_e('Regenerate Backup Codes', 'vmpfence-security'); ?>
                    </button>
                    
                    <button type="button" class="button button-danger vmpfence-disable-2fa-btn">
                        <?php esc_html_e('Disable 2FA', 'vmpfence-security'); ?>
                    </button>
                </div>
                
                <div class="vmpfence-backup-codes-container" style="display: none; margin-top: 20px;">
                    <h4><?php esc_html_e('Backup Codes', 'vmpfence-security'); ?></h4>
                    <p><?php esc_html_e('Save these codes in a safe place. Each code can be used once if you lose access to your authentication device.', 'vmpfence-security'); ?></p>
                    <div class="vmpfence-backup-codes-list"></div>
                </div>
            </div>
            
        <?php else: ?>
            <!-- 2FA is not enabled -->
            <div class="vmpfence-2fa-disabled-section">
                <p><?php esc_html_e('Two-Factor Authentication adds an extra layer of security to your account by requiring a verification code when you log in.', 'vmpfence-security'); ?></p>
                
                <button type="button" class="button button-primary vmpfence-setup-2fa-btn">
                    <?php esc_html_e('Enable 2FA', 'vmpfence-security'); ?>
                </button>
            </div>
            
            <!-- 2FA Setup Modal (shown when enabling) -->
            <div class="vmpfence-2fa-setup-modal" style="display: none;">
                <div class="vmpfence-modal-content">
                    <h4><?php esc_html_e('Setup Two-Factor Authentication', 'vmpfence-security'); ?></h4>
                    
                    <div class="vmpfence-2fa-setup-step-1">
                        <p><?php esc_html_e('1. Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)', 'vmpfence-security'); ?></p>
                        <div class="vmpfence-qr-code-container"></div>
                        
                        <p><?php esc_html_e('2. Enter the 6-digit code from your app:', 'vmpfence-security'); ?></p>
                        <input type="text" class="vmpfence-2fa-verify-code" maxlength="6" placeholder="000000" />
                        
                        <div class="vmpfence-2fa-setup-actions">
                            <button type="button" class="button button-primary vmpfence-verify-2fa-btn">
                                <?php esc_html_e('Verify & Enable', 'vmpfence-security'); ?>
                            </button>
                            <button type="button" class="button button-secondary vmpfence-cancel-setup-btn">
                                <?php esc_html_e('Cancel', 'vmpfence-security'); ?>
                            </button>
                        </div>
                    </div>
                    
                    <div class="vmpfence-2fa-setup-complete" style="display: none;">
                        <p class="success"><?php esc_html_e('✓ Two-Factor Authentication has been enabled!', 'vmpfence-security'); ?></p>
                        
                        <h4><?php esc_html_e('Backup Codes', 'vmpfence-security'); ?></h4>
                        <p><?php esc_html_e('Save these codes in a safe place. Each code can be used once if you lose access to your authentication device.', 'vmpfence-security'); ?></p>
                        <div class="vmpfence-backup-codes-list"></div>
                        
                        <button type="button" class="button button-primary vmpfence-finish-setup-btn">
                            <?php esc_html_e('Finish', 'vmpfence-security'); ?>
                        </button>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
    
    <!-- Loading overlay -->
    <div class="vmpfence-loading-overlay" style="display: none;">
        <div class="vmpfence-spinner"></div>
    </div>
    
    <!-- Messages container -->
    <div class="vmpfence-messages"></div>
</div>

<style>
.vmpfence-frontend-2fa-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
}

.vmpfence-2fa-status-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.vmpfence-2fa-status {
    margin: 15px 0;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.vmpfence-2fa-status .status-label {
    font-weight: bold;
    margin-right: 10px;
}

.vmpfence-2fa-status .status-value.enabled {
    color: #46b450;
    font-weight: bold;
}

.vmpfence-2fa-status .status-value.disabled {
    color: #dc3232;
    font-weight: bold;
}

.vmpfence-2fa-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.button-danger {
    background: #dc3232;
    border-color: #dc3232;
    color: #fff;
}

.button-danger:hover {
    background: #c62d2d;
    border-color: #c62d2d;
    color: #fff;
}

.vmpfence-2fa-setup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.vmpfence-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.vmpfence-qr-code-container {
    text-align: center;
    margin: 20px 0;
}

.vmpfence-qr-code-container img {
    max-width: 250px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
}

.vmpfence-2fa-verify-code {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 5px;
    font-family: monospace;
}

.vmpfence-2fa-setup-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.vmpfence-backup-codes-list {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
}

.vmpfence-backup-codes-list .backup-code {
    display: block;
    padding: 5px 0;
}

.vmpfence-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmpfence-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #191970;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vmpfence-messages {
    margin-top: 15px;
}

.vmpfence-messages .message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.vmpfence-messages .success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.vmpfence-messages .error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
</style>
