<?php
/**
 * Admin screens: the YouWall menu with Dashboard, Connect, Display and Style.
 *
 * @package YouWall
 */

defined( 'ABSPATH' ) || exit;

/**
 * Admin screens.
 */
class YouWall_Admin {

	const PAGE  = 'youwall';
	const GROUP = 'youwall_settings_group';

	/**
	 * Link to the Pro add-on page. The Pro card stays hidden while this is empty.
	 */
	const PRO_URL = '';

	/**
	 * Menu icon: the YouWall mark, a play shape cut into three Shorts tiles
	 * (SVG, base64 so WordPress can recolor it).
	 */
	const MENU_ICON = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggNDYgNDgiPjxwYXRoIGQ9Ik0xOC41MCAxNC4xMFExOC41MCAxMi41MCAxOS44OCAxMy4zMUwyNi4zMiAxNy4xMlEyNy43MCAxNy45NCAyNy43MCAxOS41NEwyNy43MCA0NC40NlEyNy43MCA0Ni4wNiAyNi4zMiA0Ni44OEwxOS44OCA1MC42OVExOC41MCA1MS41MCAxOC41MCA0OS45MFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTMxLjMwIDIxLjY2UTMxLjMwIDIwLjA2IDMyLjY4IDIwLjg4TDM4LjUyIDI0LjMzUTM5LjkwIDI1LjE1IDM5LjkwIDI2Ljc1TDM5LjkwIDM3LjI1UTM5LjkwIDM4Ljg1IDM4LjUyIDM5LjY3TDMyLjY4IDQzLjEyUTMxLjMwIDQzLjk0IDMxLjMwIDQyLjM0WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNDMuNTAgMjguODdRNDMuNTAgMjcuMjcgNDQuODggMjguMDlMNTAuMTIgMzEuMTlRNTEuNTAgMzIuMDAgNTAuMTIgMzIuODFMNDQuODggMzUuOTFRNDMuNTAgMzYuNzMgNDMuNTAgMzUuMTNaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==';

	/**
	 * Screen hooks of our pages.
	 *
	 * @var string[]
	 */
	private static $hooks = array();

	/**
	 * Hook in.
	 */
	public static function init() {
		add_action( 'admin_menu', array( __CLASS__, 'menu' ) );
		add_action( 'admin_init', array( __CLASS__, 'register' ) );
		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'assets' ) );
		add_action( 'wp_ajax_youwall_test_connection', array( __CLASS__, 'ajax_test' ) );
		add_action( 'wp_ajax_youwall_clear_cache', array( __CLASS__, 'ajax_clear_cache' ) );
		add_action( 'wp_ajax_youwall_dismiss_pro', array( __CLASS__, 'ajax_dismiss_pro' ) );
		add_filter( 'plugin_action_links_' . plugin_basename( YOUWALL_FILE ), array( __CLASS__, 'action_links' ) );
	}

	/**
	 * Link to the Pro page, or '' while there is none.
	 *
	 * @return string
	 */
	public static function pro_url() {
		return (string) apply_filters( 'youwall_pro_url', self::PRO_URL );
	}

	/**
	 * Whether the Pro add-on is installed and active.
	 *
	 * @return bool
	 */
	public static function pro_active() {
		return defined( 'YOUWALL_PRO_VERSION' );
	}

	/**
	 * Whether to mention Pro at all: only when there is a page to send people to,
	 * or when Pro is already installed (then the Pro page explains what it added).
	 *
	 * @return bool
	 */
	private static function pro_visible() {
		return self::pro_active() || '' !== self::pro_url();
	}

	/**
	 * The admin pages, in menu order: slug suffix => menu label.
	 *
	 * @return array
	 */
	private static function pages() {
		$pages = array(
			'dashboard' => __( 'Dashboard', 'youwall' ),
			'connect'   => __( 'Connect', 'youwall' ),
			'display'   => __( 'Display', 'youwall' ),
			'style'     => __( 'Style', 'youwall' ),
		);
		if ( self::pro_visible() ) {
			$pages['pro'] = __( 'Pro', 'youwall' );
		}
		return $pages;
	}

	/**
	 * What Pro adds: icon, title, description.
	 *
	 * @return array
	 */
	private static function pro_features() {
		return array(
			array( 'featured', __( 'Featured player', 'youwall' ), __( 'A big player with an "Up next" list beside it.', 'youwall' ) ),
			array( 'playlist', __( 'Playlists', 'youwall' ), __( 'Show any public playlist, like a course or a series.', 'youwall' ) ),
			array( 'popular', __( 'Most viewed', 'youwall' ), __( 'A button that sorts a feed by views instead of date.', 'youwall' ) ),
		);
	}

	/**
	 * Admin page slug for a page key.
	 *
	 * @param string $key Page key.
	 * @return string
	 */
	private static function slug( $key ) {
		return 'dashboard' === $key ? self::PAGE : self::PAGE . '-' . $key;
	}

	/**
	 * Page URL.
	 *
	 * @param string $key Page key.
	 * @return string
	 */
	public static function url( $key = 'dashboard' ) {
		return admin_url( 'admin.php?page=' . self::slug( $key ) );
	}

	/**
	 * YouWall menu with submenus.
	 */
	public static function menu() {
		self::$hooks[] = add_menu_page(
			__( 'YouWall', 'youwall' ),
			__( 'YouWall', 'youwall' ),
			'manage_options',
			self::PAGE,
			array( __CLASS__, 'page' ),
			self::MENU_ICON,
			58
		);
		foreach ( self::pages() as $key => $label ) {
			self::$hooks[] = add_submenu_page(
				self::PAGE,
				$label . ' ‹ ' . __( 'YouWall', 'youwall' ),
				$label,
				'manage_options',
				self::slug( $key ),
				array( __CLASS__, 'page' )
			);
		}
	}

	/**
	 * Register the option.
	 */
	public static function register() {
		register_setting(
			self::GROUP,
			YouWall_Settings::OPTION,
			array(
				'type'              => 'array',
				'sanitize_callback' => array( 'YouWall_Settings', 'sanitize' ),
				'default'           => YouWall_Settings::defaults(),
			)
		);
	}

	/**
	 * "Settings" link on the Plugins screen.
	 *
	 * @param array $links Links.
	 * @return array
	 */
	public static function action_links( $links ) {
		array_unshift( $links, '<a href="' . esc_url( self::url() ) . '">' . esc_html__( 'Settings', 'youwall' ) . '</a>' );
		if ( ! self::pro_active() && '' !== self::pro_url() ) {
			$links[] = '<a href="' . esc_url( self::pro_url() ) . '" target="_blank" rel="noopener noreferrer" class="youwall-get-pro">' . esc_html__( 'Get Pro', 'youwall' ) . '</a>';
		}
		return $links;
	}

	/**
	 * Load assets on our pages only.
	 *
	 * @param string $hook Screen hook.
	 */
	public static function assets( $hook ) {
		if ( ! in_array( $hook, self::$hooks, true ) ) {
			return;
		}
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_style( 'youwall-admin', YOUWALL_URL . 'assets/admin.css', array(), YOUWALL_VERSION . '.' . filemtime( YOUWALL_DIR . 'assets/admin.css' ) );
		wp_enqueue_script( 'youwall-admin', YOUWALL_URL . 'assets/admin.js', array( 'jquery', 'wp-color-picker' ), YOUWALL_VERSION . '.' . filemtime( YOUWALL_DIR . 'assets/admin.js' ), true );
		wp_localize_script(
			'youwall-admin',
			'youwallAdmin',
			array(
				'ajaxUrl' => admin_url( 'admin-ajax.php' ),
				'nonce'   => wp_create_nonce( 'youwall_admin' ),
				'i18n'    => array(
					'testing'  => __( 'Checking…', 'youwall' ),
					'clearing' => __( 'Clearing…', 'youwall' ),
					'copied'   => __( 'Copied', 'youwall' ),
					'copy'     => __( 'Copy', 'youwall' ),
					'show'     => __( 'Show', 'youwall' ),
					'hide'     => __( 'Hide', 'youwall' ),
					'failed'   => __( 'Something went wrong. Please reload the page and try again.', 'youwall' ),
				),
			)
		);
	}

	/* ── Layout ──────────────────────────────────────────────────────── */

	/**
	 * Render the current page.
	 */
	public static function page() {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- only picks which page to show.
		$slug    = isset( $_GET['page'] ) ? sanitize_key( wp_unslash( $_GET['page'] ) ) : self::PAGE;
		$current = 'dashboard';
		foreach ( array_keys( self::pages() ) as $key ) {
			if ( self::slug( $key ) === $slug ) {
				$current = $key;
			}
		}
		$icons = array(
			'dashboard' => 'grid',
			'connect'   => 'plug',
			'display'   => 'layout',
			'style'     => 'palette',
			'pro'       => 'star',
		);
		?>
		<div class="youwall-admin">
			<hr class="wp-header-end">

			<header class="youwall-header">
				<div class="youwall-header__inner">
					<div class="youwall-brand">
						<span class="youwall-brand__logo"><?php echo self::icon( 'logo', 22 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?></span>
						<span>
							<span class="youwall-brand__name"><?php esc_html_e( 'YouWall', 'youwall' ); ?></span>
							<span class="youwall-brand__version">
								<?php
								/* translators: %s: plugin version number. */
								echo esc_html( sprintf( __( 'YouTube Shorts and Videos on your site. Version %s', 'youwall' ), YOUWALL_VERSION ) );
								?>
							</span>
						</span>
					</div>
					<div class="youwall-header__right">
						<?php if ( defined( 'YOUWALL_PRO_VERSION' ) ) : ?>
							<span class="youwall-badge"><?php esc_html_e( 'Pro active', 'youwall' ); ?></span>
						<?php endif; ?>
						<span class="youwall-byline">
							<?php
							printf(
								/* translators: %s: author name with a link. */
								esc_html__( 'by %s', 'youwall' ),
								'<a href="https://usmaaan.com" target="_blank" rel="noopener noreferrer">Usman</a>'
							);
							?>
						</span>
					</div>
				</div>
			</header>

			<nav class="youwall-nav" aria-label="<?php esc_attr_e( 'YouWall sections', 'youwall' ); ?>">
				<div class="youwall-nav__inner">
					<?php foreach ( self::pages() as $key => $label ) : ?>
						<a href="<?php echo esc_url( self::url( $key ) ); ?>" class="youwall-nav__tab<?php echo $key === $current ? ' is-active' : ''; ?>"<?php echo $key === $current ? ' aria-current="page"' : ''; ?>>
							<?php echo self::icon( $icons[ $key ], 16 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?>
							<?php echo esc_html( $label ); ?>
						</a>
					<?php endforeach; ?>
				</div>
			</nav>

			<main class="youwall-content">
				<h1 class="screen-reader-text"><?php echo esc_html( self::pages()[ $current ] . ' ‹ ' . __( 'YouWall', 'youwall' ) ); ?></h1>
				<?php
				settings_errors();
				switch ( $current ) {
					case 'connect':
						self::connect_page();
						break;
					case 'display':
					case 'style':
						self::form( $current );
						break;
					case 'pro':
						self::pro_page();
						break;
					default:
						self::dashboard_page();
				}
				?>
			</main>
		</div>
		<?php
	}

	/* ── Pages ───────────────────────────────────────────────────────── */

	/**
	 * Dashboard: setup progress, adding a feed, layouts and the cache.
	 */
	private static function dashboard_page() {
		$s       = YouWall_Settings::all();
		$has_key = '' !== $s['api_key'];
		$has_ch  = '' !== $s['channel_id'];

		self::pro_card();
		?>
		<div class="youwall-grid">
			<section class="youwall-card">
				<h2><?php esc_html_e( 'Quick setup', 'youwall' ); ?></h2>
				<ol class="youwall-steps">
					<li class="<?php echo $has_key ? 'is-done' : ''; ?>">
						<span class="youwall-steps__num"><?php echo $has_key ? self::icon( 'check', 14 ) : '1'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG or a digit. ?></span>
						<div>
							<strong><?php esc_html_e( 'YouTube API key', 'youwall' ); ?></strong>
							<p><?php esc_html_e( 'A free key from Google lets the plugin read your videos.', 'youwall' ); ?></p>
							<?php if ( ! $has_key ) : ?>
								<a class="button button-primary" href="<?php echo esc_url( self::url( 'connect' ) ); ?>"><?php esc_html_e( 'Add API key', 'youwall' ); ?></a>
							<?php endif; ?>
						</div>
					</li>
					<li class="<?php echo $has_ch ? 'is-done' : ''; ?>">
						<span class="youwall-steps__num"><?php echo $has_ch ? self::icon( 'check', 14 ) : '2'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG or a digit. ?></span>
						<div>
							<strong><?php esc_html_e( 'Your channel', 'youwall' ); ?></strong>
							<p><?php esc_html_e( 'Your handle, like @yourchannel, is enough.', 'youwall' ); ?></p>
							<?php if ( ! $has_ch ) : ?>
								<a class="button button-primary" href="<?php echo esc_url( self::url( 'connect' ) ); ?>"><?php esc_html_e( 'Add channel', 'youwall' ); ?></a>
							<?php endif; ?>
						</div>
					</li>
					<li>
						<span class="youwall-steps__num">3</span>
						<div>
							<strong><?php esc_html_e( 'Add a feed to a page', 'youwall' ); ?></strong>
							<p><?php esc_html_e( 'Use the "YouWall" block, the Elementor widget, or a shortcode from the builder on this page.', 'youwall' ); ?></p>
						</div>
					</li>
				</ol>
			</section>

			<section class="youwall-card">
				<h2><?php esc_html_e( 'Shortcode builder', 'youwall' ); ?></h2>
				<p class="youwall-muted"><?php esc_html_e( 'Pick what to show, then copy the shortcode into any page or post.', 'youwall' ); ?></p>
				<div class="youwall-builder">
					<p>
						<label for="youwall-b-source"><?php esc_html_e( 'Show', 'youwall' ); ?></label>
						<select id="youwall-b-source">
							<?php foreach ( YouWall_Settings::source_labels() as $key => $label ) : ?>
								<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p class="youwall-b-layout-row">
						<label for="youwall-b-layout"><?php esc_html_e( 'Layout', 'youwall' ); ?></label>
						<select id="youwall-b-layout">
							<?php foreach ( YouWall_Settings::layout_labels() as $key => $label ) : ?>
								<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></option>
							<?php endforeach; ?>
						</select>
					</p>
					<p>
						<label for="youwall-b-columns"><?php esc_html_e( 'Columns', 'youwall' ); ?></label>
						<select id="youwall-b-columns">
							<option value=""><?php esc_html_e( 'Use the default', 'youwall' ); ?></option>
							<?php for ( $i = 1; $i <= 6; $i++ ) : ?>
								<option value="<?php echo esc_attr( $i ); ?>"><?php echo esc_html( number_format_i18n( $i ) ); ?></option>
							<?php endfor; ?>
						</select>
					</p>
					<p class="youwall-b-output">
						<label for="youwall-b-code"><?php esc_html_e( 'Shortcode', 'youwall' ); ?></label>
						<input type="text" id="youwall-b-code" class="code" value="[youwall]" readonly />
						<button type="button" class="button button-primary" id="youwall-b-copy"><?php esc_html_e( 'Copy', 'youwall' ); ?></button>
					</p>
				</div>
			</section>
		</div>

		<section class="youwall-card">
			<h2><?php esc_html_e( 'Layouts', 'youwall' ); ?></h2>
			<div class="youwall-layouts">
				<?php
				$layouts = array(
					array( 'shorts', __( 'Shorts grid', 'youwall' ), __( 'Tall 9:16 tiles with title and views on the cover.', 'youwall' ) ),
					array( 'videos', __( 'Video grid', 'youwall' ), __( '16:9 tiles with length, views and date. No Shorts.', 'youwall' ) ),
					array( 'slider', __( 'Slider', 'youwall' ), __( 'Swipe on phones, arrows and dots on desktop.', 'youwall' ) ),
					array( 'tabs', __( 'Shorts and Videos tabs', 'youwall' ), __( 'One feed, two tabs. Visitors pick.', 'youwall' ) ),
				);
				foreach ( $layouts as $layout ) :
					?>
					<div class="youwall-layout">
						<span class="youwall-layout__icon"><?php echo self::icon( $layout[0], 22 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?></span>
						<strong><?php echo esc_html( $layout[1] ); ?></strong>
						<span><?php echo esc_html( $layout[2] ); ?></span>
					</div>
				<?php endforeach; ?>
				<?php
				if ( self::pro_visible() ) :
					foreach ( self::pro_features() as $feature ) :
						?>
						<a class="youwall-layout youwall-layout--pro" href="<?php echo esc_url( self::url( 'pro' ) ); ?>">
							<span class="youwall-layout__icon"><?php echo self::icon( $feature[0], 22 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?></span>
							<strong><?php echo esc_html( $feature[1] ); ?> <span class="youwall-pro-tag"><?php echo self::pro_active() ? esc_html__( 'Pro, active', 'youwall' ) : esc_html__( 'Pro', 'youwall' ); ?></span></strong>
							<span><?php echo esc_html( $feature[2] ); ?></span>
						</a>
						<?php
					endforeach;
				endif;
				?>
			</div>
		</section>

		<section class="youwall-card">
			<h2><?php esc_html_e( 'New video not showing yet?', 'youwall' ); ?></h2>
			<p>
				<?php
				printf(
					/* translators: %s: cache duration, for example "2 hours". */
					esc_html__( 'Feeds are saved for %s to keep your API quota low. Clear the saved copy to fetch fresh results now.', 'youwall' ),
					esc_html( human_time_diff( 0, YouWall_Settings::cache_seconds() ) )
				);
				?>
			</p>
			<p>
				<button type="button" class="button" id="youwall-clear"><?php echo self::icon( 'refresh', 16 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?> <?php esc_html_e( 'Clear saved results', 'youwall' ); ?></button>
				<span id="youwall-clear-result" class="youwall-result" role="status" aria-live="polite"></span>
			</p>
		</section>
		<?php
	}

	/**
	 * Connect: API key guide, key and channel.
	 */
	private static function connect_page() {
		$s = YouWall_Settings::all();
		?>
		<section class="youwall-card">
			<h2><?php esc_html_e( 'Connect your channel', 'youwall' ); ?></h2>
			<p><?php esc_html_e( 'The plugin reads your videos through the YouTube Data API. It needs a free API key from Google. This takes about five minutes the first time.', 'youwall' ); ?></p>

			<details class="youwall-guide"<?php echo '' === $s['api_key'] ? ' open' : ''; ?>>
				<summary><?php esc_html_e( 'How to get an API key', 'youwall' ); ?></summary>
				<ol>
					<li>
						<?php
						printf(
							/* translators: %s: link to Google Cloud Console. */
							esc_html__( 'Open %s and sign in with your Google account.', 'youwall' ),
							'<a href="https://console.cloud.google.com/projectcreate" target="_blank" rel="noopener noreferrer">' . esc_html__( 'Google Cloud Console', 'youwall' ) . '</a>'
						);
						?>
					</li>
					<li><?php esc_html_e( 'Create a project. Any name works, for example "My website".', 'youwall' ); ?></li>
					<li>
						<?php
						printf(
							/* translators: %s: link to the YouTube Data API v3 page. */
							esc_html__( 'Go to %s and click Enable.', 'youwall' ),
							'<a href="https://console.cloud.google.com/apis/library/youtube.googleapis.com" target="_blank" rel="noopener noreferrer">' . esc_html__( 'YouTube Data API v3', 'youwall' ) . '</a>'
						);
						?>
					</li>
					<li>
						<?php
						printf(
							/* translators: %s: link to the Credentials page. */
							esc_html__( 'Open %s, click Create credentials, then API key, and copy the key.', 'youwall' ),
							'<a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener noreferrer">' . esc_html__( 'Credentials', 'youwall' ) . '</a>'
						);
						?>
					</li>
					<li><?php esc_html_e( 'Recommended: edit the key and under API restrictions choose "YouTube Data API v3" only.', 'youwall' ); ?></li>
				</ol>
				<p class="description"><?php esc_html_e( 'The free quota is 10,000 units a day. A typical site uses far less, because results are cached.', 'youwall' ); ?></p>
			</details>

			<form method="post" action="options.php">
				<?php settings_fields( self::GROUP ); ?>
				<table class="form-table" role="presentation">
					<tr>
						<th scope="row"><label for="youwall-api-key"><?php esc_html_e( 'API key', 'youwall' ); ?></label></th>
						<td>
							<input type="password" id="youwall-api-key" name="<?php echo esc_attr( YouWall_Settings::OPTION ); ?>[api_key]" value="<?php echo esc_attr( $s['api_key'] ); ?>" class="regular-text code" autocomplete="off" spellcheck="false" />
							<button type="button" class="button youwall-toggle-key" aria-controls="youwall-api-key"><?php esc_html_e( 'Show', 'youwall' ); ?></button>
						</td>
					</tr>
					<tr>
						<th scope="row"><label for="youwall-channel"><?php esc_html_e( 'Channel', 'youwall' ); ?></label></th>
						<td>
							<input type="text" id="youwall-channel" name="<?php echo esc_attr( YouWall_Settings::OPTION ); ?>[channel_id]" value="<?php echo esc_attr( $s['channel_id'] ); ?>" class="regular-text" placeholder="@yourchannel" spellcheck="false" aria-describedby="youwall-channel-help" />
							<p class="description" id="youwall-channel-help"><?php esc_html_e( 'Your handle (like @yourchannel), your channel link, or the channel ID that starts with UC. Handles and links are turned into the channel ID when you save.', 'youwall' ); ?></p>
						</td>
					</tr>
				</table>
				<p class="youwall-actions">
					<?php submit_button( __( 'Save', 'youwall' ), 'primary', 'submit', false ); ?>
					<button type="button" class="button" id="youwall-test"><?php esc_html_e( 'Test connection', 'youwall' ); ?></button>
					<span id="youwall-test-result" class="youwall-result" role="status" aria-live="polite"></span>
				</p>
			</form>
		</section>
		<?php
	}

	/**
	 * Display and Style pages.
	 *
	 * @param string $page 'display' or 'style'.
	 */
	private static function form( $page ) {
		$opt = YouWall_Settings::OPTION;
		?>
		<form method="post" action="options.php" class="youwall-card">
			<?php settings_fields( self::GROUP ); ?>
			<?php if ( 'display' === $page ) : ?>
				<h2><?php esc_html_e( 'Feed defaults', 'youwall' ); ?></h2>
				<p class="youwall-muted"><?php esc_html_e( 'These are the defaults for every feed. You can change most of them on each block, widget or shortcode.', 'youwall' ); ?></p>
				<input type="hidden" name="<?php echo esc_attr( $opt ); ?>[_checkboxes]" value="privacy_mode,show_numbers,slider_autoplay,slider_arrows,slider_dots" />
				<table class="form-table" role="presentation">
					<?php
					self::select( 'source', __( 'Show', 'youwall' ), YouWall_Settings::source_labels() );
					self::select( 'layout', __( 'Layout', 'youwall' ), YouWall_Settings::layout_labels() );
					self::number( 'columns', __( 'Columns', 'youwall' ), 1, 6, __( 'Phones show fewer columns automatically.', 'youwall' ) );
					self::number( 'per_page', __( 'Videos at first', 'youwall' ), 1, 50, __( 'How many videos show before the "Load more" button.', 'youwall' ) );
					self::text( 'load_more_text', __( 'Load more button text', 'youwall' ), YouWall_Settings::load_more_text() );
					$cache = array();
					foreach ( YouWall_Settings::CACHE_MINUTES as $minutes ) {
						$cache[ $minutes ] = human_time_diff( 0, $minutes * MINUTE_IN_SECONDS );
					}
					self::select( 'cache_minutes', __( 'Check YouTube for new videos every', 'youwall' ), $cache, __( 'Shorter means new uploads appear sooner, but uses more of your API quota.', 'youwall' ) );
					self::checkbox( 'privacy_mode', __( 'Privacy-enhanced mode', 'youwall' ), __( 'Play videos from youtube-nocookie.com, so YouTube does not set cookies until someone plays a video.', 'youwall' ) );
					self::checkbox( 'show_numbers', __( 'Numbers on tiles', 'youwall' ), __( 'Show 1, 2, 3 in the corner of each video.', 'youwall' ) );
					?>
				</table>
				<h2><?php esc_html_e( 'Slider', 'youwall' ); ?></h2>
				<table class="form-table" role="presentation">
					<?php
					self::number( 'slider_per_view', __( 'Videos visible at once', 'youwall' ), 1, 6 );
					self::checkbox( 'slider_arrows', __( 'Arrows', 'youwall' ), __( 'Show previous and next buttons.', 'youwall' ) );
					self::checkbox( 'slider_dots', __( 'Dots', 'youwall' ), __( 'Show a dot for each page.', 'youwall' ) );
					self::checkbox( 'slider_autoplay', __( 'Move on its own', 'youwall' ), __( 'Slides every 5 seconds and stops when someone hovers over it. Visitors who turn off animations on their device never see it move.', 'youwall' ) );
					?>
				</table>
			<?php else : ?>
				<h2><?php esc_html_e( 'Look and feel', 'youwall' ); ?></h2>
				<p class="youwall-muted"><?php esc_html_e( 'Applies to every feed. In Elementor you can also change these per widget.', 'youwall' ); ?></p>
				<table class="form-table" role="presentation">
					<?php
					self::number( 'gap', __( 'Space between videos (px)', 'youwall' ), 0, 60 );
					self::number( 'border_radius', __( 'Corner rounding (px)', 'youwall' ), 0, 40 );
					self::number( 'tile_border_width', __( 'Border width (px)', 'youwall' ), 0, 10, __( '0 means no border.', 'youwall' ) );
					self::color( 'tile_border_color', __( 'Border color', 'youwall' ) );
					self::color( 'tile_bg', __( 'Background while loading', 'youwall' ) );
					self::color( 'btn_bg', __( 'Button color', 'youwall' ) );
					self::color( 'btn_color', __( 'Button text color', 'youwall' ) );
					self::number( 'overlay_opacity', __( 'Darkness behind the player (%)', 'youwall' ), 0, 100 );
					?>
				</table>
			<?php endif; ?>
			<?php submit_button( __( 'Save changes', 'youwall' ) ); ?>
		</form>
		<?php
	}

	/**
	 * The optional Pro card. Hidden until there is a Pro page, once Pro is installed, or after dismissing.
	 */
	private static function pro_card() {
		if ( '' === self::pro_url() || self::pro_active() || get_user_meta( get_current_user_id(), 'youwall_pro_dismissed', true ) ) {
			return;
		}
		?>
		<section class="youwall-card youwall-pro" id="youwall-pro">
			<button type="button" class="notice-dismiss" id="youwall-pro-dismiss"><span class="screen-reader-text"><?php esc_html_e( 'Dismiss', 'youwall' ); ?></span></button>
			<h2><?php esc_html_e( 'Want a featured player or playlists?', 'youwall' ); ?></h2>
			<p><?php esc_html_e( 'YouWall Pro adds a big player with an "Up next" list, playlist feeds and a "Most viewed" sort button. Everything on this page keeps working without it.', 'youwall' ); ?></p>
			<p><a class="button" href="<?php echo esc_url( self::url( 'pro' ) ); ?>"><?php esc_html_e( 'See what Pro adds', 'youwall' ); ?></a></p>
		</section>
		<?php
	}

	/**
	 * Pro page: what the add-on adds, with one link out. Becomes a status page once Pro is active.
	 */
	private static function pro_page() {
		$active = self::pro_active();
		?>
		<section class="youwall-card youwall-pro-page">
			<?php if ( $active ) : ?>
				<h2><?php esc_html_e( 'YouWall Pro is active', 'youwall' ); ?></h2>
				<p>
					<?php
					/* translators: %s: Pro add-on version number. */
					echo esc_html( sprintf( __( 'Version %s. These extras are now in the block, the Elementor widget and the shortcode builder:', 'youwall' ), YOUWALL_PRO_VERSION ) );
					?>
				</p>
			<?php else : ?>
				<h2><?php esc_html_e( 'YouWall Pro', 'youwall' ); ?></h2>
				<p><?php esc_html_e( 'Pro is a separate add-on. It adds three things to this plugin. Everything you use now stays free and keeps working with or without it.', 'youwall' ); ?></p>
			<?php endif; ?>

			<ul class="youwall-pro-list">
				<?php foreach ( self::pro_features() as $feature ) : ?>
					<li>
						<span class="youwall-layout__icon"><?php echo self::icon( $feature[0], 22 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?></span>
						<span>
							<strong><?php echo esc_html( $feature[1] ); ?></strong>
							<span class="youwall-muted"><?php echo esc_html( $feature[2] ); ?></span>
						</span>
					</li>
				<?php endforeach; ?>
			</ul>

			<?php if ( $active ) : ?>
				<p><a class="button button-primary" href="<?php echo esc_url( self::url() ); ?>"><?php esc_html_e( 'Go to the shortcode builder', 'youwall' ); ?></a></p>
			<?php elseif ( '' !== self::pro_url() ) : ?>
				<p>
					<a class="button button-primary" href="<?php echo esc_url( self::pro_url() ); ?>" target="_blank" rel="noopener noreferrer">
						<?php esc_html_e( 'Get YouWall Pro', 'youwall' ); ?>
						<?php echo self::icon( 'external', 14 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static SVG. ?>
					</a>
				</p>
				<p class="youwall-muted"><?php esc_html_e( 'Opens the Pro page on the author’s website in a new tab.', 'youwall' ); ?></p>
			<?php endif; ?>
		</section>
		<?php
	}

	/* ── Field helpers ───────────────────────────────────────────────── */

	/**
	 * Select row.
	 *
	 * @param string $key     Setting.
	 * @param string $label   Label.
	 * @param array  $options value => label.
	 * @param string $help    Help text.
	 */
	private static function select( $key, $label, $options, $help = '' ) {
		$id    = 'youwall-' . $key;
		$value = (string) YouWall_Settings::get( $key );
		?>
		<tr>
			<th scope="row"><label for="<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $label ); ?></label></th>
			<td>
				<select id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( YouWall_Settings::OPTION . '[' . $key . ']' ); ?>"<?php echo $help ? ' aria-describedby="' . esc_attr( $id . '-help' ) . '"' : ''; ?>>
					<?php foreach ( $options as $v => $l ) : ?>
						<option value="<?php echo esc_attr( $v ); ?>"<?php selected( $value, (string) $v ); ?>><?php echo esc_html( $l ); ?></option>
					<?php endforeach; ?>
				</select>
				<?php self::help( $id, $help ); ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Number row.
	 *
	 * @param string $key   Setting.
	 * @param string $label Label.
	 * @param int    $min   Minimum.
	 * @param int    $max   Maximum.
	 * @param string $help  Help text.
	 */
	private static function number( $key, $label, $min, $max, $help = '' ) {
		$id = 'youwall-' . $key;
		?>
		<tr>
			<th scope="row"><label for="<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $label ); ?></label></th>
			<td>
				<input type="number" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( YouWall_Settings::OPTION . '[' . $key . ']' ); ?>" value="<?php echo esc_attr( YouWall_Settings::get( $key ) ); ?>" min="<?php echo esc_attr( $min ); ?>" max="<?php echo esc_attr( $max ); ?>" class="small-text"<?php echo $help ? ' aria-describedby="' . esc_attr( $id . '-help' ) . '"' : ''; ?> />
				<?php self::help( $id, $help ); ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Text row.
	 *
	 * @param string $key         Setting.
	 * @param string $label       Label.
	 * @param string $placeholder Placeholder.
	 */
	private static function text( $key, $label, $placeholder = '' ) {
		$id = 'youwall-' . $key;
		?>
		<tr>
			<th scope="row"><label for="<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $label ); ?></label></th>
			<td><input type="text" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( YouWall_Settings::OPTION . '[' . $key . ']' ); ?>" value="<?php echo esc_attr( YouWall_Settings::get( $key ) ); ?>" placeholder="<?php echo esc_attr( $placeholder ); ?>" class="regular-text" /></td>
		</tr>
		<?php
	}

	/**
	 * Checkbox row.
	 *
	 * @param string $key   Setting.
	 * @param string $label Row label.
	 * @param string $text  Checkbox text.
	 */
	private static function checkbox( $key, $label, $text ) {
		$id = 'youwall-' . $key;
		?>
		<tr>
			<th scope="row"><?php echo esc_html( $label ); ?></th>
			<td><label for="<?php echo esc_attr( $id ); ?>"><input type="checkbox" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( YouWall_Settings::OPTION . '[' . $key . ']' ); ?>" value="1"<?php checked( (int) YouWall_Settings::get( $key ), 1 ); ?> /> <?php echo esc_html( $text ); ?></label></td>
		</tr>
		<?php
	}

	/**
	 * Color row.
	 *
	 * @param string $key   Setting.
	 * @param string $label Label.
	 */
	private static function color( $key, $label ) {
		$id       = 'youwall-' . $key;
		$defaults = YouWall_Settings::defaults();
		?>
		<tr>
			<th scope="row"><label for="<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $label ); ?></label></th>
			<td><input type="text" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( YouWall_Settings::OPTION . '[' . $key . ']' ); ?>" value="<?php echo esc_attr( YouWall_Settings::get( $key ) ); ?>" class="youwall-color" data-default-color="<?php echo esc_attr( $defaults[ $key ] ); ?>" /></td>
		</tr>
		<?php
	}

	/**
	 * Help text under a field.
	 *
	 * @param string $id   Field ID.
	 * @param string $help Text.
	 */
	private static function help( $id, $help ) {
		if ( $help ) {
			printf( '<p class="description" id="%s">%s</p>', esc_attr( $id . '-help' ), esc_html( $help ) );
		}
	}

	/**
	 * Inline SVG line icons.
	 *
	 * @param string $name Icon name.
	 * @param int    $size Size in px.
	 * @return string
	 */
	private static function icon( $name, $size = 20 ) {
		$paths = array(
			'logo'     => '<path d="M18.50 14.10Q18.50 12.50 19.88 13.31L26.32 17.12Q27.70 17.94 27.70 19.54L27.70 44.46Q27.70 46.06 26.32 46.88L19.88 50.69Q18.50 51.50 18.50 49.90Z" fill="currentColor" fill-opacity="1" stroke="none"/><path d="M31.30 21.66Q31.30 20.06 32.68 20.88L38.52 24.33Q39.90 25.15 39.90 26.75L39.90 37.25Q39.90 38.85 38.52 39.67L32.68 43.12Q31.30 43.94 31.30 42.34Z" fill="currentColor" fill-opacity=".86" stroke="none"/><path d="M43.50 28.87Q43.50 27.27 44.88 28.09L50.12 31.19Q51.50 32.00 50.12 32.81L44.88 35.91Q43.50 36.73 43.50 35.13Z" fill="currentColor" fill-opacity=".72" stroke="none"/>',
			'grid'     => '<rect x="4" y="4" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1"/>',
			'plug'     => '<path d="M9 7V3M15 7V3M6 7h12v4a6 6 0 0 1-12 0zM12 17v4"/>',
			'layout'   => '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M10 10v10"/>',
			'palette'  => '<path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-.9-.7-1.4-.7-2.2 0-.9.7-1.5 1.6-1.5H17a4 4 0 0 0 4-4C21 6.8 17 3 12 3z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7.5" r="1"/>',
			'check'    => '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
			'refresh'  => '<path d="M20 11a8 8 0 0 0-14.6-4.5M4 4v4h4M4 13a8 8 0 0 0 14.6 4.5M20 20v-4h-4"/>',
			'shorts'   => '<rect x="7" y="2.5" width="10" height="19" rx="2.5"/><path d="M10.5 9.5v5l4-2.5z" fill="currentColor" stroke="none"/>',
			'videos'   => '<rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor" stroke="none"/>',
			'slider'   => '<rect x="6.5" y="5" width="11" height="14" rx="2"/><path d="M3 9l-1.5 3L3 15M21 9l1.5 3L21 15"/>',
			'tabs'     => '<path d="M3 9V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
			'star'     => '<path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/>',
			'featured' => '<rect x="2.5" y="4" width="12" height="9" rx="1.5"/><path d="M17.5 5h4M17.5 9h4M17.5 13h4M2.5 17h19M2.5 20.5h12"/>',
			'playlist' => '<path d="M3 6h12M3 11h12M3 16h7"/><path d="M15 14.5v5l4.5-2.5z" fill="currentColor" stroke="none"/>',
			'popular'  => '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/>',
			'external' => '<path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>',
		);
		$body  = isset( $paths[ $name ] ) ? $paths[ $name ] : '';
		$svg   = sprintf(
			'<svg class="youwall-icon" width="%1$d" height="%1$d" viewBox="%3$s" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">%2$s</svg>',
			absint( $size ),
			$body,
			'logo' === $name ? '10 8 46 48' : '0 0 24 24' // The logo is drawn on a 64-unit grid.
		);
		$allow = array(
			'svg'     => array(
				'class'           => true,
				'width'           => true,
				'height'          => true,
				'viewbox'         => true,
				'fill'            => true,
				'stroke'          => true,
				'stroke-width'    => true,
				'stroke-linecap'  => true,
				'stroke-linejoin' => true,
				'aria-hidden'     => true,
				'focusable'       => true,
			),
			'path'    => array(
				'd'      => true,
				'fill'   => true,
				'stroke' => true,
			),
			'rect'    => array(
				'x'      => true,
				'y'      => true,
				'width'  => true,
				'height' => true,
				'rx'     => true,
			),
			'polygon' => array(
				'points'       => true,
				'fill'         => true,
				'fill-opacity' => true,
				'stroke'       => true,
			),
			'circle'  => array(
				'cx' => true,
				'cy' => true,
				'r'  => true,
			),
		);
		return wp_kses( $svg, $allow );
	}

	/* ── AJAX ────────────────────────────────────────────────────────── */

	/**
	 * Check the key and channel typed on the Connect page (before saving).
	 */
	public static function ajax_test() {
		check_ajax_referer( 'youwall_admin', 'nonce' );
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => __( 'You are not allowed to do this.', 'youwall' ) ), 403 );
		}

		$key     = isset( $_POST['api_key'] ) ? preg_replace( '/[^A-Za-z0-9_\-]/', '', sanitize_text_field( wp_unslash( $_POST['api_key'] ) ) ) : '';
		$channel = isset( $_POST['channel'] ) ? sanitize_text_field( wp_unslash( $_POST['channel'] ) ) : '';

		if ( '' === $key || '' === $channel ) {
			wp_send_json_error( array( 'message' => __( 'Enter both the API key and the channel first.', 'youwall' ) ) );
		}

		$api    = new YouWall_API( $key );
		$result = $api->test_connection( $channel );
		if ( is_wp_error( $result ) ) {
			wp_send_json_error( array( 'message' => $result->get_error_message() ) );
		}

		wp_send_json_success(
			array(
				/* translators: %s: YouTube channel name. */
				'message' => sprintf( __( 'Connected to “%s”. Click Save to keep these settings.', 'youwall' ), $result['title'] ),
			)
		);
	}

	/**
	 * Clear saved results.
	 */
	public static function ajax_clear_cache() {
		check_ajax_referer( 'youwall_admin', 'nonce' );
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => __( 'You are not allowed to do this.', 'youwall' ) ), 403 );
		}
		YouWall_Settings::clear_cache();
		wp_send_json_success( array( 'message' => __( 'Done. Feeds will show fresh results on the next page load.', 'youwall' ) ) );
	}

	/**
	 * Hide the Pro card for this user.
	 */
	public static function ajax_dismiss_pro() {
		check_ajax_referer( 'youwall_admin', 'nonce' );
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( null, 403 );
		}
		update_user_meta( get_current_user_id(), 'youwall_pro_dismissed', 1 );
		wp_send_json_success();
	}
}