<?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 
// The free build always behaves as the free tier: global memory variables
// are fully available; per-learner management is a premium feature. The
// FeatureGate references below are stripped from the free zip.
$sm_is_free = true;
$sm_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 
}
?>
    </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 
}
?>

        <!-- 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 
    }
    ?>
                    </p>
                <?php 
}
?>
            </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 
}
?>

    </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 
    }
    ?>
        </p>
    <?php 
}
?>
</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>

