<?php
/**
 * Admin Settings and Live Desktop/Mobile Preview for AbhinavDev Announcement Bar.
 *
 * @package AbhinavDev_Announcement_Bar
 */

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

/**
 * Class ADAB_Settings
 */
class ADAB_Settings {

	/**
	 * Constructor.
	 */
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'register_admin_menu' ) );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );
	}

	/**
	 * Add submenu page under Settings (and top-level shortcut optionally or Settings menu).
	 */
	public function register_admin_menu() {
		add_options_page(
			__( 'AbhinavDev Announcement Bar', 'abhinavdev-announcement-bar' ),
			__( 'Announcement Bar', 'abhinavdev-announcement-bar' ),
			'manage_options',
			'abhinavdev-announcement-bar',
			array( $this, 'render_settings_page' )
		);
	}

	/**
	 * Register plugin option and sanitization callback.
	 */
	public function register_settings() {
		register_setting(
			'adab_settings_group',
			ADAB_OPTION_KEY,
			array(
				'type'              => 'array',
				'sanitize_callback' => array( $this, 'sanitize_settings' ),
				'default'           => adab_get_default_settings(),
			)
		);
	}

	/**
	 * Enqueue admin scripts and styles only on our plugin settings page.
	 *
	 * @param string $hook_suffix Current admin page hook.
	 */
	public function enqueue_admin_assets( $hook_suffix ) {
		if ( 'settings_page_abhinavdev-announcement-bar' !== $hook_suffix ) {
			return;
		}

		// Enqueue shared frontend CSS/JS so the Live Preview renders identically to the live site.
		wp_enqueue_style(
			'adab-frontend',
			ADAB_PLUGIN_URL . 'assets/css/adab-frontend.css',
			array(),
			ADAB_VERSION
		);

		$settings   = adab_get_settings();
		$inline_css = ADAB_Frontend::generate_inline_css_vars( $settings );
		wp_add_inline_style( 'adab-frontend', $inline_css );

		wp_enqueue_style(
			'adab-admin',
			ADAB_PLUGIN_URL . 'assets/css/adab-admin.css',
			array( 'adab-frontend' ),
			ADAB_VERSION
		);

		wp_enqueue_script(
			'adab-frontend',
			ADAB_PLUGIN_URL . 'assets/js/adab-frontend.js',
			array(),
			ADAB_VERSION,
			true
		);

		wp_enqueue_script(
			'adab-admin',
			ADAB_PLUGIN_URL . 'assets/js/adab-admin.js',
			array( 'adab-frontend' ),
			ADAB_VERSION,
			true
		);
	}

	/**
	 * Sanitize all incoming settings before saving to the database.
	 *
	 * @param array $input Raw input array from form submission.
	 * @return array Sanitized settings array.
	 */
	public function sanitize_settings( $input ) {
		$defaults = adab_get_default_settings();
		if ( ! is_array( $input ) ) {
			return $defaults;
		}

		$clean = array();

		// Booleans / Checkboxes.
		$clean['enabled']           = ! empty( $input['enabled'] ) ? 1 : 0;
		$clean['dismissible']       = ! empty( $input['dismissible'] ) ? 1 : 0;
		$clean['cta_enabled']       = ! empty( $input['cta_enabled'] ) ? 1 : 0;
		$clean['cta_new_tab']       = ! empty( $input['cta_new_tab'] ) ? 1 : 0;
		$clean['countdown_enabled'] = ! empty( $input['countdown_enabled'] ) ? 1 : 0;

		// Select / Enum options.
		$clean['display_mode'] = isset( $input['display_mode'] ) && in_array( $input['display_mode'], array( 'static', 'scrolling', 'sliding' ), true )
			? $input['display_mode']
			: $defaults['display_mode'];

		$clean['slide_direction'] = isset( $input['slide_direction'] ) && in_array( $input['slide_direction'], array( 'vertical', 'horizontal' ), true )
			? $input['slide_direction']
			: $defaults['slide_direction'];

		$clean['position'] = isset( $input['position'] ) && in_array( $input['position'], array( 'top_sticky', 'top_static', 'bottom_sticky' ), true )
			? $input['position']
			: $defaults['position'];

		$clean['target_pages'] = isset( $input['target_pages'] ) && in_array( $input['target_pages'], array( 'all', 'homepage' ), true )
			? $input['target_pages']
			: $defaults['target_pages'];

		$clean['device_visibility'] = isset( $input['device_visibility'] ) && in_array( $input['device_visibility'], array( 'all', 'desktop_only', 'mobile_only' ), true )
			? $input['device_visibility']
			: $defaults['device_visibility'];

		$clean['bg_type'] = isset( $input['bg_type'] ) && in_array( $input['bg_type'], array( 'solid', 'gradient' ), true )
			? $input['bg_type']
			: $defaults['bg_type'];

		$clean['font_weight'] = isset( $input['font_weight'] ) && in_array( (string) $input['font_weight'], array( '400', '500', '600', '700' ), true )
			? (string) $input['font_weight']
			: $defaults['font_weight'];

		// Messages array.
		$clean['messages'] = array();
		if ( isset( $input['messages'] ) && is_array( $input['messages'] ) ) {
			foreach ( $input['messages'] as $msg ) {
				$sanitized_msg = trim( wp_kses_post( $msg ) );
				if ( '' !== $sanitized_msg ) {
					$clean['messages'][] = $sanitized_msg;
				}
			}
		}
		if ( empty( $clean['messages'] ) ) {
			$clean['messages'] = array( $defaults['messages'][0] );
		}

		// Numeric ranges.
		$clean['scroll_speed']        = isset( $input['scroll_speed'] ) ? max( 5, min( 90, absint( $input['scroll_speed'] ) ) ) : $defaults['scroll_speed'];
		$clean['slide_interval']      = isset( $input['slide_interval'] ) ? max( 2, min( 30, absint( $input['slide_interval'] ) ) ) : $defaults['slide_interval'];
		$clean['reappear_days']       = isset( $input['reappear_days'] ) ? max( 0, min( 365, absint( $input['reappear_days'] ) ) ) : $defaults['reappear_days'];
		$clean['bg_gradient_angle']   = isset( $input['bg_gradient_angle'] ) ? max( 0, min( 360, intval( $input['bg_gradient_angle'] ) ) ) : $defaults['bg_gradient_angle'];
		$clean['font_size_desktop']   = isset( $input['font_size_desktop'] ) ? max( 10, min( 32, absint( $input['font_size_desktop'] ) ) ) : $defaults['font_size_desktop'];
		$clean['font_size_mobile']    = isset( $input['font_size_mobile'] ) ? max( 10, min( 28, absint( $input['font_size_mobile'] ) ) ) : $defaults['font_size_mobile'];
		$clean['bar_padding_desktop'] = isset( $input['bar_padding_desktop'] ) ? max( 4, min( 36, absint( $input['bar_padding_desktop'] ) ) ) : $defaults['bar_padding_desktop'];
		$clean['bar_padding_mobile']  = isset( $input['bar_padding_mobile'] ) ? max( 4, min( 28, absint( $input['bar_padding_mobile'] ) ) ) : $defaults['bar_padding_mobile'];
		$clean['cta_border_radius']   = isset( $input['cta_border_radius'] ) ? max( 0, min( 50, absint( $input['cta_border_radius'] ) ) ) : $defaults['cta_border_radius'];

		// Colors.
		$clean['bg_color']        = ! empty( $input['bg_color'] ) && sanitize_hex_color( $input['bg_color'] ) ? sanitize_hex_color( $input['bg_color'] ) : $defaults['bg_color'];
		$clean['bg_gradient_end'] = ! empty( $input['bg_gradient_end'] ) && sanitize_hex_color( $input['bg_gradient_end'] ) ? sanitize_hex_color( $input['bg_gradient_end'] ) : $defaults['bg_gradient_end'];
		$clean['text_color']      = ! empty( $input['text_color'] ) && sanitize_hex_color( $input['text_color'] ) ? sanitize_hex_color( $input['text_color'] ) : $defaults['text_color'];
		$clean['cta_bg_color']    = ! empty( $input['cta_bg_color'] ) && sanitize_hex_color( $input['cta_bg_color'] ) ? sanitize_hex_color( $input['cta_bg_color'] ) : $defaults['cta_bg_color'];
		$clean['cta_text_color']  = ! empty( $input['cta_text_color'] ) && sanitize_hex_color( $input['cta_text_color'] ) ? sanitize_hex_color( $input['cta_text_color'] ) : $defaults['cta_text_color'];

		// Text & URLs.
		$clean['cta_text']        = isset( $input['cta_text'] ) ? sanitize_text_field( $input['cta_text'] ) : $defaults['cta_text'];
		$clean['cta_url']         = isset( $input['cta_url'] ) ? esc_url_raw( $input['cta_url'] ) : $defaults['cta_url'];
		$clean['countdown_label'] = isset( $input['countdown_label'] ) ? sanitize_text_field( $input['countdown_label'] ) : $defaults['countdown_label'];
		$clean['countdown_end']   = isset( $input['countdown_end'] ) ? sanitize_text_field( $input['countdown_end'] ) : $defaults['countdown_end'];

		return $clean;
	}

	/**
	 * Render the plugin settings and live preview page.
	 */
	public function render_settings_page() {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}

		$settings = adab_get_settings();
		?>
		<div class="wrap adab-admin-wrap">
			<!-- Header -->
			<header class="adab-admin-header">
				<div class="adab-brand">
					<span class="adab-brand-badge">AbhinavDev</span>
					<h1><?php esc_html_e( 'Announcement Bar Studio', 'abhinavdev-announcement-bar' ); ?></h1>
					<span class="adab-version">v<?php echo esc_html( ADAB_VERSION ); ?></span>
				</div>
				<div class="adab-header-meta">
					<span class="adab-status-pill <?php echo ! empty( $settings['enabled'] ) ? 'is-live' : 'is-paused'; ?>" id="adab-header-status">
						<span class="adab-dot"></span>
						<span class="adab-status-text">
							<?php echo ! empty( $settings['enabled'] ) ? esc_html__( 'Active on Frontend', 'abhinavdev-announcement-bar' ) : esc_html__( 'Paused / Draft', 'abhinavdev-announcement-bar' ); ?>
						</span>
					</span>
				</div>
			</header>

			<!-- Sticky Live Preview Dock (Desktop & Mobile Switcher) -->
			<section class="adab-preview-dock" aria-label="<?php esc_attr_e( 'Live Responsive Preview', 'abhinavdev-announcement-bar' ); ?>">
				<div class="adab-preview-toolbar">
					<div class="adab-preview-title">
						<span class="dashicons dashicons-visibility"></span>
						<strong><?php esc_html_e( 'Live Interactive Preview', 'abhinavdev-announcement-bar' ); ?></strong>
						<span class="adab-preview-hint"><?php esc_html_e( 'Updates instantly as you customize below', 'abhinavdev-announcement-bar' ); ?></span>
					</div>

					<div class="adab-device-switcher" role="group" aria-label="<?php esc_attr_e( 'Preview Viewport Mode', 'abhinavdev-announcement-bar' ); ?>">
						<button type="button" class="adab-device-btn is-active" data-viewport="desktop">
							<span class="dashicons dashicons-desktop"></span>
							<?php esc_html_e( 'Desktop View', 'abhinavdev-announcement-bar' ); ?>
							<small>100%</small>
						</button>
						<button type="button" class="adab-device-btn" data-viewport="mobile">
							<span class="dashicons dashicons-smartphone"></span>
							<?php esc_html_e( 'Mobile View', 'abhinavdev-announcement-bar' ); ?>
							<small>375px</small>
						</button>
					</div>

					<div class="adab-preview-actions">
						<button type="button" class="button button-secondary adab-reopen-preview" id="adab-restore-preview-btn" style="display:none;">
							<?php esc_html_e( 'Restore Dismissed Bar', 'abhinavdev-announcement-bar' ); ?>
						</button>
					</div>
				</div>

				<!-- Viewport Stage -->
				<div class="adab-viewport-stage is-desktop" id="adab-viewport-stage">
					<div class="adab-browser-mockup">
						<div class="adab-browser-chrome">
							<div class="adab-browser-dots">
								<span></span><span></span><span></span>
							</div>
							<div class="adab-browser-address">
								<?php echo esc_html( wp_parse_url( home_url(), PHP_URL_HOST ) ? wp_parse_url( home_url(), PHP_URL_HOST ) : 'yourwebsite.com' ); ?>
							</div>
							<div class="adab-viewport-badge" id="adab-viewport-badge">
								<?php esc_html_e( 'Desktop (1280px+)', 'abhinavdev-announcement-bar' ); ?>
							</div>
						</div>

						<!-- Simulated Website Canvas -->
						<div class="adab-site-canvas" id="adab-site-canvas">
							<!-- Live Announcement Bar Injection Container -->
							<div id="adab-preview-mount">
								<?php
								// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside render_bar_html.
								echo ADAB_Frontend::render_bar_html( $settings, true );
								?>
							</div>

							<!-- Simulated Site Header & Hero for realistic context -->
							<div class="adab-mock-site-header">
								<div class="adab-mock-logo"></div>
								<div class="adab-mock-nav">
									<span></span><span></span><span></span><span></span>
								</div>
							</div>
							<div class="adab-mock-site-hero">
								<div class="adab-mock-line is-title"></div>
								<div class="adab-mock-line is-subtitle"></div>
								<div class="adab-mock-device-notice" id="adab-mock-device-hidden-notice" style="display:none;"></div>
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- Settings Form -->
			<form method="post" action="options.php" id="adab-settings-form" class="adab-settings-form">
				<?php settings_fields( 'adab_settings_group' ); ?>

				<div class="adab-grid">
					<!-- Left Column: Content, Modes, CTA & Countdown -->
					<div class="adab-col">
						<!-- Card 1: Status & Display Mode -->
						<div class="adab-card">
							<div class="adab-card-header">
								<h2>
									<span class="dashicons dashicons-megaphone"></span>
									<?php esc_html_e( '1. Announcement Mode & Messages', 'abhinavdev-announcement-bar' ); ?>
								</h2>
								<label class="adab-switch" title="<?php esc_attr_e( 'Enable or disable the announcement bar', 'abhinavdev-announcement-bar' ); ?>">
									<input type="checkbox" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[enabled]" id="adab_enabled" value="1" <?php checked( 1, $settings['enabled'] ); ?> />
									<span class="adab-slider"></span>
									<span class="adab-switch-label"><?php esc_html_e( 'Enable Bar', 'abhinavdev-announcement-bar' ); ?></span>
								</label>
							</div>

							<div class="adab-card-body">
								<!-- Mode Selector Cards -->
								<label class="adab-field-label"><?php esc_html_e( 'Choose Text Animation / Display Type', 'abhinavdev-announcement-bar' ); ?></label>
								<div class="adab-mode-cards">
									<label class="adab-mode-option <?php echo 'static' === $settings['display_mode'] ? 'is-selected' : ''; ?>">
										<input type="radio" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[display_mode]" value="static" <?php checked( 'static', $settings['display_mode'] ); ?> />
										<span class="adab-mode-icon">📌</span>
										<strong><?php esc_html_e( 'Static Text', 'abhinavdev-announcement-bar' ); ?></strong>
										<small><?php esc_html_e( 'Clean, centered single message', 'abhinavdev-announcement-bar' ); ?></small>
									</label>

									<label class="adab-mode-option <?php echo 'scrolling' === $settings['display_mode'] ? 'is-selected' : ''; ?>">
										<input type="radio" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[display_mode]" value="scrolling" <?php checked( 'scrolling', $settings['display_mode'] ); ?> />
										<span class="adab-mode-icon">🌊</span>
										<strong><?php esc_html_e( 'Scrolling Marquee', 'abhinavdev-announcement-bar' ); ?></strong>
										<small><?php esc_html_e( 'Continuous smooth ticker loop', 'abhinavdev-announcement-bar' ); ?></small>
									</label>

									<label class="adab-mode-option <?php echo 'sliding' === $settings['display_mode'] ? 'is-selected' : ''; ?>">
										<input type="radio" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[display_mode]" value="sliding" <?php checked( 'sliding', $settings['display_mode'] ); ?> />
										<span class="adab-mode-icon">🔄</span>
										<strong><?php esc_html_e( 'Sliding Rotator', 'abhinavdev-announcement-bar' ); ?></strong>
										<small><?php esc_html_e( 'Slides through multiple messages', 'abhinavdev-announcement-bar' ); ?></small>
									</label>
								</div>

								<!-- Mode-Specific Controls -->
								<div class="adab-conditional-group" id="adab-scrolling-controls" style="<?php echo 'scrolling' === $settings['display_mode'] ? '' : 'display:none;'; ?>">
									<div class="adab-field-row">
										<label for="adab_scroll_speed">
											<?php esc_html_e( 'Scrolling Speed (Seconds per cycle — lower is faster)', 'abhinavdev-announcement-bar' ); ?>
										</label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_scroll_speed" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[scroll_speed]" min="6" max="60" value="<?php echo esc_attr( $settings['scroll_speed'] ); ?>" />
											<span class="adab-range-val"><span id="adab_scroll_speed_val"><?php echo esc_html( $settings['scroll_speed'] ); ?></span>s</span>
										</div>
									</div>
								</div>

								<div class="adab-conditional-group" id="adab-sliding-controls" style="<?php echo 'sliding' === $settings['display_mode'] ? '' : 'display:none;'; ?>">
									<div class="adab-two-cols">
										<div class="adab-field-row">
											<label for="adab_slide_direction"><?php esc_html_e( 'Slide Direction', 'abhinavdev-announcement-bar' ); ?></label>
											<select id="adab_slide_direction" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[slide_direction]">
												<option value="vertical" <?php selected( 'vertical', $settings['slide_direction'] ); ?>><?php esc_html_e( 'Vertical Slide (Bottom to Top)', 'abhinavdev-announcement-bar' ); ?></option>
												<option value="horizontal" <?php selected( 'horizontal', $settings['slide_direction'] ); ?>><?php esc_html_e( 'Horizontal Slide (Right to Left)', 'abhinavdev-announcement-bar' ); ?></option>
											</select>
										</div>
										<div class="adab-field-row">
											<label for="adab_slide_interval"><?php esc_html_e( 'Slide Delay (Seconds)', 'abhinavdev-announcement-bar' ); ?></label>
											<div class="adab-range-wrap">
												<input type="range" id="adab_slide_interval" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[slide_interval]" min="2" max="15" value="<?php echo esc_attr( $settings['slide_interval'] ); ?>" />
												<span class="adab-range-val"><span id="adab_slide_interval_val"><?php echo esc_html( $settings['slide_interval'] ); ?></span>s</span>
											</div>
										</div>
									</div>
								</div>

								<!-- Announcement Messages List -->
								<div class="adab-messages-section">
									<div class="adab-messages-header">
										<label class="adab-field-label"><?php esc_html_e( 'Announcement Text Messages', 'abhinavdev-announcement-bar' ); ?></label>
										<span class="adab-helper-badge" id="adab-msg-mode-hint">
											<?php esc_html_e( 'HTML tags like <strong>, <em>, <u> are supported', 'abhinavdev-announcement-bar' ); ?>
										</span>
									</div>

									<div id="adab-messages-list" class="adab-messages-list">
										<?php
										$messages = ! empty( $settings['messages'] ) && is_array( $settings['messages'] ) ? $settings['messages'] : array( '' );
										foreach ( $messages as $index => $message ) :
											?>
											<div class="adab-message-item">
												<span class="adab-msg-num">#<?php echo esc_html( $index + 1 ); ?></span>
												<input type="text"
													name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[messages][]"
													value="<?php echo esc_attr( $message ); ?>"
													class="adab-msg-input regular-text"
													placeholder="<?php esc_attr_e( 'Enter announcement text...', 'abhinavdev-announcement-bar' ); ?>"
												/>
												<button type="button" class="button adab-remove-msg" title="<?php esc_attr_e( 'Remove message', 'abhinavdev-announcement-bar' ); ?>">
													<span class="dashicons dashicons-trash"></span>
												</button>
											</div>
										<?php endforeach; ?>
									</div>

									<button type="button" class="button button-secondary" id="adab-add-msg-btn">
										+ <?php esc_html_e( 'Add Another Message (For Scrolling / Sliding)', 'abhinavdev-announcement-bar' ); ?>
									</button>
								</div>
							</div>
						</div>

						<!-- Card 2: Call-To-Action (CTA) Button & Countdown Timer -->
						<div class="adab-card">
							<div class="adab-card-header">
								<h2>
									<span class="dashicons dashicons-button"></span>
									<?php esc_html_e( '2. CTA Button & Countdown Timer', 'abhinavdev-announcement-bar' ); ?>
								</h2>
							</div>
							<div class="adab-card-body">
								<!-- CTA Toggle -->
								<div class="adab-subcard">
									<div class="adab-subcard-head">
										<strong><?php esc_html_e( 'Call-to-Action Button', 'abhinavdev-announcement-bar' ); ?></strong>
										<label class="adab-switch">
											<input type="checkbox" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_enabled]" id="adab_cta_enabled" value="1" <?php checked( 1, $settings['cta_enabled'] ); ?> />
											<span class="adab-slider"></span>
										</label>
									</div>

									<div id="adab-cta-fields" style="<?php echo ! empty( $settings['cta_enabled'] ) ? '' : 'display:none;'; ?>">
										<div class="adab-two-cols">
											<div class="adab-field-row">
												<label for="adab_cta_text"><?php esc_html_e( 'Button Label', 'abhinavdev-announcement-bar' ); ?></label>
												<input type="text" id="adab_cta_text" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_text]" value="<?php echo esc_attr( $settings['cta_text'] ); ?>" />
											</div>
											<div class="adab-field-row">
												<label for="adab_cta_url"><?php esc_html_e( 'Button Link URL', 'abhinavdev-announcement-bar' ); ?></label>
												<input type="text" id="adab_cta_url" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_url]" value="<?php echo esc_attr( $settings['cta_url'] ); ?>" placeholder="https://..." />
											</div>
										</div>

										<div class="adab-three-cols">
											<div class="adab-field-row">
												<label for="adab_cta_bg_color"><?php esc_html_e( 'Button Background', 'abhinavdev-announcement-bar' ); ?></label>
												<div class="adab-color-input-wrap">
													<input type="color" id="adab_cta_bg_color" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_bg_color]" value="<?php echo esc_attr( $settings['cta_bg_color'] ); ?>" />
													<code><?php echo esc_html( $settings['cta_bg_color'] ); ?></code>
												</div>
											</div>
											<div class="adab-field-row">
												<label for="adab_cta_text_color"><?php esc_html_e( 'Button Text Color', 'abhinavdev-announcement-bar' ); ?></label>
												<div class="adab-color-input-wrap">
													<input type="color" id="adab_cta_text_color" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_text_color]" value="<?php echo esc_attr( $settings['cta_text_color'] ); ?>" />
													<code><?php echo esc_html( $settings['cta_text_color'] ); ?></code>
												</div>
											</div>
											<div class="adab-field-row">
												<label for="adab_cta_border_radius"><?php esc_html_e( 'Corner Radius', 'abhinavdev-announcement-bar' ); ?></label>
												<div class="adab-range-wrap">
													<input type="range" id="adab_cta_border_radius" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_border_radius]" min="0" max="30" value="<?php echo esc_attr( $settings['cta_border_radius'] ); ?>" />
													<span class="adab-range-val"><span id="adab_cta_border_radius_val"><?php echo esc_html( $settings['cta_border_radius'] ); ?></span>px</span>
												</div>
											</div>
										</div>

										<label class="adab-checkbox-inline">
											<input type="checkbox" id="adab_cta_new_tab" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[cta_new_tab]" value="1" <?php checked( 1, $settings['cta_new_tab'] ); ?> />
											<?php esc_html_e( 'Open link in a new browser tab', 'abhinavdev-announcement-bar' ); ?>
										</label>
									</div>
								</div>

								<!-- Countdown Timer Toggle -->
								<div class="adab-subcard">
									<div class="adab-subcard-head">
										<strong><?php esc_html_e( 'Live Countdown Timer', 'abhinavdev-announcement-bar' ); ?></strong>
										<label class="adab-switch">
											<input type="checkbox" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[countdown_enabled]" id="adab_countdown_enabled" value="1" <?php checked( 1, $settings['countdown_enabled'] ); ?> />
											<span class="adab-slider"></span>
										</label>
									</div>

									<div id="adab-countdown-fields" style="<?php echo ! empty( $settings['countdown_enabled'] ) ? '' : 'display:none;'; ?>">
										<div class="adab-two-cols">
											<div class="adab-field-row">
												<label for="adab_countdown_label"><?php esc_html_e( 'Timer Prefix Label', 'abhinavdev-announcement-bar' ); ?></label>
												<input type="text" id="adab_countdown_label" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[countdown_label]" value="<?php echo esc_attr( $settings['countdown_label'] ); ?>" />
											</div>
											<div class="adab-field-row">
												<label for="adab_countdown_end"><?php esc_html_e( 'Offer End Date & Time', 'abhinavdev-announcement-bar' ); ?></label>
												<input type="datetime-local" id="adab_countdown_end" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[countdown_end]" value="<?php echo esc_attr( $settings['countdown_end'] ); ?>" />
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Right Column: Design, Typography (Desktop & Mobile) & Placement -->
					<div class="adab-col">
						<!-- Card 3: Design, Colors & Responsive Typography -->
						<div class="adab-card">
							<div class="adab-card-header">
								<h2>
									<span class="dashicons dashicons-art"></span>
									<?php esc_html_e( '3. Colors & Responsive Typography', 'abhinavdev-announcement-bar' ); ?>
								</h2>
							</div>
							<div class="adab-card-body">
								<!-- Quick Color Presets -->
								<div class="adab-presets-bar">
									<span><?php esc_html_e( 'Quick Themes:', 'abhinavdev-announcement-bar' ); ?></span>
									<button type="button" class="adab-preset-chip" data-bg-type="gradient" data-bg="#1e1b4b" data-grad="#4338ca" data-text="#ffffff" data-cta-bg="#ffffff" data-cta-text="#1e1b4b">Indigo Pulse</button>
									<button type="button" class="adab-preset-chip" data-bg-type="gradient" data-bg="#0f172a" data-grad="#059669" data-text="#ffffff" data-cta-bg="#10b981" data-cta-text="#052e16">Emerald Deal</button>
									<button type="button" class="adab-preset-chip" data-bg-type="gradient" data-bg="#7f1d1d" data-grad="#dc2626" data-text="#ffffff" data-cta-bg="#fef08a" data-cta-text="#7f1d1d">Flash Crimson</button>
									<button type="button" class="adab-preset-chip" data-bg-type="solid" data-bg="#111827" data-grad="#111827" data-text="#f9fafb" data-cta-bg="#f59e0b" data-cta-text="#111827">Midnight Gold</button>
									<button type="button" class="adab-preset-chip" data-bg-type="solid" data-bg="#fef3c7" data-grad="#fde68a" data-text="#78350f" data-cta-bg="#92400e" data-cta-text="#ffffff">Warm Amber</button>
								</div>

								<div class="adab-two-cols">
									<div class="adab-field-row">
										<label for="adab_bg_type"><?php esc_html_e( 'Background Style', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_bg_type" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bg_type]">
											<option value="gradient" <?php selected( 'gradient', $settings['bg_type'] ); ?>><?php esc_html_e( 'Linear Gradient (Modern)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="solid" <?php selected( 'solid', $settings['bg_type'] ); ?>><?php esc_html_e( 'Solid Color', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>
									<div class="adab-field-row">
										<label for="adab_text_color"><?php esc_html_e( 'Announcement Text Color', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-color-input-wrap">
											<input type="color" id="adab_text_color" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[text_color]" value="<?php echo esc_attr( $settings['text_color'] ); ?>" />
											<code><?php echo esc_html( $settings['text_color'] ); ?></code>
										</div>
									</div>
								</div>

								<div class="adab-three-cols">
									<div class="adab-field-row">
										<label for="adab_bg_color"><?php esc_html_e( 'Primary Background Color', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-color-input-wrap">
											<input type="color" id="adab_bg_color" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bg_color]" value="<?php echo esc_attr( $settings['bg_color'] ); ?>" />
											<code><?php echo esc_html( $settings['bg_color'] ); ?></code>
										</div>
									</div>

									<div class="adab-field-row adab-grad-only" style="<?php echo 'gradient' === $settings['bg_type'] ? '' : 'display:none;'; ?>">
										<label for="adab_bg_gradient_end"><?php esc_html_e( 'Gradient End Color', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-color-input-wrap">
											<input type="color" id="adab_bg_gradient_end" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bg_gradient_end]" value="<?php echo esc_attr( $settings['bg_gradient_end'] ); ?>" />
											<code><?php echo esc_html( $settings['bg_gradient_end'] ); ?></code>
										</div>
									</div>

									<div class="adab-field-row adab-grad-only" style="<?php echo 'gradient' === $settings['bg_type'] ? '' : 'display:none;'; ?>">
										<label for="adab_bg_gradient_angle"><?php esc_html_e( 'Gradient Angle', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_bg_gradient_angle" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bg_gradient_angle]" min="0" max="360" value="<?php echo esc_attr( $settings['bg_gradient_angle'] ); ?>" />
											<span class="adab-range-val"><span id="adab_bg_gradient_angle_val"><?php echo esc_html( $settings['bg_gradient_angle'] ); ?></span>°</span>
										</div>
									</div>
								</div>

								<hr class="adab-divider" />

								<!-- Responsive Typography: Desktop vs Mobile -->
								<div class="adab-two-cols">
									<div class="adab-field-row">
										<label for="adab_font_size_desktop">
											<span class="dashicons dashicons-desktop"></span>
											<?php esc_html_e( 'Desktop Font Size (px)', 'abhinavdev-announcement-bar' ); ?>
										</label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_font_size_desktop" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[font_size_desktop]" min="11" max="26" value="<?php echo esc_attr( $settings['font_size_desktop'] ); ?>" />
											<span class="adab-range-val"><span id="adab_font_size_desktop_val"><?php echo esc_html( $settings['font_size_desktop'] ); ?></span>px</span>
										</div>
									</div>

									<div class="adab-field-row">
										<label for="adab_font_size_mobile">
											<span class="dashicons dashicons-smartphone"></span>
											<?php esc_html_e( 'Mobile Font Size (px)', 'abhinavdev-announcement-bar' ); ?>
										</label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_font_size_mobile" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[font_size_mobile]" min="10" max="22" value="<?php echo esc_attr( $settings['font_size_mobile'] ); ?>" />
											<span class="adab-range-val"><span id="adab_font_size_mobile_val"><?php echo esc_html( $settings['font_size_mobile'] ); ?></span>px</span>
										</div>
									</div>
								</div>

								<div class="adab-three-cols">
									<div class="adab-field-row">
										<label for="adab_bar_padding_desktop"><?php esc_html_e( 'Desktop Height Padding', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_bar_padding_desktop" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bar_padding_desktop]" min="4" max="28" value="<?php echo esc_attr( $settings['bar_padding_desktop'] ); ?>" />
											<span class="adab-range-val"><span id="adab_bar_padding_desktop_val"><?php echo esc_html( $settings['bar_padding_desktop'] ); ?></span>px</span>
										</div>
									</div>

									<div class="adab-field-row">
										<label for="adab_bar_padding_mobile"><?php esc_html_e( 'Mobile Height Padding', 'abhinavdev-announcement-bar' ); ?></label>
										<div class="adab-range-wrap">
											<input type="range" id="adab_bar_padding_mobile" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[bar_padding_mobile]" min="4" max="24" value="<?php echo esc_attr( $settings['bar_padding_mobile'] ); ?>" />
											<span class="adab-range-val"><span id="adab_bar_padding_mobile_val"><?php echo esc_html( $settings['bar_padding_mobile'] ); ?></span>px</span>
										</div>
									</div>

									<div class="adab-field-row">
										<label for="adab_font_weight"><?php esc_html_e( 'Font Weight', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_font_weight" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[font_weight]">
											<option value="400" <?php selected( '400', $settings['font_weight'] ); ?>><?php esc_html_e( 'Regular (400)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="500" <?php selected( '500', $settings['font_weight'] ); ?>><?php esc_html_e( 'Medium (500)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="600" <?php selected( '600', $settings['font_weight'] ); ?>><?php esc_html_e( 'Semi-Bold (600)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="700" <?php selected( '700', $settings['font_weight'] ); ?>><?php esc_html_e( 'Bold (700)', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>
								</div>
							</div>
						</div>

						<!-- Card 4: Position, Device Visibility & Dismiss Rules -->
						<div class="adab-card">
							<div class="adab-card-header">
								<h2>
									<span class="dashicons dashicons-Laptop"></span>
									<?php esc_html_e( '4. Placement, Targeting & Dismiss Behavior', 'abhinavdev-announcement-bar' ); ?>
								</h2>
							</div>
							<div class="adab-card-body">
								<div class="adab-three-cols">
									<div class="adab-field-row">
										<label for="adab_position"><?php esc_html_e( 'Bar Position', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_position" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[position]">
											<option value="top_sticky" <?php selected( 'top_sticky', $settings['position'] ); ?>><?php esc_html_e( 'Top Sticky (Stays on Scroll)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="top_static" <?php selected( 'top_static', $settings['position'] ); ?>><?php esc_html_e( 'Top Static (Scrolls with Page)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="bottom_sticky" <?php selected( 'bottom_sticky', $settings['position'] ); ?>><?php esc_html_e( 'Bottom Sticky Floating', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>

									<div class="adab-field-row">
										<label for="adab_target_pages"><?php esc_html_e( 'Display On Pages', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_target_pages" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[target_pages]">
											<option value="all" <?php selected( 'all', $settings['target_pages'] ); ?>><?php esc_html_e( 'Entire Website', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="homepage" <?php selected( 'homepage', $settings['target_pages'] ); ?>><?php esc_html_e( 'Homepage Only', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>

									<div class="adab-field-row">
										<label for="adab_device_visibility"><?php esc_html_e( 'Device Visibility', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_device_visibility" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[device_visibility]">
											<option value="all" <?php selected( 'all', $settings['device_visibility'] ); ?>><?php esc_html_e( 'Desktop & Mobile (All)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="desktop_only" <?php selected( 'desktop_only', $settings['device_visibility'] ); ?>><?php esc_html_e( 'Desktop Only', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="mobile_only" <?php selected( 'mobile_only', $settings['device_visibility'] ); ?>><?php esc_html_e( 'Mobile Only', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>
								</div>

								<div class="adab-two-cols" style="margin-top: 12px;">
									<div class="adab-field-row">
										<label class="adab-checkbox-inline" style="margin-top: 22px;">
											<input type="checkbox" id="adab_dismissible" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[dismissible]" value="1" <?php checked( 1, $settings['dismissible'] ); ?> />
											<?php esc_html_e( 'Allow visitors to close (✕) the announcement bar', 'abhinavdev-announcement-bar' ); ?>
										</label>
									</div>

									<div class="adab-field-row" id="adab-reappear-wrap" style="<?php echo ! empty( $settings['dismissible'] ) ? '' : 'display:none;'; ?>">
										<label for="adab_reappear_days"><?php esc_html_e( 'When Visitor Clicks Close (✕) Button', 'abhinavdev-announcement-bar' ); ?></label>
										<select id="adab_reappear_days" name="<?php echo esc_attr( ADAB_OPTION_KEY ); ?>[reappear_days]">
											<option value="0" <?php selected( 0, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Show Again on Page Refresh (Every Page Load)', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="1" <?php selected( 1, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Remember & Hide for 1 Day', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="3" <?php selected( 3, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Remember & Hide for 3 Days', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="7" <?php selected( 7, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Remember & Hide for 7 Days', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="14" <?php selected( 14, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Remember & Hide for 14 Days', 'abhinavdev-announcement-bar' ); ?></option>
											<option value="30" <?php selected( 30, absint( $settings['reappear_days'] ) ); ?>><?php esc_html_e( 'Remember & Hide for 30 Days', 'abhinavdev-announcement-bar' ); ?></option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Sticky Save Footer -->
				<div class="adab-save-bar">
					<div class="adab-save-info">
						<span class="dashicons dashicons-info-outline"></span>
						<?php esc_html_e( 'Tip: Toggle between Desktop View and Mobile View at the top to verify font sizes and layout before saving.', 'abhinavdev-announcement-bar' ); ?>
					</div>
					<?php submit_button( __( 'Save Announcement Bar Settings', 'abhinavdev-announcement-bar' ), 'primary large', 'submit', false ); ?>
				</div>
			</form>

			<!-- Community Review & Custom Development Lead Banner -->
			<footer class="adab-community-footer">
				<div class="adab-footer-card">
					<div class="adab-footer-content">
						<strong><?php esc_html_e( 'Enjoying AbhinavDev Announcement Bar?', 'abhinavdev-announcement-bar' ); ?></strong>
						<p><?php esc_html_e( 'If this plugin is helpful for your website, please consider leaving a ⭐⭐⭐⭐⭐ review on WordPress.org. Your feedback helps us grow and keep adding free features!', 'abhinavdev-announcement-bar' ); ?></p>
					</div>
					<a href="<?php echo esc_url( 'https://wordpress.org/support/plugin/abhinavdev-announcement-bar/reviews/#new-post' ); ?>" target="_blank" rel="noopener noreferrer" class="button button-secondary adab-footer-btn">
						<?php esc_html_e( '⭐⭐⭐⭐⭐ Leave a Review', 'abhinavdev-announcement-bar' ); ?>
					</a>
				</div>

				<div class="adab-footer-card">
					<div class="adab-footer-content">
						<strong><?php esc_html_e( 'Need Custom WordPress Development?', 'abhinavdev-announcement-bar' ); ?></strong>
						<p><?php esc_html_e( 'Looking for custom WordPress plugins, WooCommerce solutions, or speed optimization? Get in touch with AbhinavDev.', 'abhinavdev-announcement-bar' ); ?></p>
					</div>
					<div class="adab-footer-btn-group">
						<a href="<?php echo esc_url( 'https://profiles.wordpress.org/abhinavdev/' ); ?>" target="_blank" rel="noopener noreferrer" class="button button-primary adab-footer-btn">
							<?php esc_html_e( 'Contact AbhinavDev', 'abhinavdev-announcement-bar' ); ?>
						</a>
						<a href="<?php echo esc_url( 'https://wordpress.org/support/plugin/abhinavdev-announcement-bar/' ); ?>" target="_blank" rel="noopener noreferrer" class="button button-secondary adab-footer-btn">
							<?php esc_html_e( 'Support Forum', 'abhinavdev-announcement-bar' ); ?>
						</a>
					</div>
				</div>
			</footer>
		</div>
		<?php
	}
}