<?php
/**
 * BW Video Text — block render helper functions.
 *
 * Loaded once from the main plugin file so render.php (called per block)
 * never re-declares them.
 */

defined( 'ABSPATH' ) || exit;

// ── color sanitizer ───────────────────────────────────────────────────────
// Accepts hex colours (#rrggbb / #rgb) AND CSS custom-property references
// (e.g. var(--global-palette1)) so theme palette colours stored as CSS
// variables survive PHP sanitization and render correctly on the front end.
function bw_vt_sanitize_color( string $val ): string {
	if ( ! $val ) return '';
	$hex = sanitize_hex_color( $val );
	if ( $hex ) return $hex;
	if ( preg_match( '/^var\(--[\w][\w-]*(?:\s*,\s*[^)]+)?\)$/i', trim( $val ) ) ) {
		return $val;
	}
	return '';
}

// ── SVG helpers ───────────────────────────────────────────────────────────
// Size and fill are embedded as inline style !important so theme CSS rules
// (e.g. Kadence's `svg { width: 100% }`) cannot override them.

/**
 * Return a YouTube logo SVG with guaranteed pixel size and fill colour.
 *
 * @param int    $px   Width in pixels; height is auto-calculated from 576:512 ratio.
 * @param string $fill CSS colour string or 'currentColor'.
 */
function bw_vt_yt_icon( int $px, string $fill = 'currentColor' ): string {
	$h     = (int) round( $px * 512 / 576 );
	$style = "width:{$px}px!important;height:{$h}px!important;display:block!important;flex-shrink:0!important;";
	return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"'
		. ' class="bw-vt-yt-icon"'
		. ' fill="' . esc_attr( $fill ) . '"'
		. ' aria-hidden="true"'
		. ' width="' . $px . '" height="' . $h . '"'
		. ' style="' . esc_attr( $style ) . '">'
		. '<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>'
		. '</svg>';
}

// Dash SVG: 64×4 rectangle, colour #9CA3AF — matches assets/images/dash.svg.
// Inline style !important prevents theme svg { width:100% } from stretching it.
define( 'BW_VT_DASH_SVG',
	'<svg class="bw-vt-dash-svg" xmlns="http://www.w3.org/2000/svg"'
	. ' viewBox="0 0 64 4" width="64" height="4" aria-hidden="true"'
	. ' style="width:64px!important;height:4px!important;display:block!important;margin-top:12px!important;">'
	. '<rect width="64" height="4" fill="#9CA3AF"/>'
	. '</svg>'
);

// ── helpers ───────────────────────────────────────────────────────────────

/**
 * Build a style="…" attribute string from an array of CSS rules.
 */
function bw_vt_style( array $rules ): string {
	if ( ! $rules ) return '';
	return ' style="' . esc_attr( implode( ';', $rules ) ) . '"';
}

/**
 * Render the video column HTML.
 */
function bw_vt_render_video_col(
	bool   $has_video,
	string $thumbnail_src,
	string $play_btn_color,
	string $video_source,
	string $video_id,
	string $video_file_url
): string {
	ob_start();
	?>
	<div class="bw-vt-col bw-vt-video-col">
		<div class="bw-vt-video-wrapper">
			<?php if ( 'youtube' === $video_source && $video_id ) : ?>
			<div class="bw-vt-video-player"
				data-video-source="youtube"
				data-video-id="<?php echo esc_attr( $video_id ); ?>">
				<iframe
					src="https://www.youtube.com/embed/<?php echo rawurlencode( $video_id ); ?>?rel=0&enablejsapi=1"
					title="<?php esc_attr_e( 'YouTube video', 'bw-video-text' ); ?>"
					frameborder="0"
					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
					allowfullscreen
				></iframe>
			</div>
			<?php elseif ( 'file' === $video_source && $video_file_url ) : ?>
			<?php
			$thumb_style = $thumbnail_src
				? ' style="background-image:url(\'' . esc_url( $thumbnail_src ) . '\')"'
				: '';
			?>
			<div class="bw-vt-thumbnail"<?php echo $thumb_style; ?>>
				<button
					class="bw-vt-play-btn"
					type="button"
					aria-label="<?php esc_attr_e( 'Play video', 'bw-video-text' ); ?>"
				>
					<?php echo bw_vt_yt_icon( 68, $play_btn_color ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
				</button>
			</div>
			<div class="bw-vt-video-player" hidden
				data-video-source="<?php echo esc_attr( $video_source ); ?>"
				data-video-url="<?php echo esc_attr( $video_file_url ); ?>"
			></div>
			<?php else : ?>
			<div class="bw-vt-thumbnail bw-vt-thumbnail--empty"></div>
			<?php endif; ?>
		</div>
	</div>
	<?php
	return ob_get_clean();
}

/**
 * Render the text column HTML.
 */
function bw_vt_render_text_col(
	array  $text_col_css,
	string $heading_tag,
	string $heading_text,
	array  $heading_css,
	array  $body_css,
	string $body_content,
	bool   $show_heading_icon,
	bool   $show_play_link,
	string $play_link_text,
	string $play_link_color,
	bool   $show_text_dash,
	bool   $show_cta      = false,
	string $cta_text      = 'Learn More',
	string $cta_url       = '',
	string $cta_color     = '#cc0000',
	bool   $cta_new_tab   = false
): string {
	ob_start();
	?>
	<div class="bw-vt-col bw-vt-text-col"<?php echo bw_vt_style( $text_col_css ); ?>>
		<div class="bw-vt-text-inner">

			<?php if ( $heading_text || $show_heading_icon ) : ?>
			<div class="bw-vt-heading-row" style="display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:8px;margin-bottom:16px;">
				<?php if ( $heading_text ) : ?>
				<div class="bw-vt-heading-col" style="flex:1!important;min-width:0;">
					<<?php echo esc_html( $heading_tag ); ?> class="bw-vt-heading"<?php echo bw_vt_style( $heading_css ); ?>>
						<?php echo wp_kses_post( $heading_text ); ?>
					</<?php echo esc_html( $heading_tag ); ?>>
				</div>
				<?php endif; ?>
				<?php if ( $show_heading_icon ) : ?>
				<div class="bw-vt-icon-col" style="flex-shrink:0!important;display:flex!important;align-items:flex-start!important;margin-right:-16px;">
					<span
						class="bw-vt-heading-yt-btn"
						role="button"
						tabindex="0"
						aria-label="<?php esc_attr_e( 'Play video', 'bw-video-text' ); ?>"
					>
						<?php echo bw_vt_yt_icon( 36, '#D1D5DB' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
					</span>
				</div>
				<?php endif; ?>
			</div>
			<?php endif; ?>

			<?php if ( $body_content ) : ?>
			<div class="bw-vt-body"<?php echo bw_vt_style( $body_css ); ?>><?php echo wp_kses_post( $body_content ); ?></div>
			<?php endif; ?>

			<?php if ( $show_cta && $cta_url ) : ?>
			<a
				href="<?php echo esc_url( $cta_url ); ?>"
				class="bw-vt-cta-link"
				style="color:<?php echo esc_attr( $cta_color ); ?>"
				<?php if ( $cta_new_tab ) echo 'target="_blank" rel="noopener noreferrer"'; ?>
			><?php echo esc_html( $cta_text ); ?><svg class="bw-vt-chevron-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></a>
			<?php endif; ?>

			<?php if ( $show_play_link ) : ?>
			<span
				class="bw-vt-play-link"
				role="button"
				tabindex="0"
				style="color:<?php echo esc_attr( $play_link_color ); ?>;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;"
				aria-label="<?php echo esc_attr( $play_link_text ); ?>"
			>
				<?php echo bw_vt_yt_icon( 20, $play_link_color ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
				<span><?php echo esc_html( $play_link_text ); ?></span>
			</span>
			<?php endif; ?>

			<?php if ( $show_text_dash ) : ?>
			<?php echo BW_VT_DASH_SVG; // phpcs:ignore WordPress.Security.EscapeOutput -- static SVG constant ?>
			<?php endif; ?>

		</div>
	</div>
	<?php
	return ob_get_clean();
}
