<?php

/**
 * Slide creation wizard.
 *
 * @package SlideMind
 * @since 2.0.0
 */
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
if ( !current_user_can( 'manage_slidemind_configs' ) ) {
    wp_die( esc_html__( 'You do not have permission to access this page.', 'slidemind' ) );
}
// Fetch shared services from the plugin singleton.
$plugin = \SlideMind\Plugin::instance();
$config_repo = $plugin->get_config_repository();
$llm_proxy = $plugin->get_llm_proxy();
// Wizard datasets.
$courses = $config_repo->get_courses();
$modules = $config_repo->get_all_modules();
$models = $llm_proxy->get_models();
// Pre-selected parent module (when launched from the modules list).
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only navigation param; capability checked above; value cast to int.
$preset_module_id = ( isset( $_GET['module_id'] ) ? (int) $_GET['module_id'] : 0 );
$preset_module = null;
$preset_course = null;
$preset_inherited = [
    'course' => null,
    'module' => null,
];
if ( $preset_module_id ) {
    $preset_module = $config_repo->get_module( $preset_module_id );
    if ( $preset_module ) {
        $preset_course = $config_repo->get_course( $preset_module['parent_course_id'] );
        $preset_inherited = $config_repo->get_inherited_content( $preset_module_id, true );
    }
}
// Group available models by provider for the model picker.
$models_grouped = [];
foreach ( $models as $model ) {
    $parts = explode( '/', $model['id'] );
    $provider = ucfirst( $parts[0] );
    if ( !isset( $models_grouped[$provider] ) ) {
        $models_grouped[$provider] = [];
    }
    $models_grouped[$provider][] = $model;
}
ksort( $models_grouped );
// Scope options for memory dropdowns (course/module scopes are a paid feature).
$can_scope = false;
?>

<div class="sm-wrap">
    <div class="sm-header">
        <h1><?php 
esc_html_e( 'New Slide', 'slidemind' );
?></h1>
        <div class="sm-header-actions">
            <a href="<?php 
echo esc_url( admin_url( 'admin.php?page=slidemind-new&mode=expert' ) );
?>" class="sm-btn sm-btn-secondary">
                <span class="dashicons dashicons-admin-generic"></span>
                <?php 
esc_html_e( 'Manual mode', 'slidemind' );
?>
            </a>
            <a href="<?php 
echo esc_url( admin_url( 'admin.php?page=slidemind-slides' ) );
?>" class="sm-btn sm-btn-secondary">
                <span class="dashicons dashicons-arrow-left-alt"></span>
                <?php 
esc_html_e( 'Back', 'slidemind' );
?>
            </a>
        </div>
    </div>

    <?php 
?>

    <!-- Wizard Container -->
    <div class="sm-wizard" id="sm-wizard">
        <!-- Progress Bar -->
        <div class="sm-wizard-progress">
            <div class="sm-wizard-step active" data-step="1">
                <span class="sm-wizard-step-number">1</span>
                <span class="sm-wizard-step-label"><?php 
esc_html_e( 'Hierarchy', 'slidemind' );
?></span>
            </div>
            <div class="sm-wizard-step" data-step="2">
                <span class="sm-wizard-step-number">2</span>
                <span class="sm-wizard-step-label"><?php 
esc_html_e( 'AI Model', 'slidemind' );
?></span>
            </div>
            <div class="sm-wizard-step" data-step="3">
                <span class="sm-wizard-step-number">3</span>
                <span class="sm-wizard-step-label"><?php 
esc_html_e( 'Prompt', 'slidemind' );
?></span>
            </div>
            <div class="sm-wizard-step" data-step="4">
                <span class="sm-wizard-step-number">4</span>
                <span class="sm-wizard-step-label"><?php 
esc_html_e( 'Test & Publish', 'slidemind' );
?></span>
            </div>
        </div>

        <!-- Form -->
        <form id="sm-wizard-form">
            <!-- Step 1: Hierarchy -->
            <div class="sm-wizard-panel active" data-step="1">
                <div class="sm-card">
                    <div class="sm-card-header">
                        <?php 
?>
                        <?php 
?>
                            <h2><?php 
esc_html_e( 'Create a standalone slide', 'slidemind' );
?></h2>
                        <?php 
?>
                    </div>
                    <div class="sm-card-body">
                        <?php 
?>
                        <?php 
?>
                        <input type="hidden" id="wizard-course" value="">
                        <input type="hidden" id="wizard-module" name="parent_module_id" value="">
                        <?php 
?>

                        <hr style="margin: 20px 0; border: none; border-top: 1px solid #e5e7eb;">

                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-title">
                                <?php 
esc_html_e( 'Slide title', 'slidemind' );
?> <span class="required">*</span>
                            </label>
                            <input type="text" id="wizard-title" name="title" class="sm-form-input"
                                   placeholder="<?php 
esc_attr_e( 'E.g.: Quiz - Leadership Styles', 'slidemind' );
?>" required>
                        </div>

                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-slide-number">
                                <?php 
esc_html_e( 'Slide number (optional)', 'slidemind' );
?>
                            </label>
                            <input type="number" id="wizard-slide-number" name="slide_number" class="sm-form-input"
                                   placeholder="Ex: 12" min="1" style="max-width: 150px;">
                        </div>

                        <div class="sm-form-group">
                            <label class="sm-form-label"><?php 
esc_html_e( 'Widget mode', 'slidemind' );
?></label>
                            <div class="sm-mode-selector">
                                <label class="sm-mode-option sm-mode-option--active">
                                    <input type="radio" name="wizard_widget_mode" value="qa" checked>
                                    <div class="sm-mode-text">
                                        <span class="sm-mode-label"><?php 
esc_html_e( 'Q&A', 'slidemind' );
?></span>
                                        <span class="sm-mode-desc"><?php 
esc_html_e( 'Single question', 'slidemind' );
?></span>
                                    </div>
                                    <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-qa.svg' );
?>" alt="">
                                </label>
                                <label class="sm-mode-option">
                                    <input type="radio" name="wizard_widget_mode" value="chat">
                                    <div class="sm-mode-text">
                                        <span class="sm-mode-label"><?php 
esc_html_e( 'Chat', 'slidemind' );
?></span>
                                        <span class="sm-mode-desc"><?php 
esc_html_e( 'Multi-turn conversation', 'slidemind' );
?></span>
                                    </div>
                                    <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-chat.svg' );
?>" alt="">
                                </label>
                                <label class="sm-mode-option">
                                    <input type="radio" name="wizard_widget_mode" value="capture">
                                    <div class="sm-mode-text">
                                        <span class="sm-mode-label"><?php 
esc_html_e( 'Capture', 'slidemind' );
?></span>
                                        <span class="sm-mode-desc"><?php 
esc_html_e( 'Data capture without AI', 'slidemind' );
?></span>
                                    </div>
                                    <img class="sm-mode-icon" src="<?php 
echo esc_url( SLIDEMIND_PLUGIN_URL . 'admin/images/icon-capture.svg' );
?>" alt="">
                                </label>
                            </div>
                        </div>

                        <!-- Inherited content preview -->
                        <div id="wizard-inherited-preview" class="sm-inherited-preview" style="<?php 
echo ( $preset_inherited['course'] ? '' : 'display:none;' );
?>">
                            <h4><?php 
esc_html_e( 'Inherited content', 'slidemind' );
?></h4>
                            <div id="wizard-inherited-content">
                                <?php 
if ( $preset_inherited['course'] ) {
    ?>
                                    <div class="sm-inherited-field">
                                        <strong><?php 
    esc_html_e( 'Course:', 'slidemind' );
    ?></strong> <?php 
    echo esc_html( $preset_inherited['course']['title'] );
    ?>
                                    </div>
                                    <div class="sm-inherited-field">
                                        <strong><?php 
    esc_html_e( 'Theme:', 'slidemind' );
    ?></strong> <?php 
    echo esc_html( ( $preset_inherited['course']['theme'] ?: '—' ) );
    ?>
                                    </div>
                                    <?php 
    if ( $preset_inherited['module'] ) {
        ?>
                                        <div class="sm-inherited-field">
                                            <strong><?php 
        esc_html_e( 'Module:', 'slidemind' );
        ?></strong> <?php 
        echo esc_html( $preset_inherited['module']['title'] );
        ?>
                                        </div>
                                        <div class="sm-inherited-field">
                                            <strong><?php 
        esc_html_e( 'Subject:', 'slidemind' );
        ?></strong> <?php 
        echo esc_html( ( $preset_inherited['module']['subject'] ?: '—' ) );
        ?>
                                        </div>
                                    <?php 
    }
    ?>
                                <?php 
}
?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: AI Model -->
            <div class="sm-wizard-panel" data-step="2">
                <div class="sm-card">
                    <div class="sm-card-header">
                        <h2><?php 
esc_html_e( 'Choose the AI model', 'slidemind' );
?></h2>
                    </div>
                    <div class="sm-card-body">
                        <!-- Fournisseur -->
                        <?php 
$wizard_global_provider = get_option( 'slidemind_global_provider', 'openrouter' );
$wizard_providers = \SlideMind\Core\LLMProxy::get_providers();
?>
                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-provider"><?php 
esc_html_e( 'LLM Provider', 'slidemind' );
?></label>
                            <select name="provider" id="wizard-provider" class="sm-form-select sm-provider-select">
                                <?php 
foreach ( $wizard_providers as $slug => $info ) {
    ?>
                                    <option value="<?php 
    echo esc_attr( $slug );
    ?>" <?php 
    selected( $wizard_global_provider, $slug );
    ?>>
                                        <?php 
    echo esc_html( $info['label'] );
    ?>
                                    </option>
                                <?php 
}
?>
                            </select>
                        </div>

                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-model">
                                <?php 
esc_html_e( 'LLM Model', 'slidemind' );
?> <span class="required">*</span>
                            </label>
                            <select id="wizard-model" name="model_id" class="sm-form-select sm-model-select" data-current-provider="<?php 
echo esc_attr( $wizard_global_provider );
?>" required>
                                <option value=""><?php 
esc_html_e( 'Select a model', 'slidemind' );
?></option>
                                <?php 
foreach ( $models_grouped as $provider => $provider_models ) {
    ?>
                                    <optgroup label="<?php 
    echo esc_attr( $provider );
    ?>">
                                        <?php 
    foreach ( $provider_models as $model ) {
        ?>
                                            <option value="<?php 
        echo esc_attr( $model['id'] );
        ?>"
                                                    data-pricing='<?php 
        echo wp_json_encode( $model['pricing'] ?? null );
        ?>'>
                                                <?php 
        echo esc_html( $model['name'] );
        ?>
                                            </option>
                                        <?php 
    }
    ?>
                                    </optgroup>
                                <?php 
}
?>
                            </select>
                        </div>

                        <div id="wizard-model-pricing" class="sm-model-pricing" style="display: none;">
                            <span class="sm-badge sm-badge-info">
                                <?php 
esc_html_e( 'Estimated cost:', 'slidemind' );
?> <span id="wizard-pricing-text">—</span>
                            </span>
                        </div>

                        <div class="sm-form-collapsible">
                            <button type="button" class="sm-collapsible-toggle">
                                <span class="dashicons dashicons-admin-settings"></span>
                                <?php 
esc_html_e( 'Advanced settings', 'slidemind' );
?>
                                <span class="dashicons dashicons-arrow-down-alt2"></span>
                            </button>
                            <div class="sm-collapsible-content">
                                <div class="sm-form-row">
                                    <div class="sm-form-group">
                                        <label class="sm-form-label" for="wizard-temperature"><?php 
esc_html_e( 'Temperature', 'slidemind' );
?></label>
                                        <input type="range" id="wizard-temperature" name="temperature"
                                               min="0" max="2" step="0.1" value="0.7"
                                               class="sm-form-range">
                                        <div class="sm-range-labels">
                                            <span><?php 
esc_html_e( 'Precise (0)', 'slidemind' );
?></span>
                                            <span id="wizard-temp-value">0.7</span>
                                            <span><?php 
esc_html_e( 'Creative (2)', 'slidemind' );
?></span>
                                        </div>
                                    </div>
                                    <div class="sm-form-group">
                                        <label class="sm-form-label" for="wizard-max-tokens"><?php 
esc_html_e( 'Max tokens', 'slidemind' );
?></label>
                                        <input type="number" id="wizard-max-tokens" name="max_tokens"
                                               value="1024" min="1" max="128000"
                                               class="sm-form-input">
                                        <p class="sm-form-help"><?php 
esc_html_e( 'Maximum response length', 'slidemind' );
?></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Prompt -->
            <div class="sm-wizard-panel" data-step="3">
                <div class="sm-card">
                    <div class="sm-card-header">
                        <h2 id="wizard-step3-title"><?php 
esc_html_e( 'Configure the prompt', 'slidemind' );
?></h2>
                    </div>
                    <div class="sm-card-body">
                        <!-- AI Prompt Section (shown for Q&A and Chat modes) -->
                        <div id="wizard-ai-prompt-section">
                        <div class="sm-form-group">
                            <label class="sm-form-label"><?php 
esc_html_e( 'Prompt template', 'slidemind' );
?></label>
                            <div class="sm-template-cards sm-template-cards--wizard">
                                <div class="sm-spinner" style="margin: 20px auto;"></div>
                            </div>
                        </div>

                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-prompt">
                                <?php 
esc_html_e( 'System prompt', 'slidemind' );
?>
                            </label>
                            <textarea id="wizard-prompt" name="system_prompt" class="sm-form-textarea" rows="10"
                                      placeholder="<?php 
esc_attr_e( 'Describe how the AI should behave... (type @ to insert a variable)', 'slidemind' );
?>"></textarea>
                            <div style="display: flex; gap: 8px; margin-top: 8px;">
                                <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="wizard-insert-variable">
                                    <span class="dashicons dashicons-plus-alt2"></span>
                                    <?php 
esc_html_e( 'Insert a variable', 'slidemind' );
?>
                                </button>
                                <button type="button" class="sm-btn sm-btn-primary sm-btn-sm" id="wizard-generate-prompt-btn">
                                    <span class="dashicons dashicons-admin-generic"></span>
                                    <?php 
esc_html_e( 'Generate with AI', 'slidemind' );
?>
                                </button>
                            </div>
                            <details class="sm-form-help" style="margin-top: 8px; cursor: pointer;">
                                <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Available variables', 'slidemind' );
?></summary>
                                <div style="margin-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 12px;">
                                    <div>
                                        <code>{{variable}}</code> — <strong><?php 
esc_html_e( 'Authoring tool variable', 'slidemind' );
?></strong><br>
                                        <span style="color: #646970; margin-left: 16px;">
                                            <?php 
/* translators: %s: variable example code */
printf( esc_html__( 'One-time value sent by the authoring tool. E.g.: %s', 'slidemind' ), '<code class="sm-clickable-var">{{firstname}}</code>' );
?>
                                        </span>
                                    </div>
                                    <div>
                                        <code>{{memory.*}}</code> — <strong><?php 
esc_html_e( 'Learner memory', 'slidemind' );
?></strong>
                                        <span style="display: inline-block; background: #dbeafe; color: #1e40af; font-size: 10px; padding: 1px 6px; border-radius: 3px; vertical-align: middle;"><?php 
esc_html_e( 'requires the JS snippet', 'slidemind' );
?></span><br>
                                        <span style="color: #646970; margin-left: 16px;">
                                            <?php 
/* translators: %s: memory variable example code */
printf( esc_html__( 'Persistent data between sessions. E.g.: %s', 'slidemind' ), '<code class="sm-clickable-var">{{memory.firstname}}</code>' );
?>
                                        </span>
                                    </div>
                                    <div>
                                        <code>{{profile.*}}</code> — <strong><?php 
esc_html_e( 'WordPress profile', 'slidemind' );
?></strong>
                                        <span style="display: inline-block; background: #f0fdf4; color: #166534; font-size: 10px; padding: 1px 6px; border-radius: 3px; vertical-align: middle;"><?php 
esc_html_e( 'automatic', 'slidemind' );
?></span><br>
                                        <span style="color: #646970; margin-left: 16px;">
                                            <?php 
/* translators: %s: profile variable example code */
printf( esc_html__( 'Read-only user profile data. E.g.: %s', 'slidemind' ), '<code class="sm-clickable-var">{{profile.display_name}}</code>' );
?>
                                        </span>
                                    </div>
                                </div>
                            </details>
                        </div>

                        <hr class="sm-wizard-divider">

                        <!-- Response example -->
                        <div class="sm-form-group">
                            <label class="sm-form-label" for="wizard-response-example">
                                <?php 
esc_html_e( 'Response example', 'slidemind' );
?>
                                <span class="sm-badge sm-badge-secondary" style="margin-left: 8px;">
                                    <?php 
esc_html_e( 'Optional', 'slidemind' );
?>
                                </span>
                            </label>
                            <textarea id="wizard-response-example" name="response_example" class="sm-form-textarea" rows="6"
                                      placeholder="<?php 
echo esc_attr( __( "E.g.: Great thinking! Here are some leads:\n\n- **Point 1**: Concise explanation\n- **Point 2**: Concise explanation\n- **Point 3**: Concise explanation\n\nKeep it up!", 'slidemind' ) );
?>"></textarea>
                            <p class="sm-form-help"><?php 
esc_html_e( 'This example will be automatically added to the system prompt sent to the AI. Use', 'slidemind' );
?> <code class="sm-clickable-var">{{course_response_example}}</code> <?php 
esc_html_e( 'and/or', 'slidemind' );
?> <code class="sm-clickable-var">{{module_response_example}}</code> <?php 
esc_html_e( 'to inherit parent formats.', 'slidemind' );
?></p>
                            <details class="sm-form-help" style="margin-top: 8px; cursor: pointer;">
                                <summary style="font-weight: 600; color: #1d2327;"><?php 
esc_html_e( 'Best practices', 'slidemind' );
?></summary>
                                <div style="margin-top: 8px; line-height: 1.6;">
                                    <strong><?php 
esc_html_e( 'Do:', 'slidemind' );
?></strong>
                                    <ul style="margin: 4px 0 12px 16px; padding: 0; list-style: disc;">
                                        <li><?php 
esc_html_e( 'Write a complete example response as you would like to receive it from the AI', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Follow the exact desired formatting (paragraphs, bullet lists, headings, etc.)', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Indicate the desired tone (formal, friendly, educational, encouraging...)', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Include the expected level of detail (short answer vs. detailed explanation)', 'slidemind' );
?></li>
                                    </ul>
                                    <strong><?php 
esc_html_e( 'Avoid:', 'slidemind' );
?></strong>
                                    <ul style="margin: 4px 0 0 16px; padding: 0; list-style: disc;">
                                        <li><?php 
esc_html_e( 'Do NOT include instructions or directives ("You must...", "Answer in...") -- use the system prompt for that', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Do not repeat the system prompt content -- the example is complementary, not a replacement', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Avoid overly long examples (more than ~300 words) -- the AI will lose accuracy', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Do not include learner-specific data -- the example should be generic', 'slidemind' );
?></li>
                                        <li><?php 
esc_html_e( 'Do not mix multiple formats in the same example -- one clear format per field', 'slidemind' );
?></li>
                                    </ul>
                                </div>
                            </details>
                        </div>

                        <!-- Chat options (visible only in Chat mode) -->
                        <div id="wizard-chat-options" style="display: none;">
                            <hr class="sm-wizard-divider">
                            <h3 style="font-size: 15px; font-weight: 600; margin: 0 0 16px; color: var(--sm-gray-700);">
                                <?php 
esc_html_e( 'Chat options', 'slidemind' );
?>
                            </h3>

                            <div class="sm-form-group">
                                <label class="sm-form-label" for="wizard-opening-message">
                                    <?php 
esc_html_e( 'Opening message', 'slidemind' );
?>
                                </label>
                                <textarea id="wizard-opening-message" class="sm-form-textarea" rows="3"
                                          placeholder="<?php 
esc_attr_e( 'E.g.: Hello {{profile.first_name|there}}! What is your question?', 'slidemind' );
?>"></textarea>
                                <p class="sm-form-help">
                                    <?php 
esc_html_e( 'Displayed as the first AI bubble when the chat loads. Supports {{variable|fallback}} syntax.', 'slidemind' );
?>
                                </p>
                            </div>

                            <div class="sm-form-group">
                                <label class="sm-form-label" for="wizard-max-turns">
                                    <?php 
esc_html_e( 'Turn limit', 'slidemind' );
?>
                                </label>
                                <input type="number" id="wizard-max-turns" class="sm-form-input"
                                       value="5" min="0" style="max-width: 150px;">
                                <p class="sm-form-help">
                                    <?php 
esc_html_e( 'Maximum exchanges before closing the conversation. 0 = unlimited.', 'slidemind' );
?>
                                </p>
                                <p class="sm-form-help sm-cost-unlimited-hint" style="display: none; color: var(--sm-warning);">
                                    <span class="dashicons dashicons-warning" style="font-size: 14px; width: 14px; height: 14px; vertical-align: middle;"></span>
                                    <?php 
esc_html_e( 'Warning: unlimited turns — costs will increase continuously.', 'slidemind' );
?>
                                </p>
                            </div>

                            <div class="sm-form-group">
                                <label class="sm-form-label" for="wizard-closing-message">
                                    <?php 
esc_html_e( 'Closing message', 'slidemind' );
?>
                                </label>
                                <textarea id="wizard-closing-message" class="sm-form-textarea" rows="2"
                                          placeholder="<?php 
esc_attr_e( 'E.g.: Thank you for this exchange! The conversation is now finished.', 'slidemind' );
?>"></textarea>
                            </div>

                            <div class="sm-form-group">
                                <label class="sm-form-label" style="display: flex; align-items: center; gap: 8px;">
                                    <input type="checkbox" id="wizard-graceful-close" value="1">
                                    <?php 
esc_html_e( 'Graceful close', 'slidemind' );
?>
                                </label>
                                <p class="sm-form-help"><?php 
esc_html_e( 'On the last turn, a special instruction is injected so the AI naturally concludes the conversation.', 'slidemind' );
?></p>
                            </div>
                            <div class="sm-form-group" id="wizard-graceful-close-prompt-wrap" style="display: none;">
                                <label class="sm-form-label" for="wizard-graceful-close-prompt">
                                    <?php 
esc_html_e( 'Close instruction', 'slidemind' );
?>
                                </label>
                                <textarea id="wizard-graceful-close-prompt" class="sm-form-textarea" rows="2"
                                          placeholder="<?php 
esc_attr_e( 'This is the last exchange. Please naturally conclude the conversation while staying in character. Do not mention technical limits or turn counters.', 'slidemind' );
?>"></textarea>
                            </div>

                            <div id="wizard-chat-cost-projection"></div>
                        </div>

                        <!-- Q&A output variables (visible only in Q&A mode) -->
                        <div id="wizard-output-vars-section">
                            <hr class="sm-wizard-divider">
                            <h3 style="font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--sm-gray-700);">
                                <?php 
esc_html_e( 'Return variables', 'slidemind' );
?>
                                <span class="sm-badge sm-badge-secondary" style="margin-left: 8px;"><?php 
esc_html_e( 'Optional', 'slidemind' );
?></span>
                            </h3>
                            <p class="sm-form-help" style="margin-bottom: 12px;">
                                <?php 
esc_html_e( 'Define return variables so the AI responds with structured JSON.', 'slidemind' );
?>
                            </p>

                            <details class="sm-help-accordion" style="margin-bottom: 16px;">
                                <summary style="cursor: pointer; font-weight: 600; color: #2271b1; padding: 8px 0; user-select: none;">
                                    <?php 
esc_html_e( 'When and how to use return variables', 'slidemind' );
?>
                                </summary>
                                <div style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px 16px; margin-top: 8px; border-radius: 0 4px 4px 0;">
                                    <p style="margin: 0 0 8px; color: #1d2327;">
                                        <?php 
esc_html_e( 'By default the AI replies with free-form text. Return variables turn that answer into a structured JSON object with named, typed fields — so your authoring tool can read several values in a single call (feedback, grade, flag, category, etc.).', 'slidemind' );
?>
                                    </p>
                                    <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                        <?php 
esc_html_e( 'Example: a quiz slide that returns four values at once:', 'slidemind' );
?>
                                    </p>
                                    <ul style="margin: 0 0 8px; padding-left: 20px; color: #1d2327;">
                                        <li><code>feedback</code> (<?php 
esc_html_e( 'text', 'slidemind' );
?>) — <?php 
esc_html_e( 'personalized message shown to the learner', 'slidemind' );
?></li>
                                        <li><code>score</code> (<?php 
esc_html_e( 'number', 'slidemind' );
?>) — <?php 
esc_html_e( 'numeric grade, e.g. 0–10', 'slidemind' );
?></li>
                                        <li><code>passed</code> (<?php 
esc_html_e( 'boolean', 'slidemind' );
?>) — <?php 
esc_html_e( 'true if the answer is correct', 'slidemind' );
?></li>
                                        <li><code>level</code> (<?php 
esc_html_e( 'enum', 'slidemind' );
?>) — <?php 
esc_html_e( 'one of "beginner", "intermediate", "advanced"', 'slidemind' );
?></li>
                                    </ul>
                                    <p style="margin: 0; font-size: 12px;">
                                        <a href="https://docs.slidemind.app/wordpress/variables/#return-variables-structured-responses" target="_blank" rel="noopener noreferrer" style="color: #2271b1;">
                                            <?php 
esc_html_e( 'Read the full documentation →', 'slidemind' );
?>
                                        </a>
                                    </p>
                                </div>
                            </details>

                            <div id="wizard-output-vars-list"></div>

                            <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="wizard-add-output-var" style="margin-top: 8px;">
                                <span class="dashicons dashicons-plus-alt2"></span>
                                <?php 
esc_html_e( 'Add a return variable', 'slidemind' );
?>
                            </button>
                        </div>
                        </div><!-- #wizard-ai-prompt-section -->

                        <!-- Capture Variables Section (shown for Capture mode only) -->
                        <div id="wizard-capture-vars-section" style="display: none;">
                            <p class="sm-form-help" style="margin-bottom: 16px;">
                                <?php 
esc_html_e( 'Define the variables to capture from your authoring tool. These values will be saved to learner memory without AI processing.', 'slidemind' );
?>
                            </p>

                            <details class="sm-help-accordion" style="margin-bottom: 16px;">
                                <summary style="cursor: pointer; font-weight: 600; color: #2271b1; padding: 8px 0; user-select: none;">
                                    <?php 
esc_html_e( 'How does capture work?', 'slidemind' );
?>
                                </summary>
                                <div style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px 16px; margin-top: 8px; border-radius: 0 4px 4px 0;">
                                    <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                        <?php 
esc_html_e( 'Example: You want to record the learner\'s profession so it can be reused in other courses. In your authoring tool (Storyline, Captivate...), create a variable called Learner_Profession. Then configure a capture here:', 'slidemind' );
?>
                                    </p>
                                    <ul style="margin: 0 0 8px; padding-left: 20px; color: #1d2327;">
                                        <li><strong><?php 
esc_html_e( 'Memory key', 'slidemind' );
?></strong>: <code>profession</code> — <?php 
esc_html_e( 'the name SlideMind uses to store and retrieve this value', 'slidemind' );
?></li>
                                        <li><strong><?php 
esc_html_e( 'Scope', 'slidemind' );
?></strong>: <?php 
esc_html_e( 'Global', 'slidemind' );
?> — <?php 
esc_html_e( 'so it\'s accessible across all courses', 'slidemind' );
?></li>
                                        <li><strong><?php 
esc_html_e( 'Authoring tool variable', 'slidemind' );
?></strong>: <code>Learner_Profession</code> — <?php 
esc_html_e( 'the variable name in your authoring tool', 'slidemind' );
?></li>
                                    </ul>
                                    <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                        <?php 
esc_html_e( 'Once published, when the learner reaches this slide, their answer is automatically saved. Any other slide can then use {variable_name} in its prompt to personalize the AI response.', 'slidemind' );
?>
                                    </p>
                                    <p style="margin: 0; font-size: 12px; color: #50575e;">
                                        <?php 
esc_html_e( 'Scope hint: Global = everywhere, Course = this course only, Module = this module only. Choose Global if in doubt.', 'slidemind' );
?>
                                    </p>
                                </div>
                            </details>

                            <div id="wizard-capture-vars-list"></div>

                            <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="wizard-add-capture-var" style="margin-top: 8px;">
                                <span class="dashicons dashicons-plus-alt2"></span>
                                <?php 
esc_html_e( 'Add a memory variable', 'slidemind' );
?>
                            </button>
                        </div>

                        <!-- Advanced options collapsible (all modes, auto-save hidden in capture) -->
                        <div class="sm-form-collapsible" style="margin-top: 20px;">
                            <button type="button" class="sm-collapsible-toggle">
                                <span class="dashicons dashicons-admin-generic"></span>
                                <?php 
esc_html_e( 'Advanced options', 'slidemind' );
?>
                                <span class="dashicons dashicons-arrow-down-alt2"></span>
                            </button>
                            <div class="sm-collapsible-content">

                                <!-- Auto-save interaction (Q&A/Chat only, hidden in capture) -->
                                <div id="wizard-autosave-section">
                                    <div class="sm-form-group">
                                        <label class="sm-form-label" style="display: flex; align-items: center; gap: 8px;">
                                            <input type="checkbox" id="wizard-save-interaction">
                                            <?php 
esc_html_e( 'Save exchange to memory', 'slidemind' );
?>
                                        </label>
                                    </div>
                                    <div id="wizard-autosave-suboptions" style="display: none;">
                                        <div class="sm-form-group" style="margin-bottom: 8px;">
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" id="wizard-save-user-input" value="1">
                                                <?php 
esc_html_e( 'Learner input', 'slidemind' );
?>
                                                &rarr; <?php 
esc_html_e( 'key:', 'slidemind' );
?>
                                                <input type="text" id="wizard-save-input-key" class="sm-form-input"
                                                       pattern="^[a-z][a-z0-9_]*$"
                                                       placeholder="<?php 
esc_attr_e( 'Auto-generated from title', 'slidemind' );
?>"
                                                       style="width: 180px; display: inline-block;">
                                            </label>
                                        </div>
                                        <div class="sm-form-group" style="margin-bottom: 8px;">
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" id="wizard-save-ai-response" value="1">
                                                <?php 
esc_html_e( 'AI response', 'slidemind' );
?>
                                                &rarr; <?php 
esc_html_e( 'key:', 'slidemind' );
?>
                                                <input type="text" id="wizard-save-response-key" class="sm-form-input"
                                                       pattern="^[a-z][a-z0-9_]*$"
                                                       placeholder="<?php 
esc_attr_e( 'Auto-generated from title', 'slidemind' );
?>"
                                                       style="width: 180px; display: inline-block;">
                                            </label>
                                        </div>
                                        <div class="sm-form-group">
                                            <label class="sm-form-label" for="wizard-save-interaction-scope" style="font-size: 13px;">
                                                <?php 
esc_html_e( 'Scope:', 'slidemind' );
?>
                                            </label>
                                            <select id="wizard-save-interaction-scope" class="sm-form-select" style="width: auto; min-width: 140px;">
                                                <option value="global"><?php 
esc_html_e( 'Global', 'slidemind' );
?></option>
                                                <?php 
if ( $can_scope ) {
    ?>
                                                <option value="course"><?php 
    esc_html_e( 'Course', 'slidemind' );
    ?></option>
                                                <option value="module"><?php 
    esc_html_e( 'Module', 'slidemind' );
    ?></option>
                                                <?php 
}
?>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Capture variables (Q&A/Chat modes only, hidden in capture mode) -->
                                <div id="wizard-adv-capture-section" style="margin-top: 16px;">
                                    <div class="sm-form-group">
                                        <label class="sm-form-label"><?php 
esc_html_e( 'Capture a variable and add it to persistent memory.', 'slidemind' );
?></label>
                                    </div>

                                    <details class="sm-help-accordion" style="margin-bottom: 16px;">
                                        <summary style="cursor: pointer; font-weight: 600; color: #2271b1; padding: 8px 0; user-select: none;">
                                            <?php 
esc_html_e( 'How does capture work?', 'slidemind' );
?>
                                        </summary>
                                        <div style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px 16px; margin-top: 8px; border-radius: 0 4px 4px 0;">
                                            <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                                <?php 
esc_html_e( 'Example: You want to record the learner\'s profession so it can be reused in other courses. In your authoring tool (Storyline, Captivate...), create a variable called Learner_Profession. Then configure a capture here:', 'slidemind' );
?>
                                            </p>
                                            <ul style="margin: 0 0 8px; padding-left: 20px; color: #1d2327;">
                                                <li><strong><?php 
esc_html_e( 'Memory key', 'slidemind' );
?></strong>: <code>profession</code> — <?php 
esc_html_e( 'the name SlideMind uses to store and retrieve this value', 'slidemind' );
?></li>
                                                <li><strong><?php 
esc_html_e( 'Scope', 'slidemind' );
?></strong>: <?php 
esc_html_e( 'Global', 'slidemind' );
?> — <?php 
esc_html_e( 'so it\'s accessible across all courses', 'slidemind' );
?></li>
                                                <li><strong><?php 
esc_html_e( 'Authoring tool variable', 'slidemind' );
?></strong>: <code>Learner_Profession</code> — <?php 
esc_html_e( 'the variable name in your authoring tool', 'slidemind' );
?></li>
                                            </ul>
                                            <p style="margin: 0 0 8px; font-style: italic; color: #1d2327;">
                                                <?php 
esc_html_e( 'Once published, when the learner reaches this slide, their answer is automatically saved. Any other slide can then use {variable_name} in its prompt to personalize the AI response.', 'slidemind' );
?>
                                            </p>
                                            <p style="margin: 0; font-size: 12px; color: #50575e;">
                                                <?php 
esc_html_e( 'Scope hint: Global = everywhere, Course = this course only, Module = this module only. Choose Global if in doubt.', 'slidemind' );
?>
                                            </p>
                                        </div>
                                    </details>

                                    <div id="wizard-adv-capture-vars-list"></div>

                                    <button type="button" class="sm-btn sm-btn-secondary sm-btn-sm" id="wizard-add-adv-capture-var" style="margin-top: 8px;">
                                        <span class="dashicons dashicons-plus-alt2"></span>
                                        <?php 
esc_html_e( 'Add a memory variable', 'slidemind' );
?>
                                    </button>

                                    <p class="sm-form-help" style="margin-top: 12px; font-size: 12px; color: #6b7280;">
                                        <span class="dashicons dashicons-info" style="font-size: 14px; width: 14px; height: 14px; vertical-align: middle;"></span>
                                        <?php 
esc_html_e( 'Global = accessible everywhere', 'slidemind' );
?> &middot;
                                        <?php 
esc_html_e( 'Course = this course only', 'slidemind' );
?> &middot;
                                        <?php 
esc_html_e( 'Module = this module only', 'slidemind' );
?><br>
                                        <strong><?php 
esc_html_e( 'Choose Global if you may need this variable elsewhere.', 'slidemind' );
?></strong>
                                    </p>
                                </div>

                                <!-- Internal notes -->
                                <div class="sm-form-group" style="margin-top: 16px;">
                                    <label class="sm-form-label" for="wizard-notes"><?php 
esc_html_e( 'Internal notes', 'slidemind' );
?></label>
                                    <textarea id="wizard-notes" class="sm-form-textarea" rows="2"
                                              placeholder="<?php 
esc_attr_e( 'Notes visible only in the admin area...', 'slidemind' );
?>"></textarea>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Step 4: Test & Publier -->
            <div class="sm-wizard-panel" data-step="4">
                <div class="sm-form-row" style="gap: 24px;">
                    <!-- Summary -->
                    <div class="sm-card" style="flex: 1;">
                        <div class="sm-card-header">
                            <h2><?php 
esc_html_e( 'Summary', 'slidemind' );
?></h2>
                        </div>
                        <div class="sm-card-body">
                            <div id="wizard-summary">
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Title:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-title">—</span>
                                </div>
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Course:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-course">—</span>
                                </div>
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Module:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-module">—</span>
                                </div>
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Model:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-model">—</span>
                                </div>
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Mode:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-mode">—</span>
                                </div>
                                <div class="sm-summary-row">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Variables:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-variables">—</span>
                                </div>
                                <div class="sm-summary-row" style="display: none;">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Memory:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-memory">—</span>
                                </div>
                                <div class="sm-summary-row" style="display: none;">
                                    <span class="sm-summary-label"><?php 
esc_html_e( 'Notes:', 'slidemind' );
?></span>
                                    <span class="sm-summary-value" id="summary-notes">—</span>
                                </div>
                            </div>

                            <div class="sm-form-group">
                                <label class="sm-form-label" for="wizard-status"><?php 
esc_html_e( 'Status', 'slidemind' );
?></label>
                                <select id="wizard-status" name="status" class="sm-form-select">
                                    <option value="publish"><?php 
esc_html_e( 'Published (active)', 'slidemind' );
?></option>
                                    <option value="draft"><?php 
esc_html_e( 'Draft', 'slidemind' );
?></option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Mini Sandbox -->
                    <div id="wizard-test-card" class="sm-card" style="flex: 1;">
                        <div class="sm-card-header">
                            <h2><?php 
esc_html_e( 'Quick test', 'slidemind' );
?></h2>
                        </div>
                        <div class="sm-card-body">
                            <!-- Variables de test -->
                            <div id="wizard-test-variables" class="sm-test-variables">
                                <!-- Dynamiquement rempli -->
                            </div>

                            <div class="sm-form-group">
                                <label class="sm-form-label" for="wizard-test-message"><?php 
esc_html_e( 'Test message', 'slidemind' );
?></label>
                                <textarea id="wizard-test-message" class="sm-form-textarea" rows="3"
                                          placeholder="<?php 
esc_attr_e( 'Write a message to test the AI...', 'slidemind' );
?>"></textarea>
                            </div>

                            <button type="button" class="sm-btn sm-btn-secondary sm-btn-block" id="wizard-test-btn">
                                <span class="dashicons dashicons-visibility"></span>
                                <?php 
esc_html_e( 'Test', 'slidemind' );
?>
                            </button>

                            <!-- Prompt preview -->
                            <div class="sm-form-collapsible" style="margin-top: 12px;">
                                <button type="button" class="sm-collapsible-toggle">
                                    <span class="dashicons dashicons-editor-code"></span>
                                    <?php 
esc_html_e( 'View system prompt', 'slidemind' );
?>
                                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                                </button>
                                <div class="sm-collapsible-content">
                                    <pre id="wizard-prompt-preview" style="white-space: pre-wrap; word-wrap: break-word; background: #f3f4f6; padding: 12px; border-radius: 6px; font-size: 12px; max-height: 200px; overflow-y: auto;"></pre>
                                </div>
                            </div>

                            <div id="wizard-test-result" class="sm-test-result" style="display: none;">
                                <h4><?php 
esc_html_e( 'AI response', 'slidemind' );
?></h4>
                                <div id="wizard-test-response" class="sm-test-response"></div>
                                <div id="wizard-test-debug" class="sm-test-debug">
                                    <span><?php 
esc_html_e( 'Tokens:', 'slidemind' );
?> <strong id="debug-tokens">—</strong></span>
                                    <span><?php 
esc_html_e( 'Time:', 'slidemind' );
?> <strong id="debug-time">—</strong></span>
                                    <span><?php 
esc_html_e( 'Cost:', 'slidemind' );
?> <strong id="debug-cost">—</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Capture Summary (visible only in Capture mode) -->
                    <div id="wizard-capture-summary" class="sm-card" style="flex: 1; display: none;">
                        <div class="sm-card-header">
                            <h2><?php 
esc_html_e( 'Capture summary', 'slidemind' );
?></h2>
                        </div>
                        <div class="sm-card-body">
                            <p class="sm-form-help" style="margin-bottom: 16px;">
                                <?php 
esc_html_e( 'This slide will capture the following variables from your authoring tool without AI processing.', 'slidemind' );
?>
                            </p>
                            <div id="wizard-capture-summary-content"></div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Navigation -->
            <div class="sm-wizard-nav">
                <button type="button" class="sm-btn sm-btn-secondary" id="wizard-prev" style="display: none;">
                    <span class="dashicons dashicons-arrow-left-alt"></span>
                    <?php 
esc_html_e( 'Previous', 'slidemind' );
?>
                </button>
                <div class="sm-wizard-nav-spacer"></div>
                <button type="button" class="sm-btn sm-btn-primary" id="wizard-next">
                    <?php 
esc_html_e( 'Next', 'slidemind' );
?>
                    <span class="dashicons dashicons-arrow-right-alt"></span>
                </button>
                <button type="submit" class="sm-btn sm-btn-success" id="wizard-submit" style="display: none;">
                    <span class="dashicons dashicons-saved"></span>
                    <?php 
esc_html_e( 'Create slide', 'slidemind' );
?>
                </button>
            </div>
        </form>
    </div>

    <!-- Success page (hidden by default, shown after creation) -->
    <div id="wizard-success" class="sm-wizard-success" style="display: none;">
        <div class="sm-card" style="text-align: center; padding: 32px 24px;">
            <div style="margin-bottom: 16px;">
                <span class="dashicons dashicons-yes-alt" style="font-size: 48px; width: 48px; height: 48px; color: #10b981;"></span>
            </div>
            <h2 style="margin: 0 0 8px;"><?php 
esc_html_e( 'Successfully published!', 'slidemind' );
?></h2>
            <p style="color: #6b7280; margin: 0;" id="wizard-success-title"></p>
        </div>

        <div class="sm-card" style="margin-top: 24px;">
            <div class="sm-card-header">
                <h2><?php 
esc_html_e( 'Integration code', 'slidemind' );
?></h2>
                <span class="sm-badge sm-badge-success"><?php 
esc_html_e( 'Ready to copy', 'slidemind' );
?></span>
            </div>
            <div class="sm-card-body">
                <p class="sm-form-help" style="margin-bottom: 16px;">
                    <?php 
esc_html_e( 'Copy this code into your authoring tool to connect your module to the AI agent you just created.', 'slidemind' );
?>
                </p>
                <p class="sm-form-help" id="wizard-editor-instructions" style="margin-bottom: 8px;">
                    <?php 
/* translators: %1$s: opening strong tag, %2$s: closing strong tag */
printf( esc_html__( 'Paste into a %1$sExecute JavaScript%2$s trigger:', 'slidemind' ), '<strong>', '</strong>' );
?>
                </p>
                <div id="wizard-beta-warning" class="sm-notice sm-notice-warning" style="display: none; padding: 10px 14px; margin-bottom: 8px; font-size: 13px;">
                    <span class="dashicons dashicons-warning" style="font-size: 16px; width: 16px; height: 16px; margin-top: 2px;"></span>
                    <span></span>
                </div>
                <pre id="wizard-integration-code" class="sm-code-block"></pre>
                <p class="sm-form-help" id="wizard-memory-hint" style="margin-top: 6px; display: none;">
                    <span class="dashicons dashicons-info" style="font-size: 14px; width: 14px; height: 14px; vertical-align: middle;"></span>
                    <?php 
/* translators: %s: memory variable syntax */
printf( esc_html__( '%s variables detected — memory code is included automatically.', 'slidemind' ), '<code>{{memory.*}}</code>' );
?>
                </p>
                <button type="button" class="sm-btn sm-btn-primary sm-btn-block" id="wizard-copy-integration-code" style="margin-top: 8px;">
                    <span class="dashicons dashicons-clipboard"></span>
                    <?php 
esc_html_e( 'Copy code', 'slidemind' );
?>
                </button>
                <button type="button" class="sm-btn sm-btn-secondary sm-btn-block" id="wizard-customize-widget-btn" style="margin-top: 6px; display: none;">
                    <span class="dashicons dashicons-admin-appearance"></span>
                    <?php 
esc_html_e( 'Customize widget', 'slidemind' );
?>
                </button>
                <div class="sm-form-group" style="margin-top: 16px; margin-bottom: 12px;">
                    <label class="sm-form-label" for="wizard-editor-select"><?php 
esc_html_e( 'Authoring tool', 'slidemind' );
?></label>
                    <select id="wizard-editor-select" class="sm-form-input">
                        <option value="storyline">Articulate Storyline</option>
                        <option value="captivate">Adobe Captivate (beta)</option>
                        <option value="lectora">Lectora (ELB Learning) (beta)</option>
                        <option value="dominknow">DominKnow | Claro (beta)</option>
                        <option value="ispring">iSpring Suite (beta)</option>
                    </select>
                </div>
                <div class="sm-form-group" id="wizard-editor-var-names" style="margin-bottom: 0;">
                    <div style="display: flex; gap: 16px;">
                        <div class="sm-editor-var-row" style="flex: 1;">
                            <label class="sm-form-label" for="wizard-editor-input-var">
                                <?php 
esc_html_e( 'Input variable', 'slidemind' );
?>
                            </label>
                            <div style="display: flex; gap: 4px; align-items: center;">
                                <input type="text" id="wizard-editor-input-var" name="editor_input_var"
                                       class="sm-form-input" style="flex: 1;"
                                       value=""
                                       placeholder="<?php 
esc_attr_e( 'Auto-generated from title', 'slidemind' );
?>">
                                <button type="button" class="sm-editor-var-reset" data-target="wizard-editor-input-var" title="<?php 
esc_attr_e( 'Reset to default', 'slidemind' );
?>">&#8635;</button>
                            </div>
                        </div>
                        <div class="sm-editor-var-row" style="flex: 1;">
                            <label class="sm-form-label" for="wizard-editor-output-var">
                                <?php 
esc_html_e( 'Output variable', 'slidemind' );
?>
                            </label>
                            <div style="display: flex; gap: 4px; align-items: center;">
                                <input type="text" id="wizard-editor-output-var" name="editor_output_var"
                                       class="sm-form-input" style="flex: 1;"
                                       value=""
                                       placeholder="<?php 
esc_attr_e( 'Auto-generated from title', 'slidemind' );
?>">
                                <button type="button" class="sm-editor-var-reset" data-target="wizard-editor-output-var" title="<?php 
esc_attr_e( 'Reset to default', 'slidemind' );
?>">&#8635;</button>
                            </div>
                        </div>
                    </div>
                    <p class="sm-form-help"><?php 
esc_html_e( 'Variable names used in your authoring tool. Unique names are generated automatically for new slides.', 'slidemind' );
?></p>
                    <div id="wizard-editor-var-duplicate-warning" class="sm-notice sm-notice-warning" style="display:none; margin-top: 8px; padding: 10px 14px; font-size: 13px;"></div>
                </div>
            </div>
        </div>

        <div class="sm-card" style="margin-top: 24px;">
            <div class="sm-card-body" style="display: flex; gap: 12px; flex-wrap: wrap;">
                <a href="#" id="wizard-success-edit" class="sm-btn sm-btn-secondary" style="flex: 1;">
                    <span class="dashicons dashicons-edit"></span>
                    <?php 
esc_html_e( 'Edit slide', 'slidemind' );
?>
                </a>
                <a href="#" id="wizard-success-sandbox" class="sm-btn sm-btn-secondary" style="flex: 1;">
                    <span class="dashicons dashicons-visibility"></span>
                    <?php 
esc_html_e( 'Test in Sandbox', 'slidemind' );
?>
                </a>
                <a href="<?php 
echo esc_url( admin_url( 'admin.php?page=slidemind-wizard' ) );
?>" class="sm-btn sm-btn-secondary" style="flex: 1;">
                    <span class="dashicons dashicons-plus-alt"></span>
                    <?php 
esc_html_e( 'Create another slide', 'slidemind' );
?>
                </a>
            </div>
        </div>
    </div>

<?php 
// Widget appearance defaults for modal (wizard creates new slides, so no per-slide values)
$widget_color = '';
$widget_ai_color = '';
$widget_theme = '';
$widget_show_header = '';
$widget_ai_text_color = '';
$widget_border_radius = '';
$widget_title = '';
require SLIDEMIND_PLUGIN_PATH . 'admin/views/partials/widget-appearance-modal.php';
?>

<?php 
// Pass wizard data to JS.
/* translators: %s: slide title */
$str_slide_ready = __( '"%s" is ready.', 'slidemind' );
$wizard_data = [
    'modules'         => array_map( function ( $m ) {
        return [
            'id'           => $m['id'],
            'title'        => $m['title'],
            'course_id'    => $m['parent_course_id'],
            'course_title' => $m['parent_course_title'],
        ];
    }, $modules ),
    'presetModuleId'  => ( intval( $preset_module_id ) ?: null ),
    'presetInherited' => $preset_inherited,
    'chatEndpoint'    => rest_url( 'slidemind/v2/chat' ),
    'restUrl'         => rest_url( 'slidemind/v2/' ),
    'siteUrl'         => home_url( '/' ),
    'strings'         => [
        'templateCustomName'   => __( 'Custom', 'slidemind' ),
        'templateCustomDesc'   => __( 'Write your own prompt', 'slidemind' ),
        'otherTemplates'       => __( 'Other templates', 'slidemind' ),
        'chooseTemplate'       => __( '— Choose a template —', 'slidemind' ),
        'noPromptDefined'      => __( '(no prompt defined)', 'slidemind' ),
        'noModuleIndependent'  => __( 'None (independent slide)', 'slidemind' ),
        'noModuleForCourse'    => __( 'No module for this course', 'slidemind' ),
        'selectAModule'        => __( 'Select a module', 'slidemind' ),
        'labelCourse'          => __( 'Course:', 'slidemind' ),
        'labelTheme'           => __( 'Theme:', 'slidemind' ),
        'labelModule'          => __( 'Module:', 'slidemind' ),
        'labelSubject'         => __( 'Subject:', 'slidemind' ),
        'labelVariables'       => __( 'Variables:', 'slidemind' ),
        'noVariables'          => __( 'None', 'slidemind' ),
        'slideDefault'         => __( 'Slide', 'slidemind' ),
        'modeQA'               => __( 'Q&A', 'slidemind' ),
        'modeChat'             => __( 'Chat', 'slidemind' ),
        'modeCapture'          => __( 'Capture', 'slidemind' ),
        'typeText'             => __( 'Text', 'slidemind' ),
        'typeNumber'           => __( 'Number', 'slidemind' ),
        'typeBoolean'          => __( 'Boolean', 'slidemind' ),
        'typeEnum'             => __( 'Enum', 'slidemind' ),
        'createSlide'          => __( 'Create the slide', 'slidemind' ),
        'slideReady'           => $str_slide_ready,
        'promptStepLabel'      => __( 'Prompt', 'slidemind' ),
        'captureStepLabel'     => __( 'Variables', 'slidemind' ),
        'configurePromptTitle' => __( 'Configure the prompt', 'slidemind' ),
        'noAI'                 => __( 'No AI', 'slidemind' ),
        'captureNoVars'        => __( 'No variables defined. You can add them later in the expert editor.', 'slidemind' ),
        'columnName'           => __( 'Name', 'slidemind' ),
        'columnScope'          => __( 'Scope', 'slidemind' ),
        'columnSource'         => __( 'Source', 'slidemind' ),
    ],
];
wp_add_inline_script( 'slidemind-wizard', 'var slidemindWizardData = ' . wp_json_encode( $wizard_data ) . ';', 'before' );