<?php
/**
 * ==========================
 * 🔐 IGNY8 FILE RULE HEADER
 * ==========================
 * @file         : general-settings.php
 * @location     : /modules/settings/general-settings.php
 * @type         : Admin Page
 * @scope        : Module Only
 * @allowed      : Settings configuration, subpage routing, plugin preferences
 * @reusability  : Single Use
 * @notes        : Main settings page with subpage routing for settings module
 */

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

// Initialize module manager and render the complete page
$module_manager = igny8_module_manager();

// Handle URL parameters for subpages
$subpage = $_GET['sp'] ?? 'general';

// Start output buffering
ob_start();

switch ($subpage) {
    case 'status':
        include plugin_dir_path(__FILE__) . 'status.php';
        break;
    case 'integration':
        include plugin_dir_path(__FILE__) . 'integration.php';
        break;
    case 'schedules':
        include plugin_dir_path(__FILE__) . 'schedules.php';
        break;
    case 'import-export':
        include plugin_dir_path(__FILE__) . 'import-export.php';
        break;
    case 'general':
    default:
        // General settings content

// Handle image generation settings form submission
if (isset($_POST['igny8_image_settings_nonce']) && wp_verify_nonce($_POST['igny8_image_settings_nonce'], 'igny8_image_settings')) {
    $image_type = sanitize_text_field($_POST['igny8_image_type'] ?? 'realistic');
    $desktop_enabled = isset($_POST['igny8_desktop_enabled']) ? '1' : '0';
    $mobile_enabled = isset($_POST['igny8_mobile_enabled']) ? '1' : '0';
    $max_in_article_images = intval($_POST['igny8_max_in_article_images'] ?? 1);
    $image_format = sanitize_text_field($_POST['igny8_image_format'] ?? 'jpg');
    
    update_option('igny8_image_type', $image_type);
    update_option('igny8_desktop_enabled', $desktop_enabled);
    update_option('igny8_mobile_enabled', $mobile_enabled);
    update_option('igny8_max_in_article_images', $max_in_article_images);
    update_option('igny8_image_format', $image_format);
    
    echo '<div class="notice notice-success"><p>Image generation settings saved successfully!</p></div>';
} elseif (isset($_POST['igny8_image_settings_nonce'])) {
    echo '<div class="notice notice-error"><p>Security check failed. Please try again.</p></div>';
}

// Handle editor type settings form submission
if (isset($_POST['igny8_editor_type_nonce']) && wp_verify_nonce($_POST['igny8_editor_type_nonce'], 'igny8_editor_type_settings')) {
    $editor_type = isset($_POST['igny8_editor_type']) ? sanitize_text_field($_POST['igny8_editor_type']) : 'block';
    update_option('igny8_editor_type', $editor_type);
    echo '<div class="notice notice-success"><p>Editor type settings saved successfully! Selected: ' . esc_html($editor_type) . '</p></div>';
} elseif (isset($_POST['igny8_editor_type_nonce'])) {
    echo '<div class="notice notice-error"><p>Security check failed. Please try again.</p></div>';
}

// Handle image metabox settings form submission
if (isset($_POST['igny8_image_metabox_nonce']) && wp_verify_nonce($_POST['igny8_image_metabox_nonce'], 'igny8_image_metabox_settings')) {
    $enabled_types = isset($_POST['igny8_enable_image_metabox']) ? $_POST['igny8_enable_image_metabox'] : [];
    $enabled_types = array_map('sanitize_text_field', $enabled_types);
    update_option('igny8_enable_image_metabox', $enabled_types);
    echo '<div class="notice notice-success"><p>Image metabox settings saved successfully!</p></div>';
}

// Handle module settings form submission (only if not editor type or image metabox form)
if (isset($_POST['submit']) && !isset($_POST['igny8_editor_type_nonce']) && !isset($_POST['igny8_image_metabox_nonce'])) {
    $module_manager->save_module_settings();
}

// Debug: Log form submission data (remove in production)
if (isset($_POST['submit']) && current_user_can('manage_options')) {
    error_log('Igny8 Settings Debug - POST data: ' . print_r($_POST, true));
}


$settings = get_option('igny8_module_settings', []);
?>
<div class="igny8-settings-section">
    <!-- Module Manager Section -->
    <div class="igny8-settings-section">
        <div class="igny8-standard-header">
            <div class="igny8-card-header-content">
                <div class="igny8-card-title-text">
                    <h3>Module Manager</h3>
                    <p class="igny8-card-subtitle">Enable or disable plugin modules and features</p>
                </div>
                <div class="igny8-card-icon">
                    <span class="dashicons dashicons-admin-tools igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
                </div>
            </div>
        </div>
        
        <!-- Module Settings -->
        <div class="igny8-settings-section">
            <div class="igny8-settings">
                <form method="post" action="">
                    <?php wp_nonce_field('igny8_module_settings', 'igny8_module_nonce'); ?>
                    
                    <!-- Main Modules Section -->
                    <div class="igny8-settings-section">
                        
                        
                        <div class="igny8-module-cards-grid">
                            <?php foreach ($module_manager->get_modules() as $module_key => $module): ?>
                                <?php if ($module['category'] === 'main'): ?>
                                <div class="igny8-card igny8-module-card">
                                    <div class="igny8-module-header">
                                        <div class="igny8-card-title">
                                            <span class="dashicons <?php echo esc_attr($module['icon']); ?>" style="color: var(--blue); font-size: 20px; margin-right: 10px;"></span>
                                            <h6><?php echo esc_html($module['name']); ?></h6>
                                        </div>
                                        <div class="igny8-module-toggle">
                                            <label class="igny8-toggle-switch">
                                                <input type="checkbox" 
                                                       id="module_<?php echo esc_attr($module_key); ?>" 
                                                       name="igny8_module_settings[<?php echo esc_attr($module_key); ?>]" 
                                                       value="1" 
                                                       <?php checked($module_manager->is_module_enabled($module_key)); ?>>
                                                <span class="igny8-toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="igny8-module-description">
                                        <p><?php echo esc_html($module['description']); ?></p>
                                    </div>
                                </div>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <!-- Admin & Analytics Section -->
                    <div class="igny8-settings-section">
                        <div class="igny8-standard-header">
                            <div class="igny8-card-header-content">
                                <div class="igny8-card-title-text">
                                    <h3>Admin & Analytics</h3>
                                    <p class="igny8-card-subtitle">Administrative tools and analytics modules</p>
                                </div>
                                <div class="igny8-card-icon">
                                    <span class="dashicons dashicons-chart-bar igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="igny8-module-cards-grid">
                            <?php foreach ($module_manager->get_modules() as $module_key => $module): ?>
                                <?php if ($module['category'] === 'admin'): ?>
                                <div class="igny8-card igny8-module-card">
                                    <div class="igny8-module-header">
                                        <div class="igny8-card-title">
                                            <span class="dashicons <?php echo esc_attr($module['icon']); ?>" style="color: var(--green); font-size: 20px; margin-right: 10px;"></span>
                                            <h6><?php echo esc_html($module['name']); ?></h6>
                                        </div>
                                        <div class="igny8-module-toggle">
                                            <label class="igny8-toggle-switch">
                                                <input type="checkbox" 
                                                       id="module_<?php echo esc_attr($module_key); ?>" 
                                                       name="igny8_module_settings[<?php echo esc_attr($module_key); ?>]" 
                                                       value="1" 
                                                       <?php checked($module_manager->is_module_enabled($module_key)); ?>>
                                                <span class="igny8-toggle-slider"></span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="igny8-module-description">
                                        <p><?php echo esc_html($module['description']); ?></p>
                                    </div>
                                </div>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <?php submit_button('Save Module Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
                </form>
            </div>
        </div>
    </div>

    <!-- Editor Type Selection Section -->
    <div class="igny8-settings-section">
        <div class="igny8-standard-header">
            <div class="igny8-card-header-content">
                <div class="igny8-card-title-text">
                    <h3>Content Editor Type</h3>
                    <p class="igny8-card-subtitle">Choose between Classic editor or Block (Gutenberg) editor for AI-generated content</p>
                </div>
                <div class="igny8-card-icon">
                    <span class="dashicons dashicons-edit-page igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
                </div>
            </div>
        </div>
        
        <div class="igny8-settings">
            <form method="post" action="">
                <?php wp_nonce_field('igny8_editor_type_settings', 'igny8_editor_type_nonce'); ?>
                
                <div class="igny8-form-group">
                    <label for="igny8_editor_type"><strong>Select Editor Type:</strong></label>
                    <div style="margin-top: 15px;">
                        <?php 
                        $current_editor_type = get_option('igny8_editor_type', 'block');
                        ?>
                        
                        <!-- Current Setting Display -->
                        <div style="background: #e8f4fd; border: 1px solid #0073aa; padding: 10px; border-radius: 4px; margin-bottom: 15px;">
                            <strong>Current Setting:</strong> 
                            <span style="color: #0073aa; font-weight: 600;">
                                <?php echo $current_editor_type === 'block' ? 'Block Editor (Gutenberg)' : 'Classic Editor'; ?>
                            </span>
                        </div>
                        
                        <label class="igny8-editor-option <?php echo $current_editor_type === 'block' ? 'selected' : ''; ?>">
                            <input type="radio" name="igny8_editor_type" value="block" <?php checked($current_editor_type, 'block'); ?>>
                            <div class="igny8-editor-option-content">
                                <div class="igny8-editor-option-title">Block Editor (Gutenberg)</div>
                                <div class="igny8-editor-option-description">
                                    Modern block-based editor with advanced formatting options. Recommended for better content structure and WordPress compatibility.
                                </div>
                            </div>
                        </label>
                        
                        <label class="igny8-editor-option <?php echo $current_editor_type === 'classic' ? 'selected' : ''; ?>">
                            <input type="radio" name="igny8_editor_type" value="classic" <?php checked($current_editor_type, 'classic'); ?>>
                            <div class="igny8-editor-option-content">
                                <div class="igny8-editor-option-title">Classic Editor</div>
                                <div class="igny8-editor-option-description">
                                    Traditional WYSIWYG editor. Choose this if you prefer the classic WordPress editing experience.
                                </div>
                            </div>
                        </label>
                    </div>
                    
                    <div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 6px; margin-top: 20px;">
                        <p style="margin: 0 0 10px 0; font-weight: bold; color: #495057;">📝 <strong>How this affects your content:</strong></p>
                        <ul style="margin: 0; padding-left: 20px; color: #6c757d; font-size: 14px;">
                            <li><strong>Block Editor:</strong> AI content will be converted to WordPress blocks for better formatting and structure</li>
                            <li><strong>Classic Editor:</strong> AI content will be saved as HTML and displayed in the classic editor</li>
                            <li>You can change this setting anytime and it will apply to all new AI-generated content</li>
                        </ul>
                    </div>
                </div>
                
                <?php submit_button('Save Editor Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
            </form>
        </div>
    </div>

    <script>
    // Enhanced editor selection interaction
    document.addEventListener('DOMContentLoaded', function() {
        const editorOptions = document.querySelectorAll('.igny8-editor-option');
        
        editorOptions.forEach(option => {
            const radio = option.querySelector('input[type="radio"]');
            
            // Add click handler to the entire label
            option.addEventListener('click', function(e) {
                if (e.target !== radio) {
                    radio.checked = true;
                    updateSelection();
                }
            });
            
            // Add change handler to radio buttons
            radio.addEventListener('change', function() {
                updateSelection();
            });
        });
        
        function updateSelection() {
            editorOptions.forEach(option => {
                const radio = option.querySelector('input[type="radio"]');
                if (radio.checked) {
                    option.classList.add('selected');
                } else {
                    option.classList.remove('selected');
                }
            });
        }
        
        // Initialize selection on page load
        updateSelection();
    });
    </script>

    <!-- Image Generation Settings Section -->
    <div class="igny8-settings-section">
        <div class="igny8-standard-header">
            <div class="igny8-card-header-content">
                <div class="igny8-card-title-text">
                    <h3>Image Generation</h3>
                    <p class="igny8-card-subtitle">Configure AI image generation settings and preferences</p>
                </div>
                <div class="igny8-card-icon">
                    <span class="dashicons dashicons-format-image igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
                </div>
            </div>
        </div>
        
        <div class="igny8-settings">
            <form method="post" action="" id="igny8-image-generation-form">
                <?php wp_nonce_field('igny8_image_settings', 'igny8_image_settings_nonce'); ?>
                
                <div class="igny8-form-group">
                    <label><strong>Image Settings</strong></label>
                    <div style="display: flex; gap: 20px; align-items: end; margin-top: 10px;">
                        <div style="flex: 1;">
                            <label for="igny8_image_type" style="display: block; margin-bottom: 5px; font-weight: 500;">Image Type</label>
                            <select id="igny8_image_type" name="igny8_image_type" class="igny8-form-control">
                                <option value="realistic" <?php selected(get_option('igny8_image_type', 'realistic'), 'realistic'); ?>>Realistic</option>
                                <option value="illustration" <?php selected(get_option('igny8_image_type', 'realistic'), 'illustration'); ?>>Illustration</option>
                                <option value="3D render" <?php selected(get_option('igny8_image_type', 'realistic'), '3D render'); ?>>3D Render</option>
                                <option value="minimalist" <?php selected(get_option('igny8_image_type', 'realistic'), 'minimalist'); ?>>Minimalist</option>
                                <option value="cartoon" <?php selected(get_option('igny8_image_type', 'realistic'), 'cartoon'); ?>>Cartoon</option>
                            </select>
                        </div>
                        
                        <div style="flex: 1;">
                            <label for="igny8_max_in_article_images" style="display: block; margin-bottom: 5px; font-weight: 500;">Max In-Article Images</label>
                            <select id="igny8_max_in_article_images" name="igny8_max_in_article_images" class="igny8-form-control">
                                <option value="1" <?php selected(get_option('igny8_max_in_article_images', '1'), '1'); ?>>1 Image</option>
                                <option value="2" <?php selected(get_option('igny8_max_in_article_images', '1'), '2'); ?>>2 Images</option>
                                <option value="3" <?php selected(get_option('igny8_max_in_article_images', '1'), '3'); ?>>3 Images</option>
                                <option value="4" <?php selected(get_option('igny8_max_in_article_images', '1'), '4'); ?>>4 Images</option>
                                <option value="5" <?php selected(get_option('igny8_max_in_article_images', '1'), '5'); ?>>5 Images</option>
                            </select>
                        </div>
                        
                        <div style="flex: 1;">
                            <label for="igny8_image_format" style="display: block; margin-bottom: 5px; font-weight: 500;">Image Format</label>
                            <select id="igny8_image_format" name="igny8_image_format" class="igny8-form-control">
                                <option value="jpg" <?php selected(get_option('igny8_image_format', 'jpg'), 'jpg'); ?>>JPG</option>
                                <option value="png" <?php selected(get_option('igny8_image_format', 'jpg'), 'png'); ?>>PNG</option>
                                <option value="webp" <?php selected(get_option('igny8_image_format', 'jpg'), 'webp'); ?>>WEBP</option>
                            </select>
                            <div id="igny8-selected-format" style="margin-top: 5px; font-weight: bold; color: #0073aa;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="igny8-form-group">
                    <label><strong>Current Image Provider & Model</strong></label>
                    <div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 6px; margin-top: 10px;">
                        <?php
                        $current_service = get_option('igny8_image_service', 'openai');
                        $current_model = get_option('igny8_image_model', 'dall-e-3');
                        $current_runware_model = get_option('igny8_runware_model', 'runware:97@1');
                        
                        if ($current_service === 'openai') {
                            $model_names = [
                                'dall-e-3' => 'DALL·E 3',
                                'dall-e-2' => 'DALL·E 2', 
                                'gpt-image-1' => 'GPT Image 1 (Full)',
                                'gpt-image-1-mini' => 'GPT Image 1 Mini'
                            ];
                            $model_name = $model_names[$current_model] ?? $current_model;
                            echo '<div style="display: flex; align-items: center; margin-bottom: 8px;">';
                            echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Provider:</span>';
                            echo '<span style="color: #495057;">OpenAI</span>';
                            echo '</div>';
                            echo '<div style="display: flex; align-items: center;">';
                            echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Model:</span>';
                            echo '<span style="color: #495057;">' . esc_html($model_name) . '</span>';
                            echo '</div>';
                        } else {
                            echo '<div style="display: flex; align-items: center; margin-bottom: 8px;">';
                            echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Provider:</span>';
                            echo '<span style="color: #495057;">Runware</span>';
                            echo '</div>';
                            echo '<div style="display: flex; align-items: center;">';
                            echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Model:</span>';
                            echo '<span style="color: #495057;">HiDream-I1 Full</span>';
                            echo '</div>';
                        }
                        ?>
                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #dee2e6;">
                            <small style="color: #6c757d;">
                                <strong>Note:</strong> To change the image provider or model, go to 
                                <a href="<?php echo admin_url('admin.php?page=igny8-settings&sp=integration'); ?>" style="color: #0073aa;">Integration Settings</a>
                            </small>
                        </div>
                    </div>
                </div>
                
                <div class="igny8-form-group">
                    <label><strong>Image Size Options</strong></label>
                    <div class="igny8-size-checkbox-container">
                        <!-- Featured Image - Simple row without checkbox/count -->
                        <div class="igny8-size-option igny8-featured-image-row">
                            <div class="igny8-size-info igny8-size-featured">Featured Image</div>
                            <div class="igny8-size-info" id="featured-size-info">1280×832 pixels</div>
                        </div>
                        
                        <div class="igny8-size-option">
                            <label class="igny8-checkbox-label">
                                <input type="checkbox" id="igny8_desktop_enabled" name="igny8_desktop_enabled" value="1" <?php checked(get_option('igny8_desktop_enabled', '1'), '1'); ?>>
                                <span class="igny8-checkbox-text">Desktop Images</span>
                            </label>
                            <div class="igny8-size-info" id="desktop-size-info">1024×1024 pixels</div>
                        </div>
                        
                        <div class="igny8-size-option">
                            <label class="igny8-checkbox-label">
                                <input type="checkbox" id="igny8_mobile_enabled" name="igny8_mobile_enabled" value="1" <?php checked(get_option('igny8_mobile_enabled', '0'), '1'); ?>>
                                <span class="igny8-checkbox-text">Mobile Images</span>
                            </label>
                            <div class="igny8-size-info" id="mobile-size-info">960×1280 pixels</div>
                        </div>
                    </div>
                    <small class="form-help">Choose which image sizes to generate and how many of each type.</small>
                </div>
                
                <?php submit_button('Save Image Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
            </form>
        </div>
    </div>

    <script>
    // Image generation settings JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        // Get current provider from integration settings
        const currentProvider = '<?php echo esc_js(get_option('igny8_image_service', 'openai')); ?>';
        
        function updateSizeInfo(provider) {
            const sizeInfo = {
                'runware': {
                    featured: '1280×832 pixels',
                    desktop: '1024×1024 pixels',
                    mobile: '960×1280 pixels'
                },
                'openai': {
                    featured: '1024×1024 pixels',
                    desktop: '1024×1024 pixels',
                    mobile: '1024×1024 pixels'
                },
                'dalle': {
                    featured: '1024×1024 pixels',
                    desktop: '1024×1024 pixels',
                    mobile: '1024×1024 pixels'
                }
            };
            
            if (sizeInfo[provider]) {
                $('#featured-size-info').text(sizeInfo[provider].featured);
                $('#desktop-size-info').text(sizeInfo[provider].desktop);
                $('#mobile-size-info').text(sizeInfo[provider].mobile);
            }
        }
        
        // Initialize with current provider
        updateSizeInfo(currentProvider);
        
        // Image format selector functionality
        const $formatSelector = $('#igny8_image_format');
        const $formatDisplay = $('#igny8-selected-format');
        
        $formatSelector.on('change', function() {
            const selectedFormat = $(this).val().toUpperCase();
            $formatDisplay.text(selectedFormat + ' format');
        });
        
        // Initialize format display with saved value
        const savedFormat = '<?php echo esc_js(get_option('igny8_image_format', 'jpg')); ?>';
        $formatSelector.val(savedFormat);
        $formatSelector.trigger('change');
    });
    </script>

    <style>
    /* Image Generation Settings Styles */
    .igny8-size-checkbox-container {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        margin-top: 10px;
    }
    
    .igny8-size-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .igny8-size-option:last-child {
        border-bottom: none;
    }
    
    .igny8-featured-image-row {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 6px;
        padding: 15px 20px;
        margin-bottom: 15px;
        border-bottom: none;
    }
    
    .igny8-size-featured {
        font-weight: bold;
        font-size: 16px;
    }
    
    .igny8-checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-weight: 500;
    }
    
    .igny8-checkbox-label input[type="checkbox"] {
        margin-right: 10px;
        transform: scale(1.2);
    }
    
    .igny8-size-info {
        font-size: 14px;
        color: #6c757d;
        font-weight: 500;
    }
    
    .igny8-featured-image-row .igny8-size-info {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .form-help {
        display: block;
        margin-top: 5px;
        font-size: 13px;
        color: #6c757d;
        font-style: italic;
    }
    </style>

    <!-- Image Metabox Settings Section -->
    <div class="igny8-settings-section">
        <div class="igny8-standard-header">
            <div class="igny8-card-header-content">
                <div class="igny8-card-title-text">
                    <h3>In-Article Image Meta Box</h3>
                    <p class="igny8-card-subtitle">Enable image metabox for specific post types</p>
                </div>
                <div class="igny8-card-icon">
                    <span class="dashicons dashicons-format-image igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
                </div>
            </div>
        </div>
        
        <div class="igny8-settings">
            <form method="post" action="">
                <?php wp_nonce_field('igny8_image_metabox_settings', 'igny8_image_metabox_nonce'); ?>
                
                <div class="igny8-form-group">
                    <label for="igny8_enable_image_metabox"><strong>Enable In-Article Image Meta Box For:</strong></label>
                    <div style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; background: #f9f9f9; border-radius: 4px; margin-top: 10px;">
                        <?php 
                        $all_post_types = get_post_types(['public' => true], 'objects');
                        $enabled_types = (array) get_option('igny8_enable_image_metabox', []);
                        
                        foreach ($all_post_types as $pt => $obj) {
                            $checked = in_array($pt, $enabled_types) ? 'checked' : '';
                            echo '<label style="display: block; margin-bottom: 8px; padding: 5px;">';
                            echo '<input type="checkbox" name="igny8_enable_image_metabox[]" value="' . esc_attr($pt) . '" ' . $checked . ' style="margin-right: 8px;"> ';
                            echo '<strong>' . esc_html($obj->label) . '</strong> <em>(' . esc_html($pt) . ')</em>';
                            echo '</label>';
                        }
                        ?>
                    </div>
                    <p class="description" style="margin-top: 10px;">Select which post types should display the In-Article Image metabox in the WordPress editor.</p>
                </div>
                
                <!-- Shortcode Usage Examples -->
                <div class="igny8-form-group" style="margin-top: 25px;">
                    <label><strong>Shortcode Usage Examples:</strong></label>
                    <div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 4px; margin-top: 10px;">
                        <p style="margin: 0 0 10px 0; font-weight: bold; color: #495057;">Use these shortcodes in your posts/pages to display the selected images:</p>
                        
                        <div style="margin-bottom: 12px;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-images]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display all images</span>
                        </div>
                        
                        <div style="margin-bottom: 12px;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-image id="desktop-1"]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display specific image by ID</span>
                        </div>
                        
                        <div style="margin-bottom: 12px;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-desktop-images]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display only desktop images</span>
                        </div>
                        
                        <div style="margin-bottom: 12px;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-mobile-images]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display only mobile images</span>
                        </div>
                        
                        <div style="margin-bottom: 12px;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-responsive-gallery]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Responsive gallery (desktop on large screens, mobile on small screens)</span>
                        </div>
                        
                        <div style="margin-bottom: 0;">
                            <code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-image-count]</code>
                            <span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display count of images</span>
                        </div>
                        
                        <p style="margin: 15px 0 0 0; font-size: 12px; color: #6c757d; font-style: italic;">
                            💡 <strong>Tip:</strong> After selecting images in the metabox, use these shortcodes in your post content to display them on the frontend.
                        </p>
                    </div>
                </div>
                
                <?php submit_button('Save Image Metabox Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
            </form>
        </div>
    </div>

    <!-- Table Settings Section -->
    <div class="igny8-settings-section">
        <form method="post" action="options.php">
            <?php settings_fields('igny8_table_settings'); ?>
            <table class="form-table">
                <tr>
                    <th scope="row">
                        <label for="igny8_records_per_page">Records Per Page</label>
                    </th>
                    <td>
                        <select name="igny8_records_per_page" id="igny8_records_per_page">
                            <option value="10" <?php selected(get_option('igny8_records_per_page', 20), 10); ?>>10</option>
                            <option value="20" <?php selected(get_option('igny8_records_per_page', 20), 20); ?>>20</option>
                            <option value="50" <?php selected(get_option('igny8_records_per_page', 20), 50); ?>>50</option>
                            <option value="100" <?php selected(get_option('igny8_records_per_page', 20), 100); ?>>100</option>
                        </select>
                        <p class="description">Default number of records to display per page across all tables in the plugin.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button('Save Settings'); ?>
        </form>
    </div>

</div>

<?php
        break;
}

// Capture page content
$igny8_page_content = ob_get_clean();

// Include global layout
include plugin_dir_path(__FILE__) . '../../core/global-layout.php';
?>