<?php
/**
 * Settings screen under Settings > 3task Toolbar.
 *
 * Saving goes through options.php and the registered sanitize callback; this class only renders.
 *
 * @package ThreeCE
 */

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

/**
 * Admin screens.
 */
class ThreeCE_Admin {

	const PAGE = 'threece';

	/**
	 * Hooks.
	 */
	public static function init(): void {
		add_filter( 'plugin_action_links_' . plugin_basename( THREECE_FILE ), array( __CLASS__, 'action_links' ) );
		add_action( 'admin_menu', array( __CLASS__, 'menu' ) );
		add_filter( 'post_row_actions', array( __CLASS__, 'row_actions' ), 15, 2 );
		add_filter( 'page_row_actions', array( __CLASS__, 'row_actions' ), 15, 2 );
		add_filter( 'display_post_states', array( __CLASS__, 'post_state' ), 10, 2 );
		add_action( 'admin_notices', array( __CLASS__, 'notice_classic_editor' ) );
		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'assets' ) );
	}

	/**
	 * Styles, live preview and toolbar builder, on our settings page only.
	 *
	 * @param string $hook_suffix Admin page.
	 */
	public static function assets( $hook_suffix ): void {
		if ( 'settings_page_' . self::PAGE !== $hook_suffix || ! current_user_can( 'manage_options' ) ) {
			return;
		}
		wp_enqueue_style( 'threece-inserter', THREECE_URL . 'assets/css/inserter.css', array(), THREECE_VERSION );
		wp_enqueue_style( 'threece-admin', THREECE_URL . 'assets/css/admin.css', array( 'threece-inserter' ), THREECE_VERSION );
		// The Design tab shows real elements in the chosen style.
		wp_enqueue_style( 'threece-elements' );
		// wp-api-fetch sends the choice on the thank-you card with the REST nonce of WordPress.
		wp_enqueue_script( 'threece-settings', THREECE_URL . 'assets/js/settings.js', array( 'wp-api-fetch' ), THREECE_VERSION, true );
		// The toolbar preview draws the buttons with the icons of the editor itself: WordPress' editor styles and TinyMCE skin.
		wp_enqueue_style( 'editor-buttons' );
		wp_enqueue_style( 'threece-mce-skin', includes_url( 'js/tinymce/skins/lightgray/skin.min.css' ), array(), isset( $GLOBALS['tinymce_version'] ) ? (string) $GLOBALS['tinymce_version'] : THREECE_VERSION );
		wp_enqueue_script( 'threece-toolbar-admin', THREECE_URL . 'assets/js/toolbar-admin.js', array(), THREECE_VERSION, true );
		wp_add_inline_script(
			'threece-toolbar-admin',
			'window.threeceToolbarData = ' . wp_json_encode(
				array(
					'i18n' => array(
						/* translators: %s: row number */
						'row'            => __( 'Row %s', '3task-toolbar-for-classic-editor' ),
						'addTo'          => __( 'Add to', '3task-toolbar-for-classic-editor' ),
						'added'          => __( 'Add to the toolbar', '3task-toolbar-for-classic-editor' ),
						'inToolbar'      => __( 'in toolbar', '3task-toolbar-for-classic-editor' ),
						'separator'      => __( 'Separator', '3task-toolbar-for-classic-editor' ),
						'drop'           => __( 'Drag a button here or add one below.', '3task-toolbar-for-classic-editor' ),
						'groupText'      => __( 'Text', '3task-toolbar-for-classic-editor' ),
						'groupParagraph' => __( 'Paragraph', '3task-toolbar-for-classic-editor' ),
						'groupInsert'    => __( 'Insert', '3task-toolbar-for-classic-editor' ),
						'groupTools'     => __( 'Tools', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'actions'        => __( 'Actions for %s', '3task-toolbar-for-classic-editor' ),
						'left'           => __( 'Left', '3task-toolbar-for-classic-editor' ),
						'right'          => __( 'Right', '3task-toolbar-for-classic-editor' ),
						'removeShort'    => __( 'Remove', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'moveLeft'       => __( 'Move %s left', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'moveRight'      => __( 'Move %s right', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'moveUp'         => __( 'Move %s to the row above', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'moveDown'       => __( 'Move %s to the row below', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'remove'         => __( 'Remove %s', '3task-toolbar-for-classic-editor' ),
						/* translators: 1: button name, 2: row number, 3: position in the row, 4: buttons in the row */
						'moved'          => __( '%1$s: row %2$s, position %3$s of %4$s.', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: button name */
						'removed'        => __( '%s removed.', '3task-toolbar-for-classic-editor' ),
						/* translators: %s: row number */
						'full'           => __( 'Row %s is full.', '3task-toolbar-for-classic-editor' ),
					),
				)
			) . ';',
			'before'
		);
	}

	/**
	 * "Edit (classic editor)" and "Edit (block editor)" in the post list while users may choose.
	 *
	 * @param array<string, string> $actions Row actions.
	 * @param WP_Post               $post    Post.
	 * @return array<string, string>
	 */
	public static function row_actions( $actions, $post ) {
		if ( ! self::offers_both( $post ) || ! current_user_can( 'edit_post', $post->ID ) ) {
			return $actions;
		}
		$edit = get_edit_post_link( $post->ID, 'raw' );
		if ( ! $edit ) {
			return $actions;
		}
		$title = _draft_or_post_title( $post );
		$links = array(
			'threece_classic' => array(
				'classic',
				__( 'Edit (classic editor)', '3task-toolbar-for-classic-editor' ),
				/* translators: %s: post title */
				__( 'Edit &#8220;%s&#8221; in the classic editor', '3task-toolbar-for-classic-editor' ),
			),
			'threece_block'   => array(
				'block',
				__( 'Edit (block editor)', '3task-toolbar-for-classic-editor' ),
				/* translators: %s: post title */
				__( 'Edit &#8220;%s&#8221; in the block editor', '3task-toolbar-for-classic-editor' ),
			),
		);
		foreach ( $links as $key => $link ) {
			$actions[ $key ] = sprintf(
				'<a href="%1$s" aria-label="%2$s">%3$s</a>',
				esc_url( wp_nonce_url( add_query_arg( 'threece-editor', $link[0], $edit ), ThreeCE_Editor_Switch::link_action( $post->ID ), ThreeCE_Editor_Switch::LINK_NONCE ) ),
				esc_attr( sprintf( $link[2], $title ) ),
				esc_html( $link[1] )
			);
		}
		return $actions;
	}

	/**
	 * Shows next to the title which editor a post was last edited in.
	 *
	 * @param array<string, string> $states Post states.
	 * @param WP_Post               $post   Post.
	 * @return array<string, string>
	 */
	public static function post_state( $states, $post ) {
		if ( ! self::offers_both( $post ) ) {
			return $states;
		}
		$editor = ThreeCE_Editor_Switch::post_editor( $post->ID );
		if ( 'block' === $editor ) {
			$states['threece_editor'] = __( 'Block editor', '3task-toolbar-for-classic-editor' );
		} elseif ( 'classic' === $editor ) {
			$states['threece_editor'] = __( 'Classic editor', '3task-toolbar-for-classic-editor' );
		}
		return $states;
	}

	/**
	 * Users may choose and the post type can use the block editor at all.
	 *
	 * @param mixed $post Post from a filter, checked here.
	 */
	private static function offers_both( $post ): bool {
		return $post instanceof WP_Post
			&& ThreeCE_Editor_Switch::settings()['allow_users']
			&& use_block_editor_for_post_type( $post->post_type );
	}

	/**
	 * Both plugins decide the same thing, so the old one can go. Dashboard, plugins and our page only.
	 */
	public static function notice_classic_editor(): void {
		global $pagenow;
		if ( ! in_array( $pagenow, array( 'index.php', 'plugins.php', 'options-general.php' ), true ) || ! current_user_can( 'activate_plugins' ) ) {
			return;
		}
		if ( ! function_exists( 'is_plugin_active' ) ) {
			require_once ABSPATH . 'wp-admin/includes/plugin.php';
		}
		if ( ! is_plugin_active( 'classic-editor/classic-editor.php' ) ) {
			return;
		}
		printf(
			'<div class="notice notice-warning is-dismissible threece-notice-classic-editor"><p>%1$s <a href="%2$s">%3$s</a></p></div>',
			esc_html__( '3task Toolbar has taken over the settings of the plugin "Classic Editor". Both decide which editor opens, so please deactivate "Classic Editor".', '3task-toolbar-for-classic-editor' ),
			esc_url( admin_url( 'plugins.php' ) ),
			esc_html__( 'Go to plugins', '3task-toolbar-for-classic-editor' )
		);
	}

	/**
	 * Registers the settings page for users who may manage options.
	 */
	public static function menu(): void {
		add_options_page(
			__( '3task Toolbar', '3task-toolbar-for-classic-editor' ),
			__( '3task Toolbar', '3task-toolbar-for-classic-editor' ),
			'manage_options',
			self::PAGE,
			array( __CLASS__, 'render' )
		);
	}

	/**
	 * Links in the head of the page.
	 */
	const GUIDE_URL = 'https://wordpress.org/plugins/3task-toolbar-for-classic-editor/#faq';
	const FORUM_URL = 'https://wordpress.org/support/plugin/3task-toolbar-for-classic-editor/';
	/**
	 * The Pro add-on (toolbar per role, text blocks, pricing tables and more). Linked in the head of the settings page
	 * and in the plugins list, both dropped as soon as the add-on is active.
	 */
	const PRO_URL = 'https://www.3task.de/3task-toolbar-pro/';

	/**
	 * Whether the Pro add-on runs on this site.
	 */
	private static function pro_active(): bool {
		return class_exists( 'ThreeCE_Pro' );
	}

	/**
	 * Links on the plugins list: settings first, then the Pro add-on while it is not installed.
	 *
	 * @param mixed $links Links from WordPress.
	 * @return mixed
	 */
	public static function action_links( $links ) {
		if ( ! is_array( $links ) ) {
			return $links;
		}
		$own = array(
			'settings' => '<a href="' . esc_url( admin_url( 'options-general.php?page=' . self::PAGE ) ) . '">' . esc_html__( 'Settings', '3task-toolbar-for-classic-editor' ) . '</a>',
		);
		if ( ! self::pro_active() ) {
			$own['pro'] = '<a href="' . esc_url( self::PRO_URL ) . '" target="_blank" rel="noopener noreferrer">' . esc_html__( 'Pro', '3task-toolbar-for-classic-editor' ) . '</a>';
		}
		return $own + $links;
	}

	/**
	 * Tabler icons (MIT), inner SVG only; see credits.txt.
	 */
	const ICONS = array(
		'writing'     => '<path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2" /> <path d="M16 7h4" /> <path d="M18 19h-13a2 2 0 1 1 0 -4h4a2 2 0 1 0 0 -4h-3" />',
		'tool'        => '<path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" />',
		'pencil'      => '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
		'palette'     => '<path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M15.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
		'shield-lock' => '<path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /> <path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M12 12l0 2.5" />',
		'check'       => '<path d="M5 12l5 5l10 -10" />',
		'star'        => '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />',
		'users'       => '<path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /> <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" /> <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />',
		'sparkles'    => '<path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" />',
		'help'        => '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M12 17l0 .01" /> <path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" />',
		'book'        => '<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /> <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /> <path d="M3 6l0 13" /> <path d="M12 6l0 13" /> <path d="M21 6l0 13" />',
		'lifebuoy'    => '<path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M15 15l3.35 3.35" /> <path d="M9 15l-3.35 3.35" /> <path d="M5.65 5.65l3.35 3.35" /> <path d="M18.35 5.65l-3.35 3.35" />',
		'eye'         => '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
	);

	/**
	 * One icon as inline SVG, hidden from screen readers. The markup is fixed in ICONS, wp_kses keeps it to SVG.
	 *
	 * @param string $name Icon name from ICONS.
	 */
	private static function icon( string $name ): void {
		if ( ! isset( self::ICONS[ $name ] ) ) {
			return;
		}
		$path = array(
			'd'      => true,
			'stroke' => true,
			'fill'   => true,
		);
		echo wp_kses(
			'<svg xmlns="http://www.w3.org/2000/svg" class="threece-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' . self::ICONS[ $name ] . '</svg>',
			array(
				'svg'  => array(
					'xmlns'           => true,
					'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' => $path,
			)
		);
	}

	/**
	 * Settings page: head with name, version and help links, tabs with icons, the tab as cards and a side column.
	 */
	public static function render(): void {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}
		$tab  = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- only picks the tab to show.
		$tabs = array(
			'editor'  => array( 'writing', __( 'Editor', '3task-toolbar-for-classic-editor' ) ),
			'toolbar' => array( 'tool', __( 'Toolbar', '3task-toolbar-for-classic-editor' ) ),
			'look'    => array( 'pencil', __( 'Writing', '3task-toolbar-for-classic-editor' ) ),
			'design'  => array( 'palette', __( 'Design', '3task-toolbar-for-classic-editor' ) ),
		);
		/**
		 * Tabs of add-ons, shown after our own: key => array( icon name from ICONS, label, render callback ).
		 * The callback prints the cards of the tab; the side column stays.
		 *
		 * @since 1.0.2
		 * @param array<string, mixed> $extra Tabs by key: array( icon, label, callback ).
		 */
		$extra = apply_filters( 'threece_settings_tabs', array() );
		foreach ( (array) $extra as $key => $item ) {
			$key = sanitize_key( (string) $key );
			if ( '' === $key || isset( $tabs[ $key ] ) || ! is_array( $item ) || ! isset( $item[1], $item[2] ) || ! is_callable( $item[2] ) ) {
				continue;
			}
			$tabs[ $key ] = array( isset( $item[0] ) && isset( self::ICONS[ $item[0] ] ) ? $item[0] : 'star', (string) $item[1], $item[2] );
		}
		// Until 1.0.0 the privacy switch had its own tab; old links land where it lives now.
		$tab = 'privacy' === $tab ? 'look' : $tab;
		$tab = isset( $tabs[ $tab ] ) ? $tab : 'editor';
		?>
		<div class="wrap threece-settings">
			<header class="threece-head">
				<div class="threece-head__row">
					<span class="threece-logo"><?php self::icon( 'writing' ); ?></span>
					<h1><?php esc_html_e( '3task Toolbar', '3task-toolbar-for-classic-editor' ); ?></h1>
					<span class="threece-version"><?php echo esc_html( THREECE_VERSION ); ?></span>
					<span class="threece-head__links">
						<a href="<?php echo esc_url( self::GUIDE_URL ); ?>"><?php self::icon( 'book' ); ?><?php esc_html_e( 'Guide', '3task-toolbar-for-classic-editor' ); ?></a>
						<a href="<?php echo esc_url( self::FORUM_URL ); ?>"><?php self::icon( 'lifebuoy' ); ?><?php esc_html_e( 'Help in the forum', '3task-toolbar-for-classic-editor' ); ?></a>
						<?php if ( ! self::pro_active() ) : ?>
							<a href="<?php echo esc_url( self::PRO_URL ); ?>" target="_blank" rel="noopener noreferrer"><?php self::icon( 'sparkles' ); ?><?php esc_html_e( '3task Toolbar Pro', '3task-toolbar-for-classic-editor' ); ?></a>
						<?php endif; ?>
					</span>
				</div>
				<nav class="threece-nav" aria-label="<?php esc_attr_e( 'Settings sections', '3task-toolbar-for-classic-editor' ); ?>">
					<?php foreach ( $tabs as $key => $item ) : ?>
						<a href="<?php echo esc_url( admin_url( 'options-general.php?page=' . self::PAGE . ( 'editor' === $key ? '' : '&tab=' . $key ) ) ); ?>"<?php echo $key === $tab ? ' aria-current="page"' : ''; ?>><?php self::icon( $item[0] ); ?><?php echo esc_html( $item[1] ); ?></a>
					<?php endforeach; ?>
				</nav>
			</header>
			<hr class="wp-header-end" />
			<div class="threece-body">
				<div class="threece-main">
					<?php
					if ( 'toolbar' === $tab ) {
						self::render_toolbar();
					} elseif ( 'look' === $tab ) {
						self::render_look();
					} elseif ( 'design' === $tab ) {
						self::render_design();
					} elseif ( isset( $tabs[ $tab ][2] ) ) {
						call_user_func( $tabs[ $tab ][2] );
					} else {
						// The thank-you card builds its HTML only from fixed texts, escaped in ThreeCE_Thanks::card().
						echo ThreeCE_Thanks::card( 'editor' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
						self::render_editor();
					}
					?>
				</div>
				<aside class="threece-aside">
					<?php 'design' === $tab ? self::render_preview() : self::render_glance(); ?>
				</aside>
			</div>
		</div>
		<?php
	}

	/**
	 * Side column: what is set right now, read from the saved options, and a few words of help.
	 */
	private static function render_glance(): void {
		$editor  = ThreeCE_Editor_Switch::settings();
		$rows    = array_filter( ThreeCE_Toolbar::current_rows() );
		$buttons = 0;
		foreach ( $rows as $row ) {
			$buttons += count( array_diff( $row, array( '|' ) ) );
		}
		$lines = array( 'block' === $editor['editor'] ? __( 'Block editor for everyone', '3task-toolbar-for-classic-editor' ) : __( 'Classic editor for everyone', '3task-toolbar-for-classic-editor' ) );
		if ( $editor['allow_users'] ) {
			$lines[] = __( 'Users may choose their editor', '3task-toolbar-for-classic-editor' );
		}
		/* translators: 1: number of toolbar rows, 2: number of buttons */
		$lines[] = sprintf( __( 'Toolbar: %1$d rows, %2$d buttons', '3task-toolbar-for-classic-editor' ), count( $rows ), $buttons );
		$lines[] = ThreeCE_Privacy::settings()['disable_emoji'] ? __( 'No emoji images from outside servers', '3task-toolbar-for-classic-editor' ) : __( 'WordPress emoji script is on', '3task-toolbar-for-classic-editor' );
		/* translators: %s: name of the element style, for example "Plain" */
		$lines[] = sprintf( __( 'Element style: %s', '3task-toolbar-for-classic-editor' ), ThreeCE_Design::style_labels()[ ThreeCE_Design::settings()['style'] ] );
		?>
		<section class="threece-card">
			<h2><?php self::icon( 'check' ); ?><?php esc_html_e( 'At a glance', '3task-toolbar-for-classic-editor' ); ?></h2>
			<ul class="threece-glance">
				<?php foreach ( $lines as $line ) : ?>
					<li><?php self::icon( 'check' ); ?><?php echo esc_html( $line ); ?></li>
				<?php endforeach; ?>
			</ul>
		</section>
		<section class="threece-card">
			<h2><?php self::icon( 'help' ); ?><?php esc_html_e( 'In short', '3task-toolbar-for-classic-editor' ); ?></h2>
			<ul class="threece-short">
				<li><?php esc_html_e( 'Insert elements with the button “Insert element” above the editor, the grid button in the toolbar or “Element” in the Text tab.', '3task-toolbar-for-classic-editor' ); ?></li>
				<li><?php esc_html_e( 'Existing posts stay as they are.', '3task-toolbar-for-classic-editor' ); ?></li>
				<li><?php esc_html_e( 'Pick table styles directly at the table.', '3task-toolbar-for-classic-editor' ); ?></li>
			</ul>
			<p><a href="<?php echo esc_url( self::GUIDE_URL ); ?>"><?php esc_html_e( 'Read the guide', '3task-toolbar-for-classic-editor' ); ?></a> · <a href="<?php echo esc_url( self::FORUM_URL ); ?>"><?php esc_html_e( 'Ask in the forum', '3task-toolbar-for-classic-editor' ); ?></a></p>
		</section>
		<?php
	}

	/**
	 * Side column of the Design tab: real elements in the chosen style. settings.js switches style and accent
	 * while choosing; without JavaScript it shows the saved choice.
	 */
	private static function render_preview(): void {
		$design = ThreeCE_Design::settings();
		$accent = ThreeCE_Design::accents()[ $design['accent'] ] ?? '';
		$html   = do_shortcode(
			'[threece_accordion][threece_item title="' . esc_attr__( 'What does the service cost?', '3task-toolbar-for-classic-editor' ) . '" open="yes"]' . esc_html__( '60 euros a month.', '3task-toolbar-for-classic-editor' ) . '[/threece_item][threece_item title="' . esc_attr__( 'Can I cancel?', '3task-toolbar-for-classic-editor' ) . '"]' . esc_html__( 'Every month.', '3task-toolbar-for-classic-editor' ) . '[/threece_item][/threece_accordion]'
			. '[threece_notice type="success"]' . esc_html__( 'Your site is up to date.', '3task-toolbar-for-classic-editor' ) . '[/threece_notice]'
			. '[threece_button url="#"]' . esc_html__( 'Request service', '3task-toolbar-for-classic-editor' ) . '[/threece_button] [threece_button url="#" style="outline"]' . esc_html__( 'Prices', '3task-toolbar-for-classic-editor' ) . '[/threece_button]'
		);
		?>
		<section class="threece-card">
			<h2><?php self::icon( 'eye' ); ?><?php esc_html_e( 'Preview', '3task-toolbar-for-classic-editor' ); ?></h2>
			<div class="threece-live threece-style-<?php echo esc_attr( $design['style'] ); ?>" data-threece-accents="<?php echo esc_attr( (string) wp_json_encode( ThreeCE_Design::accents() ) ); ?>"<?php echo '' !== $accent ? ' style="--threece-element-accent:' . esc_attr( $accent ) . '"' : ''; ?> inert>
				<?php echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- built by our own shortcodes from fixed texts; each element escapes its values, and wp_kses_post would drop the SVG icons. ?>
			</div>
			<p class="threece-muted"><?php esc_html_e( 'Changes as you choose, saved only with the button.', '3task-toolbar-for-classic-editor' ); ?></p>
		</section>
		<?php
	}

	/**
	 * Tab "Design": element style and accent color, own settings group.
	 */
	private static function render_design(): void {
		$design  = ThreeCE_Design::settings();
		$name    = ThreeCE_Design::OPTION;
		$samples = do_shortcode( '[threece_notice title="' . esc_attr__( 'Good to know', '3task-toolbar-for-classic-editor' ) . '"]' . esc_html__( 'Cancel every month.', '3task-toolbar-for-classic-editor' ) . '[/threece_notice][threece_button url="#"]' . esc_html__( 'Request', '3task-toolbar-for-classic-editor' ) . '[/threece_button]' );
		$hints   = array(
			'schlicht' => __( 'fine lines', '3task-toolbar-for-classic-editor' ),
			'weich'    => __( 'surfaces, round', '3task-toolbar-for-classic-editor' ),
			'kontur'   => __( 'strong, square', '3task-toolbar-for-classic-editor' ),
		);
		$colors  = ThreeCE_Design::accent_labels();
		?>
		<form method="post" action="options.php" class="threece-form threece-design-form">
			<?php settings_fields( ThreeCE_Design::GROUP ); ?>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Element style', '3task-toolbar-for-classic-editor' ); ?></h2>
				<p class="threece-lead"><?php esc_html_e( 'How tabs, accordion, notice boxes and the other elements look on your site. Font and text color always come from the theme.', '3task-toolbar-for-classic-editor' ); ?></p>
				<fieldset class="threece-styles">
					<legend class="screen-reader-text"><?php esc_html_e( 'Element style', '3task-toolbar-for-classic-editor' ); ?></legend>
					<?php foreach ( ThreeCE_Design::style_labels() as $style => $label ) : ?>
						<label class="threece-choice threece-choice--style">
							<input type="radio" class="threece-choice__input" name="<?php echo esc_attr( $name ); ?>[style]" value="<?php echo esc_attr( $style ); ?>"<?php checked( $design['style'], $style ); ?> />
							<span class="threece-sample threece-style-<?php echo esc_attr( $style ); ?>" aria-hidden="true" inert><?php echo $samples; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- see render_preview(). ?></span>
							<span class="threece-choice__name"><?php echo esc_html( $label ); ?><small><?php echo esc_html( $hints[ $style ] ); ?></small></span>
						</label>
					<?php endforeach; ?>
				</fieldset>
			</section>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Accent color', '3task-toolbar-for-classic-editor' ); ?></h2>
				<p class="threece-lead"><?php esc_html_e( 'For buttons, active tabs and highlights. “From the theme” takes the link color of your theme.', '3task-toolbar-for-classic-editor' ); ?></p>
				<fieldset class="threece-swatches">
					<legend class="screen-reader-text"><?php esc_html_e( 'Accent color', '3task-toolbar-for-classic-editor' ); ?></legend>
					<input type="radio" class="threece-swatch__input" id="threece-accent-theme" name="<?php echo esc_attr( $name ); ?>[accent]" value="theme"<?php checked( $design['accent'], 'theme' ); ?> />
					<label class="threece-swatch threece-swatch--theme" for="threece-accent-theme"><?php self::icon( 'palette' ); ?><?php esc_html_e( 'From the theme', '3task-toolbar-for-classic-editor' ); ?></label>
					<?php foreach ( ThreeCE_Design::accents() as $key => $hex ) : ?>
						<input type="radio" class="threece-swatch__input" id="threece-accent-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( $name ); ?>[accent]" value="<?php echo esc_attr( $key ); ?>"<?php checked( $design['accent'], $key ); ?> />
						<label class="threece-swatch" for="threece-accent-<?php echo esc_attr( $key ); ?>" title="<?php echo esc_attr( $colors[ $key ] ); ?>" style="--threece-swatch:<?php echo esc_attr( $hex ); ?>"><span class="screen-reader-text"><?php echo esc_html( $colors[ $key ] ); ?></span></label>
					<?php endforeach; ?>
				</fieldset>
			</section>
			<?php submit_button(); ?>
		</form>
		<?php
	}

	/**
	 * Tab "Toolbar": one text field per row, readable and usable without JavaScript; toolbar-admin.js turns them
	 * into a preview of the real toolbar plus a palette of buttons. Own settings group, like the privacy tab.
	 * With Advanced Editor Tools active our rows have no effect, so the tab only says so.
	 */
	private static function render_toolbar(): void {
		if ( ThreeCE_Toolbar::other_toolbar_plugin() ) {
			?>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Toolbar', '3task-toolbar-for-classic-editor' ); ?></h2>
				<p class="threece-lead"><?php esc_html_e( 'Advanced Editor Tools is active and manages the toolbar.', '3task-toolbar-for-classic-editor' ); ?> <?php esc_html_e( 'Change the toolbar there, or deactivate Advanced Editor Tools to put it together here.', '3task-toolbar-for-classic-editor' ); ?></p>
			</section>
			<?php
			return;
		}
		$rows = ThreeCE_Toolbar::current_rows();
		/* translators: %d: row number */
		$label = __( 'Row %d', '3task-toolbar-for-classic-editor' );
		?>
		<form method="post" action="options.php" class="threece-toolbar-form threece-form">
			<?php settings_fields( ThreeCE_Toolbar::OPTION ); ?>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Your toolbar', '3task-toolbar-for-classic-editor' ); ?></h2>
				<p class="threece-lead"><?php esc_html_e( 'Click a button to move or remove it. Dragging with the mouse works too, and the keyboard works just as well. Row 1 is always visible, rows 2 to 4 open with the toolbar toggle.', '3task-toolbar-for-classic-editor' ); ?> <?php esc_html_e( 'Buttons from other plugins appear at the end of their row.', '3task-toolbar-for-classic-editor' ); ?></p>
				<p class="threece-tb-fallback"><?php esc_html_e( 'One field per row, button names separated by spaces. A vertical bar | adds a separator.', '3task-toolbar-for-classic-editor' ); ?></p>
				<div class="threece-toolbar-builder" data-threece-buttons="<?php echo esc_attr( (string) wp_json_encode( ThreeCE_Toolbar::catalog() ) ); ?>">
					<?php foreach ( $rows as $index => $row ) : ?>
						<p class="threece-toolbar-row">
							<label for="threece-toolbar-row-<?php echo (int) $index; ?>"><?php echo esc_html( sprintf( $label, $index + 1 ) ); ?></label><br />
							<input type="text" class="large-text code" id="threece-toolbar-row-<?php echo (int) $index; ?>" name="<?php echo esc_attr( ThreeCE_Toolbar::OPTION ); ?>[rows][<?php echo (int) $index; ?>]" value="<?php echo esc_attr( implode( ' ', $row ) ); ?>" />
						</p>
					<?php endforeach; ?>
				</div>
			</section>
			<section class="threece-card threece-tb-palette-card" aria-labelledby="threece-tb-palette-title" hidden>
				<h2 id="threece-tb-palette-title"><?php esc_html_e( 'Add buttons', '3task-toolbar-for-classic-editor' ); ?></h2>
				<div class="threece-tb-palette"></div>
			</section>
			<p class="submit">
				<?php submit_button( __( 'Save Changes', '3task-toolbar-for-classic-editor' ), 'primary', 'submit', false ); ?>
				<button type="submit" class="button" name="<?php echo esc_attr( ThreeCE_Toolbar::OPTION ); ?>[reset]" value="1"><?php esc_html_e( 'Reset to the WordPress default', '3task-toolbar-for-classic-editor' ); ?></button>
			</p>
		</form>
		<?php
	}

	/**
	 * One switch: a real checkbox with its label and an explanation tied to it.
	 *
	 * @param string $name  Field name.
	 * @param bool   $on    Checked.
	 * @param string $label Label.
	 * @param string $help  Explanation.
	 */
	private static function toggle( string $name, bool $on, string $label, string $help ): void {
		$id = 'threece-' . sanitize_html_class( str_replace( array( '[', ']' ), '-', $name ) );
		?>
		<div class="threece-toggle">
			<input type="checkbox" class="threece-toggle__input" role="switch" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( $name ); ?>" value="1"<?php checked( $on ); ?> aria-describedby="<?php echo esc_attr( $id ); ?>-help" />
			<span class="threece-toggle__text">
				<label for="<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $label ); ?></label>
				<span class="threece-muted" id="<?php echo esc_attr( $id ); ?>-help"><?php echo esc_html( $help ); ?></span>
			</span>
		</div>
		<?php
	}

	/**
	 * Tab "Writing": theme styles, clean paste and the emoji switch (since 1.0.1 in one tab) in one form of the
	 * group threece_look. A hidden field per option keeps the option an array when every switch is off; options.php
	 * would otherwise hand null to the sanitizer, which means "no form" and restores the factory defaults.
	 */
	private static function render_look(): void {
		$settings = ThreeCE_Editor_Look::settings();
		$name     = ThreeCE_Editor_Look::OPTION;
		$privacy  = ThreeCE_Privacy::settings();
		$pname    = ThreeCE_Privacy::OPTION;
		?>
		<form method="post" action="options.php" class="threece-form">
			<?php settings_fields( ThreeCE_Editor_Look::GROUP ); ?>
			<input type="hidden" name="<?php echo esc_attr( $name ); ?>[_form]" value="1" />
			<input type="hidden" name="<?php echo esc_attr( $pname ); ?>[_form]" value="1" />
			<section class="threece-card">
				<h2><?php esc_html_e( 'Theme styles in the editor', '3task-toolbar-for-classic-editor' ); ?></h2>
				<?php self::toggle( $name . '[theme_styles]', (bool) $settings['theme_styles'], __( 'Show posts in the editor with the fonts, colors and text width of the site', '3task-toolbar-for-classic-editor' ), __( 'Works with block themes (themes with a theme.json file). Other themes bring their own editor styles and stay as they are.', '3task-toolbar-for-classic-editor' ) ); ?>
			</section>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Clean paste', '3task-toolbar-for-classic-editor' ); ?></h2>
				<?php self::toggle( $name . '[clean_paste]', (bool) $settings['clean_paste'], __( 'Remove fonts, colors, sizes and empty paragraphs when pasting from Google Docs, Word or web pages', '3task-toolbar-for-classic-editor' ), __( 'Headings, bold, italic, links, lists, tables and images stay. The text then takes the look of your theme. Copying inside the editor is not changed.', '3task-toolbar-for-classic-editor' ) ); ?>
			</section>
			<section class="threece-card">
				<h2><?php esc_html_e( 'WordPress emoji script', '3task-toolbar-for-classic-editor' ); ?></h2>
				<?php self::toggle( $pname . '[disable_emoji]', (bool) $privacy['disable_emoji'], __( 'Turn off the emoji script', '3task-toolbar-for-classic-editor' ), __( 'WordPress loads a script on every page that replaces emoji with images from the WordPress.org servers on very old systems. Current browsers show emoji themselves. With this setting your pages, feeds and emails load nothing from there.', '3task-toolbar-for-classic-editor' ) ); ?>
			</section>
			<?php submit_button(); ?>
		</form>
		<?php
	}

	/**
	 * Tab "Editor": the two editors as picture cards (real radio buttons) and the switch for the users' choice.
	 */
	private static function render_editor(): void {
		$settings = ThreeCE_Editor_Switch::settings();
		$name     = ThreeCE_Editor_Switch::OPTION;
		$forced   = null !== ThreeCE_Editor_Switch::forced();
		if ( $forced ) :
			?>
			<div class="notice notice-info inline threece-forced">
				<p>
					<?php esc_html_e( 'The editor settings are fixed by your host, theme or another plugin and cannot be changed here.', '3task-toolbar-for-classic-editor' ); ?>
					<?php
					echo esc_html(
						sprintf(
							/* translators: 1: editor name, 2: yes or no */
							__( 'Default editor: %1$s. Users may switch: %2$s.', '3task-toolbar-for-classic-editor' ),
							'block' === $settings['editor'] ? __( 'Block editor', '3task-toolbar-for-classic-editor' ) : __( 'Classic editor', '3task-toolbar-for-classic-editor' ),
							$settings['allow_users'] ? __( 'yes', '3task-toolbar-for-classic-editor' ) : __( 'no', '3task-toolbar-for-classic-editor' )
						)
					);
					?>
				</p>
			</div>
			<?php
			return;
		endif;
		$choices = array(
			'classic' => array( __( 'Classic editor', '3task-toolbar-for-classic-editor' ), __( 'One writing area with a toolbar, like in a word processor.', '3task-toolbar-for-classic-editor' ) ),
			'block'   => array( __( 'Block editor', '3task-toolbar-for-classic-editor' ), __( 'Content as separate blocks, the default of WordPress.', '3task-toolbar-for-classic-editor' ) ),
		);
		?>
		<form method="post" action="options.php" class="threece-form">
			<?php settings_fields( 'threece' ); ?>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Which editor opens?', '3task-toolbar-for-classic-editor' ); ?></h2>
				<p class="threece-lead"><?php esc_html_e( 'For everyone who has not chosen otherwise.', '3task-toolbar-for-classic-editor' ); ?></p>
				<fieldset class="threece-choices">
					<legend class="screen-reader-text"><?php esc_html_e( 'Default editor for all users', '3task-toolbar-for-classic-editor' ); ?></legend>
					<?php foreach ( $choices as $value => $choice ) : ?>
						<label class="threece-choice">
							<input type="radio" class="threece-choice__input" name="<?php echo esc_attr( $name ); ?>[editor]" value="<?php echo esc_attr( $value ); ?>"<?php checked( $settings['editor'], $value ); ?> />
							<span class="threece-ill threece-ill--<?php echo esc_attr( $value ); ?>" aria-hidden="true"><span></span><span></span><span></span></span>
							<span class="threece-choice__name"><?php echo esc_html( $choice[0] ); ?></span>
							<span class="threece-muted"><?php echo esc_html( $choice[1] ); ?></span>
						</label>
					<?php endforeach; ?>
				</fieldset>
			</section>
			<section class="threece-card">
				<h2><?php esc_html_e( 'Choice for users', '3task-toolbar-for-classic-editor' ); ?></h2>
				<?php self::toggle( $name . '[allow_users]', (bool) $settings['allow_users'], __( 'Allow users to switch editors', '3task-toolbar-for-classic-editor' ), __( 'Each user picks a default editor in the profile, and every post opens in the editor it was last edited in.', '3task-toolbar-for-classic-editor' ) ); ?>
			</section>
			<?php submit_button(); ?>
		</form>
		<?php
	}
}