<?php
/**
 * Auto Label admin screen.
 */

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

add_action('admin_menu', 'askagento_add_ai_labelling_page', 10);
add_action('admin_enqueue_scripts', 'askagento_ai_labelling_admin_enqueue');

/**
 * Wrap "attribute" / "attributes" in <strong> for Auto Label copy.
 *
 * @param string $text Translated plain text.
 * @return string
 */
function askagento_ai_labelling_format_attribute_words($text) {
    $html = esc_html($text);
    $html = preg_replace('/\battributes\b/i', '<strong>$0</strong>', $html);
    $html = preg_replace('/\battribute\b/i', '<strong>$0</strong>', $html);

    return wp_kses($html, ['strong' => []]);
}

/**
 * @param string $text Translated plain text.
 */
function askagento_ai_labelling_echo_attribute_words($text) {
    echo wp_kses(askagento_ai_labelling_format_attribute_words($text), ['strong' => []]);
}

function askagento_add_ai_labelling_page() {
    add_submenu_page(
        'edit.php?post_type=' . ASKAGENTO_POST_TYPE,
        __('Auto Label', 'askagento'),
        __('Auto Label', 'askagento'),
        'manage_options',
        'askagento-ai-labelling',
        'askagento_render_ai_labelling_page',
        null
    );
}

function askagento_ai_labelling_admin_enqueue($hook_suffix) {
    if ($hook_suffix !== 'askagento_filter_page_askagento-ai-labelling') {
        return;
    }

    wp_enqueue_script(
        'askagento-ai-labelling-admin',
        ASKAGENTO_PLUGIN_URL . 'assets/js/admin-ai-labelling.js',
        ['jquery'],
        askagento_asset_version('assets/js/admin-ai-labelling.js'),
        true
    );

    wp_localize_script(
        'askagento-ai-labelling-admin',
        'askagentoAiLabellingAdmin',
        [
            'ajaxUrl' => admin_url('admin-ajax.php'),
            'nonce'   => wp_create_nonce('askagento_admin'),
            'i18n'    => [
                'workingAnalyze' => __('Analyzing catalogue attributes…', 'askagento'),
                'workingGenerate' => __('Generating product attributes…', 'askagento'),
                'workingUpload' => __('Uploading generated attributes…', 'askagento'),
                'workingAnalyzeCategories' => __('Analyzing catalogue categories…', 'askagento'),
                'workingGenerateCategories' => __('Generating product categories…', 'askagento'),
                'workingUploadCategories' => __('Uploading generated categories…', 'askagento'),
                'workingAnalyzeTags' => __('Analyzing catalogue tags…', 'askagento'),
                'workingGenerateTags' => __('Generating product tags…', 'askagento'),
                'workingUploadTags' => __('Uploading generated tags…', 'askagento'),
                'requestFailed' => __('Request failed. Please try again.', 'askagento'),
                'missingConfig' => __('Complete Askagento installation first (site ID + Discovery API key).', 'askagento'),
                'withAttributes' => __('Products with attributes', 'askagento'),
                'withoutAttributes' => __('Products without attributes', 'askagento'),
                'withCategories' => __('Products with categories', 'askagento'),
                'withoutCategories' => __('Products without categories', 'askagento'),
                'withTags' => __('Products with tags', 'askagento'),
                'withoutTags' => __('Products without tags', 'askagento'),
                'generatedProducts' => __('Generated products', 'askagento'),
                'uploadedProducts' => __('Uploaded products', 'askagento'),
                'tokensUsed' => __('Tokens used', 'askagento'),
                'tokenUsage' => __('Token usage', 'askagento'),
                'tokensThisStep' => __('Tokens (this step)', 'askagento'),
                'toggleOn' => __('On', 'askagento'),
                'toggleOff' => __('Off', 'askagento'),
                'selectOneGenerate' => __('Select at least one item before Generate.', 'askagento'),
                /* translators: 1: number of products generated in this batch, 2: number of products still needing labelling */
                'batchGeneratedRunAgain' => __('%1$d products generated in this batch. %2$d still need labelling. Upload this batch now, or click Generate again to process the next batch.', 'askagento'),
            ],
        ]
    );
}

function askagento_render_ai_labelling_page() {
    if (!current_user_can('manage_options')) {
        return;
    }

    // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only display parameter; sanitized and allowlist-validated below.
    $labelling_tab = isset($_GET['tab']) ? sanitize_key((string) wp_unslash($_GET['tab'])) : 'attributes';
    if (!in_array($labelling_tab, ['attributes', 'categories', 'tags'], true)) {
        $labelling_tab = 'attributes';
    }
    $labelling_tab_base = add_query_arg(
        [
            'post_type' => ASKAGENTO_POST_TYPE,
            'page'      => 'askagento-ai-labelling',
        ],
        admin_url('edit.php')
    );
    $labelling_tab_url_attributes = add_query_arg('tab', 'attributes', $labelling_tab_base);
    $labelling_tab_url_categories = add_query_arg('tab', 'categories', $labelling_tab_base);
    $labelling_tab_url_tags       = add_query_arg('tab', 'tags',       $labelling_tab_base);
    ?>
    <div class="wrap askagento-ai-labelling-wrap">
        <h1><?php echo esc_html__('Auto Label', 'askagento'); ?></h1>

        <h2 class="nav-tab-wrapper askagento-ai-labelling-tabs">
            <a
                href="<?php echo esc_url($labelling_tab_url_attributes); ?>"
                class="nav-tab<?php echo esc_attr($labelling_tab === 'attributes' ? ' nav-tab-active' : ''); ?>"
                id="askagento-ai-labelling-tab-attributes-link"
                <?php if ($labelling_tab === 'attributes') : ?>aria-current="true"<?php endif; ?>
            ><?php askagento_ai_labelling_echo_attribute_words(__('Attributes', 'askagento')); ?></a>
            <a
                href="<?php echo esc_url($labelling_tab_url_categories); ?>"
                class="nav-tab<?php echo esc_attr($labelling_tab === 'categories' ? ' nav-tab-active' : ''); ?>"
                id="askagento-ai-labelling-tab-categories-link"
                <?php if ($labelling_tab === 'categories') : ?>aria-current="true"<?php endif; ?>
            ><?php echo esc_html__('Categories', 'askagento'); ?></a>
            <a
                href="<?php echo esc_url($labelling_tab_url_tags); ?>"
                class="nav-tab<?php echo esc_attr($labelling_tab === 'tags' ? ' nav-tab-active' : ''); ?>"
                id="askagento-ai-labelling-tab-tags-link"
                <?php if ($labelling_tab === 'tags') : ?>aria-current="true"<?php endif; ?>
            ><?php echo esc_html__('Tags', 'askagento'); ?></a>
        </h2>

        <div
            class="askagento-ai-labelling-tab-panel"
            id="askagento-ai-labelling-tab-panel-attributes"
            <?php if ($labelling_tab !== 'attributes') : ?>hidden<?php endif; ?>
            role="tabpanel"
            aria-labelledby="askagento-ai-labelling-tab-attributes-link"
        >
            <div class="askagento-ai-labelling-section">
                <p class="description askagento-ai-labelling-info" style="margin-top:0;margin-bottom:12px;max-width:52em;">
                    <strong><?php echo esc_html__('Info:', 'askagento'); ?></strong>
                    <?php echo esc_html__('Add missing attributes only is available. Only manual upload is available.', 'askagento'); ?>
                </p>
                <h2><?php echo esc_html__('Step 1 of 3: Analyze', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php askagento_ai_labelling_echo_attribute_words(__('Review which catalogue fields are suitable for attribute labelling before you generate or upload values.', 'askagento')); ?>
                </p>
                <p class="description" style="margin:0 0 8px;max-width:52em;">
                    <?php echo esc_html__('Analyze uses max 10 products that are missing attributes, plus existing attributes from the catalog.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-footnote description" style="margin:0;max-width:52em;">
                    <?php echo esc_html__('Out of scope: Price, sale state, stock, SKU, weight, shipping class, tags, and categories.', 'askagento'); ?>
                </p>
                <p class="description" style="margin:8px 0 0;max-width:52em;font-style:italic;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-analyze-btn">
                        <?php echo esc_html__('Analyze', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-analyze-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
                <div id="askagento-ai-labelling-canonical-wrap" style="display:none;margin-top:12px;max-width:52em;">
                    <p id="askagento-ai-labelling-canonical-attributes-heading" style="margin:0 0 8px;font-weight:600;">
                        <?php echo esc_html__('Suggested canonical attributes (edit before Generate)', 'askagento'); ?>
                    </p>
                    <div
                        id="askagento-ai-labelling-canonical-attributes"
                        class="askagento-ai-labelling-canonical-list"
                        role="group"
                        aria-labelledby="askagento-ai-labelling-canonical-attributes-heading"
                    ></div>
                    <p class="description" style="margin-top:6px;">
                        <?php echo esc_html__('Use the toggles to include or exclude each attribute.', 'askagento'); ?>
                    </p>
                </div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 2 of 3: Generate', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php echo esc_html__('Generation always uses both product images and product text.', 'askagento'); ?>
                </p>

                <p class="askagento-ai-labelling-footnote description" style="margin:16px 0 0;max-width:52em;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions askagento-ai-labelling-generate-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-generate-btn" disabled>
                        <?php echo esc_html__('Generate', 'askagento'); ?>
                    </button>
                    <button type="button" class="button" id="askagento-export-generated-attributes-json">
                        <?php echo esc_html__('Save JSON file to computer', 'askagento'); ?>
                    </button>
                </p>
                <p class="description" style="margin-top:8px;margin-bottom:0;max-width:52em;">
                    <?php echo esc_html__('Optional: save all generated attributes from this site as a .json file.', 'askagento'); ?>
                </p>
                <div id="askagento-ai-labelling-generate-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 3 of 3: Upload', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:0;max-width:52em;">
                    <?php askagento_ai_labelling_echo_attribute_words(__('Apply generated attribute values to your catalogue.', 'askagento')); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-upload-btn" disabled>
                        <?php echo esc_html__('Upload', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-upload-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>
        </div>

        <div
            class="askagento-ai-labelling-tab-panel"
            id="askagento-ai-labelling-tab-panel-categories"
            <?php if ($labelling_tab !== 'categories') : ?>hidden<?php endif; ?>
            role="tabpanel"
            aria-labelledby="askagento-ai-labelling-tab-categories-link"
        >
            <div class="askagento-ai-labelling-section">
                <p class="description askagento-ai-labelling-info" style="margin-top:0;margin-bottom:12px;max-width:52em;">
                    <strong><?php echo esc_html__('Info:', 'askagento'); ?></strong>
                    <?php echo esc_html__('Add missing categories only is available. Only manual upload is available.', 'askagento'); ?>
                </p>
                <h2><?php echo esc_html__('Step 1 of 3: Analyze', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php
                    echo wp_kses(
                        sprintf(
                            /* translators: 1: opening strong tag, 2: closing strong tag */
                            __('Review which catalogue products need %1$scategory%2$s labelling before you generate or upload values.', 'askagento'),
                            '<strong>',
                            '</strong>'
                        ),
                        ['strong' => []]
                    );
                    ?>
                </p>
                <p class="description" style="margin:0 0 8px;max-width:52em;">
                    <?php echo esc_html__('Analyze uses max 10 products that are missing categories, plus existing categories from the catalog.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-footnote description" style="margin:0;max-width:52em;">
                    <?php echo esc_html__('Out of scope: price, sale state, stock, SKU, attributes, tags, weight, and shipping class.', 'askagento'); ?>
                </p>
                <p class="description" style="margin:8px 0 0;max-width:52em;font-style:italic;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-categories-analyze-btn">
                        <?php echo esc_html__('Analyze', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-categories-analyze-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
                <div id="askagento-ai-labelling-categories-canonical-wrap" style="display:none;margin-top:12px;max-width:52em;">
                    <p id="askagento-ai-labelling-canonical-categories-heading" style="margin:0 0 8px;font-weight:600;">
                        <?php echo esc_html__('Suggested canonical categories (edit before Generate)', 'askagento'); ?>
                    </p>
                    <div
                        id="askagento-ai-labelling-canonical-categories"
                        class="askagento-ai-labelling-canonical-list"
                        role="group"
                        aria-labelledby="askagento-ai-labelling-canonical-categories-heading"
                    ></div>
                    <p class="description" style="margin-top:6px;">
                        <?php echo esc_html__('Use the toggles to include or exclude each category.', 'askagento'); ?>
                    </p>
                </div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 2 of 3: Generate', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php echo esc_html__('Generation always uses both product images and product text.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-footnote description" style="margin:16px 0 0;max-width:52em;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions askagento-ai-labelling-generate-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-categories-generate-btn" disabled>
                        <?php echo esc_html__('Generate', 'askagento'); ?>
                    </button>
                    <button type="button" class="button" id="askagento-export-generated-categories-json">
                        <?php echo esc_html__('Save JSON file to computer', 'askagento'); ?>
                    </button>
                </p>
                <p class="description" style="margin-top:8px;margin-bottom:0;max-width:52em;">
                    <?php echo esc_html__('Optional: save all generated categories from this site as a .json file.', 'askagento'); ?>
                </p>
                <div id="askagento-ai-labelling-categories-generate-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 3 of 3: Upload', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:0;max-width:52em;">
                    <?php echo esc_html__('Apply generated categories to your catalogue.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-categories-upload-btn" disabled>
                        <?php echo esc_html__('Upload', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-categories-upload-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>
        </div>

        <div
            class="askagento-ai-labelling-tab-panel"
            id="askagento-ai-labelling-tab-panel-tags"
            <?php if ($labelling_tab !== 'tags') : ?>hidden<?php endif; ?>
            role="tabpanel"
            aria-labelledby="askagento-ai-labelling-tab-tags-link"
        >
            <div class="askagento-ai-labelling-section">
                <p class="description askagento-ai-labelling-info" style="margin-top:0;margin-bottom:12px;max-width:52em;">
                    <strong><?php echo esc_html__('Info:', 'askagento'); ?></strong>
                    <?php echo esc_html__('Add missing tags only is available. Only manual upload is available.', 'askagento'); ?>
                </p>
                <h2><?php echo esc_html__('Step 1 of 3: Analyze', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php
                    echo wp_kses(
                        sprintf(
                            /* translators: 1: opening strong tag, 2: closing strong tag */
                            __('Review which catalogue products need %1$stag%2$s labelling before you generate or upload values.', 'askagento'),
                            '<strong>',
                            '</strong>'
                        ),
                        ['strong' => []]
                    );
                    ?>
                </p>
                <p class="description" style="margin:0 0 8px;max-width:52em;">
                    <?php echo esc_html__('Analyze uses max 10 products that are missing tags, plus existing tags from the catalog.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-footnote description" style="margin:0;max-width:52em;">
                    <?php echo esc_html__('Out of scope: price, sale state, stock, SKU, attributes, categories, weight, and shipping class.', 'askagento'); ?>
                </p>
                <p class="description" style="margin:8px 0 0;max-width:52em;font-style:italic;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-tags-analyze-btn">
                        <?php echo esc_html__('Analyze', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-tags-analyze-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
                <div id="askagento-ai-labelling-tags-canonical-wrap" style="display:none;margin-top:12px;max-width:52em;">
                    <p id="askagento-ai-labelling-canonical-tags-heading" style="margin:0 0 8px;font-weight:600;">
                        <?php echo esc_html__('Suggested canonical tags (edit before Generate)', 'askagento'); ?>
                    </p>
                    <div
                        id="askagento-ai-labelling-canonical-tags"
                        class="askagento-ai-labelling-canonical-list"
                        role="group"
                        aria-labelledby="askagento-ai-labelling-canonical-tags-heading"
                    ></div>
                    <p class="description" style="margin-top:6px;">
                        <?php echo esc_html__('Use the toggles to include or exclude each tag.', 'askagento'); ?>
                    </p>
                </div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 2 of 3: Generate', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:14px;max-width:52em;">
                    <?php echo esc_html__('Generation always uses both product images and product text.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-footnote description" style="margin:16px 0 0;max-width:52em;">
                    <?php echo esc_html__('This step consumes LLM tokens.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions askagento-ai-labelling-generate-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-tags-generate-btn" disabled>
                        <?php echo esc_html__('Generate', 'askagento'); ?>
                    </button>
                    <button type="button" class="button" id="askagento-export-generated-tags-json">
                        <?php echo esc_html__('Save JSON file to computer', 'askagento'); ?>
                    </button>
                </p>
                <p class="description" style="margin-top:8px;margin-bottom:0;max-width:52em;">
                    <?php echo esc_html__('Optional: save all generated tags from this site as a .json file.', 'askagento'); ?>
                </p>
                <div id="askagento-ai-labelling-tags-generate-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>

            <div class="askagento-ai-labelling-section">
                <h2><?php echo esc_html__('Step 3 of 3: Upload', 'askagento'); ?></h2>
                <p class="description" style="margin-top:0;margin-bottom:0;max-width:52em;">
                    <?php echo esc_html__('Apply generated tags to your catalogue.', 'askagento'); ?>
                </p>
                <p class="askagento-ai-labelling-section-actions">
                    <button type="button" class="button button-primary" id="askagento-ai-labelling-tags-upload-btn" disabled>
                        <?php echo esc_html__('Upload', 'askagento'); ?>
                    </button>
                </p>
                <div id="askagento-ai-labelling-tags-upload-out" class="askagento-ai-labelling-output" aria-live="polite"></div>
            </div>
        </div>

        <style>
            .askagento-ai-labelling-wrap h2.askagento-ai-labelling-tabs.nav-tab-wrapper {
                margin-top: 8px;
                margin-bottom: 0;
                max-width: 960px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-section {
                background: #fff;
                border: 1px solid #dcdcde;
                padding: 16px;
                margin: 0 0 16px;
                max-width: 960px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-section h2 {
                margin-top: 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-list {
                margin: 0 0 0 1.2em;
                max-width: 52em;
                line-height: 1.55;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-list li {
                margin-bottom: 10px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-list li:last-child {
                margin-bottom: 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-footnote {
                margin-top: 14px !important;
                padding-top: 12px;
                border-top: 1px solid #dcdcde;
                font-style: italic;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-fieldset {
                border: 0;
                padding: 0;
                margin: 0;
                max-width: 52em;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-legend {
                font-weight: 600;
                padding: 0;
                margin: 0 0 10px;
                font-size: 14px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-choice {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                margin: 0 0 12px;
                font-weight: 600;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-choice:last-of-type {
                margin-bottom: 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-choice input {
                margin-top: 3px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-choice-label {
                font-weight: 600;
                line-height: 1.45;
            }
            .askagento-ai-labelling-wrap .description strong,
            .askagento-ai-labelling-wrap .askagento-ai-labelling-footnote strong,
            .askagento-ai-labelling-wrap .askagento-ai-labelling-max-row label strong {
                font-weight: 700;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-max-row {
                margin-top: 20px;
                padding-top: 16px;
                border-top: 1px solid #dcdcde;
                max-width: 52em;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-max-row label {
                display: block;
                margin-bottom: 8px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-section-actions {
                margin: 16px 0 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-generate-actions {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                width: 100%;
                max-width: 100%;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-generate-actions #askagento-export-generated-attributes-json,
            .askagento-ai-labelling-wrap .askagento-ai-labelling-generate-actions #askagento-export-generated-categories-json,
            .askagento-ai-labelling-wrap .askagento-ai-labelling-generate-actions #askagento-export-generated-tags-json {
                margin-left: auto;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-output {
                margin-top: 10px;
                font-size: 13px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-output ul {
                margin: 0 0 0 1.2em;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-output .askagento-status-ok {
                color: #1d7f1d;
                font-weight: 600;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-output .askagento-ai-labelling-batch-note {
                margin: 10px 0 0;
                padding: 8px 12px;
                border-left: 4px solid #2271b1;
                background: #f0f6fc;
                font-weight: 600;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-working {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 4px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-spinner {
                box-sizing: border-box;
                width: 18px;
                height: 18px;
                flex-shrink: 0;
                border: 2px solid rgba(0, 0, 0, 0.12);
                border-top-color: #2271b1;
                border-radius: 50%;
                animation: askagento-ai-labelling-spin 0.65s linear infinite;
            }
            @keyframes askagento-ai-labelling-spin {
                to {
                    transform: rotate(360deg);
                }
            }
            @media (prefers-color-scheme: dark) {
                .askagento-ai-labelling-wrap .askagento-ai-labelling-spinner {
                    border-color: rgba(255, 255, 255, 0.2);
                    border-top-color: #72aee6;
                }
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-canonical-list {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-labelling-canonical-item .askagento-ai-text-live-switch-wrap {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 12px 16px;
                margin: 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                margin: 0;
                cursor: pointer;
                user-select: none;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__input {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__track {
                position: relative;
                flex-shrink: 0;
                width: 48px;
                height: 26px;
                background: #c3c4c7;
                border-radius: 13px;
                transition: background 0.2s ease;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__thumb {
                position: absolute;
                top: 3px;
                left: 3px;
                width: 20px;
                height: 20px;
                background: #fff;
                border-radius: 50%;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
                transition: transform 0.2s ease;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__input:checked + .askagento-ai-text-live-switch__track {
                background: #2271b1;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__input:checked + .askagento-ai-text-live-switch__track .askagento-ai-text-live-switch__thumb {
                transform: translateX(22px);
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__input:focus-visible + .askagento-ai-text-live-switch__track {
                outline: 2px solid #2271b1;
                outline-offset: 2px;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__text {
                font-weight: 600;
                font-size: 14px;
                line-height: 1.3;
                color: #1d2327;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch__state {
                font-size: 13px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: #646970;
                min-width: 2.5em;
            }
            .askagento-ai-labelling-wrap .askagento-ai-text-live-switch-wrap--on .askagento-ai-text-live-switch__state {
                color: #2271b1;
            }
        </style>
    </div>
    <?php
}
