<?php

namespace ElementPack\Modules\AudioPlayer\Skins;

use Elementor\Skin_Base as Elementor_Skin_Base;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

/**
 * Showcase Audio Player Skin
 *
 * Renders the card-slider + playlist + sticky player bar layout.
 * Widget settings are normalised here and passed to the frontend via
 * `data-settings` JSON (see $payload). Duration labels start as placeholders
 * and are filled by ep-audio-player.js from audio metadata.
 */
class Skin_Showcase extends Elementor_Skin_Base {

	public function get_id() {
		return 'bdt-showcase';
	}

	public function get_title() {
		return esc_html__( 'Showcase', 'bdthemes-element-pack' );
	}

	/**
	 * UIkit tooltip attribute for showcase controls.
	 *
	 * @param string $text     Tooltip label.
	 * @param string $position Tooltip position (top, bottom, left, right).
	 */
	private function get_tooltip_attr( $text, $position = 'top' ) {
		return sprintf(
			' data-bdt-tooltip="title: %1$s; pos: %2$s;"',
			esc_attr( $text ),
			esc_attr( $position )
		);
	}

	public function render() {
		$settings = $this->parent->get_settings_for_display();
		$playlist = ! empty( $settings['showcase_playlist'] ) && is_array( $settings['showcase_playlist'] ) ? $settings['showcase_playlist'] : [];

		if ( empty( $playlist ) ) {
			return;
		}

		$songs = [];

		foreach ( $playlist as $item ) {
			$songs[] = [
				'artist' => isset( $item['artist'] ) ? wp_strip_all_tags( $item['artist'] ) : '',
				'title'  => isset( $item['song_title'] ) ? wp_strip_all_tags( $item['song_title'] ) : '',
				'cover'  => ! empty( $item['cover']['url'] ) ? esc_url( $item['cover']['url'] ) : BDTEP_ASSETS_URL . 'images/audio-thumbnail.svg',
				'audio'  => ! empty( $item['song_url']['url'] ) ? esc_url( $item['song_url']['url'] ) : '',
				'liked'  => isset( $item['is_liked'] ) && 'yes' === $item['is_liked'],
			];
		}

		$initial_song_number = isset( $settings['showcase_initial_song'] ) ? max( 1, intval( $settings['showcase_initial_song'] ) ) : 3;
		$initial_index       = min( $initial_song_number - 1, count( $songs ) - 1 );

		$show_shuffle  		 = ! isset( $settings['showcase_show_shuffle'] ) || 'yes' === $settings['showcase_show_shuffle'];
		$show_like     		 = ! isset( $settings['showcase_show_like'] ) || 'yes' === $settings['showcase_show_like'];
		$show_duration 		 = ! isset( $settings['showcase_show_duration'] ) || 'yes' === $settings['showcase_show_duration'];
		$show_progress_time  = ! isset( $settings['showcase_show_progress_time'] ) || 'yes' === $settings['showcase_show_progress_time'];
		$auto_next           = ! isset( $settings['showcase_auto_next'] ) || 'yes' === $settings['showcase_auto_next'];
		$swiper_speed  		 = isset( $settings['showcase_swiper_speed'] ) ? max( 200, intval( $settings['showcase_swiper_speed'] ) ) : 700;

		$volume = 0.8;

		if ( isset( $settings['showcase_volume_level']['size'] ) ) {
			$volume = floatval( $settings['showcase_volume_level']['size'] );
		}

		$volume_percent = (int) round( $volume * 100 );
		$volume_level   = $volume_percent <= 0 ? 'mute' : ( $volume_percent <= 50 ? 'medium' : 'high' );

		$tooltip_play  = esc_html__( 'Play', 'bdthemes-element-pack' );
		$tooltip_pause = esc_html__( 'Pause', 'bdthemes-element-pack' );

		$wrapper_classes = [ 'bdt-audio-player', 'skin-showcase' ];

		if ( ! $show_shuffle ) {
			$wrapper_classes[] = 'bdt-ap-showcase--no-shuffle';
		}
		if ( ! $show_like ) {
			$wrapper_classes[] = 'bdt-ap-showcase--no-like';
		}
		if ( ! $show_duration ) {
			$wrapper_classes[] = 'bdt-ap-showcase--no-duration';
		}
		if ( ! $show_progress_time ) {
			$wrapper_classes[] = 'bdt-ap-showcase--no-progress-time';
		}

		$payload = [
			'initial_index'      => $initial_index,
			'autoplay'           => isset( $settings['showcase_autoplay'] ) && 'yes' === $settings['showcase_autoplay'],
			'loop'               => isset( $settings['showcase_loop'] ) && 'yes' === $settings['showcase_loop'],
			'auto_next'          => $auto_next,
			'volume'             => $volume,
			'songs'              => $songs,
			'show_shuffle'       => $show_shuffle,
			'show_like'          => $show_like,
			'show_duration'      => $show_duration,
			'show_progress_time' => $show_progress_time,
			'swiper_speed'       => $swiper_speed,
		];
		?>
		<div class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>" data-settings="<?php echo esc_attr( wp_json_encode( $payload ) ); ?>">
			<div class="bdt-ap-showcase-main">
				<div class="bdt-ap-showcase-content">
					<div class="bdt-ap-showcase-slider-playlist">
						<div class="bdt-ap-showcase-swiper swiper">
							<div class="swiper-wrapper">
								<?php foreach ( $songs as $song ) : ?>
									<div class="swiper-slide">
										<img src="<?php echo esc_url( $song['cover'] ); ?>" alt="<?php echo esc_attr( $song['artist'] ); ?>">
										<h3><?php echo esc_html( $song['artist'] ); ?></h3>
									</div>
								<?php endforeach; ?>
							</div>
						</div>

						<?php
						$playlist_count        = count( $songs );
						$playlist_row_estimate = 58;
						$playlist_classes      = [];
						$playlist_style        = '';

						// Pre-apply scroll constraints on first paint to prevent scrollbar flash.
						if ( $playlist_count > 5 ) {
							$playlist_classes[] = 'is-scrollable';
							$playlist_style     = '--playlist-visible-height: ' . ( 5 * $playlist_row_estimate ) . 'px';
						} elseif ( $playlist_count >= 3 ) {
							$playlist_classes[] = 'is-scrollable is-scrollable-ssr-mobile';
							$playlist_style     = '--playlist-visible-height: ' . ( 3 * $playlist_row_estimate ) . 'px';
						}
						?>
						<div class="bdt-ap-showcase-playlist<?php echo $playlist_classes ? ' ' . esc_attr( implode( ' ', $playlist_classes ) ) : ''; ?>"<?php echo $playlist_style ? ' style="' . esc_attr( $playlist_style ) . '"' : ''; ?>>
							<?php foreach ( $songs as $index => $song ) : ?>
								<div class="bdt-ap-showcase-playlist-item" data-index="<?php echo esc_attr( $index ); ?>">
									<img src="<?php echo esc_url( $song['cover'] ); ?>" alt="<?php echo esc_attr( $song['title'] ); ?>">
									<div class="bdt-ap-showcase-song">
										<p><?php echo esc_html( $song['artist'] ); ?></p>
										<p><?php echo esc_html( $song['title'] ); ?></p>
									</div>
									<?php if ( $show_duration ) : ?>
										<p class="bdt-ap-showcase-duration" data-index="<?php echo esc_attr( $index ); ?>">0:00</p>
									<?php endif; ?>
									<?php if ( $show_like ) : ?>
										<div class="bdt-ap-showcase-like-btn<?php echo $song['liked'] ? ' is-liked' : ''; ?>" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Toggle like', 'bdthemes-element-pack' ); ?>">
											<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
												<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"></path>
											</svg>
										</div>
									<?php endif; ?>
								</div>
							<?php endforeach; ?>
						</div>
					</div>

					<div class="bdt-ap-showcase-player">
						<audio class="bdt-ap-showcase-audio" preload="metadata"></audio>

						<div class="bdt-ap-showcase-controls">
							<?php if ( $show_shuffle ) : ?>
								<div class="bdt-ap-showcase-icon-btn bdt-ap-showcase-shuffle" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Shuffle', 'bdthemes-element-pack' ); ?>"<?php echo $this->get_tooltip_attr( esc_html__( 'Shuffle', 'bdthemes-element-pack' ) ); ?>>
									<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
										<path d="M17 3h4v4h-2V5.41l-3.29 3.3-1.42-1.42L17.59 4H17V3zM3 6h2.59l3.29 3.29-1.42 1.42L5 8.41H3V6zm11.29 8.29 1.42-1.42L19 16.17V15h2v4h-4v-2h1.59l-3.3-3.3zM3 16v-2h2l7-7h3v2h-2.17l-7 7H3z"></path>
									</svg>
								</div>
							<?php endif; ?>
							<div class="bdt-ap-showcase-icon-btn bdt-ap-showcase-prev" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Previous', 'bdthemes-element-pack' ); ?>"<?php echo $this->get_tooltip_attr( esc_html__( 'Previous', 'bdthemes-element-pack' ) ); ?>>
								<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
									<path d="M6 6h2v12H6zM9 12l9 6V6z"></path>
								</svg>
							</div>
							<div class="bdt-ap-showcase-play-pause" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Play/Pause', 'bdthemes-element-pack' ); ?>" data-tooltip-play="<?php echo esc_attr( $tooltip_play ); ?>" data-tooltip-pause="<?php echo esc_attr( $tooltip_pause ); ?>"<?php echo $this->get_tooltip_attr( $tooltip_play ); ?>>
								<span class="bdt-ap-showcase-play-icon" aria-hidden="true">
									<svg class="icon-play" viewBox="0 0 24 24" focusable="false">
										<path d="M8 5v14l11-7z"></path>
									</svg>
									<svg class="icon-pause" viewBox="0 0 24 24" focusable="false">
										<path d="M6 5h4v14H6zm8 0h4v14h-4z"></path>
									</svg>
								</span>
							</div>
							<div class="bdt-ap-showcase-icon-btn bdt-ap-showcase-next" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Next', 'bdthemes-element-pack' ); ?>"<?php echo $this->get_tooltip_attr( esc_html__( 'Next', 'bdthemes-element-pack' ) ); ?>>
								<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
									<path d="M16 6h2v12h-2zM6 18l9-6-9-6z"></path>
								</svg>
							</div>
							<div class="bdt-ap-showcase-volume" tabindex="0" aria-label="<?php esc_attr_e( 'Volume', 'bdthemes-element-pack' ); ?>">
								<span class="bdt-ap-showcase-volume-icon" data-volume-level="<?php echo esc_attr( $volume_level ); ?>" aria-hidden="true"<?php echo $this->get_tooltip_attr( esc_html__( 'Volume', 'bdthemes-element-pack' ) ); ?>>
									<svg class="icon-volume-mute" viewBox="0 -960 960 960" focusable="false" aria-hidden="true">
										<path d="m616-320-56-56 104-104-104-104 56-56 104 104 104-104 56 56-104 104 104 104-56 56-104-104-104 104Zm-496-40v-240h160l200-200v640L280-360H120Zm280-246-86 86H200v80h114l86 86v-252ZM300-480Z"></path>
									</svg>
									<svg class="icon-volume-down" viewBox="0 -960 960 960" focusable="false" aria-hidden="true">
										<path d="M200-360v-240h160l200-200v640L360-360H200Zm440 40v-322q45 21 72.5 65t27.5 97q0 53-27.5 96T640-320ZM480-606l-86 86H280v80h114l86 86v-252ZM380-480Z"></path>
									</svg>
									<svg class="icon-volume-up" viewBox="0 -960 960 960" focusable="false" aria-hidden="true">
										<path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"></path>
									</svg>
								</span>
								<input type="range" class="bdt-ap-showcase-volume-range" min="0" max="100" value="<?php echo esc_attr( $volume_percent ); ?>" />
							</div>
						</div>
						<div class="bdt-ap-showcase-progress">
							<?php if ( $show_progress_time ) : ?>
								<span class="bdt-ap-showcase-progress-current" aria-live="polite">0:00</span>
							<?php endif; ?>
							<input type="range" min="0" step="any" value="0" class="bdt-ap-showcase-progress-bar" aria-label="<?php esc_attr_e( 'Seek', 'bdthemes-element-pack' ); ?>"<?php echo $this->get_tooltip_attr( esc_html__( 'Seek', 'bdthemes-element-pack' ) ); ?> />
							<?php if ( $show_progress_time ) : ?>
								<span class="bdt-ap-showcase-progress-total">0:00</span>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
