<?php
/**
 * BW Image Hotspot - Gutenberg 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_hotspot_register_block() {
    // Register block script
    wp_register_script(
        'bw-image-hotspot-block-editor',
        BW_IMAGE_HOTSPOT_URL . 'assets/js/block.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n', 'wp-block-editor', 'wp-server-side-render' ),
        BW_IMAGE_HOTSPOT_VERSION
    );

    // Register block editor style
    wp_register_style(
        'bw-image-hotspot-block-editor',
        BW_IMAGE_HOTSPOT_URL . 'assets/css/editor.css',
        array(),
        BW_IMAGE_HOTSPOT_VERSION
    );

    // Register frontend style
    wp_register_style(
        'bw-image-hotspot-block',
        BW_IMAGE_HOTSPOT_URL . 'assets/css/style.css',
        array(),
        BW_IMAGE_HOTSPOT_VERSION
    );

    // Register frontend script
    wp_register_script(
        'bw-image-hotspot-block-frontend',
        BW_IMAGE_HOTSPOT_URL . 'assets/js/frontend.js',
        array( 'jquery' ),
        BW_IMAGE_HOTSPOT_VERSION,
        true
    );

    // Register the block
    register_block_type( 'bw/image-hotspot', array(
        'editor_script'   => 'bw-image-hotspot-block-editor',
        'editor_style'    => 'bw-image-hotspot-block-editor',
        'style'           => 'bw-image-hotspot-block',
        'script'          => 'bw-image-hotspot-block-frontend',
        'render_callback' => 'bw_hotspot_block_render',
        'attributes'      => array(
            'uniqueId'         => array(
                'type'    => 'string',
                'default' => '',
            ),
            'backgroundImage'  => array(
                'type'    => 'object',
                'default' => array(
                    'url' => '',
                    'id'  => 0,
                    'alt' => '',
                ),
            ),
            'points'           => array(
                'type'    => 'array',
                'default' => array(),
                '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_hotspot_register_block' );

/**
 * Render the block on frontend
 */
function bw_hotspot_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>
        #<?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 ob_get_clean();
}

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