<?php
/**
 * Default player template for The Studio Player.
 *
 * @package The Studio Player
 */

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

/**
 * Player Template: default.
 *
 * This template is the reference implementation for The Studio Player.
 * It demonstrates how a template:
 * - consumes the design schema and exposes it as CSS custom properties,
 * - provides structural hooks for the core engine and the standard UI layer,
 * - renders the two-line text engine (status + infotext) using shared classes,
 * - optionally shows an audio info box that is bound via THESPL_Player_UI.
 *
 * Template Developer Guide (short):
 * - Required wrapper:
 *   - A root element with class "thespl-player" and a unique id.
 *   - Attributes: data-playlist-id, data-template-slug, data-thespl-core-ui.
 * - Design tokens:
 *   - Templates read colors and layout from CSS custom properties on the root.
 *   - Use thespl_design_schema_to_css_vars() to map schema to variables like:
 *     --thespl-accent, --thespl-accent-2, --thespl-bg, --thespl-text, --thespl-waveform.
 * - Core UI hooks:
 *   - Canvas: .thespl-player__canvas inside .thespl-player__canvas-wrap (optional).
 *   - Status row (line 1): .thespl-player__status (used by THESPL_Player_UI.renderStatus()).
 *   - Infotext row (line 2): .thespl-player__infotext with .thespl-infotext-text.
 *   - Playlist: .thespl-player__playlist (bound via THESPL_Player_UI.bindPlaylist()).
 *   - Variants: .thespl-player__variants (bound via THESPL_Player_UI.bindVariants()).
 *   - Audio element: .thespl-player__audio (owned by the core engine).
 * - Data bindings:
 *   - Audio info uses data-thespl-audio-info attributes for metrics and metadata.
 *   - Branding/footer uses data-thespl-meta for plugin version and build.
 * - Behaviour:
 *   - Status texts and infotext are fully driven by THESPL_Player_UI and the store.
 *   - Templates should avoid duplicating status or infotext logic.
 * Mofify Your default values here:
 * Allow User CSS Overrides: true
 * Show Audio Info: true
 * Has Audio Info Panel:yes
 * Show Playlist: true
 * Default Base Color: #442e2e
 * Default Text Color: #f2f2f2
 * Default Accent Color: #8e804f
 * Default Accent 2 Color: #544434
 * Default Waveform Color: #a19696
 * Default Ring Base Color: #442e2e
 * Default Button Background Color:
 * Default Button Text Color:
 * Default Button Active Background Color:
 * Default Button Active Text Color:
 * Default Chip Background Color:
 * Default Chip Border Color:
 * Default Buffer Ring Alpha: 0.5
 */

// Resolve the playlist the player should render for.
$thespl_playlist_id = isset( $thespl_context['playlist_id'] ) ? (int) $thespl_context['playlist_id'] : 0;
if ( $thespl_playlist_id <= 0 ) {
	return;
}

$thespl_debug_message = isset( $thespl_context['debug_message'] ) && is_string( $thespl_context['debug_message'] ) ? trim( $thespl_context['debug_message'] ) : '';

// Global feature toggles configured in the plugin settings.
$thespl_settings             = thespl_get_player_settings();
$thespl_global_debug_enabled = ! empty( $thespl_settings['debug_console_enabled'] );
// Template slug used for locating assets and controlling behaviour.
$thespl_template_slug = isset( $thespl_context['template'] ) && is_string( $thespl_context['template'] ) ? sanitize_key( $thespl_context['template'] ) : 'default';
if ( '' === $thespl_template_slug ) {
	$thespl_template_slug = 'default';
}
// Template capabilities and per-template visibility preferences.
$thespl_allow_user_css_overrides = function_exists( 'thespl_template_allows_user_css_overrides' ) ? thespl_template_allows_user_css_overrides( $thespl_template_slug ) : true;
$thespl_audio_pref               = function_exists( 'thespl_template_get_show_audio_info_pref' ) ? thespl_template_get_show_audio_info_pref( $thespl_template_slug ) : null;
$thespl_playlist_pref            = function_exists( 'thespl_template_get_show_playlist_pref' ) ? thespl_template_get_show_playlist_pref( $thespl_template_slug ) : null;

// Unique wrapper id and design schema for the current playlist.
$thespl_wrapper_id = 'thespl-player-' . $thespl_playlist_id . '-' . wp_rand( 1000, 9999 );
$thespl_design     = function_exists( 'thespl_design_get_schema' ) ? thespl_design_get_schema( $thespl_playlist_id, $thespl_template_slug ) : get_post_meta( $thespl_playlist_id, '_thespl_playlist_design', true );
$thespl_design     = is_array( $thespl_design ) ? $thespl_design : array();

// Core palette tokens derived from the design schema.
$thespl_accent       = isset( $thespl_design['accent_color'] ) && is_string( $thespl_design['accent_color'] ) ? sanitize_hex_color( $thespl_design['accent_color'] ) : '#22d3ee';
$thespl_accent2      = isset( $thespl_design['accent_2_color'] ) && is_string( $thespl_design['accent_2_color'] ) ? sanitize_hex_color( $thespl_design['accent_2_color'] ) : '#a5f3fc';
$thespl_basecol      = isset( $thespl_design['base_color'] ) && is_string( $thespl_design['base_color'] ) ? sanitize_hex_color( $thespl_design['base_color'] ) : '#050816';
$thespl_waveform     = isset( $thespl_design['waveform_color'] ) && is_string( $thespl_design['waveform_color'] ) ? sanitize_hex_color( $thespl_design['waveform_color'] ) : '#5a5a5a';
$thespl_ringbase     = isset( $thespl_design['ring_base_color'] ) && is_string( $thespl_design['ring_base_color'] ) ? sanitize_hex_color( $thespl_design['ring_base_color'] ) : '#222222';
$thespl_buffer_alpha = isset( $thespl_design['buffer_ring_alpha'] ) && is_numeric( $thespl_design['buffer_ring_alpha'] ) ? (float) $thespl_design['buffer_ring_alpha'] : 0.3;
if ( $thespl_buffer_alpha < 0 ) {
	$thespl_buffer_alpha = 0.0;
} elseif ( $thespl_buffer_alpha > 1 ) {
	$thespl_buffer_alpha = 1.0;
}
$thespl_buffer_color = 'rgba(180,230,255,0.1)';
if ( '' !== $thespl_accent && function_exists( 'thespl_hex_to_rgb' ) ) {
	$thespl_accent_rgb = thespl_hex_to_rgb( $thespl_accent );
	if ( is_array( $thespl_accent_rgb ) && 3 === count( $thespl_accent_rgb ) ) {
		$thespl_buffer_color = sprintf( 'rgba(%d,%d,%d,%.3f)', $thespl_accent_rgb[0], $thespl_accent_rgb[1], $thespl_accent_rgb[2], $thespl_buffer_alpha );
	}
}
$thespl_show_pl = ! isset( $thespl_design['show_playlist'] ) ? true : (bool) $thespl_design['show_playlist'];
$thespl_show_ai = ! isset( $thespl_design['show_audio_info'] ) ? true : (bool) $thespl_design['show_audio_info'];
if ( ! $thespl_allow_user_css_overrides ) {
	if ( null !== $thespl_playlist_pref ) {
		$thespl_show_pl = (bool) $thespl_playlist_pref;
	}
	if ( null !== $thespl_audio_pref ) {
		$thespl_show_ai = (bool) $thespl_audio_pref;
	}
}
// Decide whether the audio info box should be rendered for this instance.
$thespl_audio_info_box_enabled = true;
if ( ! $thespl_allow_user_css_overrides && null !== $thespl_audio_pref ) {
	$thespl_audio_info_box_enabled = (bool) $thespl_audio_pref;
}
// Base wrapper classes expose the generic player hook and template-specific flags.
$thespl_debug_console_enabled = $thespl_global_debug_enabled ? true : false;
$thespl_wrapper_classes       = 'thespl-player';
if ( ! $thespl_show_pl ) {
	$thespl_wrapper_classes .= ' thespl-hide-playlist'; }
if ( ! $thespl_show_ai ) {
	$thespl_wrapper_classes .= ' thespl-hide-audio-info'; }
$thespl_textcol  = isset( $thespl_design['text_color'] ) && is_string( $thespl_design['text_color'] ) ? sanitize_hex_color( $thespl_design['text_color'] ) : '#f9fafb';
$thespl_muted    = '';
$thespl_panel_bg = '';
$thespl_panel_br = '';
$thespl_text_hex = ltrim( $thespl_textcol, '#' );
$thespl_text_hex = preg_replace( '/[^0-9a-fA-F]/', '', $thespl_text_hex );
if ( 3 === strlen( $thespl_text_hex ) ) {
	$thespl_text_hex = str_repeat( substr( $thespl_text_hex, 0, 1 ), 2 ) . str_repeat( substr( $thespl_text_hex, 1, 1 ), 2 ) . str_repeat( substr( $thespl_text_hex, 2, 1 ), 2 );
}
if ( 6 === strlen( $thespl_text_hex ) ) {
	$thespl_text_r   = hexdec( substr( $thespl_text_hex, 0, 2 ) );
	$thespl_text_g   = hexdec( substr( $thespl_text_hex, 2, 2 ) );
	$thespl_text_b   = hexdec( substr( $thespl_text_hex, 4, 2 ) );
	$thespl_muted    = 'rgba(' . $thespl_text_r . ',' . $thespl_text_g . ',' . $thespl_text_b . ',0.7)';
	$thespl_panel_bg = 'rgba(' . $thespl_text_r . ',' . $thespl_text_g . ',' . $thespl_text_b . ',0.05)';
	$thespl_panel_br = 'rgba(' . $thespl_text_r . ',' . $thespl_text_g . ',' . $thespl_text_b . ',0.12)';
}
$thespl_btn_bg     = isset( $thespl_design['button_bg_color'] ) && is_string( $thespl_design['button_bg_color'] ) ? sanitize_hex_color( $thespl_design['button_bg_color'] ) : thespl_mix_hex( $thespl_basecol, $thespl_accent, 0.15 );
$thespl_btn_text   = isset( $thespl_design['button_text_color'] ) && is_string( $thespl_design['button_text_color'] ) ? sanitize_hex_color( $thespl_design['button_text_color'] ) : thespl_best_text_on_bg( $thespl_btn_bg );
$thespl_btn_act_bg = isset( $thespl_design['button_active_bg_color'] ) && is_string( $thespl_design['button_active_bg_color'] ) ? sanitize_hex_color( $thespl_design['button_active_bg_color'] ) : $thespl_accent;
$thespl_btn_act_tx = isset( $thespl_design['button_active_text_color'] ) && is_string( $thespl_design['button_active_text_color'] ) ? sanitize_hex_color( $thespl_design['button_active_text_color'] ) : thespl_best_text_on_bg( $thespl_btn_act_bg );
$thespl_chip_bg    = isset( $thespl_design['chip_bg_color'] ) && is_string( $thespl_design['chip_bg_color'] ) ? sanitize_hex_color( $thespl_design['chip_bg_color'] ) : thespl_mix_hex( $thespl_basecol, '#ffffff', 0.06 );
$thespl_chip_br    = isset( $thespl_design['chip_br_color'] ) && is_string( $thespl_design['chip_br_color'] ) ? sanitize_hex_color( $thespl_design['chip_br_color'] ) : thespl_mix_hex( $thespl_basecol, '#ffffff', 0.16 );

// Translate the normalized design schema into inline CSS custom properties.
$thespl_style_vars = function_exists( 'thespl_design_schema_to_css_vars' ) ? thespl_design_schema_to_css_vars( $thespl_design ) : '';
if ( '' !== $thespl_buffer_color ) {
	if ( '' !== $thespl_style_vars ) {
		$thespl_style_vars .= ';--thespl-buffered:' . $thespl_buffer_color;
	} else {
		$thespl_style_vars = '--thespl-buffered:' . $thespl_buffer_color;
	}
}

// Signal whether the low-level core UI inside player-core.js should be active.
// The default template owns its own canvas UI and therefore keeps this off.
$thespl_core_ui_attr = 'off';
if ( isset( $thespl_context['core_ui_enabled'] ) ) {
	$thespl_core_ui_attr = $thespl_context['core_ui_enabled'] ? 'on' : 'off';
}
$thespl_audio_info_enabled_attr = ( $thespl_audio_info_box_enabled && $thespl_show_ai ) ? '1' : '0';

?>

<div id="<?php echo esc_attr( $thespl_wrapper_id ); ?>" class="<?php echo esc_attr( $thespl_wrapper_classes ); ?>" style="<?php echo esc_attr( $thespl_style_vars ); ?>" data-playlist-id="<?php echo esc_attr( (string) $thespl_playlist_id ); ?>" data-template-slug="<?php echo esc_attr( $thespl_template_slug ); ?>" data-debug="<?php echo esc_attr( $thespl_debug_console_enabled ? '1' : '0' ); ?>" data-thespl-core-ui="<?php echo esc_attr( $thespl_core_ui_attr ); ?>" data-thespl-audio-info-enabled="<?php echo esc_attr( $thespl_audio_info_enabled_attr ); ?>" data-thespl-i18n-status-buffering="<?php echo esc_attr__( 'Buffering', 'the-studio-player' ); ?>" data-thespl-i18n-status-ready="<?php echo esc_attr__( 'Ready', 'the-studio-player' ); ?>" data-thespl-i18n-status-paused="<?php echo esc_attr__( 'Paused', 'the-studio-player' ); ?>" data-thespl-i18n-status-stopped="<?php echo esc_attr__( 'Stopped', 'the-studio-player' ); ?>" data-thespl-i18n-binaural-message="<?php echo esc_attr__( 'Binaural audio - use headphones', 'the-studio-player' ); ?>" data-thespl-infotext-mode="scroll">
	<?php if ( '' !== $thespl_debug_message ) : ?>
		<div class="thespl-player__notice" role="status"><?php echo esc_html( $thespl_debug_message ); ?></div>
	<?php endif; ?>

	<div class="thespl-player__canvas-wrap">
		<canvas class="thespl-player__canvas" width="380" height="380"></canvas>
	</div>

	<div class="thespl-player__header" style="display:flex; align-items:center; gap:12px;">
		<div class="thespl-player__subtitle" style="flex:1 1 auto;"></div>
	</div>

	<div class="thespl-player__display">
		<div class="thespl-player__status" role="status" aria-live="polite"></div>

		<div class="thespl-player__infotext" role="status" aria-live="polite"></div>
	</div>

	<div class="thespl-player__variants" role="tablist" aria-label="<?php echo esc_attr__( 'Variants', 'the-studio-player' ); ?>"></div>

	<div class="thespl-player__controls">
		<button type="button" class="thespl-player__btn thespl-player__btn--play"><?php echo esc_html__( 'Play', 'the-studio-player' ); ?></button>
		<button type="button" class="thespl-player__btn thespl-player__btn--pause"><?php echo esc_html__( 'Pause', 'the-studio-player' ); ?></button>
		<button type="button" class="thespl-player__btn thespl-player__btn--stop"><?php echo esc_html__( 'Stop', 'the-studio-player' ); ?></button>
	</div>

	<div class="thespl-player__playlist" role="list"></div>

	<?php if ( $thespl_audio_info_box_enabled && $thespl_show_ai ) : ?>
		<div class="thespl-player__audio-info" role="status" aria-live="polite">
			<div class="thespl-player__audio-info-head">
				<div class="thespl-player__audio-info-title"><?php echo esc_html__( 'Audio Info', 'the-studio-player' ); ?></div>
				<div class="thespl-player__audio-info-build">
					<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_version"></span>
					<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_codename"></span>
					<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_build"></span>
				</div>
			</div>

			<div class="thespl-player__audio-info-grid">
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Track', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="track"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Variant', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="variant"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Sample Rate', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="sample_rate"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Bit Depth', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="bit_depth"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Channels', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="channels"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'AudioContext', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="audiocontext"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Playback', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="playback"></span>
				</div>
				<div class="thespl-player__audio-info-item">
					<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Buffer', 'the-studio-player' ); ?></span>
					<span class="thespl-player__audio-info-val" data-thespl-audio-info="buffer"></span>
				</div>
			</div>

			<div class="thespl-player__audio-info-levels" data-thespl-audio-info-levels></div>
		</div>
	<?php endif; ?>

	<div class="thespl-player__metafoot" data-thespl-meta="picho">
		<span class="thespl-player__metafoot-prefix"><?php echo esc_html__( 'The Studio Player', 'the-studio-player' ); ?></span>
		<span class="thespl-player__metafoot-sep"> | </span>
		<span class="thespl-player__metafoot-version" data-thespl-meta="pv"></span>
		<span class="thespl-player__metafoot-sep"> | </span>
		<span class="thespl-player__metafoot-build" data-thespl-meta="pb"></span>
		<span class="thespl-player__metafoot-sep"> | </span>
		<span class="thespl-player__metafoot-copy"><?php echo esc_html__( '© Peter Rahe', 'the-studio-player' ); ?> <?php echo esc_html( date_i18n( 'Y' ) ); ?></span>
	</div>

	<audio class="thespl-player__audio" preload="metadata" crossorigin="anonymous"></audio>
</div>
