<?php

namespace ABlocks\Blocks\ContentTimeline;

use ABlocks\Controls\Range;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
use ABlocks\Classes\BlockBaseAbstract;
use ABlocks\Classes\CssGenerator;
use ABlocks\Classes\CssGeneratorV2;
use ABlocks\Controls\Dimensions;
use ABlocks\Controls\Typography;
use ABlocks\Controls\Border;
use ABlocks\Controls\Color;
use ABlocks\Controls\Icon;
use ABlocks\Controls\BoxShadow;
use ABlocks\Classes\CustomIcons;


class Block extends BlockBaseAbstract {

	protected $block_name = 'content-timeline';

	public function build_css_v1( $attributes ) {
		$css_generator = new CssGenerator( $attributes );

		// Generate and add CSS styles for different parts of the block
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-icon-maker svg',
			$this->get_content_timeline_icon_css( $attributes ),
			$this->get_content_timeline_icon_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-icon-maker .ablocks-icon-wrap img.ablocks-image-icon',
			$this->get_content_timeline_icon_image_css( $attributes ),
			$this->get_content_timeline_icon_image_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_image_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_image_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks__in-view-icon .ablocks-icon-wrap',
			$this->get_content_timeline_icon_background_css( $attributes ),
			$this->get_content_timeline_icon_background_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_background_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_background_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline .ablocks-block-content-timeline__line',
			$this->get_content_timeline_connector_css( $attributes ),
			$this->get_content_timeline_connector_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_connector_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_connector_css( $attributes, $device ); } )
		);
		$this->add_item_gap_line_gap_and_icon_styles( $css_generator, $attributes );
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap',
			$this->get_content_timeline_horizontal_gap_css( $attributes ),
			$this->get_content_timeline_horizontal_gap_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_horizontal_gap_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_horizontal_gap_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-block-content-timeline-child--field .ablocks-block-content-timeline-child__content-part',
			$this->get_content_timeline_content_css( $attributes ),
			$this->get_content_timeline_content_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_content_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_content_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__content-part .ablocks-block-content-timeline-child__arrow::after',
			$this->get_content_timeline_content_background_css( $attributes ),
			$this->get_content_timeline_content_background_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_content_background_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_content_background_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks__in-view-icon',
			$this->get_content_timeline_connector_alignment_css( $attributes ),
			$this->get_content_timeline_connector_alignment_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_connector_alignment_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_connector_alignment_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date',
			$this->get_content_timeline_date_alignment_css( $attributes ),
			$this->get_content_timeline_date_alignment_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_date_alignment_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_alignment_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date,.ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_date_css( $attributes ),
			$this->get_content_timeline_date_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_date_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_date_mobile_css( $attributes, 'Mobile' )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date:hover',
			$this->get_content_timeline_date_hover_mobile_css( $attributes, 'Mobile' )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date-inner',
			$this->get_content_timeline_show_date_center_css( $attributes, '' ),
			$this->get_content_timeline_show_date_center_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_center_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_center_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date',
			$this->get_content_timeline_show_date_left_right_css( $attributes, '' ),
			$this->get_content_timeline_show_date_left_right_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_left_right_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_show_date_mobile_css( $attributes, '' ),
			$this->get_content_timeline_show_date_mobile_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_mobile_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_mobile_css( $attributes, $device ); } )
		);

		return $css_generator->generate_css();
	}
	public function build_css_v2( $attributes ) {
		$css_generator = new CssGeneratorV2( $attributes, $this->block_name );

		// Generate and add CSS styles for different parts of the block
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-icon-maker svg',
			$this->get_content_timeline_icon_css( $attributes ),
			$this->get_content_timeline_icon_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-icon-maker .ablocks-icon-wrap img.ablocks-image-icon',
			$this->get_content_timeline_icon_image_css( $attributes ),
			$this->get_content_timeline_icon_image_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_image_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_image_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks__in-view-icon',
			$this->get_content_timeline_icon_background_css( $attributes ),
			$this->get_content_timeline_icon_background_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_icon_background_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_icon_background_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline .ablocks-block-content-timeline__line',
			$this->get_content_timeline_connector_css( $attributes ),
			$this->get_content_timeline_connector_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_connector_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_connector_css( $attributes, $device ); } )
		);
		$this->add_item_gap_line_gap_and_icon_styles( $css_generator, $attributes );
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap',
			$this->get_content_timeline_horizontal_gap_css( $attributes ),
			$this->get_content_timeline_horizontal_gap_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_horizontal_gap_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_horizontal_gap_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-block-content-timeline-child--field .ablocks-block-content-timeline-child__content-part',
			$this->get_content_timeline_content_css( $attributes ),
			$this->get_content_timeline_content_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_content_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_content_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__content-part .ablocks-block-content-timeline-child__arrow::after',
			$this->get_content_timeline_content_background_css( $attributes ),
			$this->get_content_timeline_content_background_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_content_background_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_content_background_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks__in-view-icon',
			$this->get_content_timeline_connector_alignment_css( $attributes ),
			$this->get_content_timeline_connector_alignment_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_connector_alignment_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_connector_alignment_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date',
			$this->get_content_timeline_date_alignment_css( $attributes ),
			$this->get_content_timeline_date_alignment_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_date_alignment_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_alignment_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date,.ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_date_css( $attributes ),
			$this->get_content_timeline_date_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_date_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_date_mobile_css( $attributes, 'Mobile' )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date:hover',
			$this->get_content_timeline_date_hover_mobile_css( $attributes, 'Mobile' )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date-inner',
			$this->get_content_timeline_show_date_center_css( $attributes, '' ),
			$this->get_content_timeline_show_date_center_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_center_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_center_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__date',
			$this->get_content_timeline_show_date_left_right_css( $attributes, '' ),
			$this->get_content_timeline_show_date_left_right_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_left_right_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
			$this->get_content_timeline_show_date_mobile_css( $attributes, '' ),
			$this->get_content_timeline_show_date_mobile_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_show_date_mobile_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_mobile_css( $attributes, $device ); } )
		);

		return $css_generator->generate_css();
	}
	/**
	 * Item Gap, Line to Content Gap and the icon setup (All mode); shared by
	 * the v1 and v2 generators. Mirrors edit.js.
	 */
	private function add_item_gap_line_gap_and_icon_styles( $css_generator, $attributes ) {
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-block-content-timeline-child--field',
			$this->get_content_timeline_icon_size_var_css( $attributes )
		);
		// Item Gap only between consecutive items, never above the first one
		// (`~` also skips the inline <style> siblings between items).
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks-block-content-timeline-child--field ~ .ablocks-block-content-timeline-child--field',
			$this->get_content_timeline_item_gap_css( $attributes ),
			$this->get_content_timeline_item_gap_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_item_gap_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_item_gap_css( $attributes, $device ); } )
		);
		$css_generator->add_class_styles(
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap',
			$this->get_content_timeline_line_gap_css( $attributes ),
			$this->get_content_timeline_line_gap_css( $attributes, 'Tablet' ),
			$this->get_content_timeline_line_gap_css( $attributes, 'Mobile' ),
			$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_line_gap_css( $attributes, $device ); } )
		);

		// Icon setup: Icon Color stays the glyph colour.
		$prefix = 'contentTimeLineIcon';
		$color = $attributes['iconColor'] ?? '';
		self::add_icon_setup_styles(
			$css_generator,
			'{{WRAPPER}} .ablocks-block-content-timeline--outer-wrap .ablocks__in-view-icon',
			$attributes,
			$prefix,
			$color,
			function ( $device, $is_image ) use ( $attributes, $prefix, $color ) {
				return self::get_icon_glyph_css( $attributes, $device, $prefix, $is_image, $color );
			},
			$attributes['iconSize'] ?? [],
			18
		);
		// A View has no marker background: the scroll animation colours the
		// icon wrapper instead (one class stronger than the stylesheet's
		// active marker rule).
		if ( self::has_icon_view( $attributes, $prefix ) ) {
			$active_marker = '{{WRAPPER}} .ablocks-block-content-timeline.ablocks-block-content-timeline--outer-wrap[data-show-animation="true"] .ablocks__in-view-icon.ablocks-block-content-timeline__marker--active';
			$css_generator->add_class_styles( $active_marker, self::get_active_marker_css( true ) );
			$css_generator->add_class_styles( $active_marker . ' .ablocks-icon-wrap', self::get_active_wrap_css( true ) );
		}
	}

	// Scroll animation in a View: the active colour moves from the marker to
	// the icon wrapper (the visible background); a Default View item inside a
	// View timeline keeps it on the marker. Mirrors styling.js.
	public static function get_active_marker_css( $has_view ) {
		return [ 'background' => $has_view ? 'transparent' : 'var(--ablocks-ct-active-color, #00ad6b)' ];
	}

	public static function get_active_wrap_css( $has_view ) {
		return [ 'background' => $has_view ? 'var(--ablocks-ct-active-color, #00ad6b)' : 'transparent' ];
	}

	/**
	 * Wrapper, hover and glyph rules of the icon setup under $marker. The
	 * glyph builder differs between All mode (rotate / recolor only) and
	 * Individual mode (plus the item's own size and colour).
	 */
	public static function add_icon_setup_styles( $css_generator, $marker, $attributes, $prefix, $color, $glyph_builder, $icon_size = [], $icon_size_default = '' ) {
		$devices = [ '', 'Tablet', 'Mobile' ];
		$add = function ( $selector, $builder ) use ( $css_generator, $devices ) {
			$css_generator->add_class_styles(
				$selector,
				$builder( $devices[0] ),
				$builder( $devices[1] ),
				$builder( $devices[2] ),
				$css_generator->custom_device_map( $builder )
			);
		};

		$add( $marker . ' .ablocks-icon-wrap', function ( $device ) use ( $attributes, $prefix, $color, $icon_size, $icon_size_default ) {
			return self::get_icon_wrap_css( $attributes, $device, $prefix, $color, $icon_size, $icon_size_default );
		} );
		$add( $marker . ':hover .ablocks-icon-wrap', function ( $device ) use ( $attributes, $prefix ) {
			return self::get_icon_wrap_hover_css( $attributes, $device, $prefix );
		} );
		foreach ( [ false, true ] as $is_image ) {
			$glyph = $is_image ? 'img.ablocks-image-icon' : 'svg';
			$add( $marker . ' .ablocks-icon-wrap ' . $glyph, function ( $device ) use ( $glyph_builder, $is_image ) {
				return $glyph_builder( $device, $is_image );
			} );
			$add( $marker . ':hover .ablocks-icon-wrap ' . $glyph, function ( $device ) use ( $attributes, $prefix, $is_image ) {
				return self::get_icon_glyph_hover_css( $attributes, $device, $prefix, $is_image );
			} );
		}
	}

	// Drop declarations without a value.
	private static function without_empty( $css ) {
		return array_filter( $css, function ( $value ) {
			return null !== $value && '' !== $value;
		} );
	}

	public static function has_icon_view( $attributes, $prefix ) {
		$type = $attributes[ $prefix . 'Type' ] ?? 'default';
		return ! empty( $type ) && 'default' !== $type;
	}

	// Rotate for a device; a device override of 0 only matters when the
	// desktop value is not 0 as well. Mirrors getRotateTransform() in styling.js.
	private static function get_rotate_transform( $value, $device = '' ) {
		$read = function ( $suffix ) use ( $value ) {
			return Range::get_css( [
				'attributeValue'       => $value,
				'attributeObjectKey'   => 'value',
				'isResponsive'         => true,
				'hasUnit'              => true,
				'defaultValue'         => '',
				'unitDefaultValue'     => 'deg',
				'property'             => 'value',
				'device'               => $suffix,
			] );
		};
		$css = $read( $device );
		if ( ! isset( $css['value'] ) || '' === (string) $css['value'] ) {
			return '';
		}
		if ( 0.0 === (float) $css['value'] ) {
			$desktop = $read( '' );
			if ( '' === $device || 0.0 === (float) ( $desktop['value'] ?? 0 ) ) {
				return '';
			}
		}
		return 'rotate(' . $css['value'] . ( ! empty( $css['valueUnit'] ) ? $css['valueUnit'] : 'deg' ) . ')';
	}

	private static function get_transition_duration( $value ) {
		$duration = (float) ( is_array( $value ) ? ( $value['value'] ?? 0 ) : $value );
		return $duration > 0 ? $duration . 's' : '';
	}

	// `.ablocks-icon-wrap`: View, shape, background, padding, border. The
	// glyph size comes from Icon Size, so the wrapper font-size is the Icon
	// Size: the View's `.5em` padding then scales with the icon instead of the
	// shared `.ablocks-icon-wrap { font-size: 50px }`, which made a Stacked /
	// Framed wrapper outgrow the marker. Mirrors styling.js.
	public static function get_icon_wrap_css( $attributes, $device, $prefix, $color, $icon_size = [], $icon_size_default = '' ) {
		// Icon::get_wrapper_css() reads its keys unguarded; start from the
		// control's defaults, then the block's values, then the marker colour
		// (used by the framed border).
		$defaults = array_map( function ( $attribute ) {
			return $attribute['default'] ?? null;
		}, Icon::get_attribute( $prefix ) );
		$setup = array_merge( $defaults, $attributes, [ $prefix . 'Color' => $color ] );
		$css = Icon::get_wrapper_css( $setup, $device, $prefix );
		unset( $css['font-size'], $css['transition'] );
		$css = array_merge( $css, Range::get_css( [
			'attributeValue'     => $icon_size,
			'attributeObjectKey' => 'value',
			'isResponsive'       => true,
			'hasUnit'            => true,
			'defaultValue'       => $icon_size_default,
			'unitDefaultValue'   => 'px',
			'property'           => 'font-size',
			'device'             => $device,
		] ) );
		if ( self::has_icon_view( $setup, $prefix ) && 'square' === ( $setup[ $prefix . 'Shape' ] ?? '' ) && empty( $css['border-radius'] ) ) {
			$css['border-radius'] = '0';
		}
		return self::without_empty( $css );
	}

	public static function get_icon_wrap_hover_css( $attributes, $device, $prefix ) {
		$css = [ 'background' => Color::get_css( $attributes[ $prefix . 'HoverBgColor' ] ?? '' ) ];
		if ( self::has_icon_view( $attributes, $prefix ) ) {
			$css = array_merge(
				$css,
				Border::get_hover_css( $attributes[ $prefix . 'Border' ] ?? [], 'border', $device ),
				BoxShadow::get_hover_css( $attributes[ $prefix . 'BoxShadow' ] ?? [], '', $device )
			);
		}
		return self::without_empty( $css );
	}

	// SVG / image glyph: rotate, hover transition and (image) recolor.
	public static function get_icon_glyph_css( $attributes, $device, $prefix, $is_image, $color ) {
		$css = [ 'transform' => self::get_rotate_transform( $attributes[ $prefix . 'Rotated' ] ?? [], $device ) ];
		if ( '' === $device ) {
			$css['transition'] = self::get_transition_duration( $attributes[ $prefix . 'transitionDuration' ] ?? 0 );
			if ( $is_image && ! empty( $attributes[ $prefix . 'ImageRecolor' ] ) && ! empty( $attributes[ $prefix . 'ImageUrl' ] ) ) {
				$recolor = Color::get_css( $color );
				$css = array_merge( $css, CustomIcons::get_recolor_css(
					$attributes[ $prefix . 'ImageUrl' ],
					$attributes[ $prefix . 'ImageID' ] ?? 0,
					$recolor ? $recolor : '#69727d'
				) );
			}
		}
		return self::without_empty( $css );
	}

	public static function get_icon_glyph_hover_css( $attributes, $device, $prefix, $is_image ) {
		$css = [ 'transform' => self::get_rotate_transform( $attributes[ $prefix . 'RotateHover' ] ?? [], $device ) ];
		$hover_color = '' === $device ? Color::get_css( $attributes[ $prefix . 'HoverColor' ] ?? '' ) : '';
		if ( $hover_color ) {
			if ( ! $is_image ) {
				$css['fill'] = $hover_color;
			} elseif ( ! empty( $attributes[ $prefix . 'ImageRecolor' ] ) && ! empty( $attributes[ $prefix . 'ImageUrl' ] ) ) {
				// A recolored image icon is painted by its background.
				$css['background-color'] = $hover_color;
			}
		}
		return self::without_empty( $css );
	}

	public function build_css( $attributes ) {
		if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
			return $this->build_css_v2( $attributes );
		}
		return $this->build_css_v1( $attributes );
	}
	// Top / Bottom content positions lay the timeline out horizontally.
	public function is_horizontal_timeline( $attributes ) {
		return in_array( $attributes['contentPosition'] ?? '', [ 'top', 'bottom' ], true );
	}

	public function get_content_timeline_horizontal_gap_css( $attributes, $device = '' ) {
		if ( ! $this->is_horizontal_timeline( $attributes ) ) {
			return [];
		}
		return Range::get_css([
			'attributeValue' => $attributes['itemGap'],
			'attribute_object_key' => 'value',
			'defaultValue' => 10,
			'isResponsive' => true,
			'hasUnit' => true,
			'unitDefaultValue' => 'px',
			'property' => 'gap',
			'device' => $device,
		]);
	}

	public function get_content_timeline_show_date_mobile_css( $attributes, $device = '' ) {
		$css = [];
		if ( $device === '' || $device === 'Tablet' ) {
			$css['display'] = 'none';
		}
		if ( $device === 'Mobile' ) {
			if ( isset( $attributes[ "showDate{$device}" ] ) && $attributes[ "showDate{$device}" ] === false ) {
				$css['display'] = 'none';
			} elseif ( isset( $attributes[ "showDate{$device}" ] ) && $attributes[ "showDate{$device}" ] === true ) {
				$css['display'] = 'block';
			}
		}

		return $css;
	}
	public function get_content_timeline_show_date_center_css( $attribute, $device ) {
		$css = [];
		$showDateKey = $device ? "showDate{$device}" : 'showDate';
		// Unset counts as shown (every showDate* attribute defaults to true).
		$showDate = false !== ( $attribute[ $showDateKey ] ?? true );
		$isCentered = $attribute['contentPosition'] === 'center';

		if ( $isCentered ) {
			$css['display'] = $showDate ? 'block' : 'none';
		}

		return $css;
	}

	public function get_content_timeline_show_date_left_right_css( $attribute, $device ) {
		$css = [];
		$showDateKey = $device ? "showDate{$device}" : 'showDate';
		// Unset counts as shown (every showDate* attribute defaults to true).
		$showDate = false !== ( $attribute[ $showDateKey ] ?? true );
		$isLeftOrRight = in_array( $attribute['contentPosition'], [ 'left', 'right', 'top', 'bottom' ], true );

		if ( $isLeftOrRight ) {
			if ( $device !== 'Mobile' ) {
				$css['display'] = $showDate ? 'block !important' : 'none !important';
			} elseif ( $device === 'Mobile' ) {
				$css['display'] = 'none !important';

			}
		}
		if ( $attribute['contentPosition'] === 'center' ) {
			$css['display'] = 'block';
		}

		return $css;
	}
	public function get_content_timeline_icon_css( $attributes, $device = '' ) {
		$css = [];
		return array_merge(
			[ 'fill' => Color::get_css( isset( $attributes['iconColor'] ) ? $attributes['iconColor'] : '' ) ],
			Range::get_css([
				'attributeValue' => $attributes['iconSize'],
				'attribute_object_key' => 'value',
				'isResponsive' => true,
				'hasUnit' => true,
				'defaultValue' => 18,
				'unitDefaultValue' => 'px',
				'property' => 'width',
				'device' => $device,
			]),
			Range::get_css([
				'attributeValue' => $attributes['iconSize'],
				'attribute_object_key' => 'value',
				'isResponsive' => true,
				'hasUnit' => true,
				'defaultValue' => 18,
				'unitDefaultValue' => 'px',
				'property' => 'height',
				'device' => $device,
			]),
			$css,
		);
	}

	// An image icon follows the same Icon Size control; fill only applies to the SVG.
	public function get_content_timeline_icon_image_css( $attributes, $device = '' ) {
		$css = $this->get_content_timeline_icon_css( $attributes, $device );
		unset( $css['fill'] );
		return $css;
	}

	// Icon Background (the round marker behind the icon) is the Default View's
	// only backdrop: it masks the connector line and carries the scroll
	// animation colour. A Stacked / Framed View draws its own background on
	// the icon wrapper, so there the marker paints nothing and shrinks to the
	// wrapper. Mirrors styling.js.
	const MARKER_WITHOUT_BACKGROUND = [
		'background' => 'transparent',
		'min-width'  => '0',
		'min-height' => '0',
	];

	public function get_content_timeline_icon_background_css( $attributes, $device = '' ) {
		if ( self::has_icon_view( $attributes, 'contentTimeLineIcon' ) ) {
			return self::MARKER_WITHOUT_BACKGROUND;
		}
		return array_merge(
			[ 'background' => Color::get_css( isset( $attributes['iconBackgroundColor'] ) ? $attributes['iconBackgroundColor'] : '' ) ],
			// A minimum, not a fixed size: the marker grows to hold a larger
			// icon or a Stacked / Framed wrapper instead of letting it spill
			// over the content arrow and the date. Mirrors styling.js.
			Range::get_css([
				'attributeValue' => $attributes['iconBackgroundSize'],
				'attribute_object_key' => 'value',
				'defaultValue' => 48,
				'property' => 'min-width',
			]),
			Range::get_css([
				'attributeValue' => $attributes['iconBackgroundSize'],
				'attribute_object_key' => 'value',
				'defaultValue' => 48,
				'property' => 'min-height',
			]),
		);
	}

	public function get_content_timeline_connector_css( $attributes, $device = '' ) {
		return array_merge(
			[ 'background' => Color::get_css( isset( $attributes['thicknessColor'] ) ? $attributes['thicknessColor'] : '' ) ],
			Range::get_css([
				'attributeValue' => $attributes['thickness'],
				'attribute_object_key' => 'value',
				'defaultValue' => 3,
				'property' => 'width',
			]),
		);
	}

	// Marker size shared with the static stylesheet (arrow offsets, centre columns).
	public function get_content_timeline_icon_size_var_css( $attributes ) {
		return [ '--ablocks-content-timeline-icon-size' => ( ! empty( $attributes['iconBackgroundSize'] ) ? $attributes['iconBackgroundSize'] : 48 ) . 'px' ];
	}

	// Vertical layouts: space between consecutive items (applied as `item ~ item`).
	public function get_content_timeline_item_gap_css( $attributes, $device = '' ) {
		if ( $this->is_horizontal_timeline( $attributes ) ) {
			return [];
		}
		return Range::get_css([
			'attributeValue' => $attributes['itemGap'] ?? [],
			'attribute_object_key' => 'value',
			'defaultValue' => 10,
			'isResponsive' => true,
			'hasUnit' => true,
			'unitDefaultValue' => 'px',
			'property' => 'margin-top',
			'device' => $device,
		]);
	}

	// Line to Content Gap as a custom property; nothing when unset, so the
	// stylesheet keeps its original spacing.
	public function get_content_timeline_line_gap_css( $attributes, $device = '' ) {
		return Range::get_css([
			'attributeValue' => $attributes['lineContentGap'] ?? [],
			'attributeObjectKey' => 'value',
			'defaultValue' => '',
			'isResponsive' => true,
			'hasUnit' => true,
			'unitDefaultValue' => 'px',
			'property' => '--ablocks-ct-line-gap',
			'device' => $device,
		]);
	}

	public function get_content_timeline_content_css( $attributes, $device = '' ) {
		// The 15px fallback belongs to the base (desktop) rule only; repeating
		// it per device re-applied 15px on tablet / mobile over an inherited
		// desktop value such as 0. Mirrors styling.js.
		$css = $device ? [] : [ 'padding' => '15px' ];
		return array_merge(
			[ 'background' => Color::get_css( isset( $attributes['contentBackgroundColor'] ) ? $attributes['contentBackgroundColor'] : '' ) ],
			$css,
			Dimensions::get_css( $attributes['contentPadding'] ?? [], 'padding', $device )
		);
	}

	public function get_content_timeline_content_background_css( $attributes, $device = '' ) {
		$css = [];
		if ( ! empty( $attributes['contentBackgroundColor'] ) ) {
			$css['border-left-color'] = Color::get_css(
			isset( $attributes['contentBackgroundColor'] ) ? $attributes['contentBackgroundColor'] : '');
			$css['border-right-color'] = Color::get_css(
			isset( $attributes['contentBackgroundColor'] ) ? $attributes['contentBackgroundColor'] : '');
		}
		return $css;
	}
	public function get_content_timeline_connector_alignment_css( $attributes, $device = '' ) {
		$css = [];
		$arrowAlignment = $attributes['arrowAlignment'] ?? '';

		if ( $arrowAlignment === 'top' ) {
			$css['align-self'] = 'flex-start';
		} elseif ( $arrowAlignment === 'bottom' ) {
			$css['align-self'] = 'flex-end';
		} else {
			$css['align-self'] = 'center';
		}

		return $css;
	}
	public function get_content_timeline_date_alignment_css( $attributes, $device = '' ) {
		$css = [];
		if ( $this->is_horizontal_timeline( $attributes ) ) {
			return [
				'align-self' => 'stretch',
				'text-align' => ! empty( $attributes['dateAlign'] ) ? $attributes['dateAlign'] : 'left',
			];
		}

		$arrowAlignment = $attributes['arrowAlignment'] ?? '';
		$iconBackgroundSize = $attributes['iconBackgroundSize'] ?? '';

		if ( $arrowAlignment === 'top' ) {
			$css['align-self'] = 'flex-start';
		} elseif ( $arrowAlignment === 'bottom' ) {
			$css['align-self'] = 'flex-end';
		} else {
			$css['align-self'] = 'center';
		}

		if ( $arrowAlignment === 'top' ) {
			$css['margin-top'] = $iconBackgroundSize ? ( $iconBackgroundSize / 4 ) . 'px' : '0';
		} elseif ( $arrowAlignment === 'bottom' ) {
			$css['margin-bottom'] = $iconBackgroundSize ? ( $iconBackgroundSize / 4 ) . 'px' : '0';
		}

		return $css;
	}

	public function get_content_timeline_date_css( $attributes, $device = '' ) {
		$typographyValueGlobal = $attributes['dateTypographyGlobal'] ? $attributes['dateTypographyGlobal'] : [];
		return array_merge(
			[ 'color' => Color::get_css( isset( $attributes['dateColor'] ) ? $attributes['dateColor'] : '' ) ],
			Typography::get_css( $attributes['dateTypography'] ?? [], '', $device, $typographyValueGlobal )
		);
	}
	public function get_content_timeline_date_mobile_css( $attributes, $device = '' ) {
		$css = [];
		if ( ! empty( $attributes['dateAlign'] ) ) {
			$css['text-align'] = $attributes['dateAlign'];
		}
		return array_merge(
			[ 'background' => Color::get_css( isset( $attributes['dateBackground'] ) ? $attributes['dateBackground'] : '' ) ],
			$css,
			Dimensions::get_css( $attributes['datePadding'] ?? [], 'padding', $device ),
			Border::get_css( $attributes['dateBorder'] ?? [], '', $device )
		);
	}
	public function get_content_timeline_date_hover_mobile_css( $attributes, $device = '' ) {
		return array_merge(
			Border::get_hover_css( $attributes['dateBorder'] ?? [], '', $device )
		);
	}
}