<?php

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

class AIEO_DMM_Promo_Surfaces extends AIEO_DMM_Module_Base {

    const BLOCK_NAME = 'aieo/promo-surface';

    public function get_id()       { return 'promo_surfaces'; }
    public function get_icon()     { return 'layout-template'; }
    public function get_label()    { return __('Surface list and shortcodes', 'ai-eshop-optimizer'); }
    public function get_priority() { return 60; }
    public function get_group()    { return 'campaigns'; }
    public function get_section()  { return 'promotions'; }

    
    public function enqueue_admin_assets() {
        wp_enqueue_media();
        
        
        
    }

    public function register_hooks() {
        if (is_admin()) {
            add_action('admin_enqueue_scripts', function () {
                
                if ((isset($_GET['page']) ? sanitize_text_field(wp_unslash($_GET['page'])) : '') === 'ai-eshop-dmm' && (isset($_GET['dmm_tab']) ? sanitize_text_field(wp_unslash($_GET['dmm_tab'])) : '') === 'promo_surfaces') {
                    $css = 'assets/css/aieo-promo-surfaces-admin.css';
                    wp_enqueue_style('aieo-promo-surfaces-admin', AIEO_URI . $css, array(), file_exists(AIEO_DIR . $css) ? (string) filemtime(AIEO_DIR . $css) : '1');
                }
            });
        }
        
        
        
        
        
        
        
        
        
        
        if (function_exists('aieo_boot_schema_should_run') && aieo_boot_schema_should_run('promo_surfaces')) {
            $schema = AIEO_DIR . 'includes/dmm/sql/promo-surfaces-schema.php';
            if (file_exists($schema)) {
                require_once $schema;
                if (function_exists('aieo_dmm_install_promo_surfaces_schema')) {
                    aieo_dmm_install_promo_surfaces_schema();
                    aieo_boot_schema_done('promo_surfaces');
                }
            }
        }

        
        add_action('wp_ajax_aieo_promo_save_surface', array($this, 'ajax_save_surface'));
        add_action('wp_ajax_aieo_promo_save_slot',    array($this, 'ajax_save_slot'));
        add_action('wp_ajax_aieo_promo_delete_slot',  array($this, 'ajax_delete_slot'));
        add_action('wp_ajax_aieo_promo_reorder',      array($this, 'ajax_reorder'));

        
        
        
        
        add_action('init', array($this, 'register_block'));

        
        
        
        
        add_shortcode('aieo_promo_surface', array($this, 'shortcode'));

        
        
        
        
        
        
        add_action('enqueue_block_editor_assets', array($this, 'enqueue_block_editor_assets'));

        
        
        
        
        
        add_action('wp_enqueue_scripts', array($this, 'register_static_promo_surfaces'));

        
        
        
        
        add_filter('rocket_delay_js_exclusions', array($this, 'rocket_js_exclusions'));
        add_filter('rocket_exclude_defer_js',    array($this, 'rocket_js_exclusions'));
    }

    
    
    

    public static function tbl_surfaces() { global $wpdb; return $wpdb->prefix . 'aieo_dmm_promo_surfaces'; }
    public static function tbl_slots()    { global $wpdb; return $wpdb->prefix . 'aieo_dmm_promo_slots'; }

    public static function get_surface_by_slug($slug) {
        global $wpdb;
        $tbl = self::tbl_surfaces();
        
        return $wpdb->get_row($wpdb->prepare("SELECT * FROM {$tbl} WHERE slug = %s LIMIT 1", $slug), ARRAY_A);
    }

    public static function get_surface($surface_id) {
        global $wpdb;
        $tbl = self::tbl_surfaces();
        
        return $wpdb->get_row($wpdb->prepare("SELECT * FROM {$tbl} WHERE surface_id = %d LIMIT 1", (int) $surface_id), ARRAY_A);
    }

    public static function list_surfaces() {
        global $wpdb;
        $tbl = self::tbl_surfaces();
        
        return $wpdb->get_results("SELECT * FROM {$tbl} ORDER BY label, slug", ARRAY_A) ?: array();
    }

    public static function list_slots($surface_id) {
        global $wpdb;
        $tbl = self::tbl_slots();
        
        return $wpdb->get_results($wpdb->prepare(
            "SELECT * FROM {$tbl} WHERE surface_id = %d ORDER BY position, sort_order, slot_id",
            (int) $surface_id
        ), ARRAY_A) ?: array();
    }

    
    
    

    public function ajax_save_surface() {
        AIEO_DMM::verify_ajax_request();
        global $wpdb;

        $surface_id = isset($_POST['surface_id']) ? (int) $_POST['surface_id'] : 0;
        $slug       = sanitize_key(wp_unslash($_POST['slug'] ?? ''));
        $label      = sanitize_text_field(wp_unslash($_POST['label'] ?? ''));
        $layout     = sanitize_key(wp_unslash($_POST['layout_preset'] ?? 'hero_plus_3banners'));
        $is_active  = !empty($_POST['is_active']) ? 1 : 0;

        if ($slug === '') { wp_send_json_error(array('message' => __('Slug is required.', 'ai-eshop-optimizer'))); }

        $allowed_layouts = array('hero_plus_3banners', 'hero_only', 'banners_only');
        if (!in_array($layout, $allowed_layouts, true)) { $layout = 'hero_plus_3banners'; }

        $tbl = self::tbl_surfaces();
        $data = array(
            'slug'          => $slug,
            'label'         => $label,
            'layout_preset' => $layout,
            'is_active'     => $is_active,
        );

        
        
        
        
        if (class_exists('AIEO_Display_Conditions_UI')) {
            $existing = $surface_id > 0 ? self::surface_conditions($surface_id) : array();
            $posted   = array();
            foreach ($_POST as $k => $v) { 
                if (strncmp((string) $k, 'cond_', 5) === 0) {
                    $posted[$k] = is_scalar($v) ? sanitize_text_field(wp_unslash((string) $v)) : '';
                }
            }
            if (!empty($posted)) {
                $data['conditions'] = wp_json_encode(AIEO_Display_Conditions_UI::collect($posted, $existing));
            }
        }

        if ($surface_id > 0) {
            $wpdb->update($tbl, $data, array('surface_id' => $surface_id));
        } else {
            $wpdb->insert($tbl, $data);
            $surface_id = (int) $wpdb->insert_id;
        }

        
        
        
        self::rebuild_conditional_surface_map();

        
        
        
        
        self::purge_page_cache();

        wp_send_json_success(array(
            'message'    => __('Surface saved.', 'ai-eshop-optimizer'),
            'surface_id' => $surface_id,
        ));
    }

    
    public static function surface_conditions($surface_id) {
        $row = self::get_surface((int) $surface_id);
        return self::conditions_of($row);
    }

    
    public static function conditions_of($row) {
        if (!is_array($row) || empty($row['conditions'])) { return array(); }
        $decoded = json_decode((string) $row['conditions'], true);
        return is_array($decoded) ? $decoded : array();
    }

    
    private static function purge_page_cache() {
        if (class_exists('AIEO_DMM_Cache') && method_exists('AIEO_DMM_Cache', 'bump_version')) {
            AIEO_DMM_Cache::bump_version('popups');
        }
        do_action('aieo_purge_page_cache'); 
    }

    
    public function register_static_promo_surfaces() {
        if (is_admin() || !class_exists('AIEO_Display_Conditions')) { return; }

        
        
        
        
        
        
        $map = self::conditional_surface_map();
        if (empty($map)) { return; }

        $anchor = function_exists('get_queried_object_id') ? (int) get_queried_object_id() : 0;
        foreach ($map as $slug => $entry) {
            AIEO_Display_Conditions::register_static_surface(
                
                
                
                'promo_' . sanitize_key((string) $slug),
                isset($entry['conditions']) ? $entry['conditions'] : array(),
                '[data-aieo-promo-surface="' . esc_attr((string) $slug) . '"]',
                array('id' => isset($entry['id']) ? (int) $entry['id'] : 0, 'v' => 0),
                $anchor,
                
                
                
                
                
                
                
                
                
                
                
                
                
                false
            );
        }

        if (AIEO_Display_Conditions::has_static_surfaces()) {
            add_filter('rocket_defer_inline_exclusions', array($this, 'rocket_inline_exclusions'));
        }
    }

    
    const CONDITIONAL_MAP_OPTION = 'aieo_promo_conditional_surfaces';

    
    public static function conditional_surface_map() {
        $map = get_option(self::CONDITIONAL_MAP_OPTION, null);
        if (is_array($map)) { return $map; }
        return self::rebuild_conditional_surface_map();
    }

    
    public static function rebuild_conditional_surface_map() {
        $map = array();
        foreach (self::list_surfaces() as $row) {
            if ((int) $row['is_active'] !== 1) { continue; }
            $conditions = self::conditions_of($row);
            if (empty($conditions)) { continue; }
            
            
            
            if (class_exists('AIEO_Display_Conditions')
                && !AIEO_Display_Conditions::can_deny(AIEO_Display_Conditions::sanitize($conditions))) {
                continue;
            }
            $map[(string) $row['slug']] = array(
                'id'         => (int) $row['surface_id'],
                'conditions' => $conditions,
            );
        }
        
        
        update_option(self::CONDITIONAL_MAP_OPTION, $map, false);
        return $map;
    }

    
    public function rocket_inline_exclusions($excluded) {
        if (!class_exists('AIEO_Display_Conditions')) { return $excluded; }
        $ours = AIEO_Display_Conditions::rocket_needles();
        return is_array($excluded) ? array_merge($excluded, $ours) : $ours;
    }

    
    public function rocket_js_exclusions($excluded) {
        if (!class_exists('AIEO_Display_Conditions')) { return $excluded; }
        $ours = AIEO_Display_Conditions::rocket_needles();
        return is_array($excluded) ? array_merge($excluded, $ours) : $ours;
    }

    public function ajax_save_slot() {
        AIEO_DMM::verify_ajax_request();
        global $wpdb;

        $slot_id    = isset($_POST['slot_id']) ? (int) $_POST['slot_id'] : 0;
        $surface_id = isset($_POST['surface_id']) ? (int) sanitize_text_field( wp_unslash( $_POST['surface_id'] ) ) : 0;
        if ($surface_id <= 0) { wp_send_json_error(array('message' => __('Missing surface_id.', 'ai-eshop-optimizer'))); }

        $position = max(0, (int) (sanitize_text_field( wp_unslash( $_POST['position'] ) ) ?? 0));
        $type     = sanitize_key(wp_unslash($_POST['slot_type'] ?? 'slide'));
        if (!in_array($type, array('slide', 'banner'), true)) { $type = 'slide'; }

        $data = array(
            'surface_id'       => $surface_id,
            'position'         => $position,
            'slot_type'        => $type,
            'sort_order'       => max(0, (int) (sanitize_text_field( wp_unslash( $_POST['sort_order'] ) ) ?? 0)),
            'desktop_image_id' => max(0, (int) (sanitize_text_field( wp_unslash( $_POST['desktop_image_id'] ) ) ?? 0)),
            'mobile_image_id'  => max(0, (int) (sanitize_text_field( wp_unslash( $_POST['mobile_image_id'] ) ) ?? 0)),
            'youtube_id'       => sanitize_text_field(wp_unslash($_POST['youtube_id'] ?? '')),
            'target_url'       => esc_url_raw(wp_unslash($_POST['target_url'] ?? '')),
            'alt_text'         => sanitize_text_field(wp_unslash($_POST['alt_text'] ?? '')),
            'time_delay_ms'    => max(0, (int) (sanitize_text_field( wp_unslash( $_POST['time_delay_ms'] ) ) ?? 4000)),
            'campaign_id'      => max(0, (int) (sanitize_text_field( wp_unslash( $_POST['campaign_id'] ) ) ?? 0)),
            'is_active'        => !empty($_POST['is_active']) ? 1 : 0,
        );

        $tbl = self::tbl_slots();
        if ($slot_id > 0) {
            $wpdb->update($tbl, $data, array('slot_id' => $slot_id));
        } else {
            $wpdb->insert($tbl, $data);
            $slot_id = (int) $wpdb->insert_id;
        }

        wp_send_json_success(array('message' => __('Slot saved.', 'ai-eshop-optimizer'), 'slot_id' => $slot_id));
    }

    public function ajax_delete_slot() {
        AIEO_DMM::verify_ajax_request();
        global $wpdb;
        $slot_id = isset($_POST['slot_id']) ? (int) $_POST['slot_id'] : 0;
        if ($slot_id <= 0) { wp_send_json_error(array('message' => 'missing slot_id')); }
        $wpdb->delete(self::tbl_slots(), array('slot_id' => $slot_id));
        wp_send_json_success(array('message' => __('Slot deleted.', 'ai-eshop-optimizer')));
    }

    
    public function ajax_reorder() {
        AIEO_DMM::verify_ajax_request();
        global $wpdb;
        $raw = isset($_POST['order']) ? wp_unslash((string) sanitize_text_field( wp_unslash( $_POST['order'] ) )) : '';
        $rows = $raw !== '' ? json_decode($raw, true) : null;
        if (!is_array($rows)) { wp_send_json_error(array('message' => 'bad payload')); }
        $tbl = self::tbl_slots();
        foreach ($rows as $r) {
            if (!is_array($r)) { continue; }
            $slot_id    = isset($r['slot_id']) ? (int) $r['slot_id'] : 0;
            $sort_order = isset($r['sort_order']) ? (int) $r['sort_order'] : 0;
            if ($slot_id > 0) {
                $wpdb->update($tbl, array('sort_order' => $sort_order), array('slot_id' => $slot_id));
            }
        }
        wp_send_json_success(array('message' => __('Order updated.', 'ai-eshop-optimizer')));
    }

    
    
    

    
    public function enqueue_block_editor_assets() {
        $handle = 'aieo-promo-surface-editor';
        if (wp_script_is($handle, 'registered')) {
            wp_enqueue_script($handle);
        }
    }

    public function register_block() {
        if (!function_exists('register_block_type')) { return; }

        
        
        
        
        $editor_handle = 'aieo-promo-surface-editor';
        $editor_rel    = 'assets/js/aieo-promo-surface-editor.js';
        $editor_path   = AIEO_DIR . $editor_rel;
        $editor_url    = plugins_url($editor_rel, AIEO_FILE);
        $editor_ver    = file_exists($editor_path) ? filemtime($editor_path) : (defined('AIEO_VERSION') ? AIEO_VERSION : false);
        if (file_exists($editor_path)) {
            wp_register_script(
                $editor_handle,
                $editor_url,
                
                
                
                
                
                
                array('wp-blocks', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-i18n'),
                $editor_ver,
                true
            );

            
            
            
            
            
            
            $options = array();
            foreach (self::list_surfaces() as $s) {
                $options[] = array(
                    'value' => (string) $s['slug'],
                    'label' => sprintf('%s (%s)',
                        $s['label'] !== '' ? $s['label'] : $s['slug'],
                        $s['slug']
                    ),
                    'is_active' => (int) $s['is_active'],
                );
            }
            wp_localize_script($editor_handle, 'aieoPromoSurfaceConfig', array(
                'surfaces' => $options,
            ));
        }

        register_block_type(self::BLOCK_NAME, array(
            'api_version'     => 3,
            'title'           => __('Rooster One Promo Surface', 'ai-eshop-optimizer'),
            'category'        => 'theme',
            'icon'            => 'megaphone',
            'description'     => __('Hero carousel + 3 banner row, driven by Promo surfaces config under Campaigns.', 'ai-eshop-optimizer'),
            'keywords'        => array('hero', 'banner', 'carousel', 'promo'),
            'attributes'      => array(
                'surfaceSlug' => array('type' => 'string', 'default' => ''),
                'align'       => array('type' => 'string'),
            ),
            'supports'        => array(
                'align'      => array('wide', 'full'),
                'spacing'    => array('margin' => true, 'padding' => true),
                'typography' => array('fontSize' => true, 'lineHeight' => true),
                'color'      => array('background' => true, 'text' => true),
            ),
            'editor_script'   => $editor_handle,
            'render_callback' => array($this, 'render_block'),
        ));
    }

    
    public function render_block($attrs = array(), $content = '', $block = null) {
        $slug = isset($attrs['surfaceSlug']) ? sanitize_key((string) $attrs['surfaceSlug']) : '';
        if ($slug === '') {
            return is_admin() ? '<div class="aieo-promo-surface aieo-promo-surface--empty">'
                . esc_html__('No surface selected — pick one in the block sidebar.', 'ai-eshop-optimizer')
                . '</div>' : '';
        }

        $surface = self::get_surface_by_slug($slug);
        if (!$surface || (int) $surface['is_active'] !== 1) { return ''; }

        $slots = self::list_slots((int) $surface['surface_id']);
        
        
        $by_position = array();
        foreach ($slots as $slot) {
            if ((int) $slot['is_active'] !== 1) { continue; }
            $p = (int) $slot['position'];
            if (!isset($by_position[$p])) { $by_position[$p] = array(); }
            $by_position[$p][] = $slot;
        }
        if (empty($by_position)) { return ''; }

        $layout = (string) $surface['layout_preset'];
        $hero   = isset($by_position[0]) ? $by_position[0] : array();
        $banners = array();
        for ($i = 1; $i <= 3; $i++) {
            if (isset($by_position[$i]) && !empty($by_position[$i])) {
                $banners[$i] = $by_position[$i][0]; 
            }
        }

        $surface_slug = (string) $surface['slug'];
        
        
        
        
        $align     = isset($attrs['align']) ? sanitize_html_class((string) $attrs['align']) : '';
        $align_cls = ($align === 'full') ? ' alignfull' : (($align === 'wide') ? ' alignwide' : '');
        
        
        
        $base_cls = 'aieo-promo-surface aieo-promo-surface--' . $layout;
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        $cond_attr = '';
        if (class_exists('AIEO_Display_Conditions')) {
            $cond_attr = wp_json_encode(AIEO_Display_Conditions::client_config(
                self::conditions_of($surface),
                array('id' => (int) $surface['surface_id'], 'surface' => 'promo_' . sanitize_key($surface_slug), 'v' => 0)
            ));
        }

        if ($block instanceof WP_Block) {
            $wrapper_attr = get_block_wrapper_attributes(array(
                'class'                   => $base_cls,
                'data-aieo-promo-surface' => $surface_slug,
                'data-aieo-conditions'    => $cond_attr,
            ));
        } else {
            $wrapper_attr = 'class="' . esc_attr($base_cls . $align_cls) . '" data-aieo-promo-surface="' . esc_attr($surface_slug) . '"'
                . ' data-aieo-conditions="' . esc_attr($cond_attr) . '"';
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        if (class_exists('AIEO_Popup_Display') && AIEO_Popup_Display::ensure_conditions()) {
            AIEO_Display_Conditions::enqueue_runtime();
        }
        
        self::enqueue_tracker();

        
        
        
        static $css_emitted = false;
        ob_start();
        if (!$css_emitted) {
            $css_emitted = true;
            $this->emit_layout_css();
        }
        ?>
        <div <?php echo $wrapper_attr; ?>>
            <?php if ($layout !== 'banners_only' && !empty($hero)) : ?>
                <div class="aieo-promo-surface__hero">
                    <?php $this->render_hero($hero, $surface_slug); ?>
                </div>
            <?php endif; ?>

            <?php if ($layout !== 'hero_only' && !empty($banners)) : ?>
                <div class="aieo-promo-surface__banners">
                    <?php foreach ($banners as $pos => $slot) : ?>
                        <?php $this->render_banner_slot($slot, $surface_slug, $pos); ?>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
        <?php
        return (string) ob_get_clean();
    }

    
    public function shortcode($atts = array()) {
        $atts = shortcode_atts(array('slug' => '', 'surface' => ''), $atts, 'aieo_promo_surface');
        $slug = $atts['slug'] !== '' ? $atts['slug'] : $atts['surface'];
        if ($slug === '') { return ''; }
        return $this->render_block(array('surfaceSlug' => (string) $slug));
    }

    
    private function render_hero(array $slots, $surface_slug) {
        $count = count($slots);
        $uid   = 'aieo-promo-hero-' . sanitize_key($surface_slug);
        
        
        $first       = $slots[0];
        $preload_url = $first['desktop_image_id'] ? (string) wp_get_attachment_image_url((int) $first['desktop_image_id'], 'large') : '';
        if ($preload_url !== '') {
            printf('<link rel="preload" as="image" href="%s" media="(min-width:768px)">' . "\n", esc_url($preload_url));
        }
        ?>
        <div id="<?php echo esc_attr($uid); ?>"
             class="aieo-promo-hero"
             data-slide-count="<?php echo (int) $count; ?>">
            <div class="aieo-promo-hero__track">
                <?php foreach ($slots as $i => $slot) : ?>
                    <?php $this->render_slide_or_banner($slot, $surface_slug, 0, $i); ?>
                <?php endforeach; ?>
            </div>
            <?php if ($count > 1) : ?>
                <div class="aieo-promo-hero__bullets" aria-hidden="true"></div>
            <?php endif; ?>
        </div>
        <?php
    }

    private function render_banner_slot(array $slot, $surface_slug, $position) {
        ?>
        <div class="aieo-promo-banner aieo-promo-banner--pos-<?php echo (int) $position; ?>">
            <?php $this->render_slide_or_banner($slot, $surface_slug, (int) $position, 0); ?>
        </div>
        <?php
    }

    
    private function render_slide_or_banner(array $slot, $surface_slug, $position, $index) {
        $slot_id     = (int) $slot['slot_id'];
        $campaign_id = (int) $slot['campaign_id'];
        $eager       = ($position === 0 && $index === 0);

        $alt        = (string) $slot['alt_text'];
        $target_url = (string) $slot['target_url'];
        if ($target_url !== '' && $campaign_id > 0) {
            $target_url = $this->stamp_utm_campaign($target_url, $campaign_id);
        }

        $delay_ms = max(0, (int) $slot['time_delay_ms']);
        $youtube  = trim((string) $slot['youtube_id']);

        
        
        
        
        $link_label = $alt !== '' ? $alt : __( 'Promotion', 'ai-eshop-optimizer' );
        $tag_open  = $target_url !== ''
            ? sprintf('<a href="%s" data-aieo-promo-slot="%d" data-aieo-promo-surface="%s" data-aieo-promo-pos="%d" aria-label="%s">',
                esc_url($target_url), $slot_id, esc_attr($surface_slug), $position, esc_attr($link_label))
            : sprintf('<div data-aieo-promo-slot="%d" data-aieo-promo-surface="%s" data-aieo-promo-pos="%d">',
                $slot_id, esc_attr($surface_slug), $position);
        $tag_close = $target_url !== '' ? '</a>' : '</div>';

        echo '<div class="aieo-promo-frame" data-delay="' . (int) $delay_ms . '">';
        echo $tag_open; 

        if ($youtube !== '') {
            
            
            
            
            printf(
                '<iframe class="aieo-promo-youtube" src="https://www.youtube-nocookie.com/embed/%s?modestbranding=1&rel=0" loading="%s" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
                esc_attr($youtube),
                $eager ? 'eager' : 'lazy'
            );
        } else {
            self::render_picture($slot, $eager, $alt);
        }

        echo $tag_close; 
        echo '</div>';
    }

    
    public static function render_picture(array $slot, $eager, $alt) {
        $desktop_id = (int) $slot['desktop_image_id'];
        $mobile_id  = (int) $slot['mobile_image_id'];
        if ($desktop_id <= 0 && $mobile_id <= 0) { return; }

        $desktop = $desktop_id ? wp_get_attachment_image_src($desktop_id, 'full') : null;
        $mobile  = $mobile_id  ? wp_get_attachment_image_src($mobile_id,  'full') : null;
        if (!$desktop && !$mobile) { return; }

        $main = $desktop ?: $mobile;
        $loading = $eager ? 'eager' : 'lazy';
        $fp_attr = $eager ? ' fetchpriority="high"' : '';

        
        
        
        
        echo '<picture>';
        if ($mobile) {
            printf('<source media="(max-width:767px)" srcset="%s" width="%d" height="%d">', esc_url((string) $mobile[0]), (int) $mobile[1], (int) $mobile[2]);
        }
        if ($desktop) {
            printf('<source media="(min-width:768px)" srcset="%s" width="%d" height="%d">', esc_url((string) $desktop[0]), (int) $desktop[1], (int) $desktop[2]);
        }
        printf(
            '<img src="%s" alt="%s" width="%d" height="%d" loading="%s" decoding="async"%s>',
            esc_url((string) $main[0]),
            esc_attr($alt),
            (int) $main[1],
            (int) $main[2],
            esc_attr($loading),
            $fp_attr 
        );
        echo '</picture>';
    }

    
    private function emit_layout_css() {
        ?>
        <style id="aieo-promo-surface-css">
        .aieo-promo-surface{display:block;width:100%}
        /* Full-width override: when the block is set to "Full width", force a
           full-bleed that escapes the theme's constrained content container.
           Negative side-margins expand the element to the full viewport
           regardless of the parent's max-width (classic OR block theme). */
        /* width:100vw (not just max-width) is required so the surface fills the
           viewport even when it is NOT a direct child of the constrained root —
           e.g. when the page content is rendered through wp:post-content (a
           programmable front page). Without an explicit width the element keeps
           width:100% of its (root-padding-inset) parent and leaves a side gap. */
        .aieo-promo-surface.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
        .aieo-promo-surface__hero{position:relative}
        /* `touch-action:pan-y` lets the browser keep handling vertical
         * page scroll while we own horizontal swipes — without this,
         * iOS/Android Safari can hijack the swipe and refuse to fire
         * pointermove past the first few pixels. */
        .aieo-promo-hero{position:relative;overflow:hidden;width:100%;touch-action:pan-y;user-select:none}
        .aieo-promo-hero__track{display:flex;transition:transform 600ms ease;will-change:transform}
        .aieo-promo-hero__track.is-grabbing{transition:none;cursor:grabbing}
        .aieo-promo-hero .aieo-promo-frame{flex:0 0 100%;width:100%;position:relative}
        .aieo-promo-frame > a,.aieo-promo-frame > div{display:block;width:100%}
        .aieo-promo-frame picture,.aieo-promo-frame img{display:block;width:100%;height:auto}
        .aieo-promo-frame .aieo-promo-youtube{display:block;width:100%;aspect-ratio:16/9;border:0}
        .aieo-promo-hero__bullets{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
        .aieo-promo-hero__bullet{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:background-color 150ms ease,transform 150ms ease}
        .aieo-promo-hero__bullet.is-active{background:rgba(0,0,0,.7);transform:scale(1.15)}
        .aieo-promo-surface__banners{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
        /* Lock each banner to a uniform 4:3 tile and crop any image
         * inside to fill it. Operators can upload landscape, portrait,
         * or square assets without breaking row alignment — the image
         * is centred and cropped via object-fit:cover instead of
         * stretching the row to its tallest member. */
        .aieo-promo-banner{height:280px;overflow:hidden;border-radius:4px;background:#f6f6f6}
        .aieo-promo-banner > .aieo-promo-frame,
        .aieo-promo-banner > .aieo-promo-frame > a,
        .aieo-promo-banner > .aieo-promo-frame > div{display:block;width:100%;height:100%}
        .aieo-promo-banner picture{display:block;width:100%;height:100%}
        .aieo-promo-banner picture img{width:100%;height:100%;object-fit:cover;object-position:center}
        .aieo-promo-banner .aieo-promo-youtube{width:100%;height:100%;aspect-ratio:auto}
        @media (max-width:767px){
            .aieo-promo-surface__banners{grid-template-columns:1fr}
            /* On mobile the banners stack — reset the desktop fixed height
             * and switch to 16:9 so each banner is wider than tall and the
             * column doesn't become an awkward portrait stack. */
            .aieo-promo-banner{height:auto;aspect-ratio:16/9}
            .aieo-promo-hero__bullets{bottom:8px}
            .aieo-promo-hero__bullet{width:8px;height:8px}
        }
        /* Homepage: the lead hero surface should sit flush under the header.
         * It is NOT :first-child of the constrained .entry-content (this very
         * inline <style> takes that slot), so it picks up the 24px constrained
         * block-gap from `:root :where(.is-layout-constrained) > *`; <main>
         * likewise carries the root-level block-gap. Zero both — scoped to the
         * front page (body.home) so no other page or surface placement loses
         * its spacing. Unlayered + class-specific, so it beats the :where rules. */
        body.home main{margin-block-start:0}
        body.home .aieo-promo-surface{margin-block-start:0}
        </style>
        <?php
    }

    private function stamp_utm_campaign($url, $campaign_id) {
        if (!class_exists('AIEO_DMM_Campaigns')) { return $url; }
        
        $slug = method_exists('AIEO_DMM_Campaigns', 'slug_for_id')
            ? (string) AIEO_DMM_Campaigns::slug_for_id((int) $campaign_id)
            : '';
        if ($slug === '') { $slug = 'cmp' . (int) $campaign_id; }
        return add_query_arg(array('utm_campaign' => $slug, 'utm_source' => 'promo_surface'), $url);
    }

    
    
    
    

    
    public static function enqueue_tracker() {
        static $emitted = false;
        if ($emitted || is_admin()) { return; }
        $emitted = true;
        
        
        
        $base = defined('AIEO_FILE') ? AIEO_FILE : __FILE__;
        $dir  = dirname($base) . '/';
        $rel  = 'assets/js/aieo-promo-telemetry.js';
        if (!file_exists($dir . $rel)) { return; }
        wp_enqueue_script('aieo-promo-telemetry', plugins_url($rel, $base), array(), (string) filemtime($dir . $rel), array('in_footer' => true, 'strategy' => 'defer'));
        add_filter('rooster/third_party/handles', static function ($handles) {
            $handles = is_array($handles) ? $handles : array();
            $handles['aieo-promo-telemetry'] = array('trigger' => 'human');
            return $handles;
        });
    }

    
    
    

    public function render_subtab() {
        $action     = isset($_GET['promo_action']) ? sanitize_key($_GET['promo_action']) : '';
        $surface_id = isset($_GET['surface_id']) ? (int) $_GET['surface_id'] : 0;

        if ($action === 'edit' && $surface_id > 0) {
            $this->render_edit_view($surface_id);
        } elseif ($action === 'new') {
            $this->render_edit_view(0);
        } else {
            $this->render_list_view();
        }
    }

    
    private function render_reports_card() {
        global $wpdb;

        $reco_tbl     = $wpdb->prefix . 'aieo_reco_events';
        $surfaces_tbl = self::tbl_surfaces();
        $slots_tbl    = self::tbl_slots();
        $attr_tbl     = $wpdb->prefix . 'aieo_dmm_offer_attributions';

        $window_days = 30;
        $since       = gmdate('Y-m-d H:i:s', time() - $window_days * DAY_IN_SECONDS);

        
        
        $rows = $wpdb->get_results($wpdb->prepare(
            "SELECT SUBSTRING(surface, 7) AS slug,
                    SUM(CASE WHEN event_type = 'promo_impression' THEN 1 ELSE 0 END) AS impressions,
                    SUM(CASE WHEN event_type = 'promo_click'      THEN 1 ELSE 0 END) AS clicks
             FROM {$reco_tbl}
             WHERE surface LIKE 'promo\\_%' ESCAPE '\\\\'
               AND event_type IN ('promo_impression','promo_click')
               AND ts >= %s
             GROUP BY surface",
            $since
        ), ARRAY_A);

        $by_slug = array();
        if (is_array($rows)) {
            foreach ($rows as $r) {
                $by_slug[(string) $r['slug']] = array(
                    'impressions' => (int) $r['impressions'],
                    'clicks'      => (int) $r['clicks'],
                );
            }
        }

        
        
        $surfaces = $wpdb->get_results(
            "SELECT s.surface_id, s.slug, s.label, s.is_active,
                    COUNT(sl.slot_id) AS slot_count,
                    SUM(CASE WHEN sl.is_active = 1 THEN 1 ELSE 0 END) AS active_slots
             FROM {$surfaces_tbl} s
             LEFT JOIN {$slots_tbl} sl ON sl.surface_id = s.surface_id
             GROUP BY s.surface_id, s.slug, s.label, s.is_active
             ORDER BY s.label, s.slug",
            ARRAY_A
        ) ?: array();

        ?>
        <?php
            
            
            
            
            $aieo_ps_rows   = array();
            $aieo_ps_totals = array('slots' => 0, 'active' => 0, 'impressions' => 0, 'clicks' => 0);
            foreach ((array) $surfaces as $s) {
                $slug  = (string) $s['slug'];
                $stats = isset($by_slug[$slug]) ? $by_slug[$slug] : array('impressions' => 0, 'clicks' => 0);
                $aieo_ps_totals['slots']       += (int) $s['slot_count'];
                $aieo_ps_totals['active']      += (int) $s['active_slots'];
                $aieo_ps_totals['impressions'] += (int) $stats['impressions'];
                $aieo_ps_totals['clicks']      += (int) $stats['clicks'];

                $aieo_ps_rows[] = array(
                    'slug'        => $slug,
                    'label'       => '' !== (string) $s['label'] ? (string) $s['label'] : $slug,
                    'active'      => (int) $s['is_active'],
                    'slots'       => (int) $s['active_slots'],
                    'of_slots'    => (int) $s['slot_count'] > (int) $s['active_slots'] ? '/' . number_format_i18n((int) $s['slot_count']) : '',
                    'impressions' => (int) $stats['impressions'],
                    'clicks'      => (int) $stats['clicks'],
                    'ctr'         => (int) $stats['impressions'] > 0
                        ? round(((int) $stats['clicks'] / (int) $stats['impressions']) * 100, 1)
                        : null,
                );
            }
            
            AIEO_Table::card(array(
                'anchor'       => 'promo-surfaces-promo-surface-performance-last-d-days',
                'icon'         => 'chart-column',
                'heading'      => 'h2',
                'title'        => __('Promo surface performance', 'ai-eshop-optimizer'),
                'description'  => __('Impressions fire on first viewport intersection of any slot in a surface; clicks fire before navigation. Both flow into the shared wp_aieo_reco_events table — same plumbing as exit-intent and product-card analytics.', 'ai-eshop-optimizer'),
                'page_id'      => $this->get_id(),
                'row_key'      => 'slug',
                'rows'         => $aieo_ps_rows,
                'empty'        => __('No surfaces yet. Add one above to start collecting data.', 'ai-eshop-optimizer'),
                'totals_at'    => 'foot',
                'per_page'     => 0,
                'totals_label' => __('Total', 'ai-eshop-optimizer'),
                'totals'       => array(
                    'slots'       => $aieo_ps_totals['active'],
                    'of_slots'    => '',
                    'impressions' => $aieo_ps_totals['impressions'],
                    'clicks'      => $aieo_ps_totals['clicks'],
                    'ctr'         => $aieo_ps_totals['impressions'] > 0
                        ? round(($aieo_ps_totals['clicks'] / $aieo_ps_totals['impressions']) * 100, 1)
                        : null,
                ),
                'columns'      => array(
                    array('key' => 'label', 'label' => __('Surface', 'ai-eshop-optimizer'), 'sort_key' => 'slug', 'subline' => 'slug'),
                    array('key' => 'active', 'label' => __('Status', 'ai-eshop-optimizer'), 'type' => 'boolean'),
                    array('key' => 'slots', 'label' => __('Slots', 'ai-eshop-optimizer'), 'type' => 'integer', 'suffix' => 'of_slots'),
                    array('key' => 'impressions', 'label' => __('Impressions', 'ai-eshop-optimizer'), 'type' => 'integer'),
                    array('key' => 'clicks', 'label' => __('Clicks', 'ai-eshop-optimizer'), 'type' => 'integer'),
                    array('key' => 'ctr', 'label' => __('CTR', 'ai-eshop-optimizer'), 'type' => 'percent', 'format' => array('precision' => 1), 'total' => array('ratio' => array('clicks', 'impressions'), 'percent' => true)),
                ),
                'footnote'     => __('CTR = clicks ÷ impressions. Slots column shows active / total when some slots are disabled. To break clicks down by slot or campaign, query wp_aieo_reco_events directly (target_pid carries the slot_id) or wp_aieo_dmm_offer_attributions filtered by entry_channel = the surface\'s utm slug.', 'ai-eshop-optimizer'),
            ));
            ?>
        <?php
    }

    private function render_list_view() {
        $surfaces = self::list_surfaces();
        $new_url  = add_query_arg(array(
            'page'        => AIEO_DMM::MENU_SLUG,
            'dmm_tab'     => $this->get_id(),
            'promo_action'=> 'new',
        ), admin_url('admin.php'));
        
        
        list($aieo_ps_open, $aieo_ps_close) = AIEO_DMM_UI::card(array(
            'anchor'      => 'promo-surfaces-list',
            'title'       => __('All surfaces', 'ai-eshop-optimizer'),
            'description' => __('Operator-curated promo placements (homepage hero + 3 banner row, category top, etc.). On a block theme, drop the “Promo Surface” block onto a template and pick a surface. On a LEGACY (classic) theme, copy the shortcode shown next to each surface below — e.g. [aieo_promo_surface slug="mai-hero"] — into a template (via do_shortcode), a text widget, or a page-builder module. Both paths render identically.', 'ai-eshop-optimizer'),
            'tools'       => '<a href="' . esc_url($new_url) . '" class="rooster-admin-button rooster-admin-button--primary">' . esc_html__('Add new surface', 'ai-eshop-optimizer') . '</a>',
            'flush'       => true,
        ));
        echo $aieo_ps_open; 
        ?>
            <?php
            
            
            $aieo_ps_list = array();
            foreach ((array) $surfaces as $s) {
                $aieo_ps_list[] = array(
                    'surface_id' => (int) $s['surface_id'],
                    'slug'       => (string) $s['slug'],
                    'shortcode'  => '[aieo_promo_surface slug="' . (string) $s['slug'] . '"]',
                    'label'      => (string) $s['label'],
                    'layout'     => (string) $s['layout_preset'],
                    'active'     => (int) $s['is_active'],
                    'updated'    => (string) $s['updated_at'],
                    'edit_url'   => add_query_arg(array(
                        'page'         => AIEO_DMM::MENU_SLUG,
                        'dmm_tab'      => $this->get_id(),
                        'promo_action' => 'edit',
                        'surface_id'   => (int) $s['surface_id'],
                    ), admin_url('admin.php')),
                );
            }
            AIEO_Table::render(array(
                'page_id' => $this->get_id(),
                'row_key' => 'surface_id',
                'rows'    => $aieo_ps_list,
                'empty'   => __('No surfaces yet — click “Add new surface” to create the first one.', 'ai-eshop-optimizer'),
                'caps'    => array('search' => true),
                'filters' => array(array('key' => 'active', 'label' => __('Active', 'ai-eshop-optimizer'), 'kind' => 'boolean', 'control' => 'segmented')),
                'columns' => array(
                    array('key' => 'slug', 'label' => __('Slug', 'ai-eshop-optimizer'), 'type' => 'code', 'subline' => 'shortcode'),
                    array('key' => 'label', 'label' => __('Label', 'ai-eshop-optimizer')),
                    array('key' => 'layout', 'label' => __('Layout', 'ai-eshop-optimizer'), 'type' => 'code'),
                    array('key' => 'active', 'label' => __('Active', 'ai-eshop-optimizer'), 'type' => 'boolean'),
                    array('key' => 'updated', 'label' => __('Updated', 'ai-eshop-optimizer'), 'nowrap' => true),
                ),
                'actions' => array(
                    array('id' => 'edit', 'label' => __('Edit', 'ai-eshop-optimizer'), 'href' => static function ($r) { return $r['edit_url']; }),
                ),
            ));
            ?>
        <?php echo $aieo_ps_close; ?>

        <?php $this->render_reports_card(); ?>
        <?php
    }

    private function render_edit_view($surface_id) {
        $surface = $surface_id > 0 ? self::get_surface($surface_id) : null;
        if ($surface_id > 0 && !$surface) {
            echo '<div class="notice notice-error"><p>' . esc_html__('Surface not found.', 'ai-eshop-optimizer') . '</p></div>';
            $this->render_list_view();
            return;
        }
        $slots = $surface_id > 0 ? self::list_slots($surface_id) : array();
        $nonce = wp_create_nonce(AIEO_DMM::NONCE_ACTION);
        $ajax  = admin_url('admin-ajax.php');
        $list_url = add_query_arg(array(
            'page' => AIEO_DMM::MENU_SLUG, 'dmm_tab' => $this->get_id(),
        ), admin_url('admin.php'));

        $defaults = array(
            'surface_id'    => 0,
            'slug'          => '',
            'label'         => '',
            'layout_preset' => 'hero_plus_3banners',
            'is_active'     => 1,
        );
        $s = is_array($surface) ? array_merge($defaults, $surface) : $defaults;

        
        
        global $wpdb;
        $campaigns_tbl = $wpdb->prefix . 'aieo_dmm_campaigns';
        
        $campaigns = $wpdb->get_results("SELECT id, slug, label FROM {$campaigns_tbl} ORDER BY label, slug", ARRAY_A) ?: array();
        
        
        
        
        
        
        
        $aieo_ps_form = 'aieo-card-promo-surfaces-edit-surface-form';
        list($aieo_ps_open, $aieo_ps_close) = AIEO_DMM_UI::card(array(
            'anchor' => 'promo-surfaces-edit-surface',
            'icon'   => 'pencil-line',
            'title'  => $surface_id ? __('Edit surface', 'ai-eshop-optimizer') : __('New surface', 'ai-eshop-optimizer'),
            'footer' => \Rooster\Admin\States::save_button($aieo_ps_form, array('label' => __('Save surface', 'ai-eshop-optimizer'))),
        ));
        echo $aieo_ps_open; 
        echo '<p><a href="' . esc_url($list_url) . '">← ' . esc_html__('All surfaces', 'ai-eshop-optimizer') . '</a></p>';
        $aieo_ps_row = static function ($id, $label, $control, $help = '') {
            $field = array('id' => 'aieo-ps-' . $id, 'label' => $label, 'control' => $control);
            if ('' !== $help) { $field['help'] = $help; }
            return \Rooster\Admin\Ui::field_row($field);
        };
        $aieo_ps_fields  = $aieo_ps_row('slug', __('Slug', 'ai-eshop-optimizer'), \Rooster\Admin\Ui::input('slug', (string) $s['slug'], array('id' => 'aieo-ps-slug', 'medium' => true, 'code' => true, 'required' => true)), __('URL-safe identifier. Used by the block to look this surface up — keep stable.', 'ai-eshop-optimizer'));
        $aieo_ps_fields .= $aieo_ps_row('label', __('Label', 'ai-eshop-optimizer'), \Rooster\Admin\Ui::input('label', (string) $s['label'], array('id' => 'aieo-ps-label', 'medium' => true)));
        $aieo_ps_fields .= $aieo_ps_row('layout', __('Layout', 'ai-eshop-optimizer'), \Rooster\Admin\Ui::select('layout_preset', array(
            'hero_plus_3banners' => __('Hero + 3 banners', 'ai-eshop-optimizer'),
            'hero_only'          => __('Hero only', 'ai-eshop-optimizer'),
            'banners_only'       => __('3 banners only', 'ai-eshop-optimizer'),
        ), (string) $s['layout_preset'], array('id' => 'aieo-ps-layout')));
        $aieo_ps_fields .= $aieo_ps_row('is-active', __('Active', 'ai-eshop-optimizer'), \Rooster\Admin\Ui::toggle('is_active', 1 === (int) $s['is_active'], array('id' => 'aieo-ps-is-active', 'hidden' => false, 'label' => __('Render on front-end.', 'ai-eshop-optimizer'))));
        $aieo_ps_html    = '<input type="hidden" name="surface_id" value="' . (int) $s['surface_id'] . '"><div class="rooster-admin-fields">' . $aieo_ps_fields . '</div>';
        if (class_exists('AIEO_Display_Conditions_UI')) {
            ob_start();
            ?>
            <div id="aieo-card-promo-surfaces-when-to-show" data-aieo-icon="eye" class="aieo-dmm-card">
                <h3><?php esc_html_e('When to show it', 'ai-eshop-optimizer'); ?></h3>
                <?php echo \Rooster\Admin\Guidance::text(__('The same rules a popup or a recommendation rail uses, so the three can be compared in your reports rather than each being configured in its own language. Decided in the visitor\'s browser BEFORE the page is drawn, so a surface that is not going to appear never flashes up and vanishes. Leave everything at its default and this surface behaves exactly as it does today.', 'ai-eshop-optimizer')); ?>
                <div class="rooster-admin-fields">
                <?php
                
                
                
                
                
                
                
                
                
                
                
                
                AIEO_Display_Conditions_UI::render_rows(
                    self::conditions_of($surface),
                    array('maxPerSession', 'freq', 'freqDays', 'maxImpr', 'device', 'visitor', 'instigator', 'instigatorRef'),
                    array('prefix' => 'cond_', 'name' => true)
                );
                ?>
                </div>
            </div>
            <?php
            $aieo_ps_html .= (string) ob_get_clean();
        }
        echo \Rooster\Admin\States::form($aieo_ps_form, $aieo_ps_html, array('url' => '')); 
        ?>
        <?php echo $aieo_ps_close; ?>

            <?php if ($surface_id > 0) : ?>
            <?php
            list($aieo_ps_open, $aieo_ps_close) = AIEO_DMM_UI::card(array(
                'anchor'      => 'promo-surfaces-slots',
                'icon'        => 'layout-grid',
                'title'       => __('Slots', 'ai-eshop-optimizer'),
                'description' => __('Position 0 = hero carousel (each row is a slide). Positions 1, 2, 3 = the three banner row slots (one slot each, the first active wins).', 'ai-eshop-optimizer'),
                'flush'       => true,
                
                
                'footer'      => \Rooster\Admin\States::outcome('', '', array('id' => 'aieo-promo-slots-status')),
            ));
            echo $aieo_ps_open; 
            ?>
            <?php
            
            
            
            $rows = $slots;
            $rows[] = array('slot_id' => 0, 'surface_id' => $surface_id, 'position' => 0, 'slot_type' => 'slide',
                'sort_order' => 0, 'desktop_image_id' => 0, 'mobile_image_id' => 0, 'youtube_id' => '',
                'target_url' => '', 'alt_text' => '', 'time_delay_ms' => 4000, 'campaign_id' => 0, 'is_active' => 1);
            $aieo_ps_trows = array();
            foreach ($rows as $r) {
                $is_new = empty($r['slot_id']);
                ob_start();
                $this->render_media_picker_cell('desktop', (int) $r['desktop_image_id']);
                $aieo_ps_desktop = (string) ob_get_clean();
                ob_start();
                $this->render_media_picker_cell('mobile', (int) $r['mobile_image_id']);
                $aieo_ps_mobile = (string) ob_get_clean();
                $aieo_ps_camp = '<select class="js-slot-campaign" aria-label="' . esc_attr__('Campaign', 'ai-eshop-optimizer') . '"><option value="0">' . esc_html__('— none —', 'ai-eshop-optimizer') . '</option>';
                foreach ($campaigns as $c) {
                    $aieo_ps_camp .= '<option value="' . (int) $c['id'] . '"' . selected((int) $r['campaign_id'], (int) $c['id'], false) . '>' . esc_html((string) ($c['label'] ?: $c['slug'])) . '</option>';
                }
                $aieo_ps_camp .= '</select>';
                $aieo_ps_trow = array(
                    '_id'      => $is_new ? 'new' : (string) (int) $r['slot_id'],
                    '_name'    => $is_new ? __('New slot', 'ai-eshop-optimizer') : sprintf(
                        
                        __('Slot %d', 'ai-eshop-optimizer'),
                        (int) $r['slot_id']
                    ),
                    '_attrs'   => array('data-slot-id' => (string) (int) $r['slot_id']),
                    'pos'      => array('html' => '<input type="number" class="rooster-admin-input rooster-admin-input--xs js-slot-position" min="0" max="9" step="1" value="' . (int) $r['position'] . '" aria-label="' . esc_attr__('Pos', 'ai-eshop-optimizer') . '">'),
                    'type'     => array('html' => '<select class="rooster-admin-select rooster-admin-select--xs js-slot-type" aria-label="' . esc_attr__('Type', 'ai-eshop-optimizer') . '"><option value="slide"' . selected($r['slot_type'], 'slide', false) . '>slide</option><option value="banner"' . selected($r['slot_type'], 'banner', false) . '>banner</option></select>'),
                    'desktop'  => array('html' => $aieo_ps_desktop),
                    'mobile'   => array('html' => $aieo_ps_mobile),
                    'youtube'  => array('html' => '<input type="text" class="rooster-admin-input js-slot-youtube aieo-ps-w-100" value="' . esc_attr((string) $r['youtube_id']) . '" placeholder="dQw4w9WgXcQ" aria-label="' . esc_attr__('YouTube id', 'ai-eshop-optimizer') . '">'),
                    'url'      => array('html' => '<input type="url" class="rooster-admin-input js-slot-url aieo-ps-w-200" value="' . esc_attr((string) $r['target_url']) . '" placeholder="https://..." aria-label="' . esc_attr__('Target URL', 'ai-eshop-optimizer') . '">'),
                    'alt'      => array('html' => '<input type="text" class="rooster-admin-input js-slot-alt aieo-ps-w-120" value="' . esc_attr((string) $r['alt_text']) . '" aria-label="' . esc_attr__('Alt', 'ai-eshop-optimizer') . '">'),
                    'delay'    => array('html' => '<input type="number" class="rooster-admin-input js-slot-delay aieo-ps-w-80" min="0" step="100" value="' . (int) $r['time_delay_ms'] . '" aria-label="' . esc_attr__('Delay (ms)', 'ai-eshop-optimizer') . '">'),
                    'campaign' => array('html' => $aieo_ps_camp),
                    'active'   => array('html' => '<label class="rooster-admin-check is-bare"><input type="checkbox" class="js-slot-active" value="1"' . checked((int) $r['is_active'], 1, false) . '><span class="screen-reader-text">' . esc_html__('Active', 'ai-eshop-optimizer') . '</span></label>'),
                    
                    'act'      => array_merge(
                        array(array('label' => $is_new ? __('Add', 'ai-eshop-optimizer') : __('Save', 'ai-eshop-optimizer'), 'attrs' => array('data-slot-act' => 'save'))),
                        $is_new ? array() : array(array('label' => __('Delete', 'ai-eshop-optimizer'), 'icon' => 'trash-2', 'destructive' => true, 'attrs' => array('data-slot-act' => 'delete')))
                    ),
                );
                if ($is_new) {
                    $aieo_ps_trow['_locked'] = __('New slots are added here, after the others.', 'ai-eshop-optimizer');
                }
                $aieo_ps_trows[] = $aieo_ps_trow;
            }
            
            
            
            echo \Rooster\Admin\Ui::table( 
                array(
                    array('key' => 'pos', 'label' => __('Pos', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'min'),
                    array('key' => 'type', 'label' => __('Type', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'min'),
                    array('key' => 'desktop', 'label' => __('Desktop img id', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'min'),
                    array('key' => 'mobile', 'label' => __('Mobile img id', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'min'),
                    array('key' => 'youtube', 'label' => __('YouTube id', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'sm', 'priority' => 'low'),
                    array('key' => 'url', 'label' => __('Target URL', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'md'),
                    array('key' => 'alt', 'label' => __('Alt', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'sm', 'priority' => 'low'),
                    array('key' => 'delay', 'label' => __('Delay (ms)', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'xs', 'priority' => 'low'),
                    array('key' => 'campaign', 'label' => __('Campaign', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'sm', 'priority' => 'low'),
                    array('key' => 'active', 'label' => __('Active', 'ai-eshop-optimizer'), 'type' => 'html', 'width' => 'min', 'align' => 'center'),
                    array('key' => 'act', 'label' => __('Actions', 'ai-eshop-optimizer'), 'type' => 'actions'),
                ),
                $aieo_ps_trows,
                array(
                    'id'      => 'aieo-promo-slots-table',
                    'caption' => __('Slots', 'ai-eshop-optimizer'),
                    'local'   => array('form' => true, 'prefix' => 'ps_'),
                    'move'    => array('label' => __('Slots', 'ai-eshop-optimizer')),
                    'chooser' => true,
                )
            );
            ?>
            <?php echo $aieo_ps_close; ?>
            <?php endif; ?>

            <?php $this->render_admin_js($nonce, $ajax, $surface_id); ?>
        <?php
    }

    
    private function render_media_picker_cell($kind, $id) {
        $thumb = $id > 0 ? wp_get_attachment_image_url($id, 'thumbnail') : '';
        $cls   = 'js-slot-' . $kind . '-id';
        ?>
        <div class="aieo-promo-media-picker" data-kind="<?php echo esc_attr($kind); ?>">
            <span class="js-slot-thumb"<?php echo $thumb ? ' style="background-image:url(\'' . esc_url($thumb) . '\')"' : ''; ?>></span>
            <input type="hidden" class="<?php echo esc_attr($cls); ?>" value="<?php echo (int) $id; ?>">
            <span class="aieo-promo-media-picker__buttons">
                <button type="button" class="rooster-admin-button rooster-admin-button--sm js-slot-pick" data-kind="<?php echo esc_attr($kind); ?>"><?php echo $id > 0 ? esc_html__('Replace', 'ai-eshop-optimizer') : esc_html__('Browse', 'ai-eshop-optimizer'); ?></button>
                <button type="button" class="rooster-admin-button rooster-admin-button--sm is-destructive js-slot-clear<?php echo $id > 0 ? '' : ' is-off'; ?>"><?php esc_html_e('Clear', 'ai-eshop-optimizer'); ?></button>
            </span>
        </div>
        <?php
    }

    private function render_admin_js($nonce, $ajax, $surface_id) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function(){
            var nonce  = <?php echo wp_json_encode($nonce); ?>;
            var ajax   = <?php echo wp_json_encode($ajax); ?>;
            var surfaceId = <?php echo (int) $surface_id; ?>;

            function post(action, payload, cb){
                var fd = new FormData();
                fd.set('action', action);
                fd.set('nonce', nonce);
                Object.keys(payload).forEach(function(k){ fd.set(k, payload[k]); });
                fetch(ajax, { method:'POST', credentials:'same-origin', body: fd })
                    .then(function(r){ return r.json(); })
                    .then(cb)
                    .catch(function(){ cb && cb({ success:false, data:{ message:'network error' } }); });
            }

            // Surface form save (UI wave 2): the library's Save sends rooster-admin:save; the answer is this handler's own, so
            // a refusal is never read as Saved and a new surface goes on to its edit view (it needs the id the handler returns).
            var surfForm = document.getElementById('aieo-card-promo-surfaces-edit-surface-form');
            if (surfForm) {
                surfForm.addEventListener('rooster-admin:save', function(e){
                    var body = new URLSearchParams(e.detail.body);
                    body.set('action', 'aieo_promo_save_surface');
                    body.set('nonce', nonce);
                    e.detail.respondWith(
                        fetch(ajax, { method:'POST', credentials:'same-origin', headers:{ 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' }, body: body.toString() })
                            .then(function(r){ return r.json(); })
                            .then(function(j){
                                if (j && j.success) {
                                    if (!surfaceId && j.data.surface_id) {
                                        // Reload to expose the slots panel for the new row (once the card has said Saved).
                                        var url = new URL(window.location.href);
                                        url.searchParams.set('promo_action', 'edit');
                                        url.searchParams.set('surface_id', j.data.surface_id);
                                        setTimeout(function(){ window.location.href = url.toString(); }, 700);
                                    }
                                    return { saved: true, message: j.data.message };
                                }
                                throw new Error((j && j.data && j.data.message) || 'error');
                            })
                    );
                });
            }

            // A move (grip, arrows, Move menu, Reset, Undo): the new sort_order list goes to the reorder endpoint, as
            // the drop's did, and the library's status line says the outcome.
            document.addEventListener('rooster-admin:order', function(e){
                if (!e.detail || e.detail.list !== 'aieo-promo-slots-table' || e.detail.reason === 'change') { return; }
                var order = [];
                (e.detail.order || []).forEach(function(key, i){
                    var slotId = parseInt(key, 10) || 0;
                    if (slotId > 0) { order.push({ slot_id: slotId, sort_order: i }); }
                });
                if (!order.length || !e.detail.save) { return; }
                e.detail.save(new Promise(function(resolve, reject){
                    post('aieo_promo_reorder', { order: JSON.stringify(order) }, function(j){
                        if (j && j.success) { resolve(); }
                        else { reject(new Error((j && j.data && j.data.message) || 'error')); }
                    });
                }));
            });

            // Media picker — opens wp.media, writes attachment id into
            // the row's hidden input + paints the thumbnail.
            document.addEventListener('click', function(ev){
                var pickBtn  = ev.target.closest('.js-slot-pick');
                var clearBtn = ev.target.closest('.js-slot-clear');
                if (pickBtn) {
                    if (typeof wp === 'undefined' || !wp.media) { return; }
                    var cell = pickBtn.closest('.aieo-promo-media-picker');
                    var kind = pickBtn.dataset.kind || 'desktop';
                    var frame = wp.media({
                        title: kind === 'mobile' ? 'Pick mobile image' : 'Pick desktop image',
                        button: { text: 'Use this image' },
                        library: { type: 'image' },
                        multiple: false
                    });
                    frame.on('select', function(){
                        var att = frame.state().get('selection').first().toJSON();
                        var thumb = (att.sizes && att.sizes.thumbnail) ? att.sizes.thumbnail.url : att.url;
                        cell.querySelector('.js-slot-thumb').style.backgroundImage = "url('" + thumb + "')";
                        var input = cell.querySelector('.js-slot-' + kind + '-id');
                        input.value = att.id;
                        // Hidden inputs don't fire `change` natively, so
                        // dispatch one explicitly — that triggers the
                        // auto-save listener registered above.
                        input.dispatchEvent(new Event('change', { bubbles: true }));
                        pickBtn.textContent = '<?php echo esc_js(__('Replace', 'ai-eshop-optimizer')); ?>';
                        cell.querySelector('.js-slot-clear').classList.remove('is-off');
                    });
                    frame.open();
                    return;
                }
                if (clearBtn) {
                    var cell2 = clearBtn.closest('.aieo-promo-media-picker');
                    var kind2 = cell2.dataset.kind || 'desktop';
                    cell2.querySelector('.js-slot-thumb').style.backgroundImage = '';
                    var input2 = cell2.querySelector('.js-slot-' + kind2 + '-id');
                    input2.value = 0;
                    input2.dispatchEvent(new Event('change', { bubbles: true }));
                    cell2.querySelector('.js-slot-pick').textContent = '<?php echo esc_js(__('Browse', 'ai-eshop-optimizer')); ?>';
                    clearBtn.classList.add('is-off');
                    return;
                }
            });

            // Build the AJAX payload from the current state of a row's
            // inputs. Used by both auto-save (on field change) and the
            // explicit Add button (for the empty trailing row).
            function buildPayload(row) {
                return {
                    slot_id:          row.dataset.slotId || 0,
                    surface_id:       surfaceId,
                    position:         row.querySelector('.js-slot-position').value,
                    slot_type:        row.querySelector('.js-slot-type').value,
                    sort_order:       Array.prototype.indexOf.call(row.parentNode.querySelectorAll('tr[data-slot-id]'), row),
                    desktop_image_id: row.querySelector('.js-slot-desktop-id').value,
                    mobile_image_id:  row.querySelector('.js-slot-mobile-id').value,
                    youtube_id:       row.querySelector('.js-slot-youtube').value,
                    target_url:       row.querySelector('.js-slot-url').value,
                    alt_text:         row.querySelector('.js-slot-alt').value,
                    time_delay_ms:    row.querySelector('.js-slot-delay').value,
                    campaign_id:      row.querySelector('.js-slot-campaign').value,
                    is_active:        row.querySelector('.js-slot-active').checked ? '1' : ''
                };
            }

            // A row's save answers in the card's outcome: its words, its data-tone (none while it saves), never a colour
            // painted on the outcome or the row from here.
            function saveRow(row, opts) {
                opts = opts || {};
                var st = document.getElementById('aieo-promo-slots-status');
                if (st) { delete st.dataset.tone; st.textContent = '<?php echo esc_js(__('Saving…', 'ai-eshop-optimizer')); ?>'; }
                post('aieo_promo_save_slot', buildPayload(row), function(j){
                    if (j && j.success) {
                        if (st) { st.dataset.tone = 'success'; st.textContent = j.data.message; }
                        if (opts.reload) { window.location.reload(); }
                    } else {
                        if (st) { st.dataset.tone = 'destructive'; st.textContent = (j && j.data && j.data.message) || 'error'; }
                    }
                });
            }

            // AUTO-SAVE — any change to an existing slot row's input,
            // select or checkbox commits immediately. The explicit
            // "Add" / "Save" button is kept only for the empty trailing
            // row (creating a brand-new slot needs an explicit step so
            // partial typing doesn't insert empty rows on every blur).
            document.addEventListener('change', function(ev){
                var row = ev.target.closest('tr[data-slot-id]');
                if (!row) { return; }
                var slotId = row.dataset.slotId;
                if (!slotId || slotId === '0') { return; } // empty/new row: needs explicit Add
                // Only react to actual editable fields in the row.
                var fields = ['js-slot-position','js-slot-type','js-slot-desktop-id','js-slot-mobile-id',
                              'js-slot-youtube','js-slot-url','js-slot-alt','js-slot-delay',
                              'js-slot-campaign','js-slot-active'];
                var t = ev.target;
                var hit = false;
                for (var i=0; i<fields.length; i++) { if (t.classList.contains(fields[i])) { hit = true; break; } }
                if (!hit) { return; }
                saveRow(row);
            });

            // Click handlers — explicit Add (new row) and Delete.
            document.addEventListener('click', function(ev){
                var row = ev.target.closest('tr[data-slot-id]');
                var act = row ? ev.target.closest('[data-slot-act]') : null;
                if (!act) { return; }
                if (act.dataset.slotAct === 'save') {
                    // For new rows we reload after success so the
                    // empty bottom row gets re-rendered with a fresh
                    // slot_id and a new empty trailing row appears.
                    var isNew = !row.dataset.slotId || row.dataset.slotId === '0';
                    saveRow(row, { reload: isNew });
                } else if (act.dataset.slotAct === 'delete') {
                    if (!confirm('<?php echo esc_js(__('Delete this slot?', 'ai-eshop-optimizer')); ?>')) { return; }
                    post('aieo_promo_delete_slot', { slot_id: row.dataset.slotId }, function(j){
                        if (j && j.success) { row.remove(); }
                    });
                }
            });
        });
        </script>
        <?php
    }
}