<?php

if (!defined('ABSPATH')) { exit; }
?>
<style id="aieo-dmm-swatches-admin-css">
/* ────────────────────────────────────────────────────────────────────
 * Swatches admin styling — kept inline (not enqueued) so it ships on
 * every render of this template regardless of asset pipeline order
 * (some admin pages defer wp_enqueue_scripts past template rendering,
 * dropping our inline-style handle on the floor).
 * ──────────────────────────────────────────────────────────────────── */

/* Appearance tables (Color / Button / Image swatches) — three-column
   layout: label | Product page | Archive. Forced equal proportions so
   the two value columns don't stretch unevenly. */
.aieo-swatch-styling{
    margin-top:8px;
    border:1px solid #e2e8f0;
    border-radius:6px;
    background:#fff;
    table-layout:fixed;
    width:100%;
}
.aieo-swatch-styling colgroup col:first-child{width:260px;}
.aieo-swatch-styling thead th{
    font-weight:600;color:#1f2937;padding:10px 12px;
    background:#f8fafc;border-bottom:1px solid #e2e8f0;
    text-align:left;
}
.aieo-swatch-styling tbody td,
.aieo-swatch-styling tbody th{
    padding:8px 12px;vertical-align:middle;
    border-bottom:1px solid #f1f5f9;
    white-space:nowrap;
}
.aieo-swatch-styling tbody tr:last-child td,
.aieo-swatch-styling tbody tr:last-child th{border-bottom:none;}
.aieo-swatch-styling tbody th{font-weight:500;color:#374151;}

/* Crank input widths back to a sensible compact size. !important is
   needed because wp-admin's `form-table input[type="number"]` rule + a
   handful of mu-plugin admin stylesheets we don't control all hit this
   element with `width:100%` or `width:25em`. Targeting the specific
   table class means non-swatch admin pages are unaffected. */
.aieo-swatch-styling input[type="number"]{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    display:inline-block;
    vertical-align:middle;
    margin:0 4px 0 0;
    padding:4px 6px;
    box-sizing:border-box;
}
.aieo-swatch-styling input[type="text"].aieo-color-input{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
    display:inline-block;
    vertical-align:middle;
    margin:0 4px 0 0;
}

/* Inline text bits between inputs (px / "/" / hints) — keep them on
   the same line as the input. The "px" labels in the markup are bare
   text nodes inside the td, not in spans, so we rely on white-space:
   nowrap on the td plus inline-block on adjacent .description spans. */
.aieo-swatch-styling td .description{
    display:inline-block;
    vertical-align:middle;
    margin-left:6px;
    color:#6b7280;
    font-size:12px;
    white-space:normal; /* allow long help text to wrap inside its own block */
    max-width:340px;
}

/* Color picker — the wp-color-picker wraps the input in nested divs.
   Make that wrapper sit inline cleanly alongside the px-spinner. */
.aieo-swatch-styling .wp-picker-container{
    display:inline-flex;
    align-items:center;
    gap:2px;
    margin-left:4px;
    vertical-align:middle;
}
.aieo-swatch-styling .wp-picker-container .wp-picker-input-wrap input.wp-color-picker{
    width:84px;
}
.aieo-swatch-styling .wp-picker-container .wp-color-result{
    height:26px;min-height:26px;line-height:24px;padding:0 0 0 30px;
}
.aieo-swatch-styling .wp-picker-container .wp-color-result-text{
    padding:0 6px;line-height:24px;font-size:11px;
}
.aieo-swatch-styling .wp-picker-active .wp-picker-holder{
    position:absolute;z-index:30;
}

/* Labels and checkboxes that share a cell — display them as block
   stacks (one per line) instead of running into each other. */
.aieo-swatch-styling td label{display:inline-block;margin-right:14px;line-height:1.8;}
.aieo-swatch-styling td label input[type="checkbox"]{margin-right:6px;}
</style>
<div class="aieo-dmm-section">
    <h2><?php esc_html_e('Product Swatches', 'ai-eshop-optimizer'); ?></h2>
    <p class="description">
        <?php esc_html_e('High-performance variation swatches for variable products. The cache stores a denormalized snapshot of each variable product’s variations (one row per product × context) so the shop archive can render swatches without instantiating WooCommerce variation objects on every page view.', 'ai-eshop-optimizer'); ?>
    </p>
</div>

<div class="aieo-dmm-section aieo-dmm-swatches-monitoring">
    <h3><?php esc_html_e('Cache monitoring', 'ai-eshop-optimizer'); ?></h3>

    <table class="widefat striped aieo-table" id="aieo-dmm-swatches-stats">
        <tbody>
            <tr>
                <th style="width:260px;"><?php esc_html_e('Cache rows', 'ai-eshop-optimizer'); ?></th>
                <td>
                    <span data-stat="cache_rows"><?php echo (int) $stats['cache_rows']; ?></span>
                    <span class="description">
                        <?php
                        printf(
                            
                            esc_html__('(%d variable products × 2 contexts = target).', 'ai-eshop-optimizer'),
                            (int) $stats['variable_products']
                        );
                        ?>
                    </span>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e('Variation map rows', 'ai-eshop-optimizer'); ?></th>
                <td><span data-stat="map_rows"><?php echo (int) $stats['map_rows']; ?></span></td>
            </tr>
            <tr>
                <th><?php esc_html_e('Coverage', 'ai-eshop-optimizer'); ?></th>
                <td><span data-stat="coverage_pct"><?php echo esc_html((string) $stats['coverage_pct']); ?></span>%</td>
            </tr>
            <tr>
                <th><?php esc_html_e('Stale rows', 'ai-eshop-optimizer'); ?></th>
                <td>
                    <span data-stat="stale_rows"><?php echo (int) $stats['stale_rows']; ?></span>
                    <span class="description"><?php esc_html_e('Rows whose settings hash no longer matches — they’ll rebuild lazily on first frontend hit.', 'ai-eshop-optimizer'); ?></span>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e('Last rebuild', 'ai-eshop-optimizer'); ?></th>
                <td><span data-stat="last_built_at"><?php echo esc_html((string) ($stats['last_built_at'] ?: '—')); ?></span></td>
            </tr>
            <tr>
                <th><?php esc_html_e('External object cache', 'ai-eshop-optimizer'); ?></th>
                <td>
                    <?php if (!empty($stats['object_cache'])) : ?>
                        <span style="color:#1e8e3e;">&#10003; <?php esc_html_e('Active', 'ai-eshop-optimizer'); ?></span>
                    <?php else : ?>
                        <span style="color:#888;">&#8212; <?php esc_html_e('Not detected', 'ai-eshop-optimizer'); ?></span>
                    <?php endif; ?>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e('Legacy plugin active', 'ai-eshop-optimizer'); ?></th>
                <td>
                    <?php if (!empty($stats['legacy_plugin_active'])) : ?>
                        <span style="color:#1e8e3e;">&#10003; <?php esc_html_e('om-product-swatches is loaded (shadow-write target)', 'ai-eshop-optimizer'); ?></span>
                    <?php else : ?>
                        <span style="color:#888;"><?php esc_html_e('om-product-swatches not loaded', 'ai-eshop-optimizer'); ?></span>
                    <?php endif; ?>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e('AIEO runtime renderer', 'ai-eshop-optimizer'); ?></th>
                <td>
                    <label class="aieo-dmm-choice">
                        <input type="checkbox" id="aieo-dmm-swatches-runtime-toggle" <?php checked(!empty($stats['runtime_enabled'])); ?>>
                        <?php esc_html_e('Use AIEO runtime to render swatches (disables the legacy frontend)', 'ai-eshop-optimizer'); ?>
                    </label>
                    <p class="description">
                        <?php esc_html_e('When on, shop-archive + single-product swatches are rendered from the aieo cache tables. When off, om-product-swatches stays authoritative and AIEO only shadow-writes cache rows.', 'ai-eshop-optimizer'); ?>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

    <p class="submit" style="margin-top:16px;">
        <button type="button" class="button button-primary" id="aieo-dmm-swatches-rebuild">
            <?php esc_html_e('Rebuild all', 'ai-eshop-optimizer'); ?>
        </button>
        <button type="button" class="button" id="aieo-dmm-swatches-clear">
            <?php esc_html_e('Clear cache', 'ai-eshop-optimizer'); ?>
        </button>
        <button type="button" class="button" id="aieo-dmm-swatches-migrate">
            <?php esc_html_e('Migrate from legacy', 'ai-eshop-optimizer'); ?>
        </button>
        <button type="button" class="button" id="aieo-dmm-swatches-refresh-stats">
            <?php esc_html_e('Refresh stats', 'ai-eshop-optimizer'); ?>
        </button>
    </p>
</div>

<div class="aieo-dmm-section aieo-dmm-colour-context">
    <h3><?php esc_html_e('Colour context (SEO & feeds)', 'ai-eshop-optimizer'); ?></h3>
    <p class="description">
        <?php esc_html_e('Mark which swatch attributes represent a product COLOUR. For each flagged attribute, the variation’s term name (e.g. “French Caramel”) is written into the product colour used by the SEO product schema and the marketplace feeds. You can also tick “AIEO colour context” on a single attribute under Products → Attributes.', 'ai-eshop-optimizer'); ?>
    </p>
    <p>
        <strong><?php esc_html_e('Attributes flagged as colour:', 'ai-eshop-optimizer'); ?></strong>
        <span data-stat="colour_flags"><?php echo isset($module) ? (int) $module->get_colour_flag_count() : 0; ?></span>
    </p>
    <p class="submit" style="margin-top:8px;">
        <button type="button" class="button button-primary" id="aieo-dmm-colour-flag-image">
            <?php esc_html_e('Flag all image swatches as colour', 'ai-eshop-optimizer'); ?>
        </button>
        <button type="button" class="button" id="aieo-dmm-colour-clear">
            <?php esc_html_e('Clear all colour flags', 'ai-eshop-optimizer'); ?>
        </button>
    </p>
    <p class="description">
        <?php esc_html_e('After changing flags, run the data-prep pipeline (Catalog Sync → Data prep schedule → Run now), or wait for the hourly build, so colours repopulate into the product vitals.', 'ai-eshop-optimizer'); ?>
    </p>
</div>

<div class="aieo-dmm-section">
    <h3><?php esc_html_e('Core settings', 'ai-eshop-optimizer'); ?></h3>
    <p class="description">
        <?php
        if (class_exists('OM_Product_Swatches')) {
            printf(
                wp_kses(
                    
                    __('Full styling settings (colors, widths, borders, limits) remain editable on the legacy %s page during cutover. The toggles below are the most-used operational settings.', 'ai-eshop-optimizer'),
                    array('a' => array('href' => array(), 'target' => array()))
                ),
                '<a href="' . esc_url(admin_url('admin.php?page=om-product-swatches')) . '" target="_blank">' . esc_html__('WooCommerce → Product Swatches', 'ai-eshop-optimizer') . '</a>'
            );
        } else {
            esc_html_e('Full styling settings will be ported to this page in a future release; for now the toggles below cover the main operational switches.', 'ai-eshop-optimizer');
        }
        ?>
    </p>

    <form id="aieo-dmm-swatches-form" class="aieo-dmm-form">
        <h4><?php esc_html_e('General', 'ai-eshop-optimizer'); ?></h4>
        <table class="form-table">
            <tbody>
                <tr>
                    <th><?php esc_html_e('Master switch', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="enabled" value="yes" <?php checked($settings['enabled'] ?? 'yes', 'yes'); ?>>
                            <?php esc_html_e('Swatches enabled', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Show on shop / archive', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="on_shop_catalog" value="1" <?php checked(!empty($settings['on_shop_catalog'])); ?>>
                            <?php esc_html_e('Render swatches on product archive / category pages', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Variation name under product title', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="display_variation_name_on_product_title" value="1" <?php checked(!empty($settings['display_variation_name_on_product_title'])); ?>>
                            <?php esc_html_e('On the product page, show the selected variation’s description + attribute under the title (e.g. “No100 Fair - Ανοιχτόχρωμο”). Read instantly from the preloaded swatch cache.', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Archive swatch limit (desktop)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_swatch_limit_desktop" min="1" max="20" class="small-text"
                               value="<?php echo esc_attr((string) ($settings['image_swatch_limit_desktop'] ?? 5)); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Archive swatch limit (mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_swatch_limit_mobile" min="1" max="20" class="small-text"
                               value="<?php echo esc_attr((string) ($settings['image_swatch_limit_mobile'] ?? 3)); ?>">
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('Multi-select add-to-cart', 'ai-eshop-optimizer'); ?></h4>
        <p class="description">
            <?php esc_html_e('When enabled, shoppers can tick multiple variations on a single product and add them all in one request. Choose which display style the single-product page uses (grid of image swatches or a dropdown list) and, optionally, restrict multi-select to specific categories.', 'ai-eshop-optimizer'); ?>
        </p>
        <table class="form-table">
            <tbody>
                <tr>
                    <th><?php esc_html_e('Enable multi-select', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="multi_select_enabled" value="1" <?php checked(!empty($settings['multi_select_enabled'])); ?>>
                            <?php esc_html_e('Allow ticking multiple variations and adding them in one request', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Default display style', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="multi_select_display_style">
                            <option value="grid"     <?php selected(($settings['multi_select_display_style'] ?? 'grid'), 'grid'); ?>><?php esc_html_e('Grid of image swatches', 'ai-eshop-optimizer'); ?></option>
                            <option value="dropdown" <?php selected(($settings['multi_select_display_style'] ?? 'grid'), 'dropdown'); ?>><?php esc_html_e('Dropdown list', 'ai-eshop-optimizer'); ?></option>
                        </select>
                        <span class="description"><?php esc_html_e('Can be overridden per-category below.', 'ai-eshop-optimizer'); ?></span>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Show quantity input in dropdown mode', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="multi_select_show_quantity" value="1" <?php checked(!empty($settings['multi_select_show_quantity'])); ?>>
                            <?php esc_html_e('Add a qty field next to each row in the dropdown list', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('“Add selected” button', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="multi_select_button_text" class="regular-text"
                               value="<?php echo esc_attr((string) ($settings['multi_select_button_text'] ?? 'Add Selected to Cart')); ?>">
                        <br><br>
                        <select name="multi_select_button_position">
                            <option value="above" <?php selected(($settings['multi_select_button_position'] ?? 'above'), 'above'); ?>><?php esc_html_e('Button above the swatches / list', 'ai-eshop-optimizer'); ?></option>
                            <option value="below" <?php selected(($settings['multi_select_button_position'] ?? 'above'), 'below'); ?>><?php esc_html_e('Button below the swatches / list', 'ai-eshop-optimizer'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Cart sync', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="cart_sync_enabled" value="1" <?php checked(!empty($settings['cart_sync_enabled'])); ?>>
                            <?php esc_html_e('Highlight variations that are already in the shopper’s cart', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('“In cart” summary badge', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="cart_summary_visible" value="1" <?php checked(!empty($settings['cart_summary_visible'])); ?>>
                            <?php esc_html_e('Show the “X items in cart — View details” summary above each product card and on product pages', 'ai-eshop-optimizer'); ?>
                        </label>
                        <p class="description"><?php esc_html_e('Independent of the swatch highlight above. Turn this off if the badge clutters product cards but you still want the in-cart green border on swatches.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Cart / mini-cart image source', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="cart_variation_image">
                            <option value="swatch"    <?php selected(($settings['cart_variation_image'] ?? 'swatch'), 'swatch');    ?>><?php esc_html_e('Variation swatch image', 'ai-eshop-optimizer'); ?></option>
                            <option value="variation" <?php selected(($settings['cart_variation_image'] ?? 'swatch'), 'variation'); ?>><?php esc_html_e('Variation gallery image', 'ai-eshop-optimizer'); ?></option>
                            <option value="gallery"   <?php selected(($settings['cart_variation_image'] ?? 'swatch'), 'gallery');   ?>><?php esc_html_e('Parent gallery image', 'ai-eshop-optimizer'); ?></option>
                            <option value="product"   <?php selected(($settings['cart_variation_image'] ?? 'swatch'), 'product');   ?>><?php esc_html_e('Parent product image', 'ai-eshop-optimizer'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Per-variation Add-to-cart text', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <label class="aieo-dmm-choice">
                            <input type="checkbox" name="track_per_variation_atc" value="1" <?php checked(!empty($settings['track_per_variation_atc'])); ?>>
                            <?php esc_html_e('Update the variable PDP “Add to cart” button + +N badge per variation chip pick', 'ai-eshop-optimizer'); ?>
                        </label>
                        <p class="description">
                            <?php esc_html_e('Off (default): any variation in cart → button shows the “in cart” label and the +N badge counts every variation aggregated under the parent. On: the button text + badge re-render every time the shopper picks a different chip and reflect that specific variation’s cart qty (zero if that variation is not in cart). Pairs with the Add-to-Cart Text labels under DMM → Add-to-Cart Text.', 'ai-eshop-optimizer'); ?>
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('Per-category overrides', 'ai-eshop-optimizer'); ?></h4>
        <p class="description">
            <?php esc_html_e('Select which categories use multi-select, and how — grid style, dropdown style, or dropdown with quantity input. A product in a category listed in "Dropdown style" uses the dropdown regardless of the default style above.', 'ai-eshop-optimizer'); ?>
        </p>
        <table class="form-table">
            <tbody>
                <tr>
                    <th><?php esc_html_e('Only multi-select these categories', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="multi_select_categories[]" multiple class="aieo-dmm-swatches-cat-select regular-text" style="width:100%;"
                                data-selected="<?php echo esc_attr(wp_json_encode($settings['multi_select_categories'] ?? array())); ?>">
                        </select>
                        <p class="description"><?php esc_html_e('Leave empty to apply to every category.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Grid-style categories', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="grid_style_categories[]" multiple class="aieo-dmm-swatches-cat-select regular-text" style="width:100%;"
                                data-selected="<?php echo esc_attr(wp_json_encode($settings['grid_style_categories'] ?? array())); ?>">
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Dropdown-style categories', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="dropdown_style_categories[]" multiple class="aieo-dmm-swatches-cat-select regular-text" style="width:100%;"
                                data-selected="<?php echo esc_attr(wp_json_encode($settings['dropdown_style_categories'] ?? array())); ?>">
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Dropdown + qty categories', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="quantity_selector_categories[]" multiple class="aieo-dmm-swatches-cat-select regular-text" style="width:100%;"
                                data-selected="<?php echo esc_attr(wp_json_encode($settings['quantity_selector_categories'] ?? array())); ?>">
                        </select>
                        <p class="description"><?php esc_html_e('Subset of dropdown-style categories where the row includes a quantity input.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('Color swatches — appearance', 'ai-eshop-optimizer'); ?></h4>
        <p class="description">
            <?php esc_html_e('Applied to color-type variation attributes. Product page = single product view. Archive = shop/category cards. All sizes in pixels, all colors in hex (e.g. #212121) or CSS color names.', 'ai-eshop-optimizer'); ?>
        </p>
        <table class="form-table aieo-swatch-styling">
            <thead>
                <tr>
                    <th style="width:260px;"></th>
                    <th><?php esc_html_e('Product page', 'ai-eshop-optimizer'); ?></th>
                    <th><?php esc_html_e('Archive / shop', 'ai-eshop-optimizer'); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th><?php esc_html_e('Width', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="color_width"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_width']              ?? 24)); ?>"> px</td>
                    <td><input type="number" name="color_width_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_width_shop_archive'] ?? 18)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Height', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="color_height"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_height']              ?? 24)); ?>"> px</td>
                    <td><input type="number" name="color_height_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_height_shop_archive'] ?? 18)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Gap', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="color_gap"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_gap']              ?? 8)); ?>"> px</td>
                    <td><input type="number" name="color_gap_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_gap_shop_archive'] ?? 6)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border radius', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="color_border_radius"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_radius']              ?? 50)); ?>"> px</td>
                    <td><input type="number" name="color_border_radius_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_radius_shop_archive'] ?? 50)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (default)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="color_border_size"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size']  ?? 1)); ?>"> px
                        <input type="text"   name="color_border_color" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color'] ?? '#dedede')); ?>">
                    </td>
                    <td>
                        <input type="number" name="color_border_size_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size_shop_archive']  ?? 1)); ?>"> px
                        <input type="text"   name="color_border_color_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color_shop_archive'] ?? '#dedede')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (hover)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="color_border_size_hover"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size_hover']  ?? 2)); ?>"> px
                        <input type="text"   name="color_border_color_hover" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color_hover'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="number" name="color_border_size_hover_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size_hover_shop_archive']  ?? 2)); ?>"> px
                        <input type="text"   name="color_border_color_hover_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color_hover_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (selected)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="color_border_size_selected"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size_selected']  ?? 2)); ?>"> px
                        <input type="text"   name="color_border_color_selected" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color_selected'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="number" name="color_border_size_selected_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['color_border_size_selected_shop_archive']  ?? 2)); ?>"> px
                        <input type="text"   name="color_border_color_selected_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['color_border_color_selected_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Swatch limit (desktop / mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <input type="number" name="color_swatch_limit_desktop" class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['color_swatch_limit_desktop'] ?? 5)); ?>"> /
                        <input type="number" name="color_swatch_limit_mobile"  class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['color_swatch_limit_mobile']  ?? 3)); ?>">
                        <span class="description"><?php esc_html_e('Archive-only cap. 0 = unlimited.', 'ai-eshop-optimizer'); ?></span>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('Button swatches — appearance', 'ai-eshop-optimizer'); ?></h4>
        <p class="description">
            <?php esc_html_e('Applied to button-type variation attributes (the "text label" style, e.g. sizes S / M / L).', 'ai-eshop-optimizer'); ?>
        </p>
        <table class="form-table aieo-swatch-styling">
            <thead>
                <tr>
                    <th style="width:260px;"></th>
                    <th><?php esc_html_e('Product page', 'ai-eshop-optimizer'); ?></th>
                    <th><?php esc_html_e('Archive / shop', 'ai-eshop-optimizer'); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th><?php esc_html_e('Text colour (default / hover / selected)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="button_text_color"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color']          ?? '#212121')); ?>">
                        <input type="text" name="button_text_color_hover"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color_hover']    ?? '#ffffff')); ?>">
                        <input type="text" name="button_text_color_selected" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color_selected'] ?? '#ffffff')); ?>">
                    </td>
                    <td>
                        <input type="text" name="button_text_color_shop_archive"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color_shop_archive']          ?? '#212121')); ?>">
                        <input type="text" name="button_text_color_hover_shop_archive"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color_hover_shop_archive']    ?? '#ffffff')); ?>">
                        <input type="text" name="button_text_color_selected_shop_archive" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_text_color_selected_shop_archive'] ?? '#ffffff')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Background (default / hover / selected)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="button_bg_color"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color']          ?? '#ffffff')); ?>">
                        <input type="text" name="button_bg_color_hover"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color_hover']    ?? '#212121')); ?>">
                        <input type="text" name="button_bg_color_selected" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color_selected'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="text" name="button_bg_color_shop_archive"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color_shop_archive']          ?? '#ffffff')); ?>">
                        <input type="text" name="button_bg_color_hover_shop_archive"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color_hover_shop_archive']    ?? '#212121')); ?>">
                        <input type="text" name="button_bg_color_selected_shop_archive" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_bg_color_selected_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border colour (default / hover / selected)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="button_border_color"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color']          ?? '#212121')); ?>">
                        <input type="text" name="button_border_color_hover"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color_hover']    ?? '#212121')); ?>">
                        <input type="text" name="button_border_color_selected" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color_selected'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="text" name="button_border_color_shop_archive"          class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color_shop_archive']          ?? '#212121')); ?>">
                        <input type="text" name="button_border_color_hover_shop_archive"    class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color_hover_shop_archive']    ?? '#212121')); ?>">
                        <input type="text" name="button_border_color_selected_shop_archive" class="regular-text aieo-color-input" style="width:90px;" value="<?php echo esc_attr((string) ($settings['button_border_color_selected_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border size / radius', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="button_border_size"   class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_border_size']   ?? 1)); ?>"> px /
                        <input type="number" name="button_border_radius" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_border_radius'] ?? 5)); ?>"> px
                    </td>
                    <td>
                        <input type="number" name="button_border_size_shop_archive"   class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_border_size_shop_archive']   ?? 1)); ?>"> px /
                        <input type="number" name="button_border_radius_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_border_radius_shop_archive'] ?? 5)); ?>"> px
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Padding (top / right / bottom / left)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="button_padding_top"    class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_top']    ?? 8));  ?>">
                        <input type="number" name="button_padding_right"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_right']  ?? 12)); ?>">
                        <input type="number" name="button_padding_bottom" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_bottom'] ?? 8));  ?>">
                        <input type="number" name="button_padding_left"   class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_left']   ?? 12)); ?>">
                    </td>
                    <td>
                        <input type="number" name="button_padding_top_shop_archive"    class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_top_shop_archive']    ?? 6));  ?>">
                        <input type="number" name="button_padding_right_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_right_shop_archive']  ?? 10)); ?>">
                        <input type="number" name="button_padding_bottom_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_bottom_shop_archive'] ?? 6));  ?>">
                        <input type="number" name="button_padding_left_shop_archive"   class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_left_shop_archive']   ?? 10)); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Gap between swatches', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="button_gap"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_gap']              ?? 8)); ?>"> px</td>
                    <td><input type="number" name="button_gap_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_gap_shop_archive'] ?? 6)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Mobile padding override (top / right / bottom / left)', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <input type="number" name="button_padding_top_mobile"    class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_top_mobile']    ?? 4)); ?>">
                        <input type="number" name="button_padding_right_mobile"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_right_mobile']  ?? 8)); ?>">
                        <input type="number" name="button_padding_bottom_mobile" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_bottom_mobile'] ?? 4)); ?>">
                        <input type="number" name="button_padding_left_mobile"   class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['button_padding_left_mobile']   ?? 8)); ?>"> px
                        <input type="number" name="button_font_size_mobile"      class="small-text" min="6" max="20" value="<?php echo esc_attr((string) ($settings['button_font_size_mobile']      ?? 11)); ?>" style="margin-left:14px;"> px
                        <span class="description"><?php esc_html_e('Padding + font-size applied via @media (max-width: 600px) — keeps button labels like "200ml" readable on small thumbnails.', 'ai-eshop-optimizer'); ?></span>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Stack vertically on archive cards', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <label>
                            <input type="checkbox" name="button_stack_vertical_archive" value="1" <?php checked(!empty($settings['button_stack_vertical_archive'])); ?>>
                            <?php esc_html_e('Render button swatches as a vertical column on the left side of the archive card (matches the image-swatch layout).', 'ai-eshop-optimizer'); ?>
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Circular buttons on archive', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <label style="display:block;margin-bottom:6px;">
                            <input type="checkbox" name="button_circle_archive" value="1" <?php checked(!empty($settings['button_circle_archive'])); ?>>
                            <?php esc_html_e('Render archive button swatches as fixed-size circles (e.g. "100ml" inside a 36px disc, matching the wishlist heart visual).', 'ai-eshop-optimizer'); ?>
                        </label>
                        <span class="description"><?php esc_html_e('Diameter / Font size:', 'ai-eshop-optimizer'); ?></span>
                        <input type="number" name="button_circle_diameter_archive" class="small-text" min="20" max="80" value="<?php echo esc_attr((string) ($settings['button_circle_diameter_archive'] ?? 36)); ?>"> px /
                        <input type="number" name="button_font_size_shop_archive"  class="small-text" min="6" max="20" value="<?php echo esc_attr((string) ($settings['button_font_size_shop_archive']  ?? 11)); ?>"> px
                        <p class="description" style="margin:4px 0 0;font-size:11px;">
                            <?php esc_html_e('Diameter applies to width AND height. Font-size scales the label. Long labels (e.g. "1000ml") may need a larger diameter or a smaller font.', 'ai-eshop-optimizer'); ?>
                        </p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Swatch limit (desktop / mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <input type="number" name="button_swatch_limit_desktop" class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['button_swatch_limit_desktop'] ?? 5)); ?>"> /
                        <input type="number" name="button_swatch_limit_mobile"  class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['button_swatch_limit_mobile']  ?? 3)); ?>">
                        <span class="description"><?php esc_html_e('Archive-only cap.', 'ai-eshop-optimizer'); ?></span>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('Image swatches — appearance', 'ai-eshop-optimizer'); ?></h4>
        <p class="description">
            <?php esc_html_e('Applied to image-type variation attributes. Each term can set its own image; unset terms fall back to the variation image.', 'ai-eshop-optimizer'); ?>
        </p>
        <table class="form-table aieo-swatch-styling">
            <thead>
                <tr>
                    <th style="width:260px;"></th>
                    <th><?php esc_html_e('Product page', 'ai-eshop-optimizer'); ?></th>
                    <th><?php esc_html_e('Archive / shop', 'ai-eshop-optimizer'); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th><?php esc_html_e('Width (desktop / mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_width"        class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_width']        ?? 40)); ?>"> /
                        <input type="number" name="image_width_mobile" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_width_mobile'] ?? 32)); ?>"> px
                    </td>
                    <td>
                        <input type="number" name="image_width_shop_archive"        class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_width_shop_archive']        ?? 26)); ?>"> /
                        <input type="number" name="image_width_shop_archive_mobile" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_width_shop_archive_mobile'] ?? 22)); ?>"> px
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Height (desktop / mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_height"        class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_height']        ?? 40)); ?>"> /
                        <input type="number" name="image_height_mobile" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_height_mobile'] ?? 32)); ?>"> px
                    </td>
                    <td>
                        <input type="number" name="image_height_shop_archive"        class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_height_shop_archive']        ?? 26)); ?>"> /
                        <input type="number" name="image_height_shop_archive_mobile" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_height_shop_archive_mobile'] ?? 22)); ?>"> px
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Gap', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="image_gap"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_gap']              ?? 8)); ?>"> px</td>
                    <td><input type="number" name="image_gap_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_gap_shop_archive'] ?? 6)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border radius', 'ai-eshop-optimizer'); ?></th>
                    <td><input type="number" name="image_border_radius"              class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_radius']              ?? 0)); ?>"> px</td>
                    <td><input type="number" name="image_border_radius_shop_archive" class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_radius_shop_archive'] ?? 0)); ?>"> px</td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (default)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_border_size"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size']  ?? 1)); ?>"> px
                        <input type="text"   name="image_border_color" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color'] ?? '#dedede')); ?>">
                    </td>
                    <td>
                        <input type="number" name="image_border_size_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size_shop_archive']  ?? 1)); ?>"> px
                        <input type="text"   name="image_border_color_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color_shop_archive'] ?? '#dedede')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (hover)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_border_size_hover"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size_hover']  ?? 2)); ?>"> px
                        <input type="text"   name="image_border_color_hover" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color_hover'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="number" name="image_border_size_hover_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size_hover_shop_archive']  ?? 2)); ?>"> px
                        <input type="text"   name="image_border_color_hover_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color_hover_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Border (selected)', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="number" name="image_border_size_selected"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size_selected']  ?? 2)); ?>"> px
                        <input type="text"   name="image_border_color_selected" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color_selected'] ?? '#212121')); ?>">
                    </td>
                    <td>
                        <input type="number" name="image_border_size_selected_shop_archive"  class="small-text" min="0" value="<?php echo esc_attr((string) ($settings['image_border_size_selected_shop_archive']  ?? 2)); ?>"> px
                        <input type="text"   name="image_border_color_selected_shop_archive" class="regular-text aieo-color-input" style="width:110px;" value="<?php echo esc_attr((string) ($settings['image_border_color_selected_shop_archive'] ?? '#212121')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Loading strategy', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <select name="image_loading_strategy">
                            <?php $strat = $settings['image_loading_strategy'] ?? 'lazy'; ?>
                            <option value="lazy"  <?php selected($strat, 'lazy');  ?>><?php esc_html_e('Lazy (default)', 'ai-eshop-optimizer'); ?></option>
                            <option value="eager" <?php selected($strat, 'eager'); ?>><?php esc_html_e('Eager', 'ai-eshop-optimizer'); ?></option>
                            <option value="auto"  <?php selected($strat, 'auto');  ?>><?php esc_html_e('Auto', 'ai-eshop-optimizer'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Swatch limit (desktop / mobile)', 'ai-eshop-optimizer'); ?></th>
                    <td colspan="2">
                        <input type="number" name="image_swatch_limit_desktop" class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['image_swatch_limit_desktop'] ?? 5)); ?>"> /
                        <input type="number" name="image_swatch_limit_mobile"  class="small-text" min="1" max="20" value="<?php echo esc_attr((string) ($settings['image_swatch_limit_mobile']  ?? 3)); ?>">
                        <span class="description"><?php esc_html_e('Archive-only cap. Also controls the archive cache row size.', 'ai-eshop-optimizer'); ?></span>
                    </td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin-top:24px;"><?php esc_html_e('“See all variations” modal (archive)', 'ai-eshop-optimizer'); ?></h4>
        <table class="form-table">
            <tbody>
                <tr>
                    <th><?php esc_html_e('Trigger display', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <select name="see_all_display_mode">
                            <option value="swatches_only" <?php selected(($settings['see_all_display_mode'] ?? 'swatches_only'), 'swatches_only'); ?>><?php esc_html_e('Extra swatch with “+N more” badge', 'ai-eshop-optimizer'); ?></option>
                            <option value="text_only"     <?php selected(($settings['see_all_display_mode'] ?? 'swatches_only'), 'text_only'); ?>><?php esc_html_e('Plain text link', 'ai-eshop-optimizer'); ?></option>
                            <option value="both"          <?php selected(($settings['see_all_display_mode'] ?? 'swatches_only'), 'both'); ?>><?php esc_html_e('Both swatch + text link', 'ai-eshop-optimizer'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Trigger text', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="see_all_text" class="regular-text"
                               value="<?php echo esc_attr((string) ($settings['see_all_text'] ?? 'See all {count} variations')); ?>">
                        <p class="description"><?php esc_html_e('Use {count} as a placeholder for the total variation count.', 'ai-eshop-optimizer'); ?></p>
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('Modal title', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="see_all_modal_title" class="regular-text"
                               value="<?php echo esc_attr((string) ($settings['see_all_modal_title'] ?? 'All Variations')); ?>">
                    </td>
                </tr>
                <tr>
                    <th><?php esc_html_e('“View product page” link text', 'ai-eshop-optimizer'); ?></th>
                    <td>
                        <input type="text" name="see_all_view_product_text" class="regular-text"
                               value="<?php echo esc_attr((string) ($settings['see_all_view_product_text'] ?? 'View product page')); ?>">
                    </td>
                </tr>
            </tbody>
        </table>

        <p class="submit">
            <button type="submit" class="button button-primary"><?php esc_html_e('Save settings', 'ai-eshop-optimizer'); ?></button>
        </p>
    </form>
</div>

<script>
jQuery(function($) {
    var $stats = $('#aieo-dmm-swatches-stats');

    function post(action, data, cb) {
        data = data || {};
        data.action = action;
        data.nonce  = window.aieoDmm && aieoDmm.nonce;
        $.post(window.ajaxurl, data, function (resp) {
            if (!resp || !resp.success) {
                alert((resp && resp.data && resp.data.message) || 'Request failed.');
                return;
            }
            if (cb) { cb(resp.data || {}); }
        }).fail(function () { alert('Network error.'); });
    }

    function refreshStats(data) {
        if (!data) {
            post('aieo_dmm_swatches_stats', {}, refreshStats);
            return;
        }
        $stats.find('[data-stat]').each(function () {
            var k = $(this).data('stat');
            if (data[k] !== undefined && data[k] !== null) {
                $(this).text(String(data[k]));
            }
        });
        if (data.runtime_enabled !== undefined) {
            $('#aieo-dmm-swatches-runtime-toggle').prop('checked', !!data.runtime_enabled);
        }
    }

    $('#aieo-dmm-swatches-refresh-stats').on('click', function () { refreshStats(); });

    $('#aieo-dmm-swatches-rebuild').on('click', function () {
        if (!window.confirm('Queue a full rebuild of every variable product’s swatch cache?')) { return; }
        post('aieo_dmm_swatches_rebuild', {}, function (data) {
            alert(data.message || 'Queued.');
            refreshStats();
        });
    });

    $('#aieo-dmm-swatches-clear').on('click', function () {
        if (!window.confirm('Truncate the aieo swatch cache tables? Rows will rebuild lazily on next frontend hit.')) { return; }
        post('aieo_dmm_swatches_clear', {}, function (data) {
            alert(data.message || 'Cleared.');
            refreshStats(data.stats || undefined);
        });
    });

    $('#aieo-dmm-swatches-migrate').on('click', function () {
        if (!window.confirm('Migrate settings + queue rebuild of every variable product from legacy om-product-swatches data?')) { return; }
        post('aieo_dmm_swatches_migrate', {}, function (data) {
            alert(data.message || 'Migration queued.');
            refreshStats();
        });
    });

    function setColourCount(data) {
        if (data && data.flagged_count !== undefined) {
            $('[data-stat="colour_flags"]').text(String(data.flagged_count));
        }
    }
    $('#aieo-dmm-colour-flag-image').on('click', function () {
        if (!window.confirm('Flag ALL image-type swatch attributes as colour context? (Colours repopulate on the next data-prep rebuild.)')) { return; }
        post('aieo_dmm_swatches_colour_flags', { op: 'flag_image' }, function (data) {
            alert(data.message || 'Done.');
            setColourCount(data);
        });
    });
    $('#aieo-dmm-colour-clear').on('click', function () {
        if (!window.confirm('Clear ALL colour-context flags?')) { return; }
        post('aieo_dmm_swatches_colour_flags', { op: 'clear' }, function (data) {
            alert(data.message || 'Done.');
            setColourCount(data);
        });
    });

    $('#aieo-dmm-swatches-runtime-toggle').on('change', function () {
        var enabled = this.checked ? 1 : 0;
        post('aieo_dmm_swatches_toggle_runtime', { enabled: enabled }, function (data) {
            alert(data.message || 'Saved.');
        });
    });

    $('#aieo-dmm-swatches-form').on('submit', function (e) {
        e.preventDefault();
        var $form = $(this);
        var settings = {};
        // Serialize using FormData so multi-valued <select multiple> posts
        // all chosen options under foo[] keys.
        var fd = new FormData($form[0]);
        fd.forEach(function (val, key) {
            if (key.indexOf('[]') === key.length - 2) {
                var k = key.slice(0, -2);
                if (!settings[k]) { settings[k] = []; }
                settings[k].push(val);
            } else {
                settings[key] = val;
            }
        });
        // Unchecked checkboxes don't appear in FormData — fix the booleans.
        $form.find('input[type="checkbox"]').each(function () {
            var $c = $(this);
            var name = $c.attr('name');
            if (!name) { return; }
            if (settings[name] === undefined) {
                settings[name] = (name === 'enabled') ? 'no' : 0;
            } else if (name !== 'enabled') {
                settings[name] = 1;
            }
        });
        post('aieo_dmm_swatches_save', { settings: settings }, function () {
            alert('Saved.');
        });
    });

    // Populate the category Select2 pickers from a single AJAX fetch.
    var $cat_selects = $('.aieo-dmm-swatches-cat-select');
    if ($cat_selects.length) {
        post('aieo_dmm_swatches_get_categories', {}, function (cats) {
            if (!Array.isArray(cats)) { return; }
            $cat_selects.each(function () {
                var $sel = $(this);
                var preselected = [];
                try {
                    preselected = JSON.parse($sel.attr('data-selected') || '[]') || [];
                } catch (e) { preselected = []; }
                preselected = preselected.map(function (v) { return String(v); });
                cats.forEach(function (c) {
                    var id = String(c.id);
                    var label = c.name + ' (' + c.count + ')';
                    var opt = new Option(label, id, false, preselected.indexOf(id) !== -1);
                    $sel.append(opt);
                });
                if ($.fn.select2) {
                    $sel.select2({ placeholder: 'Pick categories…', width: '100%' });
                }
            });
        });
    }
});
</script>
