<?php
/**
 * ExploreXR Premium - Migration Page
 * 
 * Handles the migration from free to premium version
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Migration page callback
 */
function explorexr_migration_page() {
    // Check permissions
    if (!current_user_can('manage_options')) {
        wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'explorexr-premium'));
    }
    
    // Include the migration handler
    require_once EXPLOREXR_PLUGIN_DIR . 'includes/migration/free-to-premium-migration.php';
    
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        
        <div class="explorexr-migration-container">
            <div class="explorexr-card">
                <h2>Free to Premium Migration</h2>
                <p>This tool will help you migrate your data from the ExploreXR Free version to Premium.</p>
                
                <div class="migration-status" id="migration-status">
                    <?php
                    // Check if migration has already been completed
                    if (get_option('explorexr_premium_migration_completed')) {
                        echo '<div class="notice notice-success"><p><strong>Migration already completed!</strong></p></div>';
                        echo '<p>Migration was completed on: ' . esc_html(get_option('explorexr_premium_migration_date')) . '</p>';
                    } else {
                        echo '<div class="notice notice-info"><p>Ready to migrate your data from the free version.</p></div>';
                    }
                    ?>
                </div>
                
                <div class="migration-actions">
                    <?php if (!get_option('explorexr_premium_migration_completed')): ?>
                        <button type="button" id="start-migration" class="button button-primary">
                            Start Migration
                        </button>
                        <p class="description">
                            This will migrate your models, settings, and configurations from the free version.
                        </p>
                    <?php else: ?>
                        <button type="button" id="re-run-migration" class="button button-secondary">
                            Re-run Migration
                        </button>
                        <p class="description">
                            You can re-run the migration if needed, but this may overwrite existing data.
                        </p>
                    <?php endif; ?>
                </div>
                
                <div class="migration-progress" id="migration-progress" style="display: none;">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 0%;"></div>
                    </div>
                    <p class="progress-text">Preparing migration...</p>
                </div>
                
                <div class="migration-results" id="migration-results" style="display: none;">
                    <!-- Results will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
    
    <style>
        .explorexr-migration-container {
            max-width: 800px;
            margin: 20px 0;
        }
        
        .explorexr-card {
            background: #fff;
            border: 1px solid #c3c4c7;
            box-shadow: 0 1px 1px rgba(0,0,0,.04);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .migration-actions {
            margin: 20px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #0073aa;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-style: italic;
            color: #666;
        }
        
        .migration-results {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            background: #f9f9f9;
            border-radius: 4px;
        }
    </style>
    
    <script>
    jQuery(document).ready(function($) {
        $('#start-migration, #re-run-migration').on('click', function() {
            const button = $(this);
            const isRerun = button.attr('id') === 're-run-migration';
            
            // Disable button and show progress
            button.prop('disabled', true);
            $('#migration-progress').show();
            $('#migration-results').hide();
            
            // Update progress
            $('.progress-fill').css('width', '10%');
            $('.progress-text').text('Starting migration...');
            
            // Perform AJAX migration
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'explorexr_premium_migrate_data',
                    nonce: '<?php echo esc_attr(wp_create_nonce('explorexr_premium_migration')); ?>',
                    rerun: isRerun ? 1 : 0
                },
                success: function(response) {
                    $('.progress-fill').css('width', '100%');
                    $('.progress-text').text('Migration completed!');
                    
                    let resultsHtml = '';
                    if (response.success) {
                        resultsHtml = '<div class="notice notice-success"><p><strong>Migration completed successfully!</strong></p></div>';
                        if (response.data.message) {
                            resultsHtml += '<p>' + response.data.message + '</p>';
                        }
                        if (response.data.details) {
                            resultsHtml += '<ul>';
                            response.data.details.forEach(function(detail) {
                                resultsHtml += '<li>' + detail + '</li>';
                            });
                            resultsHtml += '</ul>';
                        }
                        
                        // Update migration status
                        $('#migration-status').html('<div class="notice notice-success"><p><strong>Migration completed successfully!</strong></p></div>');
                        
                        // Change button text
                        button.text('Re-run Migration').attr('id', 're-run-migration');
                        
                    } else {
                        resultsHtml = '<div class="notice notice-error"><p><strong>Migration failed!</strong></p></div>';
                        if (response.data && response.data.message) {
                            resultsHtml += '<p>Error: ' + response.data.message + '</p>';
                        }
                    }
                    
                    $('#migration-results').html(resultsHtml).show();
                    button.prop('disabled', false);
                },
                error: function(xhr, status, error) {
                    $('.progress-fill').css('width', '0%');
                    $('.progress-text').text('Migration failed!');
                    
                    const resultsHtml = '<div class="notice notice-error"><p><strong>Migration failed!</strong></p><p>Error: ' + error + '</p></div>';
                    $('#migration-results').html(resultsHtml).show();
                    button.prop('disabled', false);
                }
            });
        });
    });
    </script>
    
    <?php
}
