<?php
/**
 * Native WordPress Block Registration - Simplified
 */

add_action('init', function() {
    // Check if block is already registered to prevent duplicate registration
    $registry = WP_Block_Type_Registry::get_instance();
    if ( $registry->is_registered( 'bw/step-layout' ) ) {
        return; // Block already registered, exit early
    }
    
    // Register the block with minimal JS
    wp_register_script(
        'bw-step-layout-editor',
        get_stylesheet_directory_uri() . '/blocks/bw-step-layout/editor-simple.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
        filemtime(get_stylesheet_directory() . '/blocks/bw-step-layout/editor-simple.js')
    );
    
    // Register frontend script for animations
    wp_register_script(
        'bw-step-layout-frontend',
        get_stylesheet_directory_uri() . '/blocks/bw-step-layout/frontend.js',
        array(),
        filemtime(get_stylesheet_directory() . '/blocks/bw-step-layout/frontend.js'),
        true // Load in footer
    );
    
    wp_register_style(
        'bw-step-layout-style',
        get_stylesheet_directory_uri() . '/blocks/bw-step-layout/style-index.css',
        array(),
        filemtime(get_stylesheet_directory() . '/blocks/bw-step-layout/style-index.css')
    );
    
    wp_register_style(
        'bw-step-layout-editor-style',
        get_stylesheet_directory_uri() . '/blocks/bw-step-layout/index.css',
        array(),
        filemtime(get_stylesheet_directory() . '/blocks/bw-step-layout/index.css')
    );
    
    register_block_type('bw/step-layout', array(
        'editor_script' => 'bw-step-layout-editor',
        'editor_style' => 'bw-step-layout-editor-style',
        'style' => 'bw-step-layout-style',
        'script' => 'bw-step-layout-frontend',
        'render_callback' => 'bw_render_native_step_layout',
        'attributes' => array(
            'stepDirection' => array(
                'type' => 'string',
                'default' => 'low-to-high',
            ),
            'align' => array(
                'type' => 'string',
                'default' => '',
            ),
            'simpleMode' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            // Padding settings
            'paddingDesktop' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '40',
                    'right' => '20',
                    'bottom' => '40',
                    'left' => '20',
                    'unit' => 'px'
                ),
            ),
            'paddingTablet' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '30',
                    'right' => '20',
                    'bottom' => '30',
                    'left' => '20',
                    'unit' => 'px'
                ),
            ),
            'paddingMobile' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '20',
                    'right' => '15',
                    'bottom' => '20',
                    'left' => '15',
                    'unit' => 'px'
                ),
            ),
            // Margin settings
            'marginDesktop' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '60',
                    'right' => '0',
                    'bottom' => '60',
                    'left' => '0',
                    'unit' => 'px'
                ),
            ),
            'marginTablet' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '40',
                    'right' => '0',
                    'bottom' => '40',
                    'left' => '0',
                    'unit' => 'px'
                ),
            ),
            'marginMobile' => array(
                'type' => 'object',
                'default' => array(
                    'top' => '30',
                    'right' => '0',
                    'bottom' => '30',
                    'left' => '0',
                    'unit' => 'px'
                ),
            ),
            // Card 1
            'card1Title' => array(
                'type' => 'string',
                'default' => 'Dining',
            ),
            'card1Description' => array(
                'type' => 'string',
                'default' => 'Hartling Group Resorts showcase the very best in Turks and Caicos restaurant experiences.',
            ),
            'card1ButtonText' => array(
                'type' => 'string',
                'default' => 'DISCOVER MORE',
            ),
            'card1ButtonUrl' => array(
                'type' => 'string',
                'default' => '#',
            ),
            'card1BackgroundId' => array(
                'type' => 'number',
                'default' => 0,
            ),
            'card1BackgroundUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card1OverlayOpacityBottom' => array(
                'type' => 'number',
                'default' => 80,
            ),
            'card1OverlayOpacityTop' => array(
                'type' => 'number',
                'default' => 20,
            ),
            'card1PlainMode' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card1OpenInNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card1HeadingUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card1HeadingNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            // Card 2
            'card2Title' => array(
                'type' => 'string',
                'default' => 'Retail & Spa',
            ),
            'card2Description' => array(
                'type' => 'string',
                'default' => 'Each of the Hartling Group resorts comes complete with exceptional, on-site shopping opportunities.',
            ),
            'card2ButtonText' => array(
                'type' => 'string',
                'default' => 'EXPLORE',
            ),
            'card2ButtonUrl' => array(
                'type' => 'string',
                'default' => '#',
            ),
            'card2BackgroundId' => array(
                'type' => 'number',
                'default' => 0,
            ),
            'card2BackgroundUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card2OverlayOpacityBottom' => array(
                'type' => 'number',
                'default' => 80,
            ),
            'card2OverlayOpacityTop' => array(
                'type' => 'number',
                'default' => 20,
            ),
            'card2PlainMode' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card2OpenInNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card2HeadingUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card2HeadingNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            // Card 3
            'card3Title' => array(
                'type' => 'string',
                'default' => 'PRIVE Fine Ocean Charters',
            ),
            'card3Description' => array(
                'type' => 'string',
                'default' => 'Offering a variety of exclusive services like offshore fishing, romantic beach getaways and diving.',
            ),
            'card3ButtonText' => array(
                'type' => 'string',
                'default' => 'LEARN MORE',
            ),
            'card3ButtonUrl' => array(
                'type' => 'string',
                'default' => '#',
            ),
            'card3BackgroundId' => array(
                'type' => 'number',
                'default' => 0,
            ),
            'card3BackgroundUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card3OverlayOpacityBottom' => array(
                'type' => 'number',
                'default' => 80,
            ),
            'card3OverlayOpacityTop' => array(
                'type' => 'number',
                'default' => 20,
            ),
            'card3PlainMode' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card3OpenInNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
            'card3HeadingUrl' => array(
                'type' => 'string',
                'default' => '',
            ),
            'card3HeadingNewTab' => array(
                'type' => 'boolean',
                'default' => false,
            ),
        ),
    ));
});

function bw_render_native_step_layout($attributes) {
    $direction = isset($attributes['stepDirection']) ? $attributes['stepDirection'] : 'low-to-high';
    $align = isset($attributes['align']) ? 'align' . $attributes['align'] : '';
    $simple_mode = isset($attributes['simpleMode']) ? $attributes['simpleMode'] : false;
    
    // Generate unique ID for this block instance
    $block_id = 'bw-step-layout-' . uniqid();
    
    $class_name = 'wp-block-bw-step-layout bw-step-layout bw-step-layout--' . esc_attr($direction) . ' ' . $block_id;
    if ($align) {
        $class_name .= ' ' . $align;
    }
    if ($simple_mode) {
        $class_name .= ' bw-step-layout--simple-mode';
    }
    
    // Extract padding and margin values
    $padding_desktop = isset($attributes['paddingDesktop']) ? $attributes['paddingDesktop'] : array('top' => '40', 'right' => '20', 'bottom' => '40', 'left' => '20', 'unit' => 'px');
    $padding_tablet = isset($attributes['paddingTablet']) ? $attributes['paddingTablet'] : array('top' => '30', 'right' => '20', 'bottom' => '30', 'left' => '20', 'unit' => 'px');
    $padding_mobile = isset($attributes['paddingMobile']) ? $attributes['paddingMobile'] : array('top' => '20', 'right' => '15', 'bottom' => '20', 'left' => '15', 'unit' => 'px');
    
    $margin_desktop = isset($attributes['marginDesktop']) ? $attributes['marginDesktop'] : array('top' => '60', 'right' => '0', 'bottom' => '60', 'left' => '0', 'unit' => 'px');
    $margin_tablet = isset($attributes['marginTablet']) ? $attributes['marginTablet'] : array('top' => '40', 'right' => '0', 'bottom' => '40', 'left' => '0', 'unit' => 'px');
    $margin_mobile = isset($attributes['marginMobile']) ? $attributes['marginMobile'] : array('top' => '30', 'right' => '0', 'bottom' => '30', 'left' => '0', 'unit' => 'px');
    
    // Generate responsive CSS
    $responsive_css = '<style>';
    
    // Desktop styles
    $responsive_css .= '.' . $block_id . ' {';
    $responsive_css .= 'margin: ' . esc_attr($margin_desktop['top'] . $margin_desktop['unit']) . ' ' . esc_attr($margin_desktop['right'] . $margin_desktop['unit']) . ' ' . esc_attr($margin_desktop['bottom'] . $margin_desktop['unit']) . ' ' . esc_attr($margin_desktop['left'] . $margin_desktop['unit']) . ';';
    $responsive_css .= '}';
    
    $responsive_css .= '.' . $block_id . ' .bw-step-layout__inner {';
    $responsive_css .= 'padding: ' . esc_attr($padding_desktop['top'] . $padding_desktop['unit']) . ' ' . esc_attr($padding_desktop['right'] . $padding_desktop['unit']) . ' ' . esc_attr($padding_desktop['bottom'] . $padding_desktop['unit']) . ' ' . esc_attr($padding_desktop['left'] . $padding_desktop['unit']) . ';';
    $responsive_css .= '}';
    
    // Tablet styles
    $responsive_css .= '@media (max-width: 1024px) {';
    $responsive_css .= '.' . $block_id . ' {';
    $responsive_css .= 'margin: ' . esc_attr($margin_tablet['top'] . $margin_tablet['unit']) . ' ' . esc_attr($margin_tablet['right'] . $margin_tablet['unit']) . ' ' . esc_attr($margin_tablet['bottom'] . $margin_tablet['unit']) . ' ' . esc_attr($margin_tablet['left'] . $margin_tablet['unit']) . ';';
    $responsive_css .= '}';
    $responsive_css .= '.' . $block_id . ' .bw-step-layout__inner {';
    $responsive_css .= 'padding: ' . esc_attr($padding_tablet['top'] . $padding_tablet['unit']) . ' ' . esc_attr($padding_tablet['right'] . $padding_tablet['unit']) . ' ' . esc_attr($padding_tablet['bottom'] . $padding_tablet['unit']) . ' ' . esc_attr($padding_tablet['left'] . $padding_tablet['unit']) . ';';
    $responsive_css .= '}';
    $responsive_css .= '}';
    
    // Mobile styles
    $responsive_css .= '@media (max-width: 768px) {';
    $responsive_css .= '.' . $block_id . ' {';
    $responsive_css .= 'margin: ' . esc_attr($margin_mobile['top'] . $margin_mobile['unit']) . ' ' . esc_attr($margin_mobile['right'] . $margin_mobile['unit']) . ' ' . esc_attr($margin_mobile['bottom'] . $margin_mobile['unit']) . ' ' . esc_attr($margin_mobile['left'] . $margin_mobile['unit']) . ';';
    $responsive_css .= '}';
    $responsive_css .= '.' . $block_id . ' .bw-step-layout__inner {';
    $responsive_css .= 'padding: ' . esc_attr($padding_mobile['top'] . $padding_mobile['unit']) . ' ' . esc_attr($padding_mobile['right'] . $padding_mobile['unit']) . ' ' . esc_attr($padding_mobile['bottom'] . $padding_mobile['unit']) . ' ' . esc_attr($padding_mobile['left'] . $padding_mobile['unit']) . ';';
    $responsive_css .= '}';
    $responsive_css .= '}';
    
    $responsive_css .= '</style>';
    
    // Extract card data
    $cards = array();
    for ($i = 1; $i <= 3; $i++) {
        $cards[] = array(
            'title' => isset($attributes['card'.$i.'Title']) ? $attributes['card'.$i.'Title'] : 'Card '.$i,
            'description' => isset($attributes['card'.$i.'Description']) ? $attributes['card'.$i.'Description'] : 'Description for card '.$i,
            'buttonText' => isset($attributes['card'.$i.'ButtonText']) ? $attributes['card'.$i.'ButtonText'] : 'LEARN MORE',
            'buttonUrl' => isset($attributes['card'.$i.'ButtonUrl']) ? $attributes['card'.$i.'ButtonUrl'] : '#',
            'backgroundUrl' => isset($attributes['card'.$i.'BackgroundUrl']) ? $attributes['card'.$i.'BackgroundUrl'] : '',
            'overlayOpacityBottom' => isset($attributes['card'.$i.'OverlayOpacityBottom']) ? $attributes['card'.$i.'OverlayOpacityBottom'] : 80,
            'overlayOpacityTop' => isset($attributes['card'.$i.'OverlayOpacityTop']) ? $attributes['card'.$i.'OverlayOpacityTop'] : 20,
            'plainMode' => isset($attributes['card'.$i.'PlainMode']) ? $attributes['card'.$i.'PlainMode'] : false,
            'openInNewTab' => isset($attributes['card'.$i.'OpenInNewTab']) ? $attributes['card'.$i.'OpenInNewTab'] : false,
            'headingUrl' => isset($attributes['card'.$i.'HeadingUrl']) ? $attributes['card'.$i.'HeadingUrl'] : '',
            'headingNewTab' => isset($attributes['card'.$i.'HeadingNewTab']) ? $attributes['card'.$i.'HeadingNewTab'] : false,
        );
    }
    
    ob_start();
    
    // Output responsive CSS
    echo $responsive_css;
    ?>
    <div class="<?php echo esc_attr($class_name); ?>">
        <div class="bw-step-layout__inner">
            <?php foreach ($cards as $index => $card): 
                $card_num = $index + 1;
                $is_plain = $card['plainMode'];
                $has_image = !empty($card['backgroundUrl']) && !$is_plain;
                $overlay_opacity_bottom = $card['overlayOpacityBottom'] / 100; // Convert to decimal
                $overlay_opacity_top = $card['overlayOpacityTop'] / 100; // Convert to decimal
                $card_classes = 'bw-step-layout__card bw-step-layout__card--' . $card_num;
                if ($is_plain) {
                    $card_classes .= ' bw-step-layout__card--plain';
                }
            ?>
            <div class="<?php echo esc_attr($card_classes); ?>" 
                 <?php if($has_image): ?>data-has-image="true"<?php endif; ?>
                 <?php if($is_plain): ?>data-plain-mode="true"<?php endif; ?>
                 style="--overlay-opacity-bottom: <?php echo esc_attr($overlay_opacity_bottom); ?>; --overlay-opacity-top: <?php echo esc_attr($overlay_opacity_top); ?>;">
                <?php if ($has_image): ?>
                    <div class="bw-step-layout__background">
                        <img src="<?php echo esc_url($card['backgroundUrl']); ?>" alt="" />
                    </div>
                    <div class="bw-step-layout__overlay"></div>
                <?php endif; ?>
                <div class="bw-step-layout__content">
                    <?php 
                    // Heading with optional link
                    if (!empty($card['headingUrl']) && $simple_mode): 
                        $heading_target = $card['headingNewTab'] ? '_blank' : '_self';
                        $heading_rel = $card['headingNewTab'] ? 'noopener noreferrer' : '';
                    ?>
                        <h3 class="bw-step-layout__title">
                            <a href="<?php echo esc_url($card['headingUrl']); ?>" 
                               target="<?php echo esc_attr($heading_target); ?>"
                               <?php if ($heading_rel): ?>rel="<?php echo esc_attr($heading_rel); ?>"<?php endif; ?>>
                                <?php echo esc_html($card['title']); ?>
                            </a>
                        </h3>
                    <?php else: ?>
                        <h3 class="bw-step-layout__title"><?php echo esc_html($card['title']); ?></h3>
                    <?php endif; ?>
                    
                    <?php if (!$simple_mode): ?>
                        <p class="bw-step-layout__description"><?php echo esc_html($card['description']); ?></p>
                        <?php if (!empty($card['buttonText']) && !$is_plain): 
                            $target = $card['openInNewTab'] ? '_blank' : '_self';
                            $rel = $card['openInNewTab'] ? 'noopener noreferrer' : '';
                        ?>
                        <a href="<?php echo esc_url($card['buttonUrl']); ?>" 
                           class="bw-step-layout__button"
                           target="<?php echo esc_attr($target); ?>"
                           <?php if ($rel): ?>rel="<?php echo esc_attr($rel); ?>"<?php endif; ?>>
                            <?php echo esc_html($card['buttonText']); ?>
                        </a>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}