<?php
/**
 * Memory Hub View
 *
 * Central hub for memory variable definitions and learner data management.
 *
 * @package SlideMind
 * @since 2.2.0
 */

if (!defined('ABSPATH')) {
    exit;
}
?>

<?php
$sm_plan         = \SlideMind\Core\FeatureGate::get_plan();
$sm_is_free      = ( $sm_plan === 'free' );
$sm_upgrade_url  = \SlideMind\Core\FeatureGate::get_upgrade_url();
?>
<div class="sm-wrap">
    <div class="sm-header">
        <h1><?php esc_html_e('Memory', 'slidemind'); ?></h1>
        <?php if ( ! $sm_is_free ) : ?>
            <div class="sm-header-actions">
                <input type="text" id="sm-learners-search" class="sm-form-input"
                       placeholder="<?php esc_attr_e('Search by name or email...', 'slidemind'); ?>" style="width: 280px;">
            </div>
        <?php endif; ?>
    </div>

    <div class="sm-tabs-container">
        <?php if ( ! $sm_is_free ) : ?>
            <div class="sm-tabs">
                <button type="button" class="sm-tab active" data-tab="definitions"><?php esc_html_e('Definitions', 'slidemind'); ?></button>
                <button type="button" class="sm-tab" data-tab="learners"><?php esc_html_e('Learner Data', 'slidemind'); ?></button>
            </div>
        <?php endif; ?>

        <!-- Tab: Definitions -->
        <div class="sm-tab-content active" data-tab-content="definitions">

            <!-- Section A: Standalone Variables -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2 class="sm-card-title"><?php esc_html_e('Standalone Variables', 'slidemind'); ?></h2>
                </div>

                <div class="sm-notice sm-notice-info">
                    <span class="dashicons dashicons-info"></span>
                    <div>
                        <?php esc_html_e('Variables that work without LLM: capture data directly from the e-learning module and store it in global learner memory. This can be form-collected information (profession, education level, etc.) or any value reusable across modules and courses. Define them here, then generate the capture code to embed in your slides.', 'slidemind'); ?>
                    </div>
                </div>

                <!-- Loading spinner -->
                <div id="sm-definitions-loading" style="text-align: center; padding: 40px 0;">
                    <span class="spinner is-active" style="float: none;"></span>
                    <p style="color: #6b7280; margin-top: 8px;"><?php esc_html_e('Loading definitions...', 'slidemind'); ?></p>
                </div>

                <!-- Empty state -->
                <div id="sm-definitions-empty" style="display: none;">
                    <div class="sm-empty-state">
                        <svg class="sm-empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
                        </svg>
                        <h3 class="sm-empty-state-title"><?php esc_html_e('No standalone variables', 'slidemind'); ?></h3>
                        <p class="sm-empty-state-description"><?php esc_html_e('Create variables to capture learner data (profession, preferences, etc.) directly into memory, without requiring an LLM interaction.', 'slidemind'); ?></p>
                    </div>
                </div>

                <!-- Definitions table -->
                <div id="sm-definitions-table-wrap" style="display: none;">
                    <table class="sm-table">
                        <thead>
                            <tr>
                                <th style="width: 40px;"><input type="checkbox" id="sm-select-all-defs"></th>
                                <th><?php esc_html_e('Variable Name', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Description', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Learners', 'slidemind'); ?></th>
                                <th style="width: 60px;"><?php esc_html_e('Edit', 'slidemind'); ?></th>
                            </tr>
                        </thead>
                        <tbody id="sm-definitions-tbody"></tbody>
                    </table>

                </div>

                <!-- Action bar (always visible) -->
                <div id="sm-definitions-bulk-bar" style="display: flex; padding: 12px 16px; background: #f0f4ff; border-top: 1px solid #e0e7ff; align-items: center; gap: 12px;">
                    <button type="button" id="sm-add-definition" class="sm-btn sm-btn-primary sm-btn-sm">
                        <span class="dashicons dashicons-plus-alt2"></span>
                        <?php esc_html_e('Add a variable', 'slidemind'); ?>
                    </button>
                    <span id="sm-bulk-count" style="font-weight: 500; color: #4338ca; margin-left: auto;"></span>
                    <button type="button" id="sm-bulk-generate-code" class="sm-btn sm-btn-primary sm-btn-sm" disabled>
                        <span class="dashicons dashicons-upload"></span>
                        <?php esc_html_e('Save to memory', 'slidemind'); ?>
                    </button>
                    <button type="button" id="sm-bulk-generate-retrieve" class="sm-btn sm-btn-primary sm-btn-sm" disabled>
                        <span class="dashicons dashicons-download"></span>
                        <?php esc_html_e('Load into authoring tool', 'slidemind'); ?>
                    </button>
                    <button type="button" id="sm-bulk-delete" class="sm-btn sm-btn-danger sm-btn-sm" disabled>
                        <span class="dashicons dashicons-trash"></span>
                        <?php esc_html_e('Delete selected', 'slidemind'); ?>
                    </button>
                </div>
            </div>

            <!-- Section B: Variables defined in slides -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2 class="sm-card-title"><?php esc_html_e('Variables defined in slides', 'slidemind'); ?></h2>
                    <span class="sm-badge sm-badge-info"><?php esc_html_e('Read-only', 'slidemind'); ?></span>
                </div>

                <!-- Loading spinner -->
                <div id="sm-slide-vars-loading" style="text-align: center; padding: 40px 0;">
                    <span class="spinner is-active" style="float: none;"></span>
                    <p style="color: #6b7280; margin-top: 8px;"><?php esc_html_e('Loading slide variables...', 'slidemind'); ?></p>
                </div>

                <!-- Empty state -->
                <div id="sm-slide-vars-empty" style="display: none;">
                    <div class="sm-empty-state">
                        <svg class="sm-empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        <h3 class="sm-empty-state-title"><?php esc_html_e('No slide variables', 'slidemind'); ?></h3>
                        <p class="sm-empty-state-description"><?php esc_html_e('No memory variables have been defined in slides yet.', 'slidemind'); ?></p>
                    </div>
                </div>

                <!-- Slide variables table -->
                <div id="sm-slide-vars-table-wrap" style="display: none;">
                    <table class="sm-table">
                        <thead>
                            <tr>
                                <th><?php esc_html_e('Variable', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Scope', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Source slide', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Module', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Course', 'slidemind'); ?></th>
                                <th><?php esc_html_e('Learner count', 'slidemind'); ?></th>
                            </tr>
                        </thead>
                        <tbody id="sm-slide-vars-tbody"></tbody>
                    </table>
                </div>
            </div>

            <!-- Section C: Profile Variables -->
            <div class="sm-card">
                <div class="sm-card-header">
                    <h2 class="sm-card-title"><?php esc_html_e('Profile Variables', 'slidemind'); ?></h2>
                </div>

                <div class="sm-notice sm-notice-info">
                    <span class="dashicons dashicons-info"></span>
                    <div>
                        <?php
                        /* translators: %s: variable syntax example */
                        printf(esc_html__('Select the fields that prompts can use via %s.', 'slidemind'), '<code>{{profile.field}}</code>');
                        ?>
                        <br>
                        <?php
                        /* translators: %s: learnerId code reference */
                        printf(esc_html__('Only checked fields will be resolved in system prompts when a %s is provided.', 'slidemind'), '<code>learnerId</code>');
                        ?>
                    </div>
                </div>

                <!-- Loading spinner -->
                <div id="sm-profile-loading" style="text-align: center; padding: 40px 0;">
                    <span class="spinner is-active" style="float: none;"></span>
                    <p style="color: #6b7280; margin-top: 8px;"><?php esc_html_e('Loading profile fields...', 'slidemind'); ?></p>
                </div>

                <!-- Empty state -->
                <div id="sm-profile-empty" style="display: none;">
                    <div class="sm-empty-state">
                        <svg class="sm-empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <h3 class="sm-empty-state-title"><?php esc_html_e('No profile fields available', 'slidemind'); ?></h3>
                        <p class="sm-empty-state-description"><?php esc_html_e('No profile fields were detected on this WordPress installation.', 'slidemind'); ?></p>
                    </div>
                </div>

                <!-- Profile fields (populated via JS) -->
                <div id="sm-profile-fields-wrap" style="display: none;"></div>

                <!-- Action bar -->
                <div id="sm-profile-actions" style="display: none; padding: 12px 16px; background: #f0f4ff; border-top: 1px solid #e0e7ff; align-items: center; gap: 12px;">
                    <button type="button" id="sm-save-profile" class="sm-btn sm-btn-primary sm-btn-sm">
                        <span class="dashicons dashicons-saved"></span>
                        <?php esc_html_e('Save profile settings', 'slidemind'); ?>
                    </button>
                    <button type="button" id="sm-profile-generate-retrieve" class="sm-btn sm-btn-primary sm-btn-sm" style="margin-left: 8px;">
                        <span class="dashicons dashicons-download"></span>
                        <?php esc_html_e('Load into authoring tool', 'slidemind'); ?>
                    </button>
                </div>

                <?php if ( $sm_is_free ) : ?>
                    <p class="sm-muted" style="padding: 14px 16px 0; font-size: 13px;">
                        <span class="dashicons dashicons-star-filled" style="color:#d99b6a;font-size:13px;width:13px;height:13px;vertical-align:text-bottom;"></span>
                        <?php esc_html_e('Pro: sync profile fields from BuddyBoss, LearnDash, WooCommerce, ACF, Ultimate Member, Tutor LMS, LifterLMS, and MemberPress.', 'slidemind'); ?>
                        <?php if ( $sm_upgrade_url ) : ?>
                            <a href="<?php echo esc_url( $sm_upgrade_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e('See plans', 'slidemind'); ?></a>
                        <?php endif; ?>
                    </p>
                <?php endif; ?>
            </div>

        </div>

        <?php if ( ! $sm_is_free ) : ?>
            <!-- Tab: Learner Data -->
            <div class="sm-tab-content" data-tab-content="learners">

                <div class="sm-notice sm-notice-info">
                    <strong><?php esc_html_e('Learner memory:', 'slidemind'); ?></strong> <?php esc_html_e('View and manage memorized variables for each learner across their courses and modules.', 'slidemind'); ?>
                </div>

                <div class="sm-card">
                    <!-- Loading spinner -->
                    <div id="sm-learners-loading" style="text-align: center; padding: 40px 0;">
                        <span class="spinner is-active" style="float: none;"></span>
                        <p style="color: #6b7280; margin-top: 8px;"><?php esc_html_e('Loading learners...', 'slidemind'); ?></p>
                    </div>

                    <!-- Empty state -->
                    <div id="sm-learners-empty" style="display: none;">
                        <div class="sm-empty-state">
                            <svg class="sm-empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            <h3 class="sm-empty-state-title"><?php esc_html_e('No learners', 'slidemind'); ?></h3>
                            <p class="sm-empty-state-description"><?php esc_html_e('No memory data has been recorded yet.', 'slidemind'); ?></p>
                        </div>
                    </div>

                    <!-- Table -->
                    <div id="sm-learners-table-wrap" style="display: none;">
                        <table class="sm-table">
                            <thead>
                                <tr>
                                    <th><?php esc_html_e('Learner', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Global', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Course', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Module', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Total', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Last activity', 'slidemind'); ?></th>
                                    <th><?php esc_html_e('Actions', 'slidemind'); ?></th>
                                </tr>
                            </thead>
                            <tbody id="sm-learners-tbody"></tbody>
                        </table>

                        <!-- Pagination -->
                        <div id="sm-learners-pagination" class="sm-pagination" style="padding: 16px; text-align: center;"></div>
                    </div>
                </div>

            </div>
        <?php endif; ?>

    </div>

    <?php if ( $sm_is_free ) : ?>
        <p class="sm-muted" style="margin: 20px 0 0; font-size: 13px; text-align: right;">
            <span class="dashicons dashicons-star-filled" style="color:#d99b6a;font-size:13px;width:13px;height:13px;vertical-align:text-bottom;"></span>
            <?php esc_html_e('Pro: per-learner memory dashboard with edit, export, and purge.', 'slidemind'); ?>
            <?php if ( $sm_upgrade_url ) : ?>
                <a href="<?php echo esc_url( $sm_upgrade_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e('See plans', 'slidemind'); ?></a>
            <?php endif; ?>
        </p>
    <?php endif; ?>
</div>

<!-- Purge confirmation modal -->
<div class="sm-modal-overlay" id="sm-purge-modal">
    <div class="sm-modal">
        <div class="sm-modal-header">
            <h3><?php esc_html_e('Confirm purge', 'slidemind'); ?></h3>
            <button type="button" class="sm-modal-close">&times;</button>
        </div>
        <div class="sm-modal-body">
            <p>
            <?php
            /* translators: %1$s: opening strong tag, %2$s: closing strong tag, %3$s: learner name placeholder span */
            printf(esc_html__('You are about to delete %1$sall%2$s memory data for learner %3$s.', 'slidemind'), '<strong>', '</strong>', '<strong id="sm-purge-learner-name"></strong>');
            ?>
            </p>
            <p style="color: #ef4444;"><?php esc_html_e('This action is irreversible.', 'slidemind'); ?></p>
        </div>
        <div class="sm-modal-footer">
            <button type="button" class="sm-btn sm-btn-secondary sm-modal-close"><?php esc_html_e('Cancel', 'slidemind'); ?></button>
            <button type="button" class="sm-btn sm-btn-danger" id="sm-confirm-purge">
                <span class="dashicons dashicons-trash"></span>
                <?php esc_html_e('Purge data', 'slidemind'); ?>
            </button>
        </div>
    </div>
</div>

<!-- Add/Edit definition modal -->
<div class="sm-modal-overlay" id="sm-definition-modal">
    <div class="sm-modal">
        <div class="sm-modal-header">
            <h3><?php esc_html_e('Add a variable', 'slidemind'); ?></h3>
            <button type="button" class="sm-modal-close">&times;</button>
        </div>
        <div class="sm-modal-body">
            <input type="hidden" id="sm-def-id" value="">

            <div class="sm-form-group">
                <label class="sm-form-label" for="sm-def-name">
                    <?php esc_html_e('Variable name', 'slidemind'); ?> <span class="required">*</span>
                </label>
                <input type="text"
                       id="sm-def-name"
                       class="sm-form-input"
                       pattern="^[a-z][a-z0-9_]*$"
                       placeholder="my_variable"
                       required>
                <p class="sm-form-help">
                    <?php esc_html_e('Lowercase letters, numbers and underscores only. Must start with a letter.', 'slidemind'); ?>
                </p>
            </div>

            <div class="sm-form-group">
                <label class="sm-form-label" for="sm-def-description">
                    <?php esc_html_e('Description', 'slidemind'); ?>
                </label>
                <input type="text"
                       id="sm-def-description"
                       class="sm-form-input"
                       placeholder="<?php esc_attr_e('Description of the variable', 'slidemind'); ?>">
            </div>
        </div>
        <div class="sm-modal-footer">
            <button type="button" class="sm-btn sm-btn-secondary sm-modal-close"><?php esc_html_e('Cancel', 'slidemind'); ?></button>
            <button type="button" class="sm-btn sm-btn-primary" id="sm-save-definition">
                <?php esc_html_e('Save', 'slidemind'); ?>
            </button>
        </div>
    </div>
</div>

<!-- Capture code generator modal -->
<div class="sm-modal-overlay" id="sm-capture-code-modal">
    <div class="sm-modal" style="max-width: 700px;">
        <div class="sm-modal-header">
            <h3><?php esc_html_e('Save to memory', 'slidemind'); ?></h3>
            <button type="button" class="sm-modal-close">&times;</button>
        </div>
        <div class="sm-modal-body">
            <p class="sm-form-help" style="margin-bottom: 14px;">
                <?php esc_html_e('Generates code to send variables from the e-learning module to SlideMind memory.', 'slidemind'); ?>
            </p>
            <!-- Variable mapping (populated from table selection) -->
            <div class="sm-form-group">
                <label class="sm-form-label">
                    <?php esc_html_e('Variable mapping', 'slidemind'); ?>
                </label>
                <p class="sm-form-help" style="margin-bottom: 8px;">
                    <?php esc_html_e('Map each variable to its corresponding name in your authoring tool.', 'slidemind'); ?>
                </p>
                <div id="sm-capture-mapping"></div>
            </div>

            <!-- Authoring tool selection -->
            <div class="sm-form-group">
                <label class="sm-form-label" for="sm-capture-editor">
                    <?php esc_html_e('Authoring tool', 'slidemind'); ?> <span class="required">*</span>
                </label>
                <select id="sm-capture-editor" class="sm-form-select">
                    <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>

            <!-- Code output -->
            <div id="sm-capture-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="sm-capture-code-output" class="sm-code-block" style="display: none;"></pre>
        </div>
        <div class="sm-modal-footer">
            <button type="button" class="sm-btn sm-btn-secondary sm-modal-close"><?php esc_html_e('Cancel', 'slidemind'); ?></button>
            <button type="button" class="sm-btn sm-btn-primary" id="sm-do-generate-capture">
                <span class="dashicons dashicons-editor-code"></span>
                <?php esc_html_e('Generate', 'slidemind'); ?>
            </button>
            <button type="button" class="sm-btn sm-btn-secondary" id="sm-copy-capture-code" style="display: none;">
                <span class="dashicons dashicons-clipboard"></span>
                <?php esc_html_e('Copy', 'slidemind'); ?>
            </button>
        </div>
    </div>
</div>

<!-- Retrieve code generator modal -->
<div class="sm-modal-overlay" id="sm-retrieve-code-modal">
    <div class="sm-modal" style="max-width: 700px;">
        <div class="sm-modal-header">
            <h3><?php esc_html_e('Load into authoring tool', 'slidemind'); ?></h3>
            <button type="button" class="sm-modal-close">&times;</button>
        </div>
        <div class="sm-modal-body">
            <p class="sm-form-help" style="margin-bottom: 14px;">
                <?php esc_html_e('Generates code to load saved memory values back into the e-learning module.', 'slidemind'); ?>
            </p>
            <!-- Variable mapping (populated from table selection) -->
            <div class="sm-form-group">
                <label class="sm-form-label">
                    <?php esc_html_e('Variable mapping', 'slidemind'); ?>
                </label>
                <p class="sm-form-help" style="margin-bottom: 8px;">
                    <?php esc_html_e('Map each memory variable to the authoring tool variable that will receive its value.', 'slidemind'); ?>
                </p>
                <div id="sm-retrieve-mapping"></div>
            </div>

            <!-- Authoring tool selection -->
            <div class="sm-form-group">
                <label class="sm-form-label" for="sm-retrieve-editor">
                    <?php esc_html_e('Authoring tool', 'slidemind'); ?> <span class="required">*</span>
                </label>
                <select id="sm-retrieve-editor" class="sm-form-select">
                    <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>

            <!-- Code output -->
            <div id="sm-retrieve-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="sm-retrieve-code-output" class="sm-code-block" style="display: none;"></pre>
        </div>
        <div class="sm-modal-footer">
            <button type="button" class="sm-btn sm-btn-secondary sm-modal-close"><?php esc_html_e('Cancel', 'slidemind'); ?></button>
            <button type="button" class="sm-btn sm-btn-primary" id="sm-do-generate-retrieve">
                <span class="dashicons dashicons-editor-code"></span>
                <?php esc_html_e('Generate', 'slidemind'); ?>
            </button>
            <button type="button" class="sm-btn sm-btn-secondary" id="sm-copy-retrieve-code" style="display: none;">
                <span class="dashicons dashicons-clipboard"></span>
                <?php esc_html_e('Copy', 'slidemind'); ?>
            </button>
        </div>
    </div>
</div>

