<?php
/**
 * Edit CSS on the live site.
 *
 * @package Adminkeep
 */

namespace Adminkeep\Admin;

use Adminkeep\Assets;
use Adminkeep\Feature\CustomCss;

defined( 'ABSPATH' ) || exit;

/**
 * A code panel docked on the front end that restyles the page as you type, the way the
 * Customizer's Additional CSS box did.
 *
 * The admin bar item is a plain link that reloads the current page with a flag. The flag switches
 * editing on or off in a cookie and is then redirected away, so the panel stays open on every
 * page the user goes to next, by link, form or back button alike, and the address bar stays clean.
 * Only pages in editing mode load the editor, so ordinary page views carry no extra script and no
 * CodeMirror.
 * Typing only changes the page in this browser; Save goes through the REST route, which checks
 * and stores the CSS the same way the Appearance screen does.
 *
 * Exists only while the feature is on: CustomCss::boot() is what builds it.
 */
class LiveCssPanel {

	/**
	 * Query flag that switches editing on (1) or off (0).
	 */
	const FLAG = 'adminkeep-css';

	/**
	 * Cookie holding the editing mode: the id of the user who switched it on. A session cookie,
	 * so editing never outlives the browser.
	 */
	const COOKIE = 'adminkeep_css_editing';

	/**
	 * Admin bar node id, script and style handle.
	 */
	const HANDLE = 'adminkeep-live-css';

	/**
	 * Textarea id, which the code editor attaches to.
	 */
	const EDITOR_ID = 'adminkeep-live-css-editor';

	/**
	 * Register hooks.
	 *
	 * @param bool $admin_bar Whether to add Edit CSS to the admin bar. Without it the panel is
	 *                        still reached from Appearance → Custom CSS, and closed from itself.
	 * @return void
	 */
	public function boot( $admin_bar = true ) {
		// Before redirect_canonical (10), so the flag is dealt with before anything else redirects.
		add_action( 'template_redirect', array( $this, 'switch_mode' ), 0 );
		add_action( 'wp_logout', array( __CLASS__, 'forget' ) );

		if ( $admin_bar ) {
			add_action( 'admin_bar_menu', array( $this, 'add_node' ), 80 );
		}

		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
		add_action( 'wp_footer', array( $this, 'render' ) );
	}

	/**
	 * Handle the flag: switch editing on or off, then come back to the same page without it.
	 *
	 * A user who may not edit CSS cannot switch it on; the flag is left alone and the page renders
	 * as usual.
	 *
	 * @return void
	 */
	public function switch_mode() {
		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Only switches the editor's visibility for the current user; saving is nonce-checked by the REST route.
		if ( is_admin() || ! isset( $_GET[ self::FLAG ] ) ) {
			return;
		}

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- As above.
		$on = '1' === sanitize_key( wp_unslash( $_GET[ self::FLAG ] ) );

		if ( $on && ! CustomCssScreen::can_edit() ) {
			return;
		}

		if ( $on ) {
			self::remember( get_current_user_id() );
		} else {
			self::forget();
		}

		wp_safe_redirect( remove_query_arg( self::FLAG ) );
		exit;
	}

	/**
	 * Switch editing on for a user.
	 *
	 * @param int $user_id User id.
	 * @return void
	 */
	private static function remember( $user_id ) {
		$_COOKIE[ self::COOKIE ] = (string) $user_id;
		self::send_cookie( (string) $user_id, 0 );
	}

	/**
	 * Switch editing off.
	 *
	 * @return void
	 */
	public static function forget() {
		unset( $_COOKIE[ self::COOKIE ] );
		self::send_cookie( '', time() - YEAR_IN_SECONDS );
	}

	/**
	 * Send the cookie header, when headers can still be sent.
	 *
	 * @param string $value   Value.
	 * @param int    $expires Expiry timestamp; 0 for a session cookie.
	 * @return void
	 */
	private static function send_cookie( $value, $expires ) {
		if ( headers_sent() ) {
			return;
		}

		setcookie(
			self::COOKIE,
			$value,
			array(
				'expires'  => $expires,
				'path'     => COOKIEPATH,
				'domain'   => COOKIE_DOMAIN,
				'secure'   => is_ssl(),
				'httponly' => true,
				'samesite' => 'Lax',
			)
		);
	}

	/**
	 * URL that opens the panel on a given front-end page.
	 *
	 * @param string $url Front-end URL. Defaults to the home page.
	 * @return string
	 */
	public static function url( $url = '' ) {
		return add_query_arg( self::FLAG, '1', '' === $url ? home_url( '/' ) : $url );
	}

	/**
	 * Whether this request is a front-end page in editing mode, for a user who may edit.
	 *
	 * The cookie must name the current user: one left behind by another account on the same
	 * browser opens nothing.
	 *
	 * @return bool
	 */
	public static function is_open() {
		if ( is_admin() || ! isset( $_COOKIE[ self::COOKIE ] ) || ! is_user_logged_in() ) {
			return false;
		}

		return absint( $_COOKIE[ self::COOKIE ] ) === get_current_user_id() && CustomCssScreen::can_edit();
	}

	/**
	 * Add "Edit CSS" to the admin bar on the front end. On an open panel it closes it instead.
	 *
	 * The link is relative to the current request, so it keeps whatever page and query the
	 * user is looking at.
	 *
	 * @param \WP_Admin_Bar $bar Admin bar.
	 * @return void
	 */
	public function add_node( $bar ) {
		if ( is_admin() || ! CustomCssScreen::can_edit() ) {
			return;
		}

		$open = self::is_open();

		$bar->add_node(
			array(
				'id'    => self::HANDLE,
				'title' => $open ? __( 'Close CSS editor', 'adminkeep' ) : __( 'Edit CSS', 'adminkeep' ),
				'href'  => add_query_arg( self::FLAG, $open ? '0' : '1' ),
			)
		);
	}

	/**
	 * Load the editor, only on a page with the panel open.
	 *
	 * @return void
	 */
	public function enqueue() {
		if ( ! self::is_open() ) {
			return;
		}

		// False when the user has switched syntax highlighting off in their profile: the plain
		// textarea is the editor then, as on the Appearance screen.
		$settings = wp_enqueue_code_editor( array( 'type' => 'text/css' ) );

		wp_enqueue_style( self::HANDLE, ADMINKEEP_URL . 'assets/css/live-css.css', array(), Assets::version( 'assets/css/live-css.css' ) );
		wp_enqueue_script(
			self::HANDLE,
			ADMINKEEP_URL . 'assets/js/live-css.js',
			false === $settings ? array() : array( 'code-editor' ),
			Assets::version( 'assets/js/live-css.js' ),
			true
		);

		// Not wp_localize_script(): it runs html_entity_decode() over top-level strings, which
		// would turn CSS such as content: "&copy;" into something else before the editor saw it.
		$data = array(
			'route'    => esc_url_raw( rest_url( RestController::NAMESPACE_V1 . '/custom-css' ) ),
			'nonce'    => wp_create_nonce( 'wp_rest' ),
			'css'      => CustomCss::css(),
			'editorId' => self::EDITOR_ID,
			'editor'   => false === $settings ? false : $settings,
			'i18n'     => array(
				'save'     => __( 'Save', 'adminkeep' ),
				'saving'   => __( 'Saving…', 'adminkeep' ),
				'saved'    => __( 'Saved', 'adminkeep' ),
				'unsaved'  => __( 'Unsaved changes', 'adminkeep' ),
				'failed'   => __( 'Could not save. Check your connection and try again.', 'adminkeep' ),
				'leave'    => __( 'Your CSS changes are not saved. Close the editor anyway?', 'adminkeep' ),
				'reverted' => __( 'Reverted', 'adminkeep' ),
			),
		);

		wp_add_inline_script( self::HANDLE, 'var adminkeepLiveCss = ' . wp_json_encode( $data ) . ';', 'before' );
	}

	/**
	 * Print the panel.
	 *
	 * @return void
	 */
	public function render() {
		if ( ! self::is_open() ) {
			return;
		}

		echo '<div id="' . esc_attr( self::HANDLE ) . '" class="adminkeep-live-css" role="complementary" aria-label="' . esc_attr__( 'Custom CSS editor', 'adminkeep' ) . '">';

		echo '<div class="adminkeep-live-css__head">';
		echo '<strong class="adminkeep-live-css__title">' . esc_html__( 'Custom CSS', 'adminkeep' ) . '</strong>';
		// A word rather than a cross: beside a code editor a bare × can read as "clear the CSS".
		printf(
			'<a class="adminkeep-live-css__close" href="%1$s" title="%2$s">%3$s</a>',
			esc_url( add_query_arg( self::FLAG, '0' ) ),
			esc_attr__( 'Close the CSS editor', 'adminkeep' ),
			esc_html__( 'Close', 'adminkeep' )
		);
		echo '</div>';

		printf(
			'<p class="adminkeep-live-css__hint">%s</p>',
			esc_html__( 'Changes show on this page as you type.', 'adminkeep' )
		);

		// The newline after the opening tag is for the browser, which drops one there; without it,
		// CSS starting with a newline would lose it.
		printf(
			'<label class="adminkeep-live-css__label" for="%1$s">%2$s</label><textarea id="%1$s" class="adminkeep-live-css__code" spellcheck="false">' . "\n" . '%3$s</textarea>',
			esc_attr( self::EDITOR_ID ),
			esc_html__( 'Custom CSS', 'adminkeep' ),
			esc_textarea( CustomCss::css() )
		);

		echo '<div class="adminkeep-live-css__error" role="alert" hidden></div>';

		// Revert on the far left, away from Save, so a slightly-off click on Save cannot throw the
		// edits away. The status sits beside Save, which it describes. Save starts disabled: the
		// editor holds the stored CSS, so there is nothing to save yet.
		echo '<div class="adminkeep-live-css__foot">';
		printf( '<button type="button" class="adminkeep-live-css__revert" disabled>%s</button>', esc_html__( 'Revert', 'adminkeep' ) );
		echo '<span class="adminkeep-live-css__status" role="status" aria-live="polite"></span>';
		printf(
			'<button type="button" class="adminkeep-live-css__save" title="%1$s" disabled><span class="adminkeep-live-css__spinner" aria-hidden="true"></span><span class="adminkeep-live-css__save-label">%2$s</span></button>',
			esc_attr__( 'Ctrl+S or Cmd+S saves too.', 'adminkeep' ),
			esc_html__( 'Save', 'adminkeep' )
		);
		echo '</div>';

		echo '</div>';
	}
}