<?php
/**
 * PufferGo Product Gallery Component — 产品图片/视频画廊。
 *
 * 纯渲染组件：接收 PufferGo_Product_Data 中已预处理的画廊数据。
 *
 * @param PufferGo_Product_Data $data 产品数据对象。
 *
 * @package PufferGo
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$gallery_items = isset( $data ) ? $data->gallery_items : array();
$main_item     = isset( $data ) ? $data->main_item : null;
$main_image_id = isset( $data ) ? $data->main_image_id : 0;
$main_image_alt = isset( $data ) ? $data->main_image_alt : '';
$main_poster_url = isset( $data ) ? $data->main_poster_url : '';
$main_video_src  = isset( $data ) ? $data->main_video_src : '';
$product_title   = isset( $data ) ? $data->title : '';
?>

<div class="flex flex-col-reverse">
	<?php if ( count( $gallery_items ) > 1 ) : ?>
		<!-- Thumbnail grid -->
		<div class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
			<div class="grid grid-cols-4 gap-6" id="thumbnail-grid">
				<?php foreach ( $gallery_items as $index => $item ) : ?>
					<?php
					$is_video   = $item['is_video'] ?? false;
					$thumb_id   = $item['thumb_id'] ?? 0;
					$video_src  = $item['video_src'] ?? '';
					$poster_url = $item['poster_url'] ?? '';
					?>
					<button type="button" class="thumbnail-btn relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-neutral-50 text-sm font-medium uppercase text-neutral-900 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-4" data-index="<?php echo esc_attr( $index ); ?>" data-type="<?php echo esc_attr( $item['type'] ); ?>" data-image-id="<?php echo esc_attr( $thumb_id ); ?>" data-video-src="<?php echo esc_url( $video_src ); ?>" data-poster="<?php echo esc_url( $poster_url ); ?>">
						<span class="absolute inset-0 overflow-hidden rounded-md">
							<?php if ( $thumb_id && ( ! $is_video || $poster_url ) ) : ?>
								<?php echo wp_get_attachment_image( $thumb_id, 'thumbnail', false, array( 'class' => 'h-full w-full object-cover' ) ); ?>
							<?php elseif ( $item['id'] ?? 0 ) : ?>
								<?php echo wp_get_attachment_image( $item['id'], 'thumbnail', false, array( 'class' => 'h-full w-full object-cover' ) ); ?>
							<?php else : ?>
								<span class="flex items-center justify-center h-full w-full bg-neutral-200"><svg class="w-8 h-8 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-opacity="0.4"/><path d="M9.5 7.5v9l7-4.5z" fill="currentColor" fill-opacity="0.4"/></svg></span>
							<?php endif; ?>
							<?php if ( $is_video ) : ?>
								<span class="absolute inset-0 flex items-center justify-center bg-black/20 rounded-md"><svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.45)"/><path d="M9.5 7.5v9l7-4.5z" fill="white"/></svg></span>
							<?php endif; ?>
						</span>
						<span class="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 selected-ring" aria-hidden="true"></span>
					</button>
				<?php endforeach; ?>
			</div>
		</div>
	<?php endif; ?>

	<!-- Main display area -->
	<div class="w-full aspect-square" id="main-image-container">
		<?php if ( $main_item ) : ?>
			<?php if ( 'image' === $main_item['type'] ) : ?>
				<?php
				echo wp_get_attachment_image( $main_image_id, 'large', false, array(
					'class' => 'h-full w-full object-cover object-center sm:rounded-lg',
					'id'    => 'main-image',
					'alt'   => $main_image_alt ?: $product_title,
				) );
				?>
			<?php elseif ( 'video' === $main_item['type'] || 'url' === $main_item['type'] ) : ?>
				<?php
				$poster_attr = $main_poster_url ? ' poster="' . esc_url( $main_poster_url ) . '"' : '';
				?>
				<video id="main-video" class="h-full w-full object-cover object-center sm:rounded-lg" controls preload="metadata" src="<?php echo esc_url( $main_video_src ); ?>"<?php echo $poster_attr; ?>></video>
			<?php endif; ?>
		<?php else : ?>
			<div class="h-full w-full bg-neutral-100 sm:rounded-lg flex items-center justify-center">
				<svg class="h-48 w-48 text-neutral-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
				</svg>
			</div>
		<?php endif; ?>
	</div>
</div>
