<?php

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

    // Meta box callback for story details
    function story_shop_details_callback($post)
    {
        wp_nonce_field('story_shop_meta_box', 'story_shop_meta_box_nonce');

        $story_description = get_post_meta($post->ID, '_story_description', true);
        $enable_badge = get_post_meta($post->ID, '_enable_badge', true);
        $story_badge = get_post_meta($post->ID, '_story_badge', true);
        $enable_comments = get_post_meta($post->ID, '_enable_comments', true);
        $enable_products = get_post_meta($post->ID, '_enable_products', true);

    ?>
    <table class="form-table">
        <tr>
            <th scope="row">
                <label for="story_description"><?php _e('Story Description', 'kavehTheme'); ?></label>
            </th>
            <td>
                <textarea id="story_description" name="story_description" rows="4" cols="50" class="large-text"><?php echo esc_textarea($story_description); ?></textarea>
                <p class="description"><?php _e('Enter the story description that will be displayed in the modal.', 'kavehTheme'); ?></p>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="enable_badge"><?php _e('Enable Badge', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="checkbox" id="enable_badge" name="enable_badge" value="1" <?php checked($enable_badge, 1); ?> />
                <label for="enable_badge"><?php _e('Show badge on story', 'kavehTheme'); ?></label>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="story_badge"><?php _e('Badge Text', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="text" id="story_badge" name="story_badge" value="<?php echo esc_attr($story_badge); ?>" class="regular-text" />
                <p class="description"><?php _e('Text to display in the badge (only if badge is enabled).', 'kavehTheme'); ?></p>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="enable_comments"><?php _e('Enable Comments', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="checkbox" id="enable_comments" name="enable_comments" value="1" <?php checked($enable_comments, 1); ?> />
                <label for="enable_comments"><?php _e('Allow comments on this story', 'kavehTheme'); ?></label>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="enable_products"><?php _e('Enable Products', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="checkbox" id="enable_products" name="enable_products" value="1" <?php checked($enable_products, 1); ?> />
                <label for="enable_products"><?php _e('Show attached products in this story', 'kavehTheme'); ?></label>
            </td>
        </tr>
    </table>
<?php
}

// Meta box callback for story style
function story_shop_style_callback($post)
{
    $gradient_start = get_post_meta($post->ID, '_gradient_start', true) ?: '#833AB4';
    $gradient_middle = get_post_meta($post->ID, '_gradient_middle', true) ?: '#FD1D1D';
    $gradient_end = get_post_meta($post->ID, '_gradient_end', true) ?: '#FCB045';
    $container_width = get_post_meta($post->ID, '_container_width', true) ?: '90';
    $container_height = get_post_meta($post->ID, '_container_height', true) ?: '90';
    $image_width = get_post_meta($post->ID, '_image_width', true) ?: '80';
    $image_height = get_post_meta($post->ID, '_image_height', true) ?: '80';

    // Badge style
    $badge_gradient_start = get_post_meta($post->ID, '_badge_gradient_start', true) ?: '#833AB4';
    $badge_gradient_middle = get_post_meta($post->ID, '_badge_gradient_middle', true) ?: '#FD1D1D';
    $badge_gradient_end = get_post_meta($post->ID, '_badge_gradient_end', true) ?: '#FCB045';
    $badge_font_size = get_post_meta($post->ID, '_badge_font_size', true) ?: '11';
    $badge_margin_top = get_post_meta($post->ID, '_badge_margin_top', true) ?: '-20';
    $badge_border_radius = get_post_meta($post->ID, '_badge_border_radius', true) ?: '8';
    $badge_padding = get_post_meta($post->ID, '_badge_padding', true) ?: '7';
    $badge_font_weight = get_post_meta($post->ID, '_badge_font_weight', true) ?: '600';

?>
    <h4><?php _e('Story Container Style', 'kavehTheme'); ?></h4>
    <table class="form-table">
        <tr>
            <th scope="row"><?php _e('Gradient Colors', 'kavehTheme'); ?></th>
            <td>
                <label for="gradient_start"><?php _e('Start:', 'kavehTheme'); ?></label>
                <input type="color" id="gradient_start" name="gradient_start" value="<?php echo esc_attr($gradient_start); ?>" />
                <input type="text" id="gradient_start_hex" placeholder="#000000" value="<?php echo esc_attr($gradient_start); ?>" style="width: 80px; margin-left: 5px;" />

                <label for="gradient_middle"><?php _e('Middle:', 'kavehTheme'); ?></label>
                <input type="color" id="gradient_middle" name="gradient_middle" value="<?php echo esc_attr($gradient_middle); ?>" />
                <input type="text" id="gradient_middle_hex" placeholder="#000000" value="<?php echo esc_attr($gradient_middle); ?>" style="width: 80px; margin-left: 5px;" />

                <label for="gradient_end"><?php _e('End:', 'kavehTheme'); ?></label>
                <input type="color" id="gradient_end" name="gradient_end" value="<?php echo esc_attr($gradient_end); ?>" />
                <input type="text" id="gradient_end_hex" placeholder="#000000" value="<?php echo esc_attr($gradient_end); ?>" style="width: 80px; margin-left: 5px;" />
            </td>
        </tr>
        <tr>
            <th scope="row"><?php _e('Container Dimensions', 'kavehTheme'); ?></th>
            <td>
                <label for="container_width"><?php _e('Width:', 'kavehTheme'); ?></label>
                <input type="number" id="container_width" name="container_width" value="<?php echo esc_attr($container_width); ?>" min="50" max="200" /> px

                <label for="container_height"><?php _e('Height:', 'kavehTheme'); ?></label>
                <input type="number" id="container_height" name="container_height" value="<?php echo esc_attr($container_height); ?>" min="50" max="200" /> px
            </td>
        </tr>
        <tr>
            <th scope="row"><?php _e('Image Dimensions', 'kavehTheme'); ?></th>
            <td>
                <label for="image_width"><?php _e('Width:', 'kavehTheme'); ?></label>
                <input type="number" id="image_width" name="image_width" value="<?php echo esc_attr($image_width); ?>" min="40" max="180" /> px

                <label for="image_height"><?php _e('Height:', 'kavehTheme'); ?></label>
                <input type="number" id="image_height" name="image_height" value="<?php echo esc_attr($image_height); ?>" min="40" max="180" /> px
            </td>
        </tr>
    </table>

    <h4><?php _e('Badge Style', 'kavehTheme'); ?></h4>
    <table class="form-table">
        <tr>
            <th scope="row"><?php _e('Badge Gradient Colors', 'kavehTheme'); ?></th>
            <td>
                <label for="badge_gradient_start"><?php _e('Start:', 'kavehTheme'); ?></label>
                <input type="color" id="badge_gradient_start" name="badge_gradient_start" value="<?php echo esc_attr($badge_gradient_start); ?>" />
                <input type="text" id="badge_gradient_start_hex" placeholder="#000000" value="<?php echo esc_attr($badge_gradient_start); ?>" style="width: 80px; margin-left: 5px;" />

                <label for="badge_gradient_middle"><?php _e('Middle:', 'kavehTheme'); ?></label>
                <input type="color" id="badge_gradient_middle" name="badge_gradient_middle" value="<?php echo esc_attr($badge_gradient_middle); ?>" />
                <input type="text" id="badge_gradient_middle_hex" placeholder="#000000" value="<?php echo esc_attr($badge_gradient_middle); ?>" style="width: 80px; margin-left: 5px;" />

                <label for="badge_gradient_end"><?php _e('End:', 'kavehTheme'); ?></label>
                <input type="color" id="badge_gradient_end" name="badge_gradient_end" value="<?php echo esc_attr($badge_gradient_end); ?>" />
                <input type="text" id="badge_gradient_end_hex" placeholder="#000000" value="<?php echo esc_attr($badge_gradient_end); ?>" style="width: 80px; margin-left: 5px;" />
            </td>
        </tr>
        <tr>
            <th scope="row"><?php _e('Badge Typography', 'kavehTheme'); ?></th>
            <td>
                <label for="badge_font_size"><?php _e('Font Size:', 'kavehTheme'); ?></label>
                <input type="number" id="badge_font_size" name="badge_font_size" value="<?php echo esc_attr($badge_font_size); ?>" min="8" max="20" /> px

                <label for="badge_font_weight"><?php _e('Font Weight:', 'kavehTheme'); ?></label>
                <select id="badge_font_weight" name="badge_font_weight">
                    <option value="400" <?php selected($badge_font_weight, '400'); ?>><?php _e('Normal', 'kavehTheme'); ?></option>
                    <option value="600" <?php selected($badge_font_weight, '600'); ?>><?php _e('Semi Bold', 'kavehTheme'); ?></option>
                    <option value="700" <?php selected($badge_font_weight, '700'); ?>><?php _e('Bold', 'kavehTheme'); ?></option>
                </select>
            </td>
        </tr>
        <tr>
            <th scope="row"><?php _e('Badge Spacing', 'kavehTheme'); ?></th>
            <td>
                <label for="badge_margin_top"><?php _e('Margin Top:', 'kavehTheme'); ?></label>
                <input type="number" id="badge_margin_top" name="badge_margin_top" value="<?php echo esc_attr($badge_margin_top); ?>" min="-50" max="50" /> px

                <label for="badge_padding"><?php _e('Padding:', 'kavehTheme'); ?></label>
                <input type="number" id="badge_padding" name="badge_padding" value="<?php echo esc_attr($badge_padding); ?>" min="2" max="20" /> px

                <label for="badge_border_radius"><?php _e('Border Radius:', 'kavehTheme'); ?></label>
                <input type="number" id="badge_border_radius" name="badge_border_radius" value="<?php echo esc_attr($badge_border_radius); ?>" min="0" max="20" /> px
            </td>
        </tr>
    </table>
<?php
}

// Meta box callback for story media
function story_shop_media_callback($post)
{
    $media_type = get_post_meta($post->ID, '_media_type', true) ?: 'image';
    $story_image = get_post_meta($post->ID, '_story_image', true);
    $story_video = get_post_meta($post->ID, '_story_video', true);
    $story_thumbnail = get_post_meta($post->ID, '_story_thumbnail', true);

?>
    <table class="form-table">
        <tr>
            <th scope="row">
                <label for="media_type"><?php _e('Media Type', 'kavehTheme'); ?></label>
            </th>
            <td>
                <select id="media_type" name="media_type">
                    <option value="image" <?php selected($media_type, 'image'); ?>><?php _e('Image', 'kavehTheme'); ?></option>
                    <option value="video" <?php selected($media_type, 'video'); ?>><?php _e('Video', 'kavehTheme'); ?></option>
                </select>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="story_image"><?php _e('Story Image', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="hidden" id="story_image" name="story_image" value="<?php echo esc_attr($story_image); ?>" />
                <button type="button" class="button" id="upload_story_image"><?php _e('Upload Image', 'kavehTheme'); ?></button>
                <button type="button" class="button" id="remove_story_image" style="<?php echo empty($story_image) ? 'display:none;' : ''; ?>"><?php _e('Remove', 'kavehTheme'); ?></button>
                <div id="story_image_preview" style="margin-top: 10px;">
                    <?php if ($story_image): ?>
                        <img src="<?php echo wp_get_attachment_image_url($story_image, 'medium'); ?>" style="max-width: 200px; height: auto;" />
                    <?php endif; ?>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="story_video"><?php _e('Story Video', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="hidden" id="story_video" name="story_video" value="<?php echo esc_attr($story_video); ?>" />
                <button type="button" class="button" id="upload_story_video"><?php _e('Upload Video', 'kavehTheme'); ?></button>
                <button type="button" class="button" id="remove_story_video" style="<?php echo empty($story_video) ? 'display:none;' : ''; ?>"><?php _e('Remove', 'kavehTheme'); ?></button>
                <div id="story_video_preview" style="margin-top: 10px;">
                    <?php if ($story_video): ?>
                        <video controls style="max-width: 200px; height: auto;">
                            <source src="<?php echo wp_get_attachment_url($story_video); ?>" type="video/mp4">
                        </video>
                    <?php endif; ?>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <label for="story_thumbnail"><?php _e('Custom Thumbnail', 'kavehTheme'); ?></label>
            </th>
            <td>
                <input type="hidden" id="story_thumbnail" name="story_thumbnail" value="<?php echo esc_attr($story_thumbnail); ?>" />
                <button type="button" class="button" id="upload_story_thumbnail"><?php _e('Upload Thumbnail', 'kavehTheme'); ?></button>
                <button type="button" class="button" id="remove_story_thumbnail" style="<?php echo empty($story_thumbnail) ? 'display:none;' : ''; ?>"><?php _e('Remove', 'kavehTheme'); ?></button>
                <div id="story_thumbnail_preview" style="margin-top: 10px;">
                    <?php if ($story_thumbnail): ?>
                        <img src="<?php echo wp_get_attachment_image_url($story_thumbnail, 'thumbnail'); ?>" style="max-width: 100px; height: auto;" />
                    <?php endif; ?>
                </div>
                <p class="description"><?php _e('Optional custom thumbnail. If not set, the featured image or story image will be used.', 'kavehTheme'); ?></p>
            </td>
        </tr>
    </table>

    <script>
        jQuery(document).ready(function($) {
            // Media uploader for images and videos
            var mediaUploader;

            $('#upload_story_image').click(function(e) {
                e.preventDefault();
                if (mediaUploader) {
                    mediaUploader.open();
                    return;
                }
                mediaUploader = wp.media({
                    title: '<?php _e("Choose Story Image", "kavehTheme"); ?>',
                    button: {
                        text: '<?php _e("Choose Image", "kavehTheme"); ?>'
                    },
                    multiple: false,
                    library: {
                        type: 'image'
                    }
                });
                mediaUploader.on('select', function() {
                    var attachment = mediaUploader.state().get('selection').first().toJSON();
                    $('#story_image').val(attachment.id);
                    
                    // Use fallback for image URL if medium size is not available
                    var imageUrl = attachment.url; // Default to full size
                    if (attachment.sizes && attachment.sizes.medium && attachment.sizes.medium.url) {
                        imageUrl = attachment.sizes.medium.url;
                    } else if (attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url) {
                        imageUrl = attachment.sizes.thumbnail.url;
                    }
                    
                    $('#story_image_preview').html('<img src="' + imageUrl + '" style="max-width: 200px; height: auto;" />');
                    $('#remove_story_image').show();
                });
                mediaUploader.open();
            });

            $('#remove_story_image').click(function() {
                $('#story_image').val('');
                $('#story_image_preview').html('');
                $(this).hide();
            });

            $('#upload_story_video').click(function(e) {
                e.preventDefault();
                var videoUploader = wp.media({
                    title: '<?php _e("Choose Story Video", "kavehTheme"); ?>',
                    button: {
                        text: '<?php _e("Choose Video", "kavehTheme"); ?>'
                    },
                    multiple: false,
                    library: {
                        type: 'video'
                    }
                });
                videoUploader.on('select', function() {
                    var attachment = videoUploader.state().get('selection').first().toJSON();
                    $('#story_video').val(attachment.id);
                    $('#story_video_preview').html('<video controls style="max-width: 200px; height: auto;"><source src="' + attachment.url + '" type="video/mp4"></video>');
                    $('#remove_story_video').show();
                });
                videoUploader.open();
            });

            $('#remove_story_video').click(function() {
                $('#story_video').val('');
                $('#story_video_preview').html('');
                $(this).hide();
            });

            $('#upload_story_thumbnail').click(function(e) {
                e.preventDefault();
                var thumbnailUploader = wp.media({
                    title: '<?php _e("Choose Thumbnail", "kavehTheme"); ?>',
                    button: {
                        text: '<?php _e("Choose Thumbnail", "kavehTheme"); ?>'
                    },
                    multiple: false,
                    library: {
                        type: 'image'
                    }
                });
                thumbnailUploader.on('select', function() {
                    var attachment = thumbnailUploader.state().get('selection').first().toJSON();
                    $('#story_thumbnail').val(attachment.id);
                    
                    // Use fallback for image URL if thumbnail size is not available
                    var imageUrl = attachment.url; // Default to full size
                    if (attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url) {
                        imageUrl = attachment.sizes.thumbnail.url;
                    } else if (attachment.sizes && attachment.sizes.medium && attachment.sizes.medium.url) {
                        imageUrl = attachment.sizes.medium.url;
                    }
                    
                    $('#story_thumbnail_preview').html('<img src="' + imageUrl + '" style="max-width: 100px; height: auto;" />');
                    $('#remove_story_thumbnail').show();
                });
                thumbnailUploader.open();
            });

            $('#remove_story_thumbnail').click(function() {
                $('#story_thumbnail').val('');
                $('#story_thumbnail_preview').html('');
                $(this).hide();
            });
            
            // Initialize WordPress color picker for all color input fields
            $('input[type="color"]').wpColorPicker({
                change: function(event, ui) {
                    // Update corresponding hex input when color picker changes
                    var hexInput = $('#' + $(this).attr('id') + '_hex');
                    if (hexInput.length) {
                        hexInput.val(ui.color.toString());
                    }
                },
                clear: function() {
                    // Clear corresponding hex input when color is cleared
                    var hexInput = $('#' + $(this).attr('id') + '_hex');
                    if (hexInput.length) {
                        hexInput.val('');
                    }
                }
            });
            
            // Sync hex inputs with color pickers
            $('input[id$="_hex"]').on('input change', function() {
                var colorInputId = $(this).attr('id').replace('_hex', '');
                var colorInput = $('#' + colorInputId);
                var hexValue = $(this).val();
                
                // Validate hex color format
                if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hexValue)) {
                    colorInput.val(hexValue).trigger('change');
                    colorInput.wpColorPicker('color', hexValue);
                }
            });
        });
    </script>
<?php
}

// Meta box callback for attached products
function story_shop_products_callback($post)
{
    $attached_products = get_post_meta($post->ID, '_attached_products', true);
    if (!is_array($attached_products)) {
        $attached_products = array();
    }

?>
    <div id="story-products-container">
        <div id="selected-products">
            <?php foreach ($attached_products as $product_id):
                $product = wc_get_product($product_id);
                if ($product): ?>
                    <div class="selected-product" data-product-id="<?php echo $product_id; ?>">
                        <span><?php echo $product->get_name(); ?></span>
                        <button type="button" class="remove-product">×</button>
                        <input type="hidden" name="attached_products[]" value="<?php echo $product_id; ?>" />
                    </div>
            <?php endif;
            endforeach; ?>
        </div>

        <div class="product-search">
            <input type="text" id="product-search-input" placeholder="<?php _e('Search products...', 'kavehTheme'); ?>" />
            <div id="product-search-results"></div>
        </div>
    </div>

    <style>
        .selected-product {
            background: #f1f1f1;
            padding: 5px 10px;
            margin: 5px 0;
            border-radius: 3px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .remove-product {
            background: #dc3232;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
        }

        #product-search-results {
            border: 1px solid #ddd;
            max-height: 200px;
            overflow-y: auto;
            display: none;
            background: white;
            position: relative;
            z-index: 1000;
        }

        .product-result {
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .product-result:hover {
            background: #f9f9f9;
        }

        .product-result img {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }
    </style>

    <script>
        jQuery(document).ready(function($) {
            var searchTimeout;

            $('#product-search-input').on('input', function() {
                var searchTerm = $(this).val();

                clearTimeout(searchTimeout);

                if (searchTerm.length < 2) {
                    $('#product-search-results').hide();
                    return;
                }

                searchTimeout = setTimeout(function() {
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {
                            action: 'story_shop_search_products',
                            search: searchTerm,
                            nonce: '<?php echo wp_create_nonce("story_shop_nonce"); ?>'
                        },
                        success: function(response) {
                            if (response.success) {
                                var html = '';
                                response.data.forEach(function(product) {
                                    html += '<div class="product-result" data-product-id="' + product.id + '">';
                                    if (product.image) {
                                        html += '<img src="' + product.image + '" alt="' + product.title + '" />';
                                    }
                                    html += '<div>';
                                    html += '<div>' + product.title + '</div>';
                                    html += '<div style="color: #666; font-size: 12px;">' + product.price + '</div>';
                                    html += '</div>';
                                    html += '</div>';
                                });
                                $('#product-search-results').html(html).show();
                            }
                        }
                    });
                }, 300);
            });

            $(document).on('click', '.product-result', function() {
                var productId = $(this).data('product-id');
                var productTitle = $(this).find('div > div').first().text();

                // Check if product is already selected
                if ($('.selected-product[data-product-id="' + productId + '"]').length > 0) {
                    alert('<?php _e("Product already selected", "kavehTheme"); ?>');
                    return;
                }

                // Add to selected products
                var html = '<div class="selected-product" data-product-id="' + productId + '">';
                html += '<span>' + productTitle + '</span>';
                html += '<button type="button" class="remove-product">×</button>';
                html += '<input type="hidden" name="attached_products[]" value="' + productId + '" />';
                html += '</div>';

                $('#selected-products').append(html);
                $('#product-search-input').val('');
                $('#product-search-results').hide();
            });

            $(document).on('click', '.remove-product', function() {
                $(this).closest('.selected-product').remove();
            });

            // Hide search results when clicking outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.product-search').length) {
                    $('#product-search-results').hide();
                }
            });
        });
    </script>
<?php
}

// Save meta box data
function story_shop_save_meta_boxes($post_id)
{
    // Check if nonce is valid
    if (!isset($_POST['story_shop_meta_box_nonce']) || !wp_verify_nonce($_POST['story_shop_meta_box_nonce'], 'story_shop_meta_box')) {
        return;
    }

    // Check if user has permission to edit the post
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // Check if not an autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // Check post type
    if (get_post_type($post_id) !== 'story_shop') {
        return;
    }

    // Save story details
    $fields = array(
        'story_description',
        'enable_badge',
        'story_badge',
        'enable_comments',
        'enable_products',
        'gradient_start',
        'gradient_middle',
        'gradient_end',
        'container_width',
        'container_height',
        'image_width',
        'image_height',
        'badge_gradient_start',
        'badge_gradient_middle',
        'badge_gradient_end',
        'badge_font_size',
        'badge_margin_top',
        'badge_border_radius',
        'badge_padding',
        'badge_font_weight',
        'media_type',
        'story_image',
        'story_video',
        'story_thumbnail'
    );

    foreach ($fields as $field) {
        $value = isset($_POST[$field]) ? sanitize_text_field($_POST[$field]) : '';
        update_post_meta($post_id, '_' . $field, $value);
    }

    // Save attached products
    $attached_products = isset($_POST['attached_products']) ? array_map('intval', $_POST['attached_products']) : array();
    update_post_meta($post_id, '_attached_products', $attached_products);
}

// Enqueue media uploader scripts
add_action('admin_enqueue_scripts', 'story_shop_admin_scripts');

function story_shop_admin_scripts($hook)
{
    global $post_type;

    if ($hook === 'post.php' || $hook === 'post-new.php') {
        if ($post_type === 'story_shop') {
            wp_enqueue_media();
            wp_enqueue_script('jquery');
            
            // Enqueue WordPress color picker
            wp_enqueue_style('wp-color-picker');
            wp_enqueue_script('wp-color-picker');
        }
    }
}
