<?php
/**
 * BW Interactive Map Block
 * 
 * A custom interactive map block to display locations on a background image
 */

// Exit if accessed directly.
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Register the block
 */
function bw_register_interactive_map_block() {
    // Register block script
    wp_register_script(
        'bw-interactive-map-block-editor',
        get_stylesheet_directory_uri() . '/blocks/bw-interactive-map/block.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n', 'wp-block-editor', 'wp-server-side-render'),
        filemtime(get_stylesheet_directory() . '/blocks/bw-interactive-map/block.js')
    );

    // Register block editor style
    wp_register_style(
        'bw-interactive-map-block-editor',
        get_stylesheet_directory_uri() . '/blocks/bw-interactive-map/editor.css',
        array(),
        filemtime(get_stylesheet_directory() . '/blocks/bw-interactive-map/editor.css')
    );

    // Register frontend style
    wp_register_style(
        'bw-interactive-map-block',
        get_stylesheet_directory_uri() . '/blocks/bw-interactive-map/style.css',
        array(),
        filemtime(get_stylesheet_directory() . '/blocks/bw-interactive-map/style.css')
    );

    // Register frontend script
    wp_register_script(
        'bw-interactive-map-frontend',
        get_stylesheet_directory_uri() . '/blocks/bw-interactive-map/frontend.js',
        array('jquery'),
        filemtime(get_stylesheet_directory() . '/blocks/bw-interactive-map/frontend.js'),
        true
    );

    // Register the block
    register_block_type('bw/interactive-map', array(
        'editor_script' => 'bw-interactive-map-block-editor',
        'editor_style' => 'bw-interactive-map-block-editor',
        'style' => 'bw-interactive-map-block',
        'script' => 'bw-interactive-map-frontend',
        'render_callback' => 'bw_interactive_map_block_render',
        'attributes' => array(
            'uniqueId' => array(
                'type' => 'string',
                'default' => '',
            ),
            'backgroundImage' => array(
                'type' => 'object',
                'default' => array(
                    'url' => '',
                    'id' => 0,
                    'alt' => ''
                ),
            ),
            'points' => array(
                'type' => 'array',
                'default' => [],
                'items' => array(
                    'type' => 'object',
                ),
            ),
            'markerColor' => array(
                'type' => 'string',
                'default' => '#FF7063',
            ),
            'showTooltips' => array(
                'type' => 'boolean',
                'default' => true,
            ),
            'tooltipBgColor' => array(
                'type' => 'string',
                'default' => '#FFFFFF',
            ),
            'tooltipTextColor' => array(
                'type' => 'string',
                'default' => '#333333',
            ),
            'className' => array(
                'type' => 'string',
                'default' => '',
            ),
        ),
    ));
}
add_action('init', 'bw_register_interactive_map_block');

/**
 * Render the block on frontend
 */
function bw_interactive_map_block_render($attributes, $content) {
    // Extract attributes with defaults
    $unique_id = isset($attributes['uniqueId']) ? $attributes['uniqueId'] : 'map-' . wp_rand(10000, 99999);
    $background_image = isset($attributes['backgroundImage']) ? $attributes['backgroundImage'] : array('url' => '', 'id' => 0, 'alt' => '');
    $points = isset($attributes['points']) ? $attributes['points'] : array();
    $marker_color = isset($attributes['markerColor']) ? $attributes['markerColor'] : '#FF7063';
    $show_tooltips = isset($attributes['showTooltips']) ? $attributes['showTooltips'] : true;
    $tooltip_bg_color = isset($attributes['tooltipBgColor']) ? $attributes['tooltipBgColor'] : '#FFFFFF';
    $tooltip_text_color = isset($attributes['tooltipTextColor']) ? $attributes['tooltipTextColor'] : '#333333';
    $class_name = isset($attributes['className']) ? $attributes['className'] : '';

    // If no background image, show a placeholder
    if (empty($background_image['url'])) {
        return '<div class="bw-map-placeholder">Please select a background image for the map</div>';
    }

    // Start output buffer
    ob_start();
    ?>
    <style>
        /* Custom styles for this map instance */
        #<?php echo esc_attr($unique_id); ?> .bw-map-point-marker circle.point-circle {
            fill: <?php echo esc_attr($marker_color); ?>;
        }
        #<?php echo esc_attr($unique_id); ?> .bw-map-tooltip {
            background-color: <?php echo esc_attr($tooltip_bg_color); ?>;
            color: <?php echo esc_attr($tooltip_text_color); ?>;
        }
        #<?php echo esc_attr($unique_id); ?> .bw-map-tooltip::after {
            border-top-color: <?php echo esc_attr($tooltip_bg_color); ?>;
        }
        <?php
        // Output custom positioning for each point
        foreach ($points as $index => $point) {
            if (!empty($point['posX']) && !empty($point['posY'])) {
                echo '#' . esc_attr($unique_id) . ' .bw-map-point[data-index="' . esc_attr($index) . '"] { ';
                echo 'left: ' . esc_attr($point['posX']) . '%; ';
                echo 'top: ' . esc_attr($point['posY']) . '%; ';
                echo "}\n";
            }
        }
        ?>
    </style>

    <div id="<?php echo esc_attr($unique_id); ?>" class="bw-interactive-map <?php echo esc_attr($class_name); ?>">
        <div class="bw-map-container">
            <img src="<?php echo esc_url($background_image['url']); ?>" alt="<?php echo esc_attr($background_image['alt']); ?>" class="bw-map-background" />
            
            <div class="bw-map-points-container">
                <?php foreach ($points as $index => $point) { 
                    $title = isset($point['title']) ? $point['title'] : '';
                    $description = isset($point['description']) ? $point['description'] : '';
                    $has_tooltip = $show_tooltips && (!empty($title) || !empty($description));
                ?>
                <div class="bw-map-point" data-index="<?php echo esc_attr($index); ?>">
                    <div class="bw-map-point-marker">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                            x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" xml:space="preserve">
                            <g class="marker-outline">
                                <circle class="white-circle" cx="10" cy="10" r="9.5" fill="#FFFFFF" fill-opacity="0.75"/>
                                <path class="white-circle-outline" d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0L10,0z" fill="#FFFFFF" fill-opacity="0.75"/>
                            </g>
                            <g>
                                <circle class="point-circle" cx="10" cy="10" r="5.5"/>
                            </g>
                            <line x1="14" y1="10" x2="6" y2="10" fill="none" stroke="#FFFFFF" stroke-width="0.25" stroke-miterlimit="10"/>
                            <line x1="10" y1="6" x2="10" y2="14" fill="none" stroke="#FFFFFF" stroke-width="0.25" stroke-miterlimit="10"/>
                        </svg>
                    </div>
                    <?php if ($has_tooltip) { ?>
                    <div class="bw-map-tooltip">
                        <?php if (!empty($title)) { ?>
                            <h4 class="tooltip-title"><?php echo esc_html($title); ?></h4>
                        <?php } ?>
                        <?php if (!empty($description)) { ?>
                            <div class="tooltip-description"><?php echo wp_kses_post($description); ?></div>
                        <?php } ?>
                    </div>
                    <?php } ?>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>

    <?php
    // Return the buffered content
    return ob_get_clean();
}

/**
 * Add custom category for our blocks if needed
 */
function bw_block_categories_interactive_map($categories, $post) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'bw-blocks',
                'title' => __('BW Blocks', 'kadence-child'),
            ),
        )
    );
}
add_filter('block_categories_all', 'bw_block_categories_interactive_map', 10, 2);