<?php
/**
 * Shared circle color field (picker + hex + reset).
 *
 * Markup and assets match Settings / Login Page Customizer:
 * .wpps-color-field-row, .wpps-color-picker-circle, .wpps-color-code-input.
 *
 * @package WP_PowerSuite\Admin
 * @since 1.0.0
 */

namespace WP_PowerSuite\Admin;

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

/**
 * Reusable color control for module admin screens.
 */
final class ColorField {

	private static bool $enqueued = false;

	/**
	 * Enqueue shared color-panel CSS/JS (safe to call multiple times).
	 */
	public static function enqueue(): void {
		if ( self::$enqueued ) {
			return;
		}
		self::$enqueued = true;

		$base = defined( 'WP_POWERSUITE_PLUGIN_URL' ) ? WP_POWERSUITE_PLUGIN_URL : '';
		$dir  = defined( 'WP_POWERSUITE_PLUGIN_DIR' ) ? WP_POWERSUITE_PLUGIN_DIR : '';
		if ( $base === '' ) {
			return;
		}

		$css = 'src/Admin/Assets/color-panel.css';
		$js  = 'src/Admin/Assets/color-panel.js';
		$ver_css = ( $dir !== '' && is_readable( $dir . $css ) ) ? (string) filemtime( $dir . $css ) : '1.0';
		$ver_js  = ( $dir !== '' && is_readable( $dir . $js ) ) ? (string) filemtime( $dir . $js ) : '1.0';

		$deps = [];
		if ( wp_style_is( 'wp-powersuite-admin', 'registered' ) || wp_style_is( 'wp-powersuite-admin', 'enqueued' ) ) {
			$deps[] = 'wp-powersuite-admin';
		}

		wp_enqueue_style( 'wp-powersuite-color-panel', $base . $css, $deps, $ver_css );
		wp_enqueue_script( 'wp-powersuite-color-panel', $base . $js, [ 'jquery' ], $ver_js, true );
	}

	/**
	 * Render a circle color picker with hex input and reset.
	 *
	 * The native color input carries the form `name` (submitted value).
	 * The hex text field syncs via color-panel.js.
	 *
	 * @param array{
	 *   id?: string,
	 *   name?: string,
	 *   value?: string,
	 *   default?: string,
	 *   label?: string,
	 *   class?: string,
	 *   echo?: bool
	 * } $args
	 * @return string HTML when echo is false.
	 */
	public static function render( array $args = [] ): string {
		$id      = sanitize_html_class( (string) ( $args['id'] ?? 'wpps-color-' . wp_unique_id() ) );
		$name    = (string) ( $args['name'] ?? '' );
		$default = sanitize_hex_color( (string) ( $args['default'] ?? '#2271b1' ) ) ?: '#2271b1';
		$value   = sanitize_hex_color( (string) ( $args['value'] ?? $default ) ) ?: $default;
		$label   = (string) ( $args['label'] ?? '' );
		$extra   = trim( (string) ( $args['class'] ?? '' ) );
		$echo    = ! array_key_exists( 'echo', $args ) || ! empty( $args['echo'] );

		$picker_class = trim( 'wpps-color-picker-circle ' . $extra );

		ob_start();
		?>
		<div class="wpps-color-field-row">
			<?php if ( $label !== '' ) : ?>
				<span class="wpps-color-field-row__label"><?php echo esc_html( $label ); ?></span>
			<?php endif; ?>
			<input
				type="color"
				id="<?php echo esc_attr( $id ); ?>"
				<?php echo $name !== '' ? 'name="' . esc_attr( $name ) . '"' : ''; ?>
				value="<?php echo esc_attr( $value ); ?>"
				class="<?php echo esc_attr( $picker_class ); ?>"
				data-default-color="<?php echo esc_attr( $default ); ?>"
				aria-label="<?php echo esc_attr( $label !== '' ? $label : __( 'Pick color', 'wp-powersuite' ) ); ?>"
			/>
			<div class="wpps-color-code-wrap">
				<input
					type="text"
					class="wpps-color-code-input"
					data-color-input="<?php echo esc_attr( $id ); ?>"
					data-default-color="<?php echo esc_attr( $default ); ?>"
					value="<?php echo esc_attr( $value ); ?>"
					maxlength="7"
					spellcheck="false"
					autocomplete="off"
					aria-label="<?php esc_attr_e( 'Hex color code', 'wp-powersuite' ); ?>"
				/>
				<button
					type="button"
					class="wpps-color-reset button-link"
					data-default-color="<?php echo esc_attr( $default ); ?>"
					aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"
				>
					<span class="dashicons dashicons-undo" aria-hidden="true"></span>
				</button>
			</div>
		</div>
		<?php
		$html = (string) ob_get_clean();

		if ( $echo ) {
			echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- built with escaping above.
			return '';
		}

		return $html;
	}
}
