<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
/**
 * Reels Modal Template
 *
 * TikTok/Instagram Reels-style fullscreen modal.
 * Shown when a story bubble or community review card is clicked.
 * Content is injected dynamically via JavaScript.
 *
 * @package Ugcify
 */

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

$template_settings            = isset( $template_settings ) && is_array( $template_settings ) ? $template_settings : array();
$ugcify_lazy_load_enabled       = ! empty( $template_settings['lazyLoadImages'] );
$ugcify_autoplay_video_enabled  = ! empty( $template_settings['autoplayVideo'] );
$ugcify_lightbox_enabled        = ! isset( $template_settings['enableLightbox'] ) || false !== $template_settings['enableLightbox'];
$ugcify_direct_add_to_cart_enabled = ! isset( $template_settings['directAddToCart'] ) || false !== $template_settings['directAddToCart'];
$ugcify_slide_in_after_seconds     = isset( $template_settings['slideInAfterSeconds'] ) ? max( 0, intval( $template_settings['slideInAfterSeconds'] ) ) : 3;

$instance_id = isset( $instance_id ) ? (string) $instance_id : wp_unique_id( 'ugcify-reviews-' );
?>
<div
	id="<?php echo esc_attr( 'ugcify-reels-modal-' . $instance_id ); ?>"
	class="ugcify-reels-modal-overlay"
	data-ugcify-instance="<?php echo esc_attr( $instance_id ); ?>"
	data-lazy-load="<?php echo $ugcify_lazy_load_enabled ? '1' : '0'; ?>"
	data-autoplay-video="<?php echo $ugcify_autoplay_video_enabled ? '1' : '0'; ?>"
	data-lightbox="<?php echo $ugcify_lightbox_enabled ? '1' : '0'; ?>"
	data-direct-add-to-cart="<?php echo $ugcify_direct_add_to_cart_enabled ? '1' : '0'; ?>"
	data-slide-in-after="<?php echo esc_attr( $ugcify_slide_in_after_seconds ); ?>"
	style="display:none;"
	role="dialog"
	aria-modal="true"
	aria-label="<?php esc_attr_e( 'Review reel', 'ugcify' ); ?>"
	aria-hidden="true"
>
	<div class="ugcify-reels-modal-backdrop" aria-hidden="true"></div>

	<!-- Previous reel button -->
	<button class="ugcify-reels-nav ugcify-reels-nav-prev" type="button" aria-label="<?php esc_attr_e( 'Previous review', 'ugcify' ); ?>" style="display:none;">
		<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
			<path d="M9 1L1 9l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	</button>

	<!-- Next reel button -->
	<button class="ugcify-reels-nav ugcify-reels-nav-next" type="button" aria-label="<?php esc_attr_e( 'Next review', 'ugcify' ); ?>" style="display:none;">
		<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
			<path d="M1 1l8 8-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	</button>

	<div class="ugcify-reels-modal-container">

		<!-- Close button -->
		<button class="ugcify-reels-modal-close" type="button" aria-label="<?php esc_attr_e( 'Close', 'ugcify' ); ?>">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true">
				<path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/>
			</svg>
		</button>

		<!-- Loading state -->
		<div class="ugcify-reels-modal-loading" aria-live="polite" aria-label="<?php esc_attr_e( 'Loading review', 'ugcify' ); ?>">
			<div class="ugcify-reels-spinner" aria-hidden="true"></div>
		</div>

		<!-- Media area -->
		<div class="ugcify-reels-media-wrap" style="display:none;" aria-label="<?php esc_attr_e( 'Review media', 'ugcify' ); ?>">
			<!-- JS injects <video>, <img>, or <iframe> here -->
		</div>

		<!-- Video controls -->
		<div class="ugcify-reels-video-controls" aria-label="<?php esc_attr_e( 'Video controls', 'ugcify' ); ?>" aria-hidden="true" data-label-play="<?php esc_attr_e( 'Play video', 'ugcify' ); ?>" data-label-mute="<?php esc_attr_e( 'Mute video', 'ugcify' ); ?>" data-label-unmute="<?php esc_attr_e( 'Unmute video', 'ugcify' ); ?>">
			<div class="ugcify-reels-video-controls__overlay" aria-label="<?php esc_attr_e( 'Playback controls', 'ugcify' ); ?>">
				<button type="button" class="ugcify-reels-video-control ugcify-reels-video-control--mute" aria-label="<?php esc_attr_e( 'Unmute video', 'ugcify' ); ?>">
					<span class="ugcify-reels-video-control__icon" data-control-icon="mute" aria-hidden="true">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M11 7.5L8.25 10H5.5V14H8.25L11 16.5V7.5Z" fill="currentColor"/><path d="M14.5 10L18.5 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/><path d="M18.5 10L14.5 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg>
					</span>
				</button>
				<button type="button" class="ugcify-reels-video-control ugcify-reels-video-control--play" aria-label="<?php esc_attr_e( 'Play video', 'ugcify' ); ?>">
					<span class="ugcify-reels-video-control__icon" data-control-icon="play" aria-hidden="true">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M8 6.75V17.25L17 12L8 6.75Z" fill="currentColor"/></svg>
					</span>
				</button>
			</div>
			<div class="ugcify-reels-video-progress-wrap">
				<input type="range" class="ugcify-reels-video-progress" min="0" max="100" step="0.1" value="0" aria-label="<?php esc_attr_e( 'Video progress', 'ugcify' ); ?>">
			</div>
		</div>

		<!-- Right-side share action -->
		<div class="ugcify-reels-actions" style="display:none;" aria-label="<?php esc_attr_e( 'Review actions', 'ugcify' ); ?>">
			<button type="button" class="ugcify-reels-action-item ugcify-reels-action-share ugcify-reels-share-btn" aria-label="<?php esc_attr_e( 'Share this review', 'ugcify' ); ?>">
				<span class="ugcify-reels-action-icon" aria-hidden="true">
					<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M22 2L11 13" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
						<path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</span>
			</button>
		</div>

		<!-- Bottom overlay: author + review text -->
		<div class="ugcify-reels-overlay-info" style="display:none;">
			<div class="ugcify-reels-author-row">
				<div class="ugcify-reels-author-avatar" aria-hidden="true"></div>
				<div class="ugcify-reels-author-details">
					<span class="ugcify-reels-author-name"></span>
					<span class="ugcify-reels-review-time"></span>
				</div>
			</div>
			<div class="ugcify-reels-review-text"></div>
			<div class="ugcify-reels-stars-row" aria-label="<?php esc_attr_e( 'Star rating', 'ugcify' ); ?>"></div>
		</div>

		<!-- Shared overlay layer: shows either the cart sheet OR the share sheet -->
		<div class="ugcify-reels-direct-cart-layer" aria-hidden="true">

			<!-- Cart sheet -->
			<div class="ugcify-reels-direct-cart-sheet" role="complementary" aria-label="<?php esc_attr_e( 'Quick add to cart', 'ugcify' ); ?>">
				<div class="ugcify-reels-direct-cart-header">
					<div class="ugcify-reels-direct-cart-header-copy">
						<span class="ugcify-reels-direct-cart-kicker"><?php esc_html_e( 'Shop This Product', 'ugcify' ); ?></span>
						<p class="ugcify-reels-direct-cart-caption"><?php esc_html_e( 'Add it to your cart without leaving the reel.', 'ugcify' ); ?></p>
					</div>
					<button type="button" class="ugcify-reels-direct-cart-close" aria-label="<?php esc_attr_e( 'Close quick add panel', 'ugcify' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/></svg>
					</button>
				</div>
				<div class="ugcify-reels-direct-cart-product">
					<div class="ugcify-reels-direct-cart-thumb" aria-hidden="true"></div>
					<div class="ugcify-reels-direct-cart-summary">
						<a href="#" class="ugcify-reels-direct-cart-title"></a>
						<div class="ugcify-reels-direct-cart-price">
							<span class="ugcify-reels-direct-cart-price-current"></span>
							<span class="ugcify-reels-direct-cart-price-original"></span>
						</div>
					</div>
				</div>
				<div class="ugcify-reels-direct-cart-variations" style="display:none;"></div>
				<div class="ugcify-reels-direct-cart-actions">
					<button type="button" class="ugcify-reels-direct-cart-button"><?php esc_html_e( 'Add To Cart', 'ugcify' ); ?></button>
				</div>
			</div>

			<!-- Share sheet — toggled by JS, hidden by default -->
			<div class="ugcify-reels-share-sheet" role="dialog" aria-label="<?php esc_attr_e( 'Share this review', 'ugcify' ); ?>" style="display:none;">
				<div class="ugcify-reels-direct-cart-header">
					<div class="ugcify-reels-direct-cart-header-copy">
						<span class="ugcify-reels-direct-cart-kicker"><?php esc_html_e( 'Share This Review', 'ugcify' ); ?></span>
					</div>
					<button type="button" class="ugcify-reels-share-close" aria-label="<?php esc_attr_e( 'Close share panel', 'ugcify' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="currentColor"/></svg>
					</button>
				</div>
				<div class="ugcify-reels-share-channels">
					<button type="button" class="ugcify-reels-share-channel" data-channel="facebook" style="--ch-color:#1877F2">
						<span class="ugcify-reels-share-channel-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.267h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">Facebook</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel" data-channel="x" style="--ch-color:#000">
						<span class="ugcify-reels-share-channel-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">X</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel" data-channel="whatsapp" style="--ch-color:#25D366">
						<span class="ugcify-reels-share-channel-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span>
						<span class="ugcify-reels-share-channel-label">WhatsApp</span>
					</button>
					<button type="button" class="ugcify-reels-share-channel ugcify-reels-share-channel--copy" data-channel="copy_link" style="--ch-color:#6B7280">
						<span class="ugcify-reels-share-channel-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
						<span class="ugcify-reels-share-channel-label ugcify-reels-share-copy-label"><?php esc_html_e( 'Copy Link', 'ugcify' ); ?></span>
					</button>
				</div>
				<div class="ugcify-reels-share-url-row" hidden>
					<input type="text" class="ugcify-reels-share-url-input" readonly aria-label="<?php esc_attr_e( 'Share link', 'ugcify' ); ?>" />
					<button type="button" class="ugcify-reels-share-url-copy-btn">
						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="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 class="ugcify-reels-share-url-copy-label"><?php esc_html_e( 'Copy', 'ugcify' ); ?></span>
					</button>
				</div>
				<div class="ugcify-reels-share-error" aria-live="polite" hidden></div>
			</div>

		</div><!-- .ugcify-reels-direct-cart-layer -->

	</div><!-- .ugcify-reels-modal-container -->
</div><!-- .ugcify-reels-modal-overlay -->
