<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }
use Elementor\Widget_Base;
use Sifency\Traits\Sifency_Reels_Controls;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Traits\Sifency_Addons_Master_Typography;

class Sifency_Addons_Widget_Reels extends Widget_Base {
	use Sifency_Reels_Controls;
	use Sifency_Addons_Help_Controls;
	use Sifency_Addons_Master_Typography;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-reels',
			'title'          => 'Sifency Reels',
			'icon'           => 'eicon-video-playlist',
			'category'       => array( 'sifency-advance-widgets' ),
			'script_depends' => array( 'gsap', 'gsap-scrolltrigger', 'sifency-reels-script' ),
			'style_depends'  => array( 'sifency-sun-style' ),
			'keywords'       => array( 'image', 'orbit', 'glow', 'rocket', 'light', 'border', 'gsap' ),
		);
	}

	protected function register_controls() {
		$this->add_sifency_reels_controls();

		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'     => 'caption_style',
				'label'      => 'Caption Style',
				'selector'   => '.sifency-reel-caption',
				'color_only' => true,
			)
		);
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$reels    = $settings['reels_list'];

		if ( empty( $reels ) ) {
			return;
		}
		?>
		<div class="sifency-reels-container" 
			data-autoplay="<?php echo esc_attr( $settings['autoplay_viewport'] ); ?>"
			data-mute="<?php echo esc_attr( $settings['mute_by_default'] ); ?>">
			
			<?php
			foreach ( $reels as $index => $reel ) :
				$video_url = ( $reel['video_type'] === 'self' ) ? $reel['video_url']['url'] : $reel['external_url'];
				$avatar    = ! empty( $reel['user_avatar']['url'] ) ? $reel['user_avatar']['url'] : \Elementor\Utils::get_placeholder_image_src();
				?>
				<div class="sifency-reel-item">
					<!-- Video Layer -->
					<video class="sifency-reel-video" 
							playsinline 
							<?php echo ( $settings['loop_video'] === 'yes' ) ? 'loop' : ''; ?>
							poster="<?php echo esc_url( $reel['poster']['url'] ); ?>">
						<source src="<?php echo esc_url( $video_url ); ?>" type="video/mp4">
					</video>

					<!-- Interaction Overlay -->
					<div class="sifency-reel-overlay">
						<!-- Bottom Info -->
						<div class="sifency-reel-content">
							<div class="sifency-reel-user">
								<img src="<?php echo esc_url( $avatar ); ?>" class="avatar">
								<span class="username"><?php echo esc_html( $reel['user_name'] ); ?></span>
								<button class="follow-btn">Follow</button>
							</div>
							<div class="sifency-reel-caption"><?php echo wp_kses_post( $reel['caption'] ); ?></div>
						</div>

						<!-- Right Sidebar -->
						<div class="sifency-reel-actions">
							<div class="action-item">
								<i class="eicon-heart"></i>
								<span><?php echo esc_html( $reel['like_count'] ); ?></span>
							</div>
							<div class="action-item">
								<i class="eicon-commenting-o"></i>
								<span><?php echo esc_html( $reel['comment_count'] ); ?></span>
							</div>
							<div class="action-item share-btn">
								<i class="eicon-share-arrow"></i>
							</div>
						</div>

						<!-- Mute Toggle Icon -->
						<div class="sifency-reel-mute-toggle">
							<i class="eicon-nerve"></i>
						</div>

						<!-- Progress Bar -->
						<div class="sifency-reel-progress">
							<div class="progress-fill"></div>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
		<?php
	}
}
