<?php
/**
 * Shared Typography Helper – reusable typography popover for admin forms.
 * Used by Login Page Customizer and other modules.
 *
 * @package WP_PowerSuite\Admin
 */

namespace WP_PowerSuite\Admin;

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

final class TypographyHelper {

	/** @return array<string, string> */
	public static function getFontFamilyPresets(): array {
		$system = [
			''                              => __( 'Default', 'wp-powersuite' ),
			'inherit'                       => __( 'Inherit', 'wp-powersuite' ),
			'Arial, sans-serif'             => 'Arial',
			'Helvetica, Arial, sans-serif'  => 'Helvetica',
			'Georgia, serif'                => 'Georgia',
			"'Times New Roman', Times, serif" => 'Times New Roman',
			'Verdana, Geneva, sans-serif'   => 'Verdana',
			'Tahoma, Geneva, sans-serif'    => 'Tahoma',
			"'Trebuchet MS', Helvetica, sans-serif" => 'Trebuchet MS',
			"'Palatino Linotype', Palatino, serif" => 'Palatino Linotype',
			"'Courier New', Courier, monospace" => 'Courier New',
			'Impact, Charcoal, sans-serif'  => 'Impact',
			'system-ui, -apple-system, sans-serif' => __( 'System UI', 'wp-powersuite' ),
		];
		$google = [];
		if ( file_exists( __DIR__ . '/GoogleFonts.php' ) ) {
			$google = (array) include __DIR__ . '/GoogleFonts.php';
		}
		return array_merge( $system, $google );
	}

	/**
	 * Output the device icons (desktop/tablet/mobile) chunk used in typography rows.
	 */
	public static function deviceIcons(): void {
		?>
		<div class="wpps-device-icons-wrapper">
			<div class="wpps-device-icons" role="group" aria-label="<?php esc_attr_e( 'Device', 'wp-powersuite' ); ?>">
				<button type="button" class="wpps-device-icon" data-device="mobile" title="<?php esc_attr_e( 'Mobile', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-smartphone" aria-hidden="true"></span></button>
				<button type="button" class="wpps-device-icon" data-device="tablet" title="<?php esc_attr_e( 'Tablet', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-tablet" aria-hidden="true"></span></button>
				<button type="button" class="wpps-device-icon is-active" data-device="desktop" title="<?php esc_attr_e( 'Desktop', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-desktop" aria-hidden="true"></span></button>
			</div>
		</div>
		<?php
	}

	/**
	 * Render typography popover (font family, weight, size, line height, letter spacing, etc.).
	 *
	 * @param string              $module_id   Module ID for input IDs.
	 * @param string              $prefix      Setting key prefix (e.g. 'widget_style_heading', 'field', 'label').
	 * @param array<string,mixed>  $vars        Current values: font_family, font_weight, font_size_desktop, etc.
	 * @param string              $extra_class Optional extra CSS class for the popover.
	 * @param string              $name_prefix Optional. When set (e.g. 'form_design'), outputs name="form_design[label_font_family]" instead of name="label_font_family".
	 */
	public static function renderTypographyPopover( string $module_id, string $prefix, array $vars = [], string $extra_class = '', string $name_prefix = '' ): void {
		$p   = $prefix . '_';
		$name_base = $name_prefix !== '' ? $name_prefix . '[' . $prefix . '_' : $p;
		$name_end  = $name_prefix !== '' ? ']' : '';
		$ff  = isset( $vars['font_family'] ) ? (string) $vars['font_family'] : '';
		$fw  = isset( $vars['font_weight'] ) ? (string) $vars['font_weight'] : '';
		$fsd = isset( $vars['font_size_desktop'] ) ? (string) $vars['font_size_desktop'] : '';
		$fst = isset( $vars['font_size_tablet'] ) ? (string) $vars['font_size_tablet'] : '';
		$fsm = isset( $vars['font_size_mobile'] ) ? (string) $vars['font_size_mobile'] : '';
		$tt  = isset( $vars['text_transform'] ) ? (string) $vars['text_transform'] : '';
		$fsty = isset( $vars['font_style'] ) ? (string) $vars['font_style'] : '';
		$lhd = isset( $vars['line_height_desktop'] ) ? (string) $vars['line_height_desktop'] : '';
		$lht = isset( $vars['line_height_tablet'] ) ? (string) $vars['line_height_tablet'] : '';
		$lhm = isset( $vars['line_height_mobile'] ) ? (string) $vars['line_height_mobile'] : '';
		$lsd = isset( $vars['letter_spacing_desktop'] ) ? (string) $vars['letter_spacing_desktop'] : '';
		$lst = isset( $vars['letter_spacing_tablet'] ) ? (string) $vars['letter_spacing_tablet'] : '';
		$lsm = isset( $vars['letter_spacing_mobile'] ) ? (string) $vars['letter_spacing_mobile'] : '';

		$presets = self::getFontFamilyPresets();
		$is_custom = $ff !== '' && ! array_key_exists( $ff, $presets );
		$popover_class = 'wpps-typography-popover' . ( $extra_class !== '' ? ' ' . esc_attr( $extra_class ) : '' );
		?>
		<div class="<?php echo esc_attr( $popover_class ); ?>" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_typography_popover' ); ?>" role="dialog" aria-label="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>" style="display:none;">
			<div class="wpps-typography-popover-title"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></div>
			<input type="hidden" name="<?php echo esc_attr( $name_base ); ?>font_family<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_family" value="<?php echo esc_attr( $ff ); ?>" />
			<div class="wpps-typography-row wpps-font-family-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_preset' ); ?>"><?php esc_html_e( 'Font Family', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_preset' ); ?>" class="wpps-font-family-preset regular-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_family">
					<?php foreach ( $presets as $val => $label ) : ?>
						<option value="<?php echo esc_attr( $val ); ?>" <?php selected( $ff, $val ); ?>><?php echo esc_html( $label ); ?></option>
					<?php endforeach; ?>
					<option value="__custom__" <?php selected( $is_custom, true ); ?>><?php esc_html_e( 'Custom...', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-row wpps-font-family-custom-row" style="<?php echo esc_attr( $is_custom ? '' : 'display:none;' ); ?>">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_custom' ); ?>"><?php esc_html_e( 'Custom font stack', 'wp-powersuite' ); ?></label>
				<input type="text" id="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_custom' ); ?>" class="wpps-font-family-custom regular-text" placeholder="<?php esc_attr_e( "e.g. 'Open Sans', sans-serif", 'wp-powersuite' ); ?>" value="<?php echo $is_custom ? esc_attr( $ff ) : ''; ?>" />
				<p class="description" style="margin: 6px 0 0;"><?php esc_html_e( 'Use any font name or stack. Enqueue the font (e.g. Google Fonts) in your theme or plugin for it to load.', 'wp-powersuite' ); ?></p>
			</div>
			<div class="wpps-typography-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_weight' ); ?>"><?php esc_html_e( 'Font Weight', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'font_weight' ); ?>" name="<?php echo esc_attr( $name_base ); ?>font_weight<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_weight">
					<option value="" <?php selected( $fw, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="300" <?php selected( $fw, '300' ); ?>><?php esc_html_e( '300 (Light)', 'wp-powersuite' ); ?></option>
					<option value="400" <?php selected( $fw, '400' ); ?>><?php esc_html_e( '400 (Normal)', 'wp-powersuite' ); ?></option>
					<option value="500" <?php selected( $fw, '500' ); ?>><?php esc_html_e( '500 (Medium)', 'wp-powersuite' ); ?></option>
					<option value="600" <?php selected( $fw, '600' ); ?>><?php esc_html_e( '600 (Semi-bold)', 'wp-powersuite' ); ?></option>
					<option value="700" <?php selected( $fw, '700' ); ?>><?php esc_html_e( '700 (Bold)', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-responsive-row" role="group" aria-labelledby="<?php echo esc_attr( $module_id . '_' . $p . 'font_size_heading' ); ?>">
				<span id="<?php echo esc_attr( $module_id . '_' . $p . 'font_size_heading' ); ?>" class="wpps-typography-row-label"><?php esc_html_e( 'Font Size', 'wp-powersuite' ); ?></span>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-font-size-inputs">
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-desktop">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'font_size_desktop' ); ?>" name="<?php echo esc_attr( $name_base ); ?>font_size_desktop<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_desktop" value="<?php echo esc_attr( $fsd ); ?>" inputmode="numeric" data-wpps-min="10" data-wpps-max="72" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Font size in pixels (desktop)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-tablet" style="display:none;">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'font_size_tablet' ); ?>" name="<?php echo esc_attr( $name_base ); ?>font_size_tablet<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_tablet" value="<?php echo esc_attr( $fst ); ?>" inputmode="numeric" data-wpps-min="10" data-wpps-max="72" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Font size in pixels (tablet)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-mobile" style="display:none;">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'font_size_mobile' ); ?>" name="<?php echo esc_attr( $name_base ); ?>font_size_mobile<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_mobile" value="<?php echo esc_attr( $fsm ); ?>" inputmode="numeric" data-wpps-min="10" data-wpps-max="72" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Font size in pixels (mobile)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
			</div>
			<div class="wpps-typography-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'text_transform' ); ?>"><?php esc_html_e( 'Text Transform', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'text_transform' ); ?>" name="<?php echo esc_attr( $name_base ); ?>text_transform<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>text_transform">
					<option value="" <?php selected( $tt, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="none" <?php selected( $tt, 'none' ); ?>><?php esc_html_e( 'None', 'wp-powersuite' ); ?></option>
					<option value="lowercase" <?php selected( $tt, 'lowercase' ); ?>><?php esc_html_e( 'Lowercase', 'wp-powersuite' ); ?></option>
					<option value="uppercase" <?php selected( $tt, 'uppercase' ); ?>><?php esc_html_e( 'Uppercase', 'wp-powersuite' ); ?></option>
					<option value="capitalize" <?php selected( $tt, 'capitalize' ); ?>><?php esc_html_e( 'Capitalize', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_style' ); ?>"><?php esc_html_e( 'Font Style', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'font_style' ); ?>" name="<?php echo esc_attr( $name_base ); ?>font_style<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_style">
					<option value="" <?php selected( $fsty, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="normal" <?php selected( $fsty, 'normal' ); ?>><?php esc_html_e( 'Normal', 'wp-powersuite' ); ?></option>
					<option value="italic" <?php selected( $fsty, 'italic' ); ?>><?php esc_html_e( 'Italic', 'wp-powersuite' ); ?></option>
					<option value="oblique" <?php selected( $fsty, 'oblique' ); ?>><?php esc_html_e( 'Oblique', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-responsive-row" role="group" aria-labelledby="<?php echo esc_attr( $module_id . '_' . $p . 'line_height_heading' ); ?>">
				<span id="<?php echo esc_attr( $module_id . '_' . $p . 'line_height_heading' ); ?>" class="wpps-typography-row-label"><?php esc_html_e( 'Line Height', 'wp-powersuite' ); ?></span>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-line-height-inputs">
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-desktop">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'line_height_desktop' ); ?>" name="<?php echo esc_attr( $name_base ); ?>line_height_desktop<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_desktop" value="<?php echo esc_attr( $lhd ); ?>" inputmode="decimal" data-wpps-min="0.5" data-wpps-max="3" data-wpps-step="0.1" aria-label="<?php esc_attr_e( 'Unitless line height (desktop)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-tablet" style="display:none;">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'line_height_tablet' ); ?>" name="<?php echo esc_attr( $name_base ); ?>line_height_tablet<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_tablet" value="<?php echo esc_attr( $lht ); ?>" inputmode="decimal" data-wpps-min="0.5" data-wpps-max="3" data-wpps-step="0.1" aria-label="<?php esc_attr_e( 'Unitless line height (tablet)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-mobile" style="display:none;">
						<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'line_height_mobile' ); ?>" name="<?php echo esc_attr( $name_base ); ?>line_height_mobile<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_mobile" value="<?php echo esc_attr( $lhm ); ?>" inputmode="decimal" data-wpps-min="0.5" data-wpps-max="3" data-wpps-step="0.1" aria-label="<?php esc_attr_e( 'Unitless line height (mobile)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
				</div>
			</div>
			<div class="wpps-typography-responsive-row" role="group" aria-labelledby="<?php echo esc_attr( $module_id . '_' . $p . 'letter_spacing_heading' ); ?>">
				<span id="<?php echo esc_attr( $module_id . '_' . $p . 'letter_spacing_heading' ); ?>" class="wpps-typography-row-label"><?php esc_html_e( 'Letter Spacing', 'wp-powersuite' ); ?></span>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-letter-spacing-inputs">
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-desktop">
						<input type="text" id="<?php echo esc_attr( $module_id . '_' . $p . 'letter_spacing_desktop' ); ?>" name="<?php echo esc_attr( $name_base ); ?>letter_spacing_desktop<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_desktop" value="<?php echo esc_attr( $lsd ); ?>" placeholder="0" aria-label="<?php esc_attr_e( 'Letter spacing (desktop)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-tablet" style="display:none;">
						<input type="text" id="<?php echo esc_attr( $module_id . '_' . $p . 'letter_spacing_tablet' ); ?>" name="<?php echo esc_attr( $name_base ); ?>letter_spacing_tablet<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_tablet" value="<?php echo esc_attr( $lst ); ?>" placeholder="0" aria-label="<?php esc_attr_e( 'Letter spacing (tablet)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-mobile" style="display:none;">
						<input type="text" id="<?php echo esc_attr( $module_id . '_' . $p . 'letter_spacing_mobile' ); ?>" name="<?php echo esc_attr( $name_base ); ?>letter_spacing_mobile<?php echo esc_attr( $name_end ); ?>" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_mobile" value="<?php echo esc_attr( $lsm ); ?>" placeholder="0" aria-label="<?php echo esc_attr_e( 'Letter spacing (mobile)', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Extract Google Font name from a font stack for loading via Google Fonts API.
	 * E.g. "'Open Sans', sans-serif" returns "Open Sans".
	 *
	 * @param string $stack Font stack (e.g. "'Open Sans', sans-serif").
	 * @return string|null Font name or null if not a Google Font stack.
	 */
	public static function getGoogleFontNameFromStack( string $stack ): ?string {
		$stack = trim( $stack );
		if ( $stack === '' || $stack === 'inherit' ) {
			return null;
		}
		if ( preg_match( "/^'([^']+)'\\s*,\s*(?:sans-serif|serif|monospace)/", $stack, $m ) ) {
			return $m[1];
		}
		if ( preg_match( '/^"([^"]+)"\s*,\s*(?:sans-serif|serif|monospace)/', $stack, $m ) ) {
			return $m[1];
		}
		return null;
	}

	/**
	 * Check if typography has any non-empty values.
	 *
	 * @param array<string,mixed> $vars Typography vars (font_family, font_size_desktop, etc.).
	 * @return bool
	 */
	public static function hasTypography( array $vars ): bool {
		$keys = [
			'font_family', 'font_weight', 'font_size_desktop', 'font_size_tablet', 'font_size_mobile',
			'text_transform', 'font_style', 'line_height_desktop', 'line_height_tablet', 'line_height_mobile',
			'letter_spacing_desktop', 'letter_spacing_tablet', 'letter_spacing_mobile',
		];
		foreach ( $keys as $k ) {
			if ( isset( $vars[ $k ] ) && (string) $vars[ $k ] !== '' ) {
				return true;
			}
		}
		return false;
	}
}
