<?php
/**
 * Admin Controller Class
 */

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

class Plugtuner_Admin {

	/**
	 * Constructor
	 */
	public function __construct() {
		// Register menus
		add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );

		// Register settings
		add_action( 'admin_init', array( $this, 'register_plugin_settings' ) );

		// Enqueue scripts/styles
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );

		// Inject dynamic designs CSS into admin head for Choose Design live previews

		// AJAX search
		add_action( 'wp_ajax_plugtuner_search_stations', array( $this, 'ajax_search_stations' ) );

		// AJAX save station
		add_action( 'wp_ajax_plugtuner_save_station', array( $this, 'ajax_save_station' ) );

		// AJAX delete station
		add_action( 'wp_ajax_plugtuner_delete_station', array( $this, 'ajax_delete_station' ) );

		// Allow font uploads
		add_filter( 'upload_mimes', array( $this, 'add_font_mime_types' ) );
		add_filter( 'wp_check_filetype_and_ext', array( $this, 'allow_ttf_upload_correction' ), 10, 5 );

	}

	/**
	 * Allow TTF font mime types for upload (administrators only)
	 */
	public function add_font_mime_types( $mimes ) {
		if ( ! current_user_can( 'manage_options' ) ) {
			return $mimes;
		}
		$mimes['ttf'] = 'font/ttf';
		return $mimes;
	}

	/**
	 * Correct checked file type and extension for TTF uploads in strict environments (administrators only)
	 */
	public function allow_ttf_upload_correction( $data, $file, $filename, $mimes, $real_mime = '' ) {
		if ( ! current_user_can( 'manage_options' ) ) {
			return $data;
		}
		$filetype = wp_check_filetype( $filename, $mimes );
		if ( 'ttf' === $filetype['ext'] ) {
			$data['ext']  = 'ttf';
			$data['type'] = 'font/ttf';
		}
		return $data;
	}

	/**
	 * Register Admin Menu
	 */
	public function add_admin_menu() {
		$icon_svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill-rule="evenodd" clip-rule="evenodd"><path d="M16.2 1.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2z" fill="black" /><path d="M12 7.5L15.2 3.2L16 3.8L12.8 8.1Z" fill="black" /><path d="M3.5 7h13A1.5 1.5 0 0 1 18 8.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 16.5v-8A1.5 1.5 0 0 1 3.5 7z M4 9.5h12v2H4z M7 12.5a2 2 0 1 0 0 4 2 2 0 1 0 0-4z M13.5 13.3a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 1 0 0-2.4z" fill="black" /><path d="M9.6 9.5h0.8v2H9.6z" fill="black" /></svg>';

		add_menu_page(
			__( 'Radio Tuner', 'plugtuner-radio-player' ),
			__( 'Radio Tuner', 'plugtuner-radio-player' ),
			'manage_options',
			'plugtuner-radio',
			array( $this, 'render_settings_page' ),
			'data:image/svg+xml;base64,' . base64_encode( $icon_svg ),
			65
		);
	}

	/**
	 * Register Plugin Settings
	 */
	public function register_plugin_settings() {
		register_setting( 'plugtuner_settings_group', 'plugtuner_settings', array( $this, 'sanitize_settings' ) );
	}

	/**
	 * Sanitize plugin settings on save
	 */
	public function sanitize_settings( $input ) {
		// Load existing settings as defaults
		$existing = get_option( 'plugtuner_settings', array() );
		if ( ! is_array( $existing ) ) {
			$existing = array();
		}

		$output = $existing;

		// Determine which tab submitted the form
		$current_tab = isset( $input['current_tab'] ) ? sanitize_key( $input['current_tab'] ) : '';

		if ( 'settings' === $current_tab ) {
			// Save General Settings
			$output['enable_pjax']          = isset( $input['enable_pjax'] ) ? '1' : '0';
			$output['enable_autoplay']      = isset( $input['enable_autoplay'] ) ? '1' : '0';
			$output['enable_footer_player'] = isset( $input['enable_footer_player'] ) ? '1' : '0';
			$output['accent_color']         = isset( $input['accent_color'] ) ? sanitize_hex_color( $input['accent_color'] ) : '#ff6f00';
			$output['player_width_mode']    = isset( $input['player_width_mode'] ) ? sanitize_key( $input['player_width_mode'] ) : 'fullwidth';
		} elseif ( 'design' === $current_tab ) {
			// Save Design Choice
			$output['tuner_theme']          = isset( $input['tuner_theme'] ) ? sanitize_key( $input['tuner_theme'] ) : 'free-dark';
			if ( ! in_array( $output['tuner_theme'], array( 'free-light', 'free-dark' ), true ) ) {
				$output['tuner_theme'] = 'free-dark';
			}
		} elseif ( 'customize_design' === $current_tab ) {
			// Save Customizer Settings (depends on the theme being customized)
			$design_type = isset( $input['tuner_theme'] ) ? sanitize_key( $input['tuner_theme'] ) : 'free-light';
			if ( ! in_array( $design_type, array( 'free-light', 'free-dark' ), true ) ) {
				$design_type = 'free-dark';
			}
			$output['tuner_theme'] = $design_type;

			$allowed_themes = array( 'free-light', 'free-dark' );
			if ( in_array( $design_type, $allowed_themes, true ) ) {
				$prefix = str_replace( '-', '_', $design_type );
				$default_bg = ( strpos( $design_type, 'dark' ) !== false ) ? '#0b0b0c' : '#ffffff';

				$output[ $prefix . '_accent_color' ]   = isset( $input[ $prefix . '_accent_color' ] ) ? sanitize_hex_color( $input[ $prefix . '_accent_color' ] ) : '#ff6f00';
				$output[ $prefix . '_bg_color' ]       = isset( $input[ $prefix . '_bg_color' ] ) ? sanitize_hex_color( $input[ $prefix . '_bg_color' ] ) : $default_bg;
				$output[ $prefix . '_opacity' ]        = isset( $input[ $prefix . '_opacity' ] ) ? intval( $input[ $prefix . '_opacity' ] ) : 100;
				$output[ $prefix . '_blur' ]           = isset( $input[ $prefix . '_blur' ] ) ? intval( $input[ $prefix . '_blur' ] ) : 20;
				$output[ $prefix . '_digit_font_family' ]     = isset( $input[ $prefix . '_digit_font_family' ] ) ? sanitize_text_field( $input[ $prefix . '_digit_font_family' ] ) : 'default';
				$output[ $prefix . '_digit_font_size' ]       = isset( $input[ $prefix . '_digit_font_size' ] ) ? intval( $input[ $prefix . '_digit_font_size' ] ) : 65;
				$output[ $prefix . '_digit_custom_font_url' ] = isset( $input[ $prefix . '_digit_custom_font_url' ] ) ? esc_url_raw( $input[ $prefix . '_digit_custom_font_url' ] ) : '';
			}
		} else {
			// Fallback: If current_tab is not provided, sanitize everything that is sent.
			if ( isset( $input['enable_pjax'] ) || isset( $input['current_tab'] ) ) {
				$output['enable_pjax'] = isset( $input['enable_pjax'] ) ? '1' : '0';
			}
			if ( isset( $input['enable_autoplay'] ) || isset( $input['current_tab'] ) ) {
				$output['enable_autoplay'] = isset( $input['enable_autoplay'] ) ? '1' : '0';
			}
			if ( isset( $input['enable_footer_player'] ) || isset( $input['current_tab'] ) ) {
				$output['enable_footer_player'] = isset( $input['enable_footer_player'] ) ? '1' : '0';
			}
			if ( isset( $input['tuner_theme'] ) ) {
				$output['tuner_theme'] = sanitize_key( $input['tuner_theme'] );
			}
			if ( isset( $input['accent_color'] ) ) {
				$output['accent_color'] = sanitize_hex_color( $input['accent_color'] );
			}
			if ( isset( $input['player_width_mode'] ) ) {
				$output['player_width_mode'] = sanitize_key( $input['player_width_mode'] );
			}

			$allowed_prefixes = array( 'free_light', 'free_dark' );
			foreach ( $allowed_prefixes as $prefix ) {
				if ( isset( $input[ $prefix . '_accent_color' ] ) ) {
					$output[ $prefix . '_accent_color' ] = sanitize_hex_color( $input[ $prefix . '_accent_color' ] );
				}
				if ( isset( $input[ $prefix . '_bg_color' ] ) ) {
					$output[ $prefix . '_bg_color' ] = sanitize_hex_color( $input[ $prefix . '_bg_color' ] );
				}
				if ( isset( $input[ $prefix . '_opacity' ] ) ) {
					$output[ $prefix . '_opacity' ] = intval( $input[ $prefix . '_opacity' ] );
				}
				if ( isset( $input[ $prefix . '_blur' ] ) ) {
					$output[ $prefix . '_blur' ] = intval( $input[ $prefix . '_blur' ] );
				}
				if ( isset( $input[ $prefix . '_digit_font_family' ] ) ) {
					$output[ $prefix . '_digit_font_family' ] = sanitize_text_field( $input[ $prefix . '_digit_font_family' ] );
				}
				if ( isset( $input[ $prefix . '_digit_font_size' ] ) ) {
					$output[ $prefix . '_digit_font_size' ] = intval( $input[ $prefix . '_digit_font_size' ] );
				}
				if ( isset( $input[ $prefix . '_digit_custom_font_url' ] ) ) {
					$output[ $prefix . '_digit_custom_font_url' ] = esc_url_raw( $input[ $prefix . '_digit_custom_font_url' ] );
				}
			}
		}

		return $output;
	}

	/**
	 * Enqueue Admin Scripts and Styles
	 */
	public function enqueue_admin_assets( $hook ) {
		if ( 'toplevel_page_plugtuner-radio' !== $hook ) {
			return;
		}

		// Enqueue WP Media Uploader
		wp_enqueue_media();

		// Enqueue admin styles
		wp_enqueue_style(
			'plugtuner-admin-style',
			PLUGTUNER_URL . 'public/css/plugtuner-admin.css',
			array(),
			PLUGTUNER_VERSION . '.' . filemtime( PLUGTUNER_PATH . 'public/css/plugtuner-admin.css' )
		);

		// Attach the dynamic design CSS (used by the live design previews) to the
		// admin stylesheet instead of printing a raw <style> tag in admin_head.
		wp_add_inline_style( 'plugtuner-admin-style', $this->get_admin_dynamic_css() );

		// Enqueue Local Google Fonts (GDPR compliant)
		wp_enqueue_style(
			'plugtuner-local-fonts',
			PLUGTUNER_URL . 'public/css/plugtuner-fonts.css',
			array(),
			PLUGTUNER_VERSION
		);

		// Enqueue public player styles for Choose Design live previews
		wp_enqueue_style(
			'plugtuner-public-style',
			PLUGTUNER_URL . 'public/css/plugtuner-player.css',
			array( 'plugtuner-local-fonts' ),
			PLUGTUNER_VERSION
		);

		// Enqueue FontAwesome for icons (GDPR compliant local asset)
		wp_enqueue_style(
			'plugtuner-font-awesome',
			PLUGTUNER_URL . 'public/css/vendor/all.min.css',
			array(),
			file_exists( PLUGTUNER_PATH . 'public/css/vendor/all.min.css' ) ? '6.4.0.' . filemtime( PLUGTUNER_PATH . 'public/css/vendor/all.min.css' ) : '6.4.0'
		);

		// Enqueue admin JavaScript
		wp_enqueue_script(
			'plugtuner-admin-script',
			PLUGTUNER_URL . 'public/js/plugtuner-admin.js',
			array( 'jquery' ),
			file_exists( PLUGTUNER_PATH . 'public/js/plugtuner-admin.js' ) ? filemtime( PLUGTUNER_PATH . 'public/js/plugtuner-admin.js' ) : PLUGTUNER_VERSION,
			true
		);

		$default_image = PLUGTUNER_URL . 'public/images/tuner-image.jpg';
		$tuner_path = PLUGTUNER_PATH . 'public/images/tuner-image.jpg';
		if ( file_exists( $tuner_path ) ) {
			$default_image = add_query_arg( 't', filemtime( $tuner_path ), $default_image );
		}

		$stations_fm = get_option( 'plugtuner_stations', array() );
		$stations_am = get_option( 'plugtuner_stations_am', array() );
		$total_stations_count = count( is_array( $stations_fm ) ? $stations_fm : array() ) + count( is_array( $stations_am ) ? $stations_am : array() );

		// Localize parameters for script
		wp_localize_script(
			'plugtuner-admin-script',
			'plugtuner_admin_vars',
			array(
				'ajax_url'             => admin_url( 'admin-ajax.php' ),
				'nonce'                => wp_create_nonce( 'plugtuner_admin_nonce' ),
				'plugin_url'           => PLUGTUNER_URL,
				'default_image'        => $default_image,
				'media_title'          => __( 'Select or Upload Cover Image', 'plugtuner-radio-player' ),
				'media_button'         => __( 'Use this image', 'plugtuner-radio-player' ),
				'total_stations_count' => $total_stations_count,
			)
		);
	}

	/**
	 * Render Settings Page Markup
	 */
	public function render_settings_page() {
		// Get current tab.
		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only admin screen navigation, value is sanitized and validated against a whitelist below.
		$active_tab  = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'stations';
		$settings    = get_option( 'plugtuner_settings', array() );
		if ( ! is_array( $settings ) ) {
			$settings = array();
		}
		$stations_fm = get_option( 'plugtuner_stations', array() );
		$stations_am = get_option( 'plugtuner_stations_am', array() );
		$total_stations_count = count( is_array( $stations_fm ) ? $stations_fm : array() ) + count( is_array( $stations_am ) ? $stations_am : array() );
		$theme = isset( $settings['tuner_theme'] ) ? $settings['tuner_theme'] : 'free-dark';

		// Only fm-am-light and fm-am-dark designs support AM band.
		// The station manager works on the FM dial; the player designs included in
		// this plugin do not provide an AM band switch.
		$has_am_support = false;
		$active_band    = 'FM';

		if ( 'AM' === $active_band ) {
			$stations = get_option( 'plugtuner_stations_am', array() );
		} else {
			$stations = get_option( 'plugtuner_stations', array() );
		}
		
		if ( ! is_array( $stations ) ) {
			$stations = array();
		}
		// Sort stations by frequency ascending so indexes align with the UI rendering
		usort( $stations, function( $a, $b ) {
			return (float)$a['frequency'] <=> (float)$b['frequency'];
		});
		$enable_pjax  = isset( $settings['enable_pjax'] ) ? $settings['enable_pjax'] : '1';
		$enable_autoplay = isset( $settings['enable_autoplay'] ) ? $settings['enable_autoplay'] : '1';
		$enable_footer   = isset( $settings['enable_footer_player'] ) ? $settings['enable_footer_player'] : '1';
		$accent_color = isset( $settings['accent_color'] ) ? $settings['accent_color'] : '#ff6f00';
		$width_mode   = isset( $settings['player_width_mode'] ) ? $settings['player_width_mode'] : 'fullwidth';
		$theme        = isset( $settings['tuner_theme'] ) ? $settings['tuner_theme'] : 'free-dark';

		$free_light_accent = isset( $settings['free_light_accent_color'] ) ? $settings['free_light_accent_color'] : '#ff6f00';
		$free_light_bg     = isset( $settings['free_light_bg_color'] ) ? $settings['free_light_bg_color'] : '#ffffff';
		$free_light_opacity = isset( $settings['free_light_opacity'] ) ? $settings['free_light_opacity'] : '100';
		$free_light_blur   = isset( $settings['free_light_blur'] ) ? $settings['free_light_blur'] : '20';
		$free_light_font_family = isset( $settings['free_light_digit_font_family'] ) ? $settings['free_light_digit_font_family'] : 'default';
		$free_light_font_size   = isset( $settings['free_light_digit_font_size'] ) ? $settings['free_light_digit_font_size'] : 65;
		$free_light_font_url    = isset( $settings['free_light_digit_custom_font_url'] ) ? $settings['free_light_digit_custom_font_url'] : '';

		$free_dark_accent = isset( $settings['free_dark_accent_color'] ) ? $settings['free_dark_accent_color'] : '#ff6f00';
		$free_dark_bg     = isset( $settings['free_dark_bg_color'] ) ? $settings['free_dark_bg_color'] : '#0b0b0c';
		$free_dark_opacity = isset( $settings['free_dark_opacity'] ) ? $settings['free_dark_opacity'] : '100';
		$free_dark_blur   = isset( $settings['free_dark_blur'] ) ? $settings['free_dark_blur'] : '20';
		$free_dark_font_family = isset( $settings['free_dark_digit_font_family'] ) ? $settings['free_dark_digit_font_family'] : 'default';
		$free_dark_font_size   = isset( $settings['free_dark_digit_font_size'] ) ? $settings['free_dark_digit_font_size'] : 65;
		$free_dark_font_url    = isset( $settings['free_dark_digit_custom_font_url'] ) ? $settings['free_dark_digit_custom_font_url'] : '';


		?>
		<div class="wrap rtp-admin-wrapper">
			<h1 class="rtp-admin-title">
				<span class="rtp-admin-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill-rule="evenodd" clip-rule="evenodd"><path d="M16.2 1.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2z" /><path d="M12 7.5L15.2 3.2L16 3.8L12.8 8.1Z" /><path d="M3.5 7h13A1.5 1.5 0 0 1 18 8.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 16.5v-8A1.5 1.5 0 0 1 3.5 7z M4 9.5h12v2H4z M7 12.5a2 2 0 1 0 0 4 2 2 0 1 0 0-4z M13.5 13.3a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 1 0 0-2.4z" /><path d="M9.6 9.5h0.8v2H9.6z" /></svg>
				</span>
				<?php 
				if ( 'customize_design' === $active_tab ) {
					// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only admin screen navigation, value is sanitized and validated against a whitelist below.
					$requested_design = isset( $_GET['design'] ) ? sanitize_key( wp_unslash( $_GET['design'] ) ) : '';
					$design_type      = in_array( $requested_design, array( 'free-light', 'free-dark' ), true ) ? $requested_design : 'free-dark';
					if ( 'free-dark' === $design_type ) {
						esc_html_e( 'Customize Dark Design Settings', 'plugtuner-radio-player' );
					} else {
						esc_html_e( 'Customize Light Design Settings', 'plugtuner-radio-player' );
					}
				} else {
					esc_html_e( 'Radio Tuner Settings Dashboard', 'plugtuner-radio-player' );
				}
				?>
			</h1>

			<?php if ( 'customize_design' !== $active_tab ) : ?>
			<nav class="nav-tab-wrapper rtp-tabs-header">
				<a href="?page=plugtuner-radio&tab=stations" class="nav-tab <?php echo esc_attr( 'stations' === $active_tab ? 'nav-tab-active' : '' ); ?>">
					<i class="fa-solid fa-list-ul"></i> <?php esc_html_e( 'Manage Stations', 'plugtuner-radio-player' ); ?>
				</a>
				<a href="?page=plugtuner-radio&tab=settings" class="nav-tab <?php echo esc_attr( 'settings' === $active_tab ? 'nav-tab-active' : '' ); ?>">
					<i class="fa-solid fa-sliders"></i> <?php esc_html_e( 'General Settings', 'plugtuner-radio-player' ); ?>
				</a>
				<a href="?page=plugtuner-radio&tab=design" class="nav-tab <?php echo esc_attr( 'design' === $active_tab ? 'nav-tab-active' : '' ); ?>">
					<i class="fa-solid fa-palette"></i> <?php esc_html_e( 'Choose Design', 'plugtuner-radio-player' ); ?>
				</a>
				<a href="https://plugtuner.com" class="rtp-upgrade-pro-btn" target="_blank" rel="noopener noreferrer">
					<i class="fa-solid fa-crown"></i> <?php esc_html_e( 'Pro Version', 'plugtuner-radio-player' ); ?>
				</a>
			</nav>
			<?php else : ?>
			<div class="rtp-breadcrumb">
				<a href="?page=plugtuner-radio&tab=design" class="rtp-back-link">
					<i class="fa-solid fa-arrow-left"></i> <?php esc_html_e( 'Back to Choose Design', 'plugtuner-radio-player' ); ?>
				</a>
			</div>
			<?php endif; ?>

			<div class="rtp-tab-content-container">
				<?php if ( 'stations' === $active_tab ) : ?>
					<div class="rtp-stations-grid">
						
						<!-- List of stations -->
						<div class="rtp-card rtp-stations-list-card">
							<div class="rtp-card-header-flex" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;">
								<h2 style="margin: 0;"><?php esc_html_e( 'Configured Station Dial List', 'plugtuner-radio-player' ); ?></h2>
								<?php if ( $has_am_support ) : ?>
								<div id="rtp-admin-band-tabs" style="display: flex; gap: 4px; background: #e0e0e0; padding: 4px; border-radius: 6px;">
									<a href="?page=plugtuner-radio&tab=stations&band=FM" class="button rtp-admin-band-btn <?php echo 'AM' !== $active_band ? 'button-primary active' : ''; ?>" style="font-weight: 600; text-decoration: none; border-radius: 4px;"><?php esc_html_e( 'FM', 'plugtuner-radio-player' ); ?></a>
									<a href="?page=plugtuner-radio&tab=stations&band=AM" class="button rtp-admin-band-btn <?php echo 'AM' === $active_band ? 'button-primary active' : ''; ?>" style="font-weight: 600; text-decoration: none; border-radius: 4px;"><?php esc_html_e( 'AM', 'plugtuner-radio-player' ); ?></a>
								</div>
								<?php endif; ?>
							</div>
							<p class="description">
								<?php 
								if ( 'AM' === $active_band ) {
									esc_html_e( 'These stations will map dynamically to the tuner needle scale (530 - 1700 kHz). Make sure frequencies are unique.', 'plugtuner-radio-player' );
								} else {
									esc_html_e( 'These stations will map dynamically to the tuner needle scale (88.0 - 108.0 MHz). Make sure frequencies are unique.', 'plugtuner-radio-player' );
								}
								?>
							</p>

							<table class="wp-list-table widefat fixed striped table-view-list rtp-stations-table">
								<thead>
									<tr>
										<th style="width: 65px;"><?php esc_html_e( 'Logo', 'plugtuner-radio-player' ); ?></th>
										<th><?php esc_html_e( 'Station Name / Genre', 'plugtuner-radio-player' ); ?></th>
										<th style="width: 120px;">
											<?php 
											if ( 'AM' === $active_band ) {
												esc_html_e( 'Frequency (AM)', 'plugtuner-radio-player' );
											} else {
												esc_html_e( 'Frequency (FM)', 'plugtuner-radio-player' );
											}
											?>
										</th>
										<th><?php esc_html_e( 'Stream URL', 'plugtuner-radio-player' ); ?></th>
										<th style="width: 120px; text-align: center;"><?php esc_html_e( 'Likes / Dislikes', 'plugtuner-radio-player' ); ?></th>
										<th style="width: 140px; text-align: right;"><?php esc_html_e( 'Actions', 'plugtuner-radio-player' ); ?></th>
									</tr>
								</thead>
								<tbody id="rtp-stations-list-body">
									<?php if ( empty( $stations ) ) : ?>
										<tr class="no-items">
											<td colspan="6" style="text-align: center; padding: 20px;">
												<?php esc_html_e( 'No stations configured. Add one on the right to start.', 'plugtuner-radio-player' ); ?>
											</td>
										</tr>
									<?php else : ?>
										<?php
										// Stations are already sorted by frequency above.
										foreach ( $stations as $index => $station ) :
											$img_src = '';
											if ( ! empty( $station['image_id'] ) ) {
												$img_src = wp_get_attachment_image_url( $station['image_id'], 'thumbnail' );
											}
											if ( empty( $img_src ) && ! empty( $station['image'] ) ) {
												$raw_image = $station['image'];
												if ( strpos( $raw_image, 'http' ) === 0 || strpos( $raw_image, '//' ) === 0 ) {
													$img_src = $raw_image;
												} elseif ( strpos( $raw_image, 'wp-content/' ) !== false ) {
													$img_src = site_url( '/' . ltrim( $raw_image, '/' ) );
												} else {
													$img_src = PLUGTUNER_URL . 'public/' . ltrim( $raw_image, '/' );
												}
											}
											if ( empty( $img_src ) ) {
												$img_src = PLUGTUNER_URL . 'public/images/tuner-image.jpg';
												$tuner_path = PLUGTUNER_PATH . 'public/images/tuner-image.jpg';
												if ( file_exists( $tuner_path ) ) {
													$img_src = add_query_arg( 't', filemtime( $tuner_path ), $img_src );
												}
											} else {
												// Add cache buster to force browser to load fresh image if edited
												$updated_time = isset( $station['updated'] ) ? $station['updated'] : time();
												$img_src = add_query_arg( 't', $updated_time, $img_src );
											}
											$station['resolved_image'] = $img_src;
											?>
											<tr data-index="<?php echo esc_attr( $index ); ?>">
												<td>
													<img src="<?php echo esc_url( $img_src ); ?>" class="rtp-table-logo" alt="" />
												</td>
												<td>
													<strong><?php echo esc_html( $station['name'] ); ?></strong>
													<div class="rtp-genre-badge"><?php echo esc_html( ! empty( $station['genre'] ) ? $station['genre'] : 'Radio' ); ?></div>
													<?php if ( ! empty( $station['bitrate'] ) ) : ?>
														<div class="rtp-quality-badge" style="font-size: 11px; display: inline-block; background: #f0f6fc; border: 1px solid #c8d7e1; color: #50575e; padding: 2px 8px; border-radius: 12px; margin-top: 4px; font-weight: 500;"><i class="fa-solid fa-gauge-high" style="font-size: 10px; margin-right: 2px;"></i> <?php echo esc_html( $station['bitrate'] ); ?> kbps</div>
													<?php endif; ?>
												</td>
												<td>
													<span class="rtp-freq-badge">
														<?php 
														if ( 'AM' === $active_band ) {
															echo esc_html( intval( $station['frequency'] ) ) . ' kHz';
														} else {
															echo esc_html( number_format( (float)$station['frequency'], 1 ) ) . ' MHz';
														}
														?>
													</span>
												</td>
												<td class="rtp-stream-url-col">
													<code class="rtp-stream-code"><?php echo esc_html( $station['url'] ); ?></code>
												</td>
												<td style="text-align: center; vertical-align: middle; white-space: nowrap;">
													<span style="color: #10b981; font-weight: 600; margin-right: 8px;" title="<?php esc_attr_e( 'Likes', 'plugtuner-radio-player' ); ?>"><i class="fa-regular fa-thumbs-up"></i> <?php echo intval( isset( $station['likes'] ) ? $station['likes'] : 0 ); ?></span>
													<span style="color: #ef4444; font-weight: 600;" title="<?php esc_attr_e( 'Dislikes', 'plugtuner-radio-player' ); ?>"><i class="fa-regular fa-thumbs-down"></i> <?php echo intval( isset( $station['dislikes'] ) ? $station['dislikes'] : 0 ); ?></span>
												</td>
												<td style="text-align: right;">
													<button type="button" class="button button-secondary rtp-edit-station-btn" data-station='<?php echo esc_attr( wp_json_encode( $station ) ); ?>' data-index="<?php echo esc_attr( $index ); ?>">
														<i class="fa-solid fa-pen-to-square"></i> <?php esc_html_e( 'Edit', 'plugtuner-radio-player' ); ?>
													</button>
													<button type="button" class="button rtp-delete-station-btn button-link-delete" data-index="<?php echo esc_attr( $index ); ?>" data-band="<?php echo esc_attr( $active_band ); ?>">
														<i class="fa-solid fa-trash-can"></i>
													</button>
												</td>
											</tr>
										<?php endforeach; ?>
									<?php endif; ?>
								</tbody>
							</table>
						</div>

						<!-- Form to Add / Edit Station -->
						<div class="rtp-card rtp-form-card">
							<h2 id="rtp-form-title"><?php esc_html_e( 'Add Custom Radio Station', 'plugtuner-radio-player' ); ?></h2>
							<div class="rtp-form-search-wrapper">
								<label class="rtp-field-label">
									<?php esc_html_e( 'Quick API Search', 'plugtuner-radio-player' ); ?>
									<span class="rtp-tooltip" title="<?php esc_attr_e( 'Type keywords to search online radio directories, then select a station to autofill the form.', 'plugtuner-radio-player' ); ?>">?</span>
								</label>
								<div class="rtp-search-input-group">
									<input type="text" id="rtp-api-search-input" class="regular-text" placeholder="<?php esc_attr_e( 'e.g. Jazz, Pop, BBC, Classical...', 'plugtuner-radio-player' ); ?>" />
									<button type="button" id="rtp-api-search-btn" class="button button-secondary">
										<i class="fa-solid fa-magnifying-glass"></i>
									</button>
								</div>
								<p class="description"><?php esc_html_e( 'Search the free Radio-Browser directory and select a station to autofill the form.', 'plugtuner-radio-player' ); ?></p>
								<div id="rtp-search-results-box" class="rtp-search-results-box"></div>
							</div>

							<hr class="rtp-divider" />

							<form id="rtp-station-form" method="post">
								<input type="hidden" id="rtp-station-index" value="" />
								<input type="hidden" id="rtp-station-bitrate" value="" />
								<input type="hidden" id="rtp-station-band" value="<?php echo esc_attr( $active_band ); ?>" />

								<div class="rtp-form-field">
									<label for="rtp-station-name" class="rtp-field-label"><?php esc_html_e( 'Station Name', 'plugtuner-radio-player' ); ?> <span class="required">*</span></label>
									<input type="text" id="rtp-station-name" required class="regular-text" placeholder="e.g. Classic Hits FM" />
								</div>

								<div class="rtp-form-field">
									<?php if ( 'AM' === $active_band ) : ?>
										<label for="rtp-station-frequency" class="rtp-field-label"><?php esc_html_e( 'Frequency Dial (530 - 1700 kHz)', 'plugtuner-radio-player' ); ?> <span class="required">*</span></label>
										<input type="number" id="rtp-station-frequency" min="530" max="1700" step="1" required class="regular-text" placeholder="e.g. 1000" />
									<?php else : ?>
										<label for="rtp-station-frequency" class="rtp-field-label"><?php esc_html_e( 'Frequency Dial (88.0 - 108.0 MHz)', 'plugtuner-radio-player' ); ?> <span class="required">*</span></label>
										<input type="number" id="rtp-station-frequency" min="88.0" max="108.0" step="0.1" required class="regular-text" placeholder="e.g. 101.5" />
									<?php endif; ?>
								</div>

								<div class="rtp-form-field">
									<label for="rtp-station-url" class="rtp-field-label"><?php esc_html_e( 'Audio Stream URL (MP3/AAC)', 'plugtuner-radio-player' ); ?> <span class="required">*</span></label>
									<input type="url" id="rtp-station-url" required class="regular-text" placeholder="https://stream.example.com/radio.mp3" />
									<div id="rtp-station-quality-info" class="rtp-quality-info" style="display: none; font-size: 12px; margin-top: 6px; color: #50575e; align-items: center; gap: 6px; background: #f0f6fc; border: 1px solid #c8d7e1; border-radius: 4px; padding: 6px 10px;">
										<i class="fa-solid fa-gauge-high"></i> <span><?php esc_html_e( 'Stream Quality:', 'plugtuner-radio-player' ); ?></span> <strong id="rtp-quality-value">N/A</strong>
									</div>
								</div>

								<div class="rtp-form-field">
									<label for="rtp-station-genre" class="rtp-field-label"><?php esc_html_e( 'Genre / Tagline', 'plugtuner-radio-player' ); ?></label>
									<input type="text" id="rtp-station-genre" class="regular-text" placeholder="e.g. Jazz / Lounge" />
								</div>

								<div class="rtp-form-field">
									<label class="rtp-field-label"><?php esc_html_e( 'Cover Logo Image', 'plugtuner-radio-player' ); ?></label>
									<div class="rtp-media-uploader-box">
										<?php 
										$default_logo = PLUGTUNER_URL . 'public/images/tuner-image.jpg';
										$tuner_path = PLUGTUNER_PATH . 'public/images/tuner-image.jpg';
										if ( file_exists( $tuner_path ) ) {
											$default_logo = add_query_arg( 't', filemtime( $tuner_path ), $default_logo );
										}
										?>
										<img id="rtp-logo-preview" src="<?php echo esc_url( $default_logo ); ?>" class="rtp-form-logo-preview" alt="" />
										<div class="rtp-media-buttons">
											<input type="text" id="rtp-station-image-url" class="regular-text" placeholder="https://..." readonly />
											<input type="hidden" id="rtp-station-image-id" value="" />
											<button type="button" id="rtp-preview-play-btn" class="button button-secondary" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600;">
												<i class="fa-solid fa-play"></i> <span><?php esc_html_e( 'Play Preview', 'plugtuner-radio-player' ); ?></span>
											</button>
											<button type="button" id="rtp-media-select-btn" class="button button-secondary">
												<i class="fa-solid fa-cloud-arrow-up"></i> <?php esc_html_e( 'Upload Logo', 'plugtuner-radio-player' ); ?>
											</button>
											<button type="button" id="rtp-media-clear-btn" class="button">
												<?php esc_html_e( 'Clear', 'plugtuner-radio-player' ); ?>
											</button>
										</div>
									</div>
								</div>

								<div class="rtp-form-actions">
									<button type="submit" id="rtp-submit-station-btn" class="button button-primary button-large">
										<i class="fa-regular fa-square-plus"></i> <span><?php esc_html_e( 'Add Station', 'plugtuner-radio-player' ); ?></span>
									</button>
									<button type="button" id="rtp-cancel-edit-btn" class="button button-large" style="display: none;">
										<?php esc_html_e( 'Cancel', 'plugtuner-radio-player' ); ?>
									</button>
								</div>
							</form>
						</div>

					</div>
				<?php elseif ( 'settings' === $active_tab ) : ?>
					<div class="rtp-card rtp-settings-card">
						<h2><?php esc_html_e( 'General Tuner Configurations', 'plugtuner-radio-player' ); ?></h2>
						
						<form method="post" action="options.php">
							<?php settings_fields( 'plugtuner_settings_group' ); ?>
							<input type="hidden" name="plugtuner_settings[current_tab]" value="settings" />
							<input type="hidden" name="plugtuner_settings[tuner_theme]" value="<?php echo esc_attr( $theme ); ?>" />
							
							<table class="form-table rtp-settings-table">
								<tr>
									<th scope="row">
										<label><?php esc_html_e( 'Enable Frontend Tuner Player', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<label class="rtp-switch-wrapper">
											<input type="checkbox" name="plugtuner_settings[enable_footer_player]" value="1" <?php checked( $enable_footer, '1' ); ?> />
											<span class="rtp-slider-switch"></span>
										</label>
										<p class="description">
											<?php esc_html_e( 'If enabled, the radio tuner floats at the bottom of all pages across your website.', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label for="rtp-player-width-mode"><?php esc_html_e( 'Player Layout Width Mode', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<select id="rtp-player-width-mode" name="plugtuner_settings[player_width_mode]" style="max-width: 300px; width: 100%;">
											<option value="centered" <?php selected( $width_mode, 'centered' ); ?>><?php esc_html_e( 'Centered Widget (Max 1200px)', 'plugtuner-radio-player' ); ?></option>
											<option value="fullwidth" <?php selected( $width_mode, 'fullwidth' ); ?>><?php esc_html_e( 'Full Screen Width (40px margins)', 'plugtuner-radio-player' ); ?></option>
										</select>
										<p class="description">
											<?php esc_html_e( 'Choose whether the tuner runs centered at 1200px max width or stretches dynamically to the edge of the monitor (with 40px padding).', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label><?php esc_html_e( 'Enable Seamless Page Navigation (PJAX)', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<label class="rtp-switch-wrapper">
											<input type="checkbox" name="plugtuner_settings[enable_pjax]" value="1" <?php checked( $enable_pjax, '1' ); ?> />
											<span class="rtp-slider-switch"></span>
										</label>
										<p class="description">
											<?php esc_html_e( 'Recommended. Intercepts page transitions and fetches dynamic HTML using AJAX. Keeps player active and music playing without any pauses or interruptions. (If disabled, falls back to Session State Resume on page load).', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label><?php esc_html_e( 'Auto-resume playback on page load', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<label class="rtp-switch-wrapper">
											<input type="checkbox" name="plugtuner_settings[enable_autoplay]" value="1" <?php checked( $enable_autoplay, '1' ); ?> />
											<span class="rtp-slider-switch"></span>
										</label>
										<p class="description">
											<?php esc_html_e( 'If user was listening before transition/reload, should the player attempt to auto-play immediately on page load?', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label for="rtp-accent-color"><?php esc_html_e( 'Tuner Theme Accent Color', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<input type="color" id="rtp-accent-color" name="plugtuner_settings[accent_color]" value="<?php echo esc_attr( $accent_color ); ?>" />
										<p class="description">
											<?php esc_html_e( 'Changes the active dial needle, volume levels, and highlighted buttons in your tuner.', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>
							</table>

							<?php submit_button( __( 'Save Tuner Settings', 'plugtuner-radio-player' ), 'button-primary button-large' ); ?>
						</form>
					</div>
				<?php elseif ( 'design' === $active_tab ) : ?>
					<div class="rtp-card rtp-design-card">
						<h2><?php esc_html_e( 'Select Player Design Theme', 'plugtuner-radio-player' ); ?></h2>
						<p class="description">
							<?php esc_html_e( 'Choose the design layout and appearance for your radio tuner widget. The selected design will apply to both the floating and inline player modes.', 'plugtuner-radio-player' ); ?>
						</p>

						<form method="post" action="options.php">
							<?php settings_fields( 'plugtuner_settings_group' ); ?>
							<input type="hidden" name="plugtuner_settings[current_tab]" value="design" />
							
							<!-- Pass all other settings values as hidden inputs so they are not lost on save! -->
							<input type="hidden" name="plugtuner_settings[enable_pjax]" value="<?php echo esc_attr( $enable_pjax ); ?>" />
							<input type="hidden" name="plugtuner_settings[enable_autoplay]" value="<?php echo esc_attr( $enable_autoplay ); ?>" />
							<input type="hidden" name="plugtuner_settings[enable_footer_player]" value="<?php echo esc_attr( $enable_footer ); ?>" />
							<input type="hidden" name="plugtuner_settings[accent_color]" value="<?php echo esc_attr( $accent_color ); ?>" />
							<input type="hidden" name="plugtuner_settings[player_width_mode]" value="<?php echo esc_attr( $width_mode ); ?>" />
							
							<input type="hidden" name="plugtuner_settings[free_light_bg_color]" value="<?php echo esc_attr( $free_light_bg ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_accent_color]" value="<?php echo esc_attr( $free_light_accent ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_opacity]" value="<?php echo esc_attr( $free_light_opacity ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_blur]" value="<?php echo esc_attr( $free_light_blur ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_digit_font_family]" value="<?php echo esc_attr( $free_light_font_family ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_digit_font_size]" value="<?php echo esc_attr( $free_light_font_size ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_light_digit_custom_font_url]" value="<?php echo esc_url( $free_light_font_url ); ?>" />

							<input type="hidden" name="plugtuner_settings[free_dark_bg_color]" value="<?php echo esc_attr( $free_dark_bg ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_accent_color]" value="<?php echo esc_attr( $free_dark_accent ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_opacity]" value="<?php echo esc_attr( $free_dark_opacity ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_blur]" value="<?php echo esc_attr( $free_dark_blur ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_digit_font_family]" value="<?php echo esc_attr( $free_dark_font_family ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_digit_font_size]" value="<?php echo esc_attr( $free_dark_font_size ); ?>" />
							<input type="hidden" name="plugtuner_settings[free_dark_digit_custom_font_url]" value="<?php echo esc_url( $free_dark_font_url ); ?>" />



							<div class="rtp-design-selector-grid" style="grid-template-columns: 1fr; gap: 32px;">
								<!-- Free Light Design Card -->
								<div class="rtp-design-option-wrapper" style="width: 100%;">
									<div class="rtp-design-option-header">
										<span class="rtp-design-title"><?php esc_html_e( 'Free Light Design', 'plugtuner-radio-player' ); ?></span>
										<a href="?page=plugtuner-radio&tab=customize_design&design=free-light" class="rtp-design-settings-trigger">
											<i class="fa-solid fa-gear"></i> <?php esc_html_e( 'Design Settings', 'plugtuner-radio-player' ); ?>
										</a>
									</div>
									<label class="rtp-design-option-card">
										<input type="radio" name="plugtuner_settings[tuner_theme]" value="free-light" <?php checked( $theme, 'free-light' ); ?> style="display:none;" />
										<div class="rtp-design-card-image" style="background: transparent;">
											<?php $this->render_mockup_player( 'free-light' ); ?>
											<div class="rtp-design-card-badge"><i class="fa-solid fa-circle-check"></i></div>
										</div>
									</label>
								</div>

								<!-- Free Dark Design Card -->
								<div class="rtp-design-option-wrapper" style="width: 100%;">
									<div class="rtp-design-option-header">
										<span class="rtp-design-title"><?php esc_html_e( 'Free Dark Design', 'plugtuner-radio-player' ); ?></span>
										<a href="?page=plugtuner-radio&tab=customize_design&design=free-dark" class="rtp-design-settings-trigger">
											<i class="fa-solid fa-gear"></i> <?php esc_html_e( 'Design Settings', 'plugtuner-radio-player' ); ?>
										</a>
									</div>
									<label class="rtp-design-option-card">
										<input type="radio" name="plugtuner_settings[tuner_theme]" value="free-dark" <?php checked( $theme, 'free-dark' ); ?> style="display:none;" />
										<div class="rtp-design-card-image" style="background: transparent;">
											<?php $this->render_mockup_player( 'free-dark' ); ?>
											<div class="rtp-design-card-badge"><i class="fa-solid fa-circle-check"></i></div>
										</div>
									</label>
								</div>

							</div>

							<?php submit_button( __( 'Activate Selected Design', 'plugtuner-radio-player' ), 'button-primary button-large' ); ?>
						</form>
					</div>
				<?php elseif ( 'customize_design' === $active_tab ) : 
					// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only admin screen navigation, value is sanitized and validated against a whitelist below.
					$requested_design = isset( $_GET['design'] ) ? sanitize_key( wp_unslash( $_GET['design'] ) ) : '';
					$design_type      = in_array( $requested_design, array( 'free-light', 'free-dark' ), true ) ? $requested_design : 'free-dark';
					
					$prefix_var = str_replace( '-', '_', $design_type );
					$bg_val       = ${$prefix_var . '_bg'};
					$accent_val   = ${$prefix_var . '_accent'};
					$bg_field     = $prefix_var . '_bg_color';
					$accent_field = $prefix_var . '_accent_color';
					
					// Title Label mapping
					$theme_labels = array(
						'free-light'  => __( 'Free Light Design Theme', 'plugtuner-radio-player' ),
						'free-dark'   => __( 'Free Dark Design Theme', 'plugtuner-radio-player' ),
					);
					/* translators: %s: the design theme name being customized. */
					$title_label  = sprintf( __( 'Customize %s', 'plugtuner-radio-player' ), $theme_labels[ $design_type ] );
					
					$opacity_val       = ${$prefix_var . '_opacity'};
					$opacity_field     = $prefix_var . '_opacity';
					$blur_val          = ${$prefix_var . '_blur'};
					$blur_field        = $prefix_var . '_blur';

					$font_family_val   = ${$prefix_var . '_font_family'};
					$font_family_field = $prefix_var . '_digit_font_family';
					$font_size_val     = ${$prefix_var . '_font_size'};
					$font_size_field   = $prefix_var . '_digit_font_size';
					$font_url_val      = ${$prefix_var . '_font_url'};
					$font_url_field    = $prefix_var . '_digit_custom_font_url';
					?>
					<div class="rtp-card rtp-customize-design-card">
						<h2><?php echo esc_html( $title_label ); ?></h2>
						<p class="description">
							<?php esc_html_e( 'Configure the background and elements color variables for this theme layout. Clicking "Save & Apply" will automatically activate this design theme.', 'plugtuner-radio-player' ); ?>
						</p>

						<form method="post" action="options.php">
							<?php settings_fields( 'plugtuner_settings_group' ); ?>
							<input type="hidden" name="plugtuner_settings[current_tab]" value="customize_design" />
							
							<!-- Pass all other settings values as hidden inputs so they are not lost on save! -->
							<input type="hidden" name="plugtuner_settings[enable_pjax]" value="<?php echo esc_attr( $enable_pjax ); ?>" />
							<input type="hidden" name="plugtuner_settings[enable_autoplay]" value="<?php echo esc_attr( $enable_autoplay ); ?>" />
							<input type="hidden" name="plugtuner_settings[enable_footer_player]" value="<?php echo esc_attr( $enable_footer ); ?>" />
							<input type="hidden" name="plugtuner_settings[accent_color]" value="<?php echo esc_attr( $accent_color ); ?>" />
							<input type="hidden" name="plugtuner_settings[player_width_mode]" value="<?php echo esc_attr( $width_mode ); ?>" />

							<!-- Keep the other designs' colors and opacity intact -->
							<?php 
							$all_designs = array( 'free-light', 'free-dark' );
							foreach ( $all_designs as $d ) : 
								if ( $d !== $design_type ) : 
									$d_prefix = str_replace( '-', '_', $d ) . '_';
									$d_bg = ${$d_prefix . 'bg'};
									$d_accent = ${$d_prefix . 'accent'};
									$d_opacity = ${$d_prefix . 'opacity'};
									$d_blur = ${$d_prefix . 'blur'};
									$d_font_family = ${$d_prefix . 'font_family'};
									$d_font_size = ${$d_prefix . 'font_size'};
									$d_font_url = ${$d_prefix . 'font_url'};
								?>
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>bg_color]" value="<?php echo esc_attr( $d_bg ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>accent_color]" value="<?php echo esc_attr( $d_accent ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>opacity]" value="<?php echo esc_attr( $d_opacity ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>blur]" value="<?php echo esc_attr( $d_blur ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>digit_font_family]" value="<?php echo esc_attr( $d_font_family ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>digit_font_size]" value="<?php echo esc_attr( $d_font_size ); ?>" />
									<input type="hidden" name="plugtuner_settings[<?php echo esc_attr( $d_prefix ); ?>digit_custom_font_url]" value="<?php echo esc_url( $d_font_url ); ?>" />
								<?php endif; ?>
							<?php endforeach; ?>

							<!-- Set this design as the active tuner theme -->
							<input type="hidden" name="plugtuner_settings[tuner_theme]" value="<?php echo esc_attr( $design_type ); ?>" />

							<!-- Override the HTTP referer to redirect back to the choose design tab after saving -->
							<input type="hidden" name="_wp_http_referer" value="<?php echo esc_url( admin_url( 'admin.php?page=plugtuner-radio&tab=design' ) ); ?>" />

							<table class="form-table rtp-customize-form-table">
								<tr>
									<th scope="row">
										<label><?php esc_html_e( 'Tuner Background', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<div class="rtp-bg-customize-container" style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap;">
											<div class="rtp-color-input-wrapper" style="display: flex; align-items: center; gap: 8px;">
												<input type="color" id="<?php echo esc_attr( $bg_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $bg_field ); ?>]" value="<?php echo esc_attr( $bg_val ); ?>" />
												<span class="rtp-color-hex-label"><?php echo esc_html( $bg_val ); ?></span>
											</div>
											<div class="rtp-range-input-wrapper" style="display: flex; align-items: center; gap: 12px; min-width: 200px;">
												<label for="<?php echo esc_attr( $opacity_field ); ?>" style="font-weight: 500; font-size: 13px;"><?php esc_html_e( 'Opacity:', 'plugtuner-radio-player' ); ?></label>
												<input type="range" id="<?php echo esc_attr( $opacity_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $opacity_field ); ?>]" min="0" max="100" value="<?php echo esc_attr( $opacity_val ); ?>" style="margin: 0; flex-grow: 1; vertical-align: middle;" />
												<span class="rtp-range-value-label" style="font-weight: 600; width: 42px; text-align: right; font-size: 13px;"><?php echo esc_html( $opacity_val ); ?>%</span>
											</div>
											<div class="rtp-range-input-wrapper" style="display: flex; align-items: center; gap: 12px; min-width: 200px;">
												<label for="<?php echo esc_attr( $blur_field ); ?>" style="font-weight: 500; font-size: 13px;"><?php esc_html_e( 'Blur:', 'plugtuner-radio-player' ); ?></label>
												<input type="range" id="<?php echo esc_attr( $blur_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $blur_field ); ?>]" min="0" max="50" value="<?php echo esc_attr( $blur_val ); ?>" style="margin: 0; flex-grow: 1; vertical-align: middle;" />
												<span class="rtp-range-value-label" style="font-weight: 600; width: 42px; text-align: right; font-size: 13px;"><?php echo esc_html( $blur_val ); ?>px</span>
											</div>
										</div>
										<p class="description" style="margin-top: 8px; margin-bottom: 0;">
											<?php esc_html_e( 'Choose tuner background color, background opacity (transparency), and backdrop blur (glassmorphism effect).', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $accent_field ); ?>"><?php esc_html_e( 'Accent & Elements Color', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<div class="rtp-color-input-wrapper">
											<input type="color" id="<?php echo esc_attr( $accent_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $accent_field ); ?>]" value="<?php echo esc_attr( $accent_val ); ?>" />
											<span class="rtp-color-hex-label"><?php echo esc_html( $accent_val ); ?></span>
										</div>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $font_family_field ); ?>"><?php esc_html_e( 'Digital Tuner Font', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<select id="<?php echo esc_attr( $font_family_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $font_family_field ); ?>]" style="min-width: 220px; font-weight: 500;">
											<option value="default" <?php selected( $font_family_val, 'default' ); ?>><?php esc_html_e( 'Default Theme Font', 'plugtuner-radio-player' ); ?></option>
											<option value="Arial, sans-serif" <?php selected( $font_family_val, 'Arial, sans-serif' ); ?>><?php esc_html_e( 'Arial / Helvetica', 'plugtuner-radio-player' ); ?></option>
											<option value="Courier New, monospace" <?php selected( $font_family_val, 'Courier New, monospace' ); ?>><?php esc_html_e( 'Courier New (Monospace)', 'plugtuner-radio-player' ); ?></option>
											<option value="Orbitron" <?php selected( $font_family_val, 'Orbitron' ); ?>><?php esc_html_e( 'Orbitron (Digital Google Font)', 'plugtuner-radio-player' ); ?></option>
											<option value="Roboto Mono" <?php selected( $font_family_val, 'Roboto Mono' ); ?>><?php esc_html_e( 'Roboto Mono (Monospace Google Font)', 'plugtuner-radio-player' ); ?></option>
											<option value="custom" <?php selected( $font_family_val, 'custom' ); ?>><?php esc_html_e( 'Upload Custom Font (.ttf)', 'plugtuner-radio-player' ); ?></option>
										</select>
										<p class="description" style="margin-top: 6px; margin-bottom: 0;">
											<?php esc_html_e( 'Choose the font family style for the large digital tuner digits display.', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr class="rtp-custom-font-row" style="<?php echo esc_attr( 'custom' === $font_family_val ? '' : 'display: none;' ); ?>">
									<th scope="row">
										<label for="<?php echo esc_attr( $font_url_field ); ?>"><?php esc_html_e( 'Custom TTF Font File', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<div class="rtp-font-uploader-wrapper" style="display: flex; align-items: center; gap: 8px;">
											<input type="text" id="<?php echo esc_attr( $font_url_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $font_url_field ); ?>]" value="<?php echo esc_url( $font_url_val ); ?>" class="regular-text" readonly style="background: #f0f0f1; cursor: not-allowed;" />
											<button type="button" id="rtp-font-select-btn" class="button button-secondary"><?php esc_html_e( 'Upload TTF Font', 'plugtuner-radio-player' ); ?></button>
											<button type="button" id="rtp-font-clear-btn" class="button button-secondary rtp-clear-btn" style="<?php echo $font_url_val ? '' : 'display: none;'; ?>"><?php esc_html_e( 'Remove', 'plugtuner-radio-player' ); ?></button>
										</div>
										<p class="description" style="margin-top: 6px; margin-bottom: 0;">
											<?php esc_html_e( 'Upload or select a TrueType font file (.ttf) from your WordPress media library.', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $font_size_field ); ?>"><?php esc_html_e( 'Digital Tuner Font Size', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<div class="rtp-range-input-wrapper" style="display: flex; align-items: center; gap: 12px; max-width: 320px;">
											<input type="range" id="<?php echo esc_attr( $font_size_field ); ?>" name="plugtuner_settings[<?php echo esc_attr( $font_size_field ); ?>]" min="30" max="120" value="<?php echo esc_attr( $font_size_val ); ?>" style="margin: 0; flex-grow: 1; vertical-align: middle;" />
											<span class="rtp-range-value-label" style="font-weight: 600; width: 42px; text-align: right; font-size: 13px;"><?php echo esc_html( $font_size_val ); ?>px</span>
										</div>
										<p class="description" style="margin-top: 6px; margin-bottom: 0;">
											<?php esc_html_e( 'Adjust the font size of the digital frequency display digits.', 'plugtuner-radio-player' ); ?>
										</p>
									</td>
								</tr>

								<tr class="rtp-live-preview-row">
									<th scope="row">
										<label><?php esc_html_e( 'Live Preview', 'plugtuner-radio-player' ); ?></label>
									</th>
									<td>
										<div class="rtp-digital-tuner-preview-card <?php echo esc_attr( 'dark' === $design_type ? 'rtp-preview-dark' : 'rtp-preview-light' ); ?>">
											<div class="rtp-digital-tuner-preview-box">
												<span class="rtp-digital-tuner-preview-digits">107.5</span>
												<span class="rtp-digital-tuner-preview-suffix">MHz</span>
											</div>
										</div>
									</td>
								</tr>
							</table>

							<div class="rtp-customize-actions" style="display: flex; gap: 12px; align-items: center; margin-top: 20px;">
								<?php submit_button( __( 'Save & Apply', 'plugtuner-radio-player' ), 'button-primary button-large', 'submit', false ); ?>
								<button type="button" class="button button-secondary" id="rtp-reset-design-btn"><?php esc_html_e( 'Reset to Defaults', 'plugtuner-radio-player' ); ?></button>
								<a href="?page=plugtuner-radio&tab=design" class="button button-secondary rtp-cancel-button"><?php esc_html_e( 'Cancel', 'plugtuner-radio-player' ); ?></a>
							</div>
						</form>
					</div>
				<?php endif; ?>
			</div>
		</div>

		<?php
	}

	/**
	 * AJAX Handler: Search API
	 */
	public function ajax_search_stations() {
		// Verify Nonce
		if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nonce'] ) ), 'plugtuner_admin_nonce' ) ) {
			wp_send_json_error( array( 'message' => __( 'Invalid security token', 'plugtuner-radio-player' ) ) );
		}

		// Check permissions
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => __( 'Permission denied', 'plugtuner-radio-player' ) ) );
		}

		$query  = isset( $_POST['query'] ) ? sanitize_text_field( wp_unslash( $_POST['query'] ) ) : '';
		$source = isset( $_POST['source'] ) ? sanitize_key( wp_unslash( $_POST['source'] ) ) : 'free';

		if ( empty( $query ) ) {
			wp_send_json_success( array() );
		}

		// Serve cached results when available (Envato: aggressively cache remote API calls).
		// PLUGTUNER_VERSION is part of the key so caches from older plugin versions are never reused.
		$cache_key = 'plugtuner_search_' . md5( PLUGTUNER_VERSION . '|' . $source . '|' . $query );
		$cached    = get_transient( $cache_key );
		if ( is_array( $cached ) ) {
			wp_send_json_success( $cached );
		}

		$results = array();

		{
			// Search via the free Radio-Browser directory
			$base_url = 'https://de1.api.radio-browser.info';
			$servers_response = wp_safe_remote_get( 'https://all.api.radio-browser.info/json/servers', array( 'timeout' => 5 ) );
			if ( ! is_wp_error( $servers_response ) && 200 === wp_remote_retrieve_response_code( $servers_response ) ) {
				$servers = json_decode( wp_remote_retrieve_body( $servers_response ), true );
				if ( ! empty( $servers ) && isset( $servers[0]['name'] ) ) {
					$base_url = 'https://' . $servers[0]['name'];
				}
			}

			// is_https=true asks the directory for stations with secure stream URLs only.
			$url      = $base_url . '/json/stations/search?name=' . urlencode( $query ) . '&limit=15&hidebroken=true&is_https=true';
			$response = wp_safe_remote_get( $url, array( 'timeout' => 10 ) );

			if ( is_wp_error( $response ) ) {
				wp_send_json_error( array( 'message' => $response->get_error_message() ) );
			}

			$code = wp_remote_retrieve_response_code( $response );
			$body = wp_remote_retrieve_body( $response );

			if ( 200 === $code ) {
				$data = json_decode( $body, true );
				if ( is_array( $data ) ) {
					foreach ( $data as $station ) {
						// Radio-Browser is a community-editable directory: sanitize every field.
						$name        = isset( $station['name'] ) ? sanitize_text_field( $station['name'] ) : '';
						$stream_url  = isset( $station['url_resolved'] ) ? esc_url_raw( $station['url_resolved'] ) : ( isset( $station['url'] ) ? esc_url_raw( $station['url'] ) : '' );
						$favicon     = isset( $station['favicon'] ) ? esc_url_raw( $station['favicon'] ) : '';
						$country     = isset( $station['country'] ) ? sanitize_text_field( $station['country'] ) : '';
						$tags        = isset( $station['tags'] ) ? sanitize_text_field( $station['tags'] ) : '';
						$tag_trimmed = ! empty( $tags ) ? trim( explode( ',', $tags )[0] ) : 'Radio';
						$bitrate     = isset( $station['bitrate'] ) ? intval( $station['bitrate'] ) : 0;

						if ( empty( $stream_url ) || 0 !== strpos( $stream_url, 'https://' ) ) {
							continue; // Only offer HTTPS streams: HTTP audio is blocked on secure sites (mixed content)
						}

						// Skip insecure favicons too so the admin page stays mixed-content free
						if ( ! empty( $favicon ) && 0 !== strpos( $favicon, 'https://' ) ) {
							$favicon = '';
						}

						$tagline = array();
						if ( ! empty( $country ) ) {
							$tagline[] = $country;
						}
						if ( ! empty( $tag_trimmed ) ) {
							$tagline[] = $tag_trimmed;
						}
						$tagline_str = ! empty( $tagline ) ? implode( ' | ', $tagline ) : 'Radio';

						$results[] = array(
							'name'    => $name,
							'url'     => $stream_url,
							'favicon' => $favicon,
							'tagline' => $tagline_str,
							'bitrate' => $bitrate,
						);
					}
				}
			} else {
				wp_send_json_error( array( 'message' => __( 'Directory search error', 'plugtuner-radio-player' ) ) );
			}
		}

		// Cache successful results for 6 hours to limit outbound API requests.
		set_transient( $cache_key, $results, 6 * HOUR_IN_SECONDS );

		wp_send_json_success( $results );
	}

	/**
	 * AJAX Handler: Save Station
	 */
	/**
	 * Force a stream URL onto https.
	 *
	 * An http stream on an https site is mixed content: browsers drop the padlock
	 * and the stricter ones block the stream outright. Practically every station
	 * serves the same mount over TLS, so the upgrade costs nothing. An explicit
	 * :80 goes with it, since it would contradict the scheme.
	 *
	 * @param string $url Stream URL as submitted.
	 * @return string
	 */
	private function secure_stream_url( $url ) {
		if ( '' === $url || 0 !== stripos( $url, 'http://' ) ) {
			return $url;
		}
		$url = 'https://' . substr( $url, 7 );
		return preg_replace( '#^(https://[^/:]+):80(?=[/?]|$)#i', '$1', $url );
	}

	public function ajax_save_station() {
		// Verify nonce
		if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nonce'] ) ), 'plugtuner_admin_nonce' ) ) {
			wp_send_json_error( array( 'message' => __( 'Invalid security token', 'plugtuner-radio-player' ) ) );
		}

		// Check permissions
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => __( 'Permission denied', 'plugtuner-radio-player' ) ) );
		}

		// Sanitize inputs
		$name      = isset( $_POST['name'] ) ? sanitize_text_field( wp_unslash( $_POST['name'] ) ) : '';
		$frequency = isset( $_POST['frequency'] ) ? (float) sanitize_text_field( wp_unslash( $_POST['frequency'] ) ) : 0.0;
		$url       = isset( $_POST['url'] ) ? esc_url_raw( wp_unslash( $_POST['url'] ) ) : '';
		$url       = $this->secure_stream_url( $url );
		$genre     = isset( $_POST['genre'] ) ? sanitize_text_field( wp_unslash( $_POST['genre'] ) ) : '';
		$image     = isset( $_POST['image'] ) ? esc_url_raw( wp_unslash( $_POST['image'] ) ) : '';
		$image_id  = isset( $_POST['image_id'] ) ? absint( wp_unslash( $_POST['image_id'] ) ) : 0;
		$index_val = isset( $_POST['index'] ) ? sanitize_text_field( wp_unslash( $_POST['index'] ) ) : '';
		$bitrate   = isset( $_POST['bitrate'] ) ? absint( wp_unslash( $_POST['bitrate'] ) ) : 0;
		$settings   = get_option( 'plugtuner_settings', array() );
		if ( ! is_array( $settings ) ) {
			$settings = array();
		}
		$theme      = isset( $settings['tuner_theme'] ) ? $settings['tuner_theme'] : 'free-dark';
		$has_am     = ( 'fm-am-light' === $theme || 'fm-am-dark' === $theme );
		$band       = ( $has_am && isset( $_POST['band'] ) && 'AM' === sanitize_text_field( wp_unslash( $_POST['band'] ) ) ) ? 'AM' : 'FM';

		// Validation
		if ( 'AM' === $band ) {
			$frequency = round( $frequency ); // AM is integers (kHz)
			if ( empty( $name ) || $frequency < 530 || $frequency > 1700 || empty( $url ) ) {
				wp_send_json_error( array( 'message' => __( 'Please fill in all required fields. Frequency must be between 530 and 1700 kHz.', 'plugtuner-radio-player' ) ) );
			}
			$option_key = 'plugtuner_stations_am';
		} else {
			$frequency = round( $frequency, 1 ); // FM is decimals (MHz)
			if ( empty( $name ) || $frequency < 88.0 || $frequency > 108.0 || empty( $url ) ) {
				wp_send_json_error( array( 'message' => __( 'Please fill in all required fields. Frequency must be between 88.0 and 108.0 MHz.', 'plugtuner-radio-player' ) ) );
			}
			$option_key = 'plugtuner_stations';
		}

		$stations = get_option( $option_key, array() );
		if ( ! is_array( $stations ) ) {
			$stations = array();
		}

		// Sort first so the database indices align with the sorted UI indices
		usort( $stations, function( $a, $b ) {
			return (float)$a['frequency'] <=> (float)$b['frequency'];
		});

		// Check for frequency collisions, ignoring current index if editing
		foreach ( $stations as $idx => $st ) {
			$tolerance = ( 'AM' === $band ) ? 0.9 : 0.05;
			if ( (string)$idx !== $index_val && abs( (float)$st['frequency'] - $frequency ) < $tolerance ) {
				$msg = ( 'AM' === $band )
					/* translators: 1: the frequency in kHz, 2: the name of the station already using it. */
					? sprintf( __( 'Frequency %1$d kHz is already occupied by "%2$s". Please select a unique frequency.', 'plugtuner-radio-player' ), $frequency, $st['name'] )
					/* translators: 1: the frequency in MHz, 2: the name of the station already using it. */
					: sprintf( __( 'Frequency %1$.1f MHz is already occupied by "%2$s". Please select a unique frequency.', 'plugtuner-radio-player' ), $frequency, $st['name'] );
				wp_send_json_error( array( 'message' => $msg ) );
			}
		}

		$new_station = array(
			'frequency' => $frequency,
			'url'       => $url,
			'image'     => $image,
			'image_id'  => $image_id,
			'name'      => $name,
			'genre'     => $genre,
			'bitrate'   => $bitrate,
			'plays'     => 0,
			'likes'     => 0,
			'dislikes'  => 0,
			'updated'   => time(), // Track edit timestamp to bust browser cache
		);

		if ( '' !== $index_val && isset( $stations[ (int)$index_val ] ) ) {
			// Editing station: retain existing plays/likes if present
			$new_station['plays'] = isset( $stations[ (int)$index_val ]['plays'] ) ? $stations[ (int)$index_val ]['plays'] : 0;
			$new_station['likes'] = isset( $stations[ (int)$index_val ]['likes'] ) ? $stations[ (int)$index_val ]['likes'] : 0;
			$new_station['dislikes'] = isset( $stations[ (int)$index_val ]['dislikes'] ) ? $stations[ (int)$index_val ]['dislikes'] : 0;
			$stations[ (int)$index_val ] = $new_station;
		} else {
			// Adding a new station.
			$stations[] = $new_station;
		}

		// Sort before saving so that the array is saved back to DB in sorted order
		usort( $stations, function( $a, $b ) {
			return (float)$a['frequency'] <=> (float)$b['frequency'];
		});

		update_option( $option_key, $stations );

		wp_send_json_success( array( 'message' => __( 'Station saved successfully!', 'plugtuner-radio-player' ) ) );
	}

	/**
	 * AJAX Handler: Delete Station
	 */
	public function ajax_delete_station() {
		// Verify nonce
		if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nonce'] ) ), 'plugtuner_admin_nonce' ) ) {
			wp_send_json_error( array( 'message' => __( 'Invalid security token', 'plugtuner-radio-player' ) ) );
		}

		// Check permissions
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => __( 'Permission denied', 'plugtuner-radio-player' ) ) );
		}

		$index_val = isset( $_POST['index'] ) ? sanitize_text_field( wp_unslash( $_POST['index'] ) ) : '';
		$band      = ( isset( $_POST['band'] ) && 'AM' === sanitize_text_field( wp_unslash( $_POST['band'] ) ) ) ? 'AM' : 'FM';
		$option_key = ( 'AM' === $band ) ? 'plugtuner_stations_am' : 'plugtuner_stations';

		if ( '' === $index_val ) {
			wp_send_json_error( array( 'message' => __( 'Invalid request index', 'plugtuner-radio-player' ) ) );
		}

		$stations = get_option( $option_key, array() );
		if ( ! is_array( $stations ) ) {
			$stations = array();
		}

		// Sort first so the database indices align with the sorted UI indices
		usort( $stations, function( $a, $b ) {
			return (float)$a['frequency'] <=> (float)$b['frequency'];
		});

		if ( isset( $stations[ (int)$index_val ] ) ) {
			unset( $stations[ (int)$index_val ] );
			// Re-index array keys to avoid gaps
			$stations = array_values( $stations );
			// Sort again before saving
			usort( $stations, function( $a, $b ) {
				return (float)$a['frequency'] <=> (float)$b['frequency'];
			});
			update_option( $option_key, $stations );
			wp_send_json_success( array( 'message' => __( 'Station deleted successfully!', 'plugtuner-radio-player' ) ) );
		} else {
			wp_send_json_error( array( 'message' => __( 'Station not found', 'plugtuner-radio-player' ) ) );
		}
	}

	private function hex_to_rgb_string( $hex ) {
		$hex = str_replace( '#', '', $hex );
		if ( strlen( $hex ) === 3 ) {
			$r = hexdec( substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) );
			$g = hexdec( substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) );
			$b = hexdec( substr( $hex, 2, 1 ) . substr( $hex, 2, 1 ) );
		} else {
			$r = hexdec( substr( $hex, 0, 2 ) );
			$g = hexdec( substr( $hex, 2, 2 ) );
			$b = hexdec( substr( $hex, 4, 2 ) );
		}
		return "$r, $g, $b";
	}

	/**
	 * Make a stored value safe to place inside a CSS declaration.
	 *
	 * Escaping is context-specific and core has no helper for stylesheet output.
	 * sanitize_text_field() keeps quotes, semicolons and braces, any one of which
	 * lets a saved setting close the declaration and append rules of its own, so
	 * a font name is reduced to the characters a font name can actually need.
	 *
	 * @param string $value Raw option value.
	 * @return string
	 */
	private function css_safe_font_family( $value ) {
		return trim( preg_replace( '/[^A-Za-z0-9 _-]/', '', (string) $value ) );
	}

	/**
	 * Make a stored URL safe to place inside a CSS url() token.
	 *
	 * esc_url_raw() is meant for storage, not for stylesheets: it leaves quotes
	 * and parentheses intact, which is enough to break out of url() and out of
	 * the rule. Anything carrying meaning inside a stylesheet is dropped rather
	 * than mangled, so a hostile value yields no @font-face at all.
	 *
	 * @param string $value Raw option value.
	 * @return string Empty string when the URL cannot be used safely.
	 */
	private function css_safe_url( $value ) {
		$value = esc_url_raw( (string) $value, array( 'http', 'https' ) );
		if ( '' === $value || preg_match( '/["\'()\\\\\s]/', $value ) ) {
			return '';
		}
		return $value;
	}

	/**
	 * Build the dynamic design CSS used by the "Choose Design" live previews.
	 *
	 * Returned as a string so it can be attached to the admin stylesheet with
	 * wp_add_inline_style() instead of being printed as a raw <style> tag.
	 *
	 * @return string CSS.
	 */
	private function get_admin_dynamic_css() {
		$settings = get_option( 'plugtuner_settings', array() );
		if ( ! is_array( $settings ) ) {
			$settings = array();
		}

		$accent = isset( $settings['accent_color'] ) ? sanitize_hex_color( $settings['accent_color'] ) : '#ff6f00';
		if ( ! $accent ) {
			$accent = '#ff6f00';
		}

		$css  = ':root{';
		$css .= '--rtp-accent-color:' . $accent . ';';
		$css .= '--rtp-accent-rgb:' . $this->hex_to_rgb_string( $accent ) . ';';
		$css .= '}';

		foreach ( array( 'free-light', 'free-dark' ) as $theme ) {
			$prefix     = str_replace( '-', '_', $theme ) . '_';
			$is_dark    = ( strpos( $theme, 'dark' ) !== false );
			$default_bg = $is_dark ? '#0b0b0c' : '#ffffff';

			$theme_accent = isset( $settings[ $prefix . 'accent_color' ] ) ? sanitize_hex_color( $settings[ $prefix . 'accent_color' ] ) : '#ff6f00';
			if ( ! $theme_accent ) {
				$theme_accent = '#ff6f00';
			}
			$theme_bg = isset( $settings[ $prefix . 'bg_color' ] ) ? sanitize_hex_color( $settings[ $prefix . 'bg_color' ] ) : $default_bg;
			if ( ! $theme_bg ) {
				$theme_bg = $default_bg;
			}

			$theme_opacity     = isset( $settings[ $prefix . 'opacity' ] ) ? intval( $settings[ $prefix . 'opacity' ] ) : 100;
			$theme_blur        = isset( $settings[ $prefix . 'blur' ] ) ? intval( $settings[ $prefix . 'blur' ] ) : 20;
			$theme_font_family = isset( $settings[ $prefix . 'digit_font_family' ] ) ? $this->css_safe_font_family( $settings[ $prefix . 'digit_font_family' ] ) : 'default';
			$theme_font_size   = isset( $settings[ $prefix . 'digit_font_size' ] ) ? intval( $settings[ $prefix . 'digit_font_size' ] ) : 65;
			$theme_font_url    = isset( $settings[ $prefix . 'digit_custom_font_url' ] ) ? $this->css_safe_url( $settings[ $prefix . 'digit_custom_font_url' ] ) : '';

			$theme_accent_rgb  = $this->hex_to_rgb_string( $theme_accent );
			$theme_bg_rgb      = $this->hex_to_rgb_string( $theme_bg );
			$theme_opacity_val = number_format( $theme_opacity / 100, 2, '.', '' );
			$cover_rgb         = $is_dark ? '255, 255, 255' : '0, 0, 0';
			$cover_alpha       = $is_dark ? number_format( $theme_opacity_val * 0.15, 2, '.', '' ) : '0.02';
			$font_face_name    = 'plugtuner_custom_font_' . str_replace( '-', '_', $theme );
			$has_custom_font   = ( 'custom' === $theme_font_family && ! empty( $theme_font_url ) );

			if ( $has_custom_font ) {
				$css .= '@font-face{';
				$css .= "font-family:'" . $font_face_name . "';";
				$css .= "src:url('" . $theme_font_url . "') format('truetype');";
				$css .= 'font-weight:800;font-style:normal;';
				$css .= '}';
			}

			$css .= '.floating-player-card.rtp-design-' . $theme . '{';
			$css .= '--bg-color:' . $theme_bg . ' !important;';
			$css .= '--card-bg:rgba(' . $theme_bg_rgb . ',' . $theme_opacity_val . ') !important;';
			$css .= '--cover-bg:rgba(' . $cover_rgb . ',' . $cover_alpha . ') !important;';
			$css .= '--rtp-accent-color:' . $theme_accent . ' !important;';
			$css .= '--rtp-accent-rgb:' . $theme_accent_rgb . ' !important;';
			$css .= '--primary-orange:' . $theme_accent . ' !important;';
			$css .= '--primary-orange-hover:' . $theme_accent . ' !important;';
			$css .= 'backdrop-filter:blur(' . $theme_blur . 'px) !important;';
			$css .= '-webkit-backdrop-filter:blur(' . $theme_blur . 'px) !important;';
			$css .= '}';

			$css .= '.floating-player-card.rtp-design-' . $theme . ' .active-station-freq{';
			if ( $has_custom_font ) {
				$css .= "font-family:'" . $font_face_name . "',sans-serif !important;";
			} elseif ( 'default' !== $theme_font_family ) {
				$css .= "font-family:'" . $theme_font_family . "',sans-serif !important;";
			}
			$css .= 'font-size:' . $theme_font_size . 'px !important;';
			$css .= '}';
		}

		return $css;
	}

	public function render_mockup_player( $theme ) {
		$default_logo = PLUGTUNER_URL . 'public/images/default-logo.png';
		$tuner_path = PLUGTUNER_PATH . 'public/images/default-logo.png';
		if ( file_exists( $tuner_path ) ) {
			$default_logo = add_query_arg( 't', filemtime( $tuner_path ), $default_logo );
		}
		$is_vu = ( strpos( $theme, 'vu-' ) === 0 || strpos( $theme, 'fm-am-' ) === 0 );
		$is_fm_am = ( strpos( $theme, 'fm-am-' ) === 0 );
		$is_dark = ( strpos( $theme, 'dark' ) !== false );
		?>
		<div class="floating-player-card rtp-inline-player rtp-layout-fullwidth rtp-design-<?php echo esc_attr( $theme ); ?>" style="pointer-events: none; margin: 0; box-shadow: none; border-color: rgba(0,0,0,0.1);">
			<!-- Column 1: Station Details -->
			<div class="player-station-info">
				<div class="player-cover">
					<img src="<?php echo esc_url( $default_logo ); ?>" alt="Cover" class="player-cover-img">
				</div>
				<div class="player-meta">
					<div class="live-status">
						<span class="live-dot"></span> LIVE ON AIR
					</div>
					<h3 class="track-title-name">Exclusively Tony Bennett</h3>
					<p class="track-artist-desc">107.6 <?php echo esc_attr( $is_fm_am ? 'AM' : 'FM' ); ?> • Jazz Swing • 128 kbps</p>
					<div class="player-action-icons">
						<button class="icon-btn" type="button"><i class="fa-regular fa-thumbs-up"></i> <span style="font-size:10px; margin-left:2px; vertical-align:middle;">0</span></button>
						<button class="icon-btn" type="button"><i class="fa-regular fa-thumbs-down"></i> <span style="font-size:10px; margin-left:2px; vertical-align:middle;">0</span></button>
						<button class="icon-btn" type="button"><i class="fa-solid fa-share-nodes"></i></button>
						<?php if ( $is_fm_am ) : ?>
							<button class="icon-btn" type="button"><i class="fa-solid fa-ellipsis"></i></button>
						<?php endif; ?>
					</div>
				</div>
			</div>

			<!-- Column 2: Ruler Tuning Scale -->
			<div class="player-tuner-section">
				<div class="tuner-header">
					<button class="tuner-arrow" type="button"><i class="fa-solid fa-chevron-left"></i></button>
					<?php if ( $is_fm_am ) : ?>
						<div class="tuner-band-toggle">
							<button type="button" class="band-btn active" data-band="FM">FM</button>
							<button type="button" class="band-btn" data-band="AM">AM</button>
						</div>
						<div class="tuner-title">
							<span class="active-station-freq" style="font-size: 48px !important;">107.6</span>
							<span class="tuner-suffix">MHz</span>
						</div>
					<?php else : ?>
						<div class="tuner-title">
							<span class="tuner-prefix">FM</span>
							<span class="active-station-freq" style="font-size: 48px !important;">107.6</span>
							<span class="tuner-suffix">MHz</span>
						</div>
					<?php endif; ?>
					<button class="tuner-arrow" type="button"><i class="fa-solid fa-chevron-right"></i></button>
				</div>
				<div class="tuner-scale-wrapper">
					<div class="tuner-scale-container">
						<div class="tuner-lines"></div>
						<div class="tuner-labels" style="font-size: 10px; opacity: 0.7;">
							<span style="left: 0%;">88</span>
							<span style="left: 10%;">90</span>
							<span style="left: 20%;">92</span>
							<span style="left: 30%;">94</span>
							<span style="left: 40%;">96</span>
							<span style="left: 50%;">98</span>
							<span style="left: 60%;">100</span>
							<span style="left: 70%;">102</span>
							<span style="left: 80%;">104</span>
							<span style="left: 90%;">106</span>
							<span style="left: 100%;">108</span>
						</div>
						<div class="tuner-needle" style="left: 98%;">
							<div class="needle-line"></div>
							<div class="needle-knob"></div>
						</div>
					</div>
				</div>
			</div>

			<!-- Column 3: Audio Controls & VU/Equalizer -->
			<div class="player-controls-section <?php echo esc_attr( $is_vu ? 'rtp-vu-meter-layout rtp-vu-active' : ( in_array( $theme, array( 'free-light', 'free-dark' ), true ) ? 'rtp-free-light-layout' : '' ) ); ?>">
				<?php if ( $is_vu ) : ?>
					<div class="rtp-vu-top-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; width: 100%; padding-right: 24px; line-height: 1;">
						<div class="eq-status-indicator" style="display: flex; align-items: center; gap: 6px; margin-bottom: 0 !important; line-height: 1;">
							<span class="status-dot"></span>
							<span class="status-text" style="font-size: 9px; text-transform: uppercase;">EQ Off</span>
						</div>
						<a href="#" class="rtp-vu-eq-toggle-link" style="font-size: 9px; font-weight: bold; letter-spacing: 0.5px; text-decoration: none;">EQUALIZER</a>
					</div>
					<div class="rtp-vu-middle-area" style="display: flex; gap: 8px; width: 100%; align-items: center;">
						<!-- VU Meters -->
						<div class="vu-meters-container" style="display: none; gap: 8px; flex-grow: 1;">
							<div class="vu-meter-box" style="flex: 1;">
								<div class="vu-dial-wrapper">
									<svg class="vu-dial-svg" viewBox="0 0 300 150">
										<defs>
											<linearGradient id="vu-backlight-mock-L-<?php echo esc_attr( $theme ); ?>" x1="0%" y1="0%" x2="0%" y2="100%">
												<stop offset="0%" stop-color="<?php echo esc_attr( $is_dark ? '#18181b' : '#ffffff' ); ?>" />
												<stop offset="70%" stop-color="<?php echo esc_attr( $is_dark ? '#0f0f11' : '#f4f4f5' ); ?>" />
												<stop offset="100%" stop-color="<?php echo esc_attr( $is_dark ? '#09090b' : '#e4e4e7' ); ?>" />
											</linearGradient>
											<radialGradient id="vu-bulb-mock-L-<?php echo esc_attr( $theme ); ?>" cx="50%" cy="100%" r="60%">
												<stop offset="0%" stop-color="<?php echo esc_attr( $is_dark ? '#7c2d12' : '#ffffff' ); ?>" stop-opacity="<?php echo esc_attr( $is_dark ? '0.8' : '1' ); ?>" />
												<stop offset="50%" stop-color="<?php echo esc_attr( $is_dark ? '#431407' : '#e4e4e7' ); ?>" stop-opacity="<?php echo esc_attr( $is_dark ? '0.5' : '0.8' ); ?>" />
												<stop offset="100%" stop-color="<?php echo esc_attr( $is_dark ? '#09090b' : '#ffffff' ); ?>" stop-opacity="0" />
											</radialGradient>
										</defs>
										<rect x="5" y="5" width="290" height="140" rx="8" fill="url(#vu-backlight-mock-L-<?php echo esc_attr( $theme ); ?>)" stroke="<?php echo esc_attr( $is_dark ? '#3f3f46' : '#dddddd' ); ?>" stroke-width="1" />
										<rect x="5" y="5" width="290" height="140" rx="8" fill="url(#vu-bulb-mock-L-<?php echo esc_attr( $theme ); ?>)" pointer-events="none" />
										<g transform="translate(0, 23)">
											<!-- Signs -->
											<text x="35" y="25" class="vu-scale-sign" font-size="16" font-family="Outfit, sans-serif" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">-</text>
											<text x="265" y="25" class="vu-scale-sign" font-size="16" font-family="Outfit, sans-serif" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">+</text>
											
											<!-- Arcs -->
											<path d="M 58.1 72.8 A 120 120 0 0 1 158.4 30.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="2.5" />
											<path d="M 62.7 76.7 A 114 114 0 0 1 153.1 36.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="0.8" />
											<path d="M 158.4 30.2 A 120 120 0 0 1 206.3 44.0" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="3.5" />
											<path d="M 153.1 36.2 A 114 114 0 0 1 198.8 49.3" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.2" />

											<!-- Decibel Ticks & Numbers -->
											<line x1="58.1" y1="72.8" x2="52.0" y2="67.7" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.8" />
											<text x="44.0" y="58.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">20</text>
											
											<line x1="77.3" y1="58.0" x2="72.4" y2="52.2" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="64.0" y="44.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">10</text>
											
											<line x1="93.0" y1="49.9" x2="88.7" y2="43.7" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="83.0" y="36.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">7</text>
											
											<line x1="106.6" y1="44.9" x2="102.9" y2="38.5" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="99.0" y="30.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">5</text>
											
											<line x1="126.9" y1="39.6" x2="124.6" y2="32.9" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="122.0" y="24.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">3</text>
											
											<line x1="143.2" y1="36.9" x2="141.8" y2="30.1" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="140.0" y="21.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">2</text>
											
											<line x1="160.0" y1="35.3" x2="159.4" y2="28.5" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="159.0" y="20.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">1</text>
											
											<line x1="176.8" y1="34.9" x2="177.0" y2="28.1" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.8" />
											<text x="178.0" y="19.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">0</text>
											
											<line x1="193.6" y1="35.8" x2="194.6" y2="29.0" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.5" />
											<text x="198.0" y="21.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">1</text>
											
											<line x1="210.3" y1="37.8" x2="212.1" y2="31.2" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.5" />
											<text x="218.0" y="26.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">2</text>
											
											<line x1="226.7" y1="41.1" x2="229.4" y2="34.6" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.8" />
											<text x="237.0" y="32.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">3</text>
											
											<!-- Subticks -->
											<line x1="67.3" y1="64.9" x2="62.4" y2="60.5" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="84.9" y1="53.6" x2="81.2" y2="48.2" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="99.7" y1="47.2" x2="96.1" y2="41.4" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="117.8" y1="41.7" x2="114.9" y2="35.3" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="133.5" y1="38.4" x2="131.5" y2="31.8" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="149.9" y1="36.2" x2="148.8" y2="29.5" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="183.5" y1="35.0" x2="184.2" y2="28.2" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />
											<line x1="200.3" y1="36.5" x2="201.7" y2="29.8" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />
											<line x1="216.9" y1="39.1" x2="219.1" y2="32.5" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />

											<!-- Percent Scale -->
											<path d="M 73.4 85.7 A 100 100 0 0 1 157.0 50.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1.2" />
											<line x1="73.4" y1="85.7" x2="77.2" y2="88.9" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="85.0" y="100.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">0</text>
											<line x1="89.4" y1="73.3" x2="93.1" y2="76.2" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="98.0" y="87.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">20</text>
											<line x1="107.5" y1="62.3" x2="111.0" y2="64.8" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="114.0" y="74.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">40</text>
											<line x1="127.1" y1="53.9" x2="129.9" y2="56.0" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="133.0" y="65.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">60</text>
											<line x1="147.2" y1="50.0" x2="148.6" y2="51.8" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="151.0" y="61.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">80</text>
											<line x1="157.0" y1="50.2" x2="156.8" y2="52.2" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1.2" />
											<text x="175.0" y="62.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">100 %</text>
											<text x="202.0" y="67.0" font-size="8" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">PEAK</text>
											
											<!-- VU Title Text -->
											<text x="150" y="90" font-size="20" font-family="Outfit, sans-serif" font-weight="800" fill="<?php echo esc_attr( $is_dark ? '#f4f4f5' : '#222222' ); ?>" letter-spacing="1" text-anchor="middle">VU</text>
											
											<!-- Needle -->
											<g class="vu-needle-left" style="transform-origin: 150px 145px; transform: rotate(-30deg);">
												<line x1="150" y1="145" x2="150" y2="32" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.3" />
												<circle cx="150" cy="145" r="5" fill="<?php echo esc_attr( $is_dark ? '#f4f4f5' : '#111111' ); ?>" />
											</g>
										</g>
									</svg>
								</div>
							</div>
							<div class="vu-meter-box" style="flex: 1;">
								<div class="vu-dial-wrapper">
									<svg class="vu-dial-svg" viewBox="0 0 300 150">
										<defs>
											<linearGradient id="vu-backlight-mock-R-<?php echo esc_attr( $theme ); ?>" x1="0%" y1="0%" x2="0%" y2="100%">
												<stop offset="0%" stop-color="<?php echo esc_attr( $is_dark ? '#18181b' : '#ffffff' ); ?>" />
												<stop offset="70%" stop-color="<?php echo esc_attr( $is_dark ? '#0f0f11' : '#f4f4f5' ); ?>" />
												<stop offset="100%" stop-color="<?php echo esc_attr( $is_dark ? '#09090b' : '#e4e4e7' ); ?>" />
											</linearGradient>
											<radialGradient id="vu-bulb-mock-R-<?php echo esc_attr( $theme ); ?>" cx="50%" cy="100%" r="60%">
												<stop offset="0%" stop-color="<?php echo esc_attr( $is_dark ? '#7c2d12' : '#ffffff' ); ?>" stop-opacity="<?php echo esc_attr( $is_dark ? '0.8' : '1' ); ?>" />
												<stop offset="50%" stop-color="<?php echo esc_attr( $is_dark ? '#431407' : '#e4e4e7' ); ?>" stop-opacity="<?php echo esc_attr( $is_dark ? '0.5' : '0.8' ); ?>" />
												<stop offset="100%" stop-color="<?php echo esc_attr( $is_dark ? '#09090b' : '#ffffff' ); ?>" stop-opacity="0" />
											</radialGradient>
										</defs>
										<rect x="5" y="5" width="290" height="140" rx="8" fill="url(#vu-backlight-mock-R-<?php echo esc_attr( $theme ); ?>)" stroke="<?php echo esc_attr( $is_dark ? '#3f3f46' : '#dddddd' ); ?>" stroke-width="1" />
										<rect x="5" y="5" width="290" height="140" rx="8" fill="url(#vu-bulb-mock-R-<?php echo esc_attr( $theme ); ?>)" pointer-events="none" />
										<g transform="translate(0, 23)">
											<!-- Signs -->
											<text x="35" y="25" class="vu-scale-sign" font-size="16" font-family="Outfit, sans-serif" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">-</text>
											<text x="265" y="25" class="vu-scale-sign" font-size="16" font-family="Outfit, sans-serif" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">+</text>
											
											<!-- Arcs -->
											<path d="M 58.1 72.8 A 120 120 0 0 1 158.4 30.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="2.5" />
											<path d="M 62.7 76.7 A 114 114 0 0 1 153.1 36.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="0.8" />
											<path d="M 158.4 30.2 A 120 120 0 0 1 206.3 44.0" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="3.5" />
											<path d="M 153.1 36.2 A 114 114 0 0 1 198.8 49.3" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.2" />

											<!-- Decibel Ticks & Numbers -->
											<line x1="58.1" y1="72.8" x2="52.0" y2="67.7" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.8" />
											<text x="44.0" y="58.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">20</text>
											
											<line x1="77.3" y1="58.0" x2="72.4" y2="52.2" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="64.0" y="44.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">10</text>
											
											<line x1="93.0" y1="49.9" x2="88.7" y2="43.7" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="83.0" y="36.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">7</text>
											
											<line x1="106.6" y1="44.9" x2="102.9" y2="38.5" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="99.0" y="30.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">5</text>
											
											<line x1="126.9" y1="39.6" x2="124.6" y2="32.9" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="122.0" y="24.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">3</text>
											
											<line x1="143.2" y1="36.9" x2="141.8" y2="30.1" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="140.0" y="21.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">2</text>
											
											<line x1="160.0" y1="35.3" x2="159.4" y2="28.5" stroke="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" stroke-width="1.5" />
											<text x="159.0" y="20.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#e4e4e7' : '#111111' ); ?>" text-anchor="middle">1</text>
											
											<line x1="176.8" y1="34.9" x2="177.0" y2="28.1" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.8" />
											<text x="178.0" y="19.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">0</text>
											
											<line x1="193.6" y1="35.8" x2="194.6" y2="29.0" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.5" />
											<text x="198.0" y="21.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">1</text>
											
											<line x1="210.3" y1="37.8" x2="212.1" y2="31.2" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.5" />
											<text x="218.0" y="26.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">2</text>
											
											<line x1="226.7" y1="41.1" x2="229.4" y2="34.6" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.8" />
											<text x="237.0" y="32.0" font-size="11" font-weight="600" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">3</text>
											
											<!-- Subticks -->
											<line x1="67.3" y1="64.9" x2="62.4" y2="60.5" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="84.9" y1="53.6" x2="81.2" y2="48.2" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="99.7" y1="47.2" x2="96.1" y2="41.4" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="117.8" y1="41.7" x2="114.9" y2="35.3" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="133.5" y1="38.4" x2="131.5" y2="31.8" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="149.9" y1="36.2" x2="148.8" y2="29.5" stroke="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#111111' ); ?>" stroke-width="0.8" />
											<line x1="183.5" y1="35.0" x2="184.2" y2="28.2" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />
											<line x1="200.3" y1="36.5" x2="201.7" y2="29.8" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />
											<line x1="216.9" y1="39.1" x2="219.1" y2="32.5" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="0.8" />

											<!-- Percent Scale -->
											<path d="M 73.4 85.7 A 100 100 0 0 1 157.0 50.2" fill="none" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1.2" />
											<line x1="73.4" y1="85.7" x2="77.2" y2="88.9" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="85.0" y="100.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">0</text>
											<line x1="89.4" y1="73.3" x2="93.1" y2="76.2" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="98.0" y="87.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">20</text>
											<line x1="107.5" y1="62.3" x2="111.0" y2="64.8" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="114.0" y="74.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">40</text>
											<line x1="127.1" y1="53.9" x2="129.9" y2="56.0" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="133.0" y="65.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">60</text>
											<line x1="147.2" y1="50.0" x2="148.6" y2="51.8" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1" />
											<text x="151.0" y="61.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">80</text>
											<line x1="157.0" y1="50.2" x2="156.8" y2="52.2" stroke="<?php echo esc_attr( $is_dark ? '#71717a' : '#111111' ); ?>" stroke-width="1.2" />
											<text x="175.0" y="62.0" font-size="8.5" fill="<?php echo esc_attr( $is_dark ? '#a1a1aa' : '#333333' ); ?>" text-anchor="middle">100 %</text>
											<text x="202.0" y="67.0" font-size="8" font-weight="bold" fill="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" text-anchor="middle">PEAK</text>
											
											<!-- VU Title Text -->
											<text x="150" y="90" font-size="20" font-family="Outfit, sans-serif" font-weight="800" fill="<?php echo esc_attr( $is_dark ? '#f4f4f5' : '#222222' ); ?>" letter-spacing="1" text-anchor="middle">VU</text>
											
											<!-- Needle -->
											<g class="vu-needle-right" style="transform-origin: 150px 145px; transform: rotate(-25deg);">
												<line x1="150" y1="145" x2="150" y2="32" stroke="<?php echo esc_attr( $is_dark ? '#ea580c' : '#dc2626' ); ?>" stroke-width="1.3" />
												<circle cx="150" cy="145" r="5" fill="<?php echo esc_attr( $is_dark ? '#f4f4f5' : '#111111' ); ?>" />
											</g>
										</g>
									</svg>
								</div>
						</div>
						<!-- Equalizer Section -->
						<div class="player-equalizer-section" style="display: flex; width: 100%;">
							<?php
							$eq_frequencies = array( 60, 150, 400, 1000, 2000, 2400, 6000, 15000 );
							foreach ( $eq_frequencies as $freq ) :
								$freq_label = ( $freq >= 1000 ) ? ( $freq / 1000 ) . 'K' : $freq;
								?>
								<div class="equalizer-bar">
									<div class="equalizer-track">
										<div class="equalizer-handle" style="bottom: 50%;"><span class="handle-dot"></span></div>
									</div>
									<div class="equalizer-label"><?php echo esc_html( $freq_label ); ?></div>
								</div>
							<?php endforeach; ?>
						</div>
					</div>
					<div class="player-volume-play-row" style="margin-top: 8px;">
						<button class="volume-icon-btn volume-mute-btn" type="button"><i class="fa-solid fa-volume-high"></i></button>
						<div class="volume-slider-wrapper">
							<input type="range" class="volume-slider" min="0" max="100" value="80" style="pointer-events: none;" />
							<div class="volume-slider-fill" style="width: 80%;"></div>
						</div>
						<button class="player-play-btn" type="button"><i class="fa-solid fa-play"></i></button>
					</div>
				<?php elseif ( in_array( $theme, array( 'free-light', 'free-dark' ), true ) ) : ?>
					<!-- Free Audio Visualizer Mockup Markup -->
					<div class="rtp-visualizer-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; line-height: 1; width: 100%;">
						<div class="eq-status-indicator active" style="display: flex; align-items: center; gap: 6px; margin-bottom: 0 !important; line-height: 1;">
							<span class="status-dot" style="background-color: #10b981; box-shadow: 0 0 4px #10b981; width: 5px; height: 5px; border-radius: 50%;"></span>
							<span class="status-text" style="font-size: 9px; text-transform: uppercase; font-weight: bold; color: #10b981;">Audio Visualizer</span>
						</div>
					</div>
					<div class="rtp-visualizer-spectrum-section" style="display: flex; flex-direction: column; justify-content: flex-end; flex-grow: 1; padding: 4px 0; width: 100%;">
						<div class="rtp-visualizer-bars-wrapper" style="display: flex; justify-content: space-between; align-items: flex-end; height: 48px; width: 100%;">
							<?php for ( $i = 0; $i < 20; $i++ ) : ?>
								<div class="rtp-visualizer-bar" style="width: 20px; height: 44px; background: <?php echo 'free-dark' === $theme ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)'; ?>; border-radius: 1px; overflow: hidden; position: relative;">
									<span class="rtp-bar-inner" style="display: block; width: 100%; height: 100%; background: linear-gradient(to top, #005a70 0%, #00adb5 80%, #ff3b30 90%, #ff3b30 100%); transform-origin: bottom; transform: scaleY(0.2); transition: transform 0.3s ease;"></span>
								</div>
							<?php endfor; ?>
						</div>
					</div>
					<div class="player-controls-divider"></div>
					<div class="player-volume-play-row">
						<button class="volume-icon-btn volume-mute-btn" type="button"><i class="fa-solid fa-volume-high"></i></button>
						<div class="volume-slider-wrapper">
							<input type="range" class="volume-slider" min="0" max="100" value="80" style="pointer-events: none;" />
							<div class="volume-slider-fill" style="width: 80%;"></div>
						</div>
						<button class="player-play-btn" type="button"><i class="fa-solid fa-play"></i></button>
					</div>
				<?php else : ?>
					<div class="eq-status-indicator" style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; line-height: 1;">
						<span class="status-dot"></span>
						<span class="status-text" style="font-size: 9px; text-transform: uppercase;">EQ Off</span>
					</div>
					<div class="player-equalizer-section">
						<?php
						$eq_frequencies = array( 60, 150, 400, 1000, 2000, 2400, 6000, 15000 );
						foreach ( $eq_frequencies as $freq ) :
							$freq_label = ( $freq >= 1000 ) ? ( $freq / 1000 ) . 'K' : $freq;
							?>
							<div class="equalizer-bar">
								<div class="equalizer-track">
									<div class="equalizer-handle" style="bottom: 50%;"><span class="handle-dot"></span></div>
								</div>
								<div class="equalizer-label"><?php echo esc_html( $freq_label ); ?></div>
							</div>
						<?php endforeach; ?>
					</div>
					<div class="player-controls-divider"></div>
					<div class="player-volume-play-row">
						<button class="volume-icon-btn volume-mute-btn" type="button"><i class="fa-solid fa-volume-high"></i></button>
						<div class="volume-slider-wrapper">
							<input type="range" class="volume-slider" min="0" max="100" value="80" style="pointer-events: none;" />
							<div class="volume-slider-fill" style="width: 80%;"></div>
						</div>
						<button class="player-play-btn" type="button"><i class="fa-solid fa-play"></i></button>
					</div>
				<?php endif; ?>
			</div>
		</div>
		<?php
	}

}
