<?php
/**
 * Render callback for the Snippet Copy Block.
 *
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 *
 * @var array    $attributes Block attributes.
 * @var string   $content    Block content (empty for this block).
 * @var WP_Block $block      Block instance.
 */

$section_title       = $attributes['sectionTitle'] ?? '';
$section_description = $attributes['sectionDescription'] ?? '';
$section_alignment   = $attributes['sectionAlignment'] ?? 'left';
$theme_style         = $attributes['theme'] ?? 'dark';
$button_style        = $attributes['buttonStyle'] ?? 'rounded';
$font_size           = absint( $attributes['fontSize'] ?? 14 );
$show_line_numbers   = ! empty( $attributes['showLineNumbers'] );
$show_traffic_lights = isset( $attributes['showTrafficLights'] ) ? (bool) $attributes['showTrafficLights'] : true;
$snippet_max_width   = $attributes['snippetMaxWidth'] ?? '';
$snippet_gap         = $attributes['snippetGap'] ?? '1rem';
$snippets            = $attributes['snippets'] ?? array();

$extra_classes = sprintf( 'theme-%s button-style-%s', esc_attr( $theme_style ), esc_attr( $button_style ) );

$copy_icon_svg = '<span class="snippet-copy-block__copy-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="snippet-copy-block__copy-icon"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>';

$wrapper_attributes = get_block_wrapper_attributes(
	array(
		'class' => $extra_classes,
	)
);
?>
<div <?php echo $wrapper_attributes; ?>>
	<?php
	$inline_styles = array();
	if ( $snippet_max_width ) {
		$inline_styles[] = '.wp-block-bpsc-snippet-copy-section .snippet-copy-block__card { max-width: ' . esc_attr( $snippet_max_width ) . '; }';
	}
	if ( $snippet_gap ) {
		$inline_styles[] = '.wp-block-bpsc-snippet-copy-section .snippet-copy-block__cards { gap: ' . esc_attr( $snippet_gap ) . '; }';
	}
	if ( ! empty( $inline_styles ) ) :
	?>
		<style><?php echo implode( ' ', $inline_styles ); ?></style>
	<?php endif; ?>
	<?php if ( $section_title || $section_description ) : ?>
		<div class="snippet-copy-block__header snippet-copy-block__header--align-<?php echo esc_attr( $section_alignment ); ?>">
			<?php if ( $section_title ) : ?>
				<h3 class="snippet-copy-block__title"><?php echo esc_html( $section_title ); ?></h3>
			<?php endif; ?>
			<?php if ( $section_description ) : ?>
				<p class="snippet-copy-block__description"><?php echo esc_html( $section_description ); ?></p>
			<?php endif; ?>
		</div>
	<?php endif; ?>

	<?php if ( ! empty( $snippets ) ) : ?>
		<div class="snippet-copy-block__cards">
			<?php foreach ( $snippets as $index => $snippet ) :
				$snippet_title   = $snippet['title'] ?? '';
				$snippet_lang    = $snippet['language'] ?? '';
				$snippet_content = $snippet['content'] ?? '';

				if ( '' === trim( $snippet_content ) && '' === trim( $snippet_title ) ) {
					continue;
				}

				$content_lines = explode( "\n", $snippet_content );
				$line_count    = count( $content_lines );
			?>
				<div class="snippet-copy-block__card">
					<div class="snippet-copy-block__card-header">
						<?php if ( $show_traffic_lights ) : ?>
							<div class="snippet-copy-block__traffic-lights" aria-hidden="true">
								<span class="snippet-copy-block__traffic-dot snippet-copy-block__traffic-dot--red"></span>
								<span class="snippet-copy-block__traffic-dot snippet-copy-block__traffic-dot--yellow"></span>
								<span class="snippet-copy-block__traffic-dot snippet-copy-block__traffic-dot--green"></span>
							</div>
						<?php endif; ?>
						<?php if ( $snippet_title ) : ?>
							<span class="snippet-copy-block__card-title"><?php echo esc_html( $snippet_title ); ?></span>
						<?php endif; ?>
						<?php if ( $snippet_lang ) : ?>
							<span class="snippet-copy-block__language-badge"><?php echo esc_html( strtoupper( $snippet_lang ) ); ?></span>
						<?php endif; ?>
						<div class="snippet-copy-block__card-header-right">
							<button
								class="snippet-copy-block__copy-button"
								data-snippet-index="<?php echo esc_attr( (string) $index ); ?>"
								type="button"
								aria-label="<?php echo esc_attr(
									$snippet_title
										? sprintf(
											/* translators: %s: snippet title */
											__( 'Copy %s to clipboard', 'section-collection' ),
											$snippet_title
										)
										: __( 'Copy to clipboard', 'section-collection' )
								); ?>"
							>
								<?php echo $copy_icon_svg; ?>
								<span class="snippet-copy-block__copy-label"><?php echo esc_html__( 'Copy', 'section-collection' ); ?></span>
							</button>
						</div>
					</div>
					<div class="snippet-copy-block__card-body">
						<?php if ( $show_line_numbers ) : ?>
							<div class="snippet-copy-block__line-numbers" aria-hidden="true" style="font-size: <?php echo esc_attr( $font_size . 'px' ); ?>">
								<?php for ( $i = 1; $i <= $line_count; $i++ ) : ?>
									<span><?php echo esc_html( (string) $i ); ?></span>
								<?php endfor; ?>
							</div>
						<?php endif; ?>
						<pre class="snippet-copy-block__code-content" data-snippet-index="<?php echo esc_attr( (string) $index ); ?>" style="font-size: <?php echo esc_attr( $font_size . 'px' ); ?>"><code><?php echo esc_html( $snippet_content ); ?></code></pre>
					</div>
				</div>
			<?php endforeach; ?>
		</div>

		<?php if ( count( $snippets ) > 1 ) : ?>
			<div class="snippet-copy-block__copy-all">
				<button
					class="snippet-copy-block__copy-all-button"
					type="button"
					aria-label="<?php echo esc_attr__( 'Copy all snippets to clipboard', 'section-collection' ); ?>"
				>
					<?php echo $copy_icon_svg; ?>
					<span class="snippet-copy-block__copy-label"><?php echo esc_html__( 'Copy All', 'section-collection' ); ?></span>
				</button>
			</div>
		<?php endif; ?>
	<?php endif; ?>
</div>
