<?php
/**
 * Onboarding Wizard for Vareon Calculator Suite Lite
 *
 * Provides a guided setup experience for new users.
 *
 * @package Vareon_Calculator_Suite_Lite
 */

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

/**
 * Enqueue onboarding scripts on the settings page welcome tab.
 *
 * @param string $hook The current admin page hook.
 */
function vareoncalc_enqueue_onboarding_scripts( $hook ) {
	if ( 'settings_page_vareoncalc' !== $hook ) {
		return;
	}

	// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Only checking tab query arg.
	$tab = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : '';
	if ( 'welcome' !== $tab ) {
		return;
	}

	$onboarding_js_path = VAREONCALC_DIR . 'js/admin-onboarding.js';
	wp_enqueue_script(
		'vareoncalc-admin-onboarding',
		VAREONCALC_URL . 'js/admin-onboarding.js',
		array(),
		file_exists( $onboarding_js_path ) ? (string) filemtime( $onboarding_js_path ) : VAREONCALC_VER,
		true
	);

	wp_localize_script(
		'vareoncalc-admin-onboarding',
		'vareoncalcOnboarding',
		array(
			'copy'   => __( 'Copy', 'vareon-calculator-suite-lite' ),
			'copied' => __( 'Copied!', 'vareon-calculator-suite-lite' ),
		)
	);
}
add_action( 'admin_enqueue_scripts', 'vareoncalc_enqueue_onboarding_scripts' );

/**
 * Get onboarding status.
 *
 * @return string Status: pending, completed, or skipped.
 */
function vareoncalc_get_onboarding_status() {
	return get_option( 'vareoncalc_onboarding_status', 'pending' );
}

/**
 * Check whether onboarding should render.
 *
 * @return bool
 */
function vareoncalc_should_show_onboarding() {
	if ( ! current_user_can( 'manage_options' ) ) {
		return false;
	}

	return 'pending' === vareoncalc_get_onboarding_status();
}

/**
 * Handle onboarding query actions.
 */
function vareoncalc_handle_onboarding_actions() {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	if ( isset( $_GET['vareoncalc_onboarding_complete'] ) && '1' === $_GET['vareoncalc_onboarding_complete'] ) {
		if ( ! isset( $_GET['_vareoncalc_nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_vareoncalc_nonce'] ) ), 'vareoncalc_complete_onboarding' ) ) {
			wp_die( esc_html__( 'Security check failed. Please try again.', 'vareon-calculator-suite-lite' ), esc_html__( 'Error', 'vareon-calculator-suite-lite' ), array( 'response' => 403 ) );
		}
		update_option( 'vareoncalc_onboarding_status', 'completed' );
		wp_safe_redirect( admin_url( 'options-general.php?page=vareoncalc&tab=general' ) );
		exit;
	}

	if ( isset( $_GET['vareoncalc_skip_onboarding'] ) && '1' === $_GET['vareoncalc_skip_onboarding'] ) {
		if ( ! isset( $_GET['_vareoncalc_nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_vareoncalc_nonce'] ) ), 'vareoncalc_skip_onboarding' ) ) {
			wp_die( esc_html__( 'Security check failed. Please try again.', 'vareon-calculator-suite-lite' ), esc_html__( 'Error', 'vareon-calculator-suite-lite' ), array( 'response' => 403 ) );
		}
		update_option( 'vareoncalc_onboarding_status', 'skipped' );
		wp_safe_redirect( admin_url( 'options-general.php?page=vareoncalc&tab=general' ) );
		exit;
	}

	if ( isset( $_GET['vareoncalc_restart_onboarding'] ) && '1' === $_GET['vareoncalc_restart_onboarding'] ) {
		if ( ! isset( $_GET['_vareoncalc_nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_vareoncalc_nonce'] ) ), 'vareoncalc_restart_onboarding' ) ) {
			wp_die( esc_html__( 'Security check failed. Please try again.', 'vareon-calculator-suite-lite' ), esc_html__( 'Error', 'vareon-calculator-suite-lite' ), array( 'response' => 403 ) );
		}
		update_option( 'vareoncalc_onboarding_status', 'pending' );
		wp_safe_redirect( admin_url( 'options-general.php?page=vareoncalc&tab=welcome&onboarding_step=1' ) );
		exit;
	}
}
add_action( 'admin_init', 'vareoncalc_handle_onboarding_actions' );

/**
 * Redirect to onboarding after activation.
 */
function vareoncalc_activation_redirect() {
	if ( get_transient( 'vareoncalc_activation_redirect' ) ) {
		delete_transient( 'vareoncalc_activation_redirect' );

		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Just checking presence of query arg.
		if ( isset( $_GET['activate-multi'] ) ) {
			return;
		}

		if ( vareoncalc_should_show_onboarding() ) {
			wp_safe_redirect( admin_url( 'options-general.php?page=vareoncalc&tab=welcome' ) );
			exit;
		}
	}
}
add_action( 'admin_init', 'vareoncalc_activation_redirect', 1 );

/**
 * Flag the post-activation redirect for fresh installs.
 */
function vareoncalc_set_activation_redirect() {
	$status = get_option( 'vareoncalc_onboarding_status', '' );
	if ( '' === $status ) {
		update_option( 'vareoncalc_onboarding_status', 'pending' );
		set_transient( 'vareoncalc_activation_redirect', true, 30 );
	}
}

/**
 * Render the onboarding wizard
 *
 * @return void
 */
function vareoncalc_render_onboarding() {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Query arg controls view state only.
	$step        = isset( $_GET['onboarding_step'] ) ? absint( $_GET['onboarding_step'] ) : 1;
	$step        = max( 1, min( 4, $step ) );
	$total_steps = 4;

	$steps = array(
		1 => array(
			'title' => __( 'Welcome', 'vareon-calculator-suite-lite' ),
			'icon'  => '&#128075;',
		),
		2 => array(
			'title' => __( 'Quick Setup', 'vareon-calculator-suite-lite' ),
			'icon'  => '&#9881;',
		),
		3 => array(
			'title' => __( 'First Calculator', 'vareon-calculator-suite-lite' ),
			'icon'  => '&#129518;',
		),
		4 => array(
			'title' => __( 'Ready!', 'vareon-calculator-suite-lite' ),
			'icon'  => '&#127881;',
		),
	);

	?>
	<div class="vareoncalc-onboarding" style="
		max-width: 900px;
		margin: 40px auto;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
		overflow: hidden;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	">
		<div style="
			background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
			padding: 32px 40px;
			position: relative;
			overflow: hidden;
		">
			<div style="
				position: absolute;
				inset: 0;
				background-image: 
					linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
					linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
				background-size: 32px 32px;
				pointer-events: none;
			"></div>

			<div style="position: relative; z-index: 1;">
				<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px;">
					<div style="
						width: 56px; height: 56px;
						background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
						border-radius: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
					">
						<span style="font-size: 28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));">&#129518;</span>
					</div>
					<div>
						<h1 style="color: #fff; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em;">
							<?php esc_html_e( 'Vareon Calculator Suite', 'vareon-calculator-suite-lite' ); ?>
						</h1>
						<p style="color: #94a3b8; margin: 4px 0 0; font-size: 15px;">
							<?php esc_html_e( "Let's get you set up in just a few steps", 'vareon-calculator-suite-lite' ); ?>
						</p>
					</div>
				</div>

				<div style="display: flex; gap: 8px; margin-bottom: 12px;">
					<?php foreach ( $steps as $s => $data ) : ?>
						<div style="
							flex: 1;
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 8px;
						">
							<div style="
								width: 36px; height: 36px;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 16px;
								<?php if ( $s < $step ) : ?>
									background: #22c55e;
									color: #fff;
								<?php elseif ( $s === $step ) : ?>
									background: #3b82f6;
									box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
								<?php else : ?>
									background: #475569;
									color: #94a3b8;
								<?php endif; ?>
								transition: all 0.3s ease;
							">
								<?php if ( $s < $step ) : ?>
									<span style="font-size: 14px;">&#10003;</span>
								<?php else : ?>
									<?php echo wp_kses_post( $data['icon'] ); ?>
								<?php endif; ?>
							</div>
							<span style="
								font-size: 11px;
								font-weight: 500;
								text-transform: uppercase;
								letter-spacing: 0.05em;
								color: <?php echo esc_attr( $s === $step ? '#fff' : '#64748b' ); ?>;
							">
								<?php echo esc_html( $data['title'] ); ?>
							</span>
						</div>
						<?php if ( $s < $total_steps ) : ?>
							<div style="
								flex: 0.5;
								height: 2px;
								background: <?php echo esc_attr( $s < $step ? '#22c55e' : '#475569' ); ?>;
								margin-top: 17px;
								border-radius: 1px;
							"></div>
						<?php endif; ?>
					<?php endforeach; ?>
				</div>
			</div>
		</div>

		<div style="padding: 40px;">
			<?php
			switch ( $step ) {
				case 1:
					vareoncalc_onboarding_step_welcome();
					break;
				case 2:
					vareoncalc_onboarding_step_setup();
					break;
				case 3:
					vareoncalc_onboarding_step_first_calc();
					break;
				case 4:
					vareoncalc_onboarding_step_ready();
					break;
			}
			?>
		</div>

		<div style="
			padding: 20px 40px;
			background: #f8fafc;
			border-top: 1px solid #e2e8f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		">
		<?php if ( $step > 1 ) : ?>
			<a href="<?php echo esc_url( add_query_arg( 'onboarding_step', $step - 1 ) ); ?>" style="
				color: #64748b;
				text-decoration: none;
				font-weight: 500;
				display: flex;
				align-items: center;
				gap: 6px;
			">
				<span>&#8592;</span> <?php esc_html_e( 'Back', 'vareon-calculator-suite-lite' ); ?>
			</a>
		<?php else : ?>
			<?php
			$skip_url = wp_nonce_url(
				add_query_arg( 'vareoncalc_skip_onboarding', '1', admin_url( 'options-general.php?page=vareoncalc' ) ),
				'vareoncalc_skip_onboarding',
				'_vareoncalc_nonce'
			);
			?>
			<a href="<?php echo esc_url( $skip_url ); ?>" style="
				color: #94a3b8;
				text-decoration: none;
				font-size: 13px;
			">
				<?php esc_html_e( 'Skip for now', 'vareon-calculator-suite-lite' ); ?>
			</a>
		<?php endif; ?>

		<?php if ( $step < $total_steps ) : ?>
			<?php if ( 2 === $step ) : ?>
				<button type="submit" form="onboarding-setup-form" class="button button-primary" style="
					background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
					border: none;
					padding: 12px 28px;
					font-size: 15px;
					font-weight: 600;
					border-radius: 8px;
					box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
					text-shadow: none;
					text-decoration: none;
					color: #fff;
				">
					<?php esc_html_e( 'Continue', 'vareon-calculator-suite-lite' ); ?> <span style="margin-left: 4px;">&#8594;</span>
				</button>
			<?php else : ?>
				<a href="<?php echo esc_url( add_query_arg( 'onboarding_step', $step + 1 ) ); ?>" class="button button-primary" style="
					background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
					border: none;
					padding: 12px 28px;
					font-size: 15px;
					font-weight: 600;
					border-radius: 8px;
					box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
					text-shadow: none;
					text-decoration: none;
					color: #fff;
				">
					<?php esc_html_e( 'Continue', 'vareon-calculator-suite-lite' ); ?> <span style="margin-left: 4px;">&#8594;</span>
				</a>
			<?php endif; ?>
	<?php else : ?>
		<?php
		$complete_url = wp_nonce_url(
			add_query_arg( 'vareoncalc_onboarding_complete', '1', admin_url( 'options-general.php?page=vareoncalc' ) ),
			'vareoncalc_complete_onboarding',
			'_vareoncalc_nonce'
		);
		?>
		<a href="<?php echo esc_url( $complete_url ); ?>" class="button button-primary" style="
			background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
			border: none;
			padding: 12px 28px;
			font-size: 15px;
			font-weight: 600;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
			text-shadow: none;
			text-decoration: none;
			color: #fff;
		">
			<?php esc_html_e( 'Get Started!', 'vareon-calculator-suite-lite' ); ?> &#128640;
		</a>
	<?php endif; ?>
		</div>
	</div>
	<?php
}

/**
 * Render onboarding step 1.
 */
function vareoncalc_onboarding_step_welcome() {
	$calculators = vareoncalc_settings_get_calculator_library();
	$lite_count  = count(
		array_filter(
			$calculators,
			function ( $c ) {
				return ( $c['version'] ?? '' ) === 'lite';
			}
		)
	);
	?>
	<div style="text-align: center; max-width: 600px; margin: 0 auto;">
		<div style="font-size: 64px; line-height: 1; margin-bottom: 24px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));">
			&#128075;
		</div>
		<h2 style="font-size: 28px; font-weight: 700; color: #0f172a; margin: 0 0 12px;">
			<?php esc_html_e( 'Welcome to Vareon Calculator Suite!', 'vareon-calculator-suite-lite' ); ?>
		</h2>
		<p style="font-size: 17px; color: #475569; line-height: 1.7; margin: 0 0 32px;">
			<?php
			printf(
				/* translators: %d: number of calculators */
				esc_html__( 'You now have access to %d professional calculators that you can embed anywhere on your WordPress site.', 'vareon-calculator-suite-lite' ),
				intval( $lite_count )
			);
			?>
		</p>

		<div style="
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			margin-bottom: 32px;
		">
			<?php
			$featured = array( 'loan', 'mortgage', 'tip', 'bmi', 'percentage', 'discount' );
			foreach ( $featured as $key ) :
				$calc = $calculators[ $key ] ?? null;
				if ( ! $calc ) {
					continue;
				}
				?>
				<div style="
					background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
					border: 1px solid rgba(226, 232, 240, 0.6);
					border-radius: 12px;
					padding: 16px;
					text-align: center;
					cursor: default;
					opacity: 0.9;
				">
					<div style="font-size: 28px; margin-bottom: 8px;">
						<?php echo esc_html( $calc['icon'] ?? '&#129518;' ); ?>
					</div>
					<div style="font-size: 13px; font-weight: 600; color: #334155;">
						<?php echo esc_html( $calc['title'] ?? $key ); ?>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
	<?php
}

/**
 * Render onboarding step 2.
 */
function vareoncalc_onboarding_step_setup() {
	$opts = get_option( 'vareoncalc_lite_options', vareoncalc_default_options() );

	$currencies     = function_exists( 'vareoncalc_get_currency_catalog' ) ? vareoncalc_get_currency_catalog() : array();
	$current_symbol = $opts['currency_symbol'] ?? '$';
	$current_code   = '';

	foreach ( $currencies as $code => $data ) {
		if ( $data['symbol'] === $current_symbol ) {
			$current_code = $code;
			break;
		}
	}

	if ( empty( $current_code ) ) {
		$current_code = 'CUSTOM';
	}
	$is_custom = 'CUSTOM' === $current_code;
	?>
	<div style="max-width: 600px; margin: 0 auto;">
		<div style="text-align: center; margin-bottom: 32px;">
			<h2 style="font-size: 24px; font-weight: 700; color: #0f172a; margin: 0 0 8px;">
				<?php esc_html_e( 'Quick Setup', 'vareon-calculator-suite-lite' ); ?>
			</h2>
			<p style="color: #64748b; font-size: 15px; margin: 0;">
				<?php esc_html_e( 'Configure the basics to match your site (you can always change these later)', 'vareon-calculator-suite-lite' ); ?>
			</p>
		</div>

		<form method="post" action="<?php echo esc_url( admin_url( 'options.php' ) ); ?>" id="onboarding-setup-form" style="display: grid; gap: 24px;">
			<?php settings_fields( 'vareoncalc_lite_options' ); ?>
			<input type="hidden" name="_wp_http_referer" value="<?php echo esc_url( add_query_arg( 'onboarding_step', 3 ) ); ?>">
			<?php
			$existing_layout       = $opts['calculator_layout'] ?? 'compact';
			$existing_thousand_sep = $opts['thousand_separator'] ?? 'comma';
			$existing_decimal_sep  = $opts['decimal_separator'] ?? 'dot';
			?>
			<input type="hidden" name="vareoncalc_lite_options[calculator_layout]" value="<?php echo esc_attr( $existing_layout ); ?>">
			<input type="hidden" name="vareoncalc_lite_options[thousand_separator]" id="onboarding-thousand-separator" value="<?php echo esc_attr( $existing_thousand_sep ); ?>">
			<input type="hidden" name="vareoncalc_lite_options[decimal_separator]" id="onboarding-decimal-separator" value="<?php echo esc_attr( $existing_decimal_sep ); ?>">

			<?php
			$onboarding_presets = array(
				'us' => array(
					'label'              => __( 'US / International — $1,234.56 · Imperial', 'vareon-calculator-suite-lite' ),
					'currency_code'      => 'USD',
					'currency_position'  => 'before',
					'thousand_separator' => 'comma',
					'decimal_separator'  => 'dot',
					'measurement_system' => 'imperial',
				),
				'eu' => array(
					'label'              => __( 'European (EU) — 1.234,56 € · Metric', 'vareon-calculator-suite-lite' ),
					'currency_code'      => 'EUR',
					'currency_position'  => 'after',
					'thousand_separator' => 'dot',
					'decimal_separator'  => 'comma',
					'measurement_system' => 'metric',
				),
				'uk' => array(
					'label'              => __( 'UK / Commonwealth — £1,234.56 · Mixed', 'vareon-calculator-suite-lite' ),
					'currency_code'      => 'GBP',
					'currency_position'  => 'before',
					'thousand_separator' => 'comma',
					'decimal_separator'  => 'dot',
					'measurement_system' => 'mixed',
				),
			);

			$active_onboarding_preset = 'custom';
			foreach ( $onboarding_presets as $pk => $pv ) {
				if (
					( $opts['currency_code'] ?? 'USD' ) === $pv['currency_code'] &&
					( $opts['currency_position'] ?? 'before' ) === $pv['currency_position'] &&
					( $opts['thousand_separator'] ?? 'comma' ) === $pv['thousand_separator'] &&
					( $opts['decimal_separator'] ?? 'dot' ) === $pv['decimal_separator'] &&
					( $opts['measurement_system'] ?? 'mixed' ) === $pv['measurement_system']
				) {
					$active_onboarding_preset = $pk;
					break;
				}
			}
			?>
			<div>
				<label for="onboarding-region-preset" style="display: block; font-weight: 600; color: #334155; margin-bottom: 8px;">
					&#127760; <?php esc_html_e( 'Region Preset', 'vareon-calculator-suite-lite' ); ?>
				</label>
				<select id="onboarding-region-preset" style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
					<?php foreach ( $onboarding_presets as $pk => $pv ) : ?>
						<option value="<?php echo esc_attr( $pk ); ?>" <?php selected( $active_onboarding_preset, $pk ); ?>>
							<?php echo esc_html( $pv['label'] ); ?>
						</option>
					<?php endforeach; ?>
					<option value="custom" <?php selected( $active_onboarding_preset, 'custom' ); ?>><?php esc_html_e( 'Custom', 'vareon-calculator-suite-lite' ); ?></option>
				</select>
				<p style="color: #94a3b8; font-size: 13px; margin: 6px 0 0;">
					<?php esc_html_e( 'Sets currency, number formatting, and measurement units in one step. You can adjust individual settings below.', 'vareon-calculator-suite-lite' ); ?>
				</p>
			</div>

			<div>
				<label style="display: block; font-weight: 600; color: #334155; margin-bottom: 12px;">
					&#127912; <?php esc_html_e( 'Choose Your Theme', 'vareon-calculator-suite-lite' ); ?>
				</label>
				<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;">
					<label style="
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 20px;
						border: 2px solid <?php echo esc_attr( ( $opts['theme_preset'] ?? 'light' ) === 'light' ? '#3b82f6' : '#e2e8f0' ); ?>;
						border-radius: 12px;
						cursor: pointer;
						transition: all 0.2s;
						background: #fff;
					">
						<input type="radio" name="vareoncalc_lite_options[theme_preset]" value="light"
							<?php checked( $opts['theme_preset'] ?? 'light', 'light' ); ?>
							style="display: none;">
						<div style="width: 48px; height: 32px; background: #fff; border: 2px solid #e5e7eb; border-radius: 6px; margin-bottom: 8px;"></div>
						<span style="font-weight: 600; color: #334155;"><?php esc_html_e( 'Light', 'vareon-calculator-suite-lite' ); ?></span>
						<span style="font-size: 12px; color: #94a3b8;"><?php esc_html_e( 'Clean & modern', 'vareon-calculator-suite-lite' ); ?></span>
					</label>

					<label style="
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 20px;
						border: 2px solid <?php echo esc_attr( ( $opts['theme_preset'] ?? 'light' ) === 'modern' ? '#3b82f6' : '#e2e8f0' ); ?>;
						border-radius: 12px;
						cursor: pointer;
						transition: all 0.2s;
						background: #fff;
					">
						<input type="radio" name="vareoncalc_lite_options[theme_preset]" value="modern"
							<?php checked( $opts['theme_preset'] ?? 'light', 'modern' ); ?>
							style="display: none;">
						<div style="width: 48px; height: 32px; background: #f8fafc; border: 2px solid #94a3b8; border-radius: 6px; margin-bottom: 8px;"></div>
						<span style="font-weight: 600; color: #334155;"><?php esc_html_e( 'Modern', 'vareon-calculator-suite-lite' ); ?></span>
						<span style="font-size: 12px; color: #94a3b8;"><?php esc_html_e( 'Slate & minimal', 'vareon-calculator-suite-lite' ); ?></span>
					</label>

					<label style="
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 20px;
						border: 2px solid <?php echo esc_attr( ( $opts['theme_preset'] ?? 'light' ) === 'dark' ? '#3b82f6' : '#e2e8f0' ); ?>;
						border-radius: 12px;
						cursor: pointer;
						transition: all 0.2s;
						background: #fff;
					">
						<input type="radio" name="vareoncalc_lite_options[theme_preset]" value="dark"
							<?php checked( $opts['theme_preset'] ?? 'light', 'dark' ); ?>
							style="display: none;">
						<div style="width: 48px; height: 32px; background: #1f2937; border: 2px solid #374151; border-radius: 6px; margin-bottom: 8px;"></div>
						<span style="font-weight: 600; color: #334155;"><?php esc_html_e( 'Dark', 'vareon-calculator-suite-lite' ); ?></span>
						<span style="font-size: 12px; color: #94a3b8;"><?php esc_html_e( 'Sleek & bold', 'vareon-calculator-suite-lite' ); ?></span>
					</label>
				</div>
			</div>

			<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
				<div>
					<label style="display: flex; align-items: center; gap: 6px; font-weight: 600; color: #334155; margin-bottom: 8px;">
						&#128176; <?php esc_html_e( 'Currency', 'vareon-calculator-suite-lite' ); ?>
						<span class="vareoncalc-tooltip" title="<?php esc_attr_e( 'The currency symbol shown in financial calculators (e.g., loan, mortgage, savings).', 'vareon-calculator-suite-lite' ); ?>" style="
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 16px;
							height: 16px;
							background: #e2e8f0;
							color: #64748b;
							border-radius: 50%;
							font-size: 11px;
							font-weight: 700;
							cursor: help;
						">?</span>
					</label>
					<select name="vareoncalc_lite_options[currency_code]" id="onboarding-currency-code" style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
						<?php foreach ( $currencies as $code => $data ) : ?>
							<option value="<?php echo esc_attr( $code ); ?>" <?php selected( $current_code, $code ); ?>>
								<?php echo esc_html( $data['symbol'] . ' - ' . $data['label'] ); ?>
							</option>
						<?php endforeach; ?>
						<option value="CUSTOM" <?php selected( $is_custom ); ?>><?php esc_html_e( 'Custom...', 'vareon-calculator-suite-lite' ); ?></option>
					</select>
					<div id="onboarding-currency-custom" style="margin-top: 8px;<?php echo esc_attr( $is_custom ? '' : ' display: none;' ); ?>">
						<input type="text" id="onboarding-currency-custom-input"
							name="vareoncalc_lite_options[currency_symbol]"
							value="<?php echo esc_attr( $is_custom ? $current_symbol : '' ); ?>"
							maxlength="6"
							placeholder="<?php esc_attr_e( 'Enter symbol...', 'vareon-calculator-suite-lite' ); ?>"
							style="width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
					</div>
				</div>
				<div>
					<label style="display: flex; align-items: center; gap: 6px; font-weight: 600; color: #334155; margin-bottom: 8px;">
						&#128205; <?php esc_html_e( 'Position', 'vareon-calculator-suite-lite' ); ?>
						<span class="vareoncalc-tooltip" title="<?php esc_attr_e( 'Whether the currency symbol appears before ($100) or after (100$) the number.', 'vareon-calculator-suite-lite' ); ?>" style="
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 16px;
							height: 16px;
							background: #e2e8f0;
							color: #64748b;
							border-radius: 50%;
							font-size: 11px;
							font-weight: 700;
							cursor: help;
						">?</span>
					</label>
					<select name="vareoncalc_lite_options[currency_position]" id="onboarding-currency-position" style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
						<option value="before" <?php selected( $opts['currency_position'] ?? 'before', 'before' ); ?>><?php esc_html_e( 'Before ($100)', 'vareon-calculator-suite-lite' ); ?></option>
						<option value="after" <?php selected( $opts['currency_position'] ?? 'before', 'after' ); ?>><?php esc_html_e( 'After (100$)', 'vareon-calculator-suite-lite' ); ?></option>
					</select>
				</div>
			</div>

			<div>
				<label style="display: flex; align-items: center; gap: 6px; font-weight: 600; color: #334155; margin-bottom: 8px;">
					&#128207; <?php esc_html_e( 'Measurement System', 'vareon-calculator-suite-lite' ); ?>
					<span class="vareoncalc-tooltip" title="<?php esc_attr_e( 'Sets the default units for BMI, Fuel Cost, etc. "Mixed" shows a toggle so visitors can switch between Metric and Imperial themselves.', 'vareon-calculator-suite-lite' ); ?>" style="
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 16px;
						height: 16px;
						background: #e2e8f0;
						color: #64748b;
						border-radius: 50%;
						font-size: 11px;
						font-weight: 700;
						cursor: help;
					">?</span>
				</label>
				<select name="vareoncalc_lite_options[measurement_system]" id="onboarding-measurement-system" style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
					<option value="mixed" <?php selected( $opts['measurement_system'] ?? 'mixed', 'mixed' ); ?>><?php esc_html_e( 'Mixed (Calculator Default)', 'vareon-calculator-suite-lite' ); ?></option>
					<option value="metric" <?php selected( $opts['measurement_system'] ?? 'mixed', 'metric' ); ?>><?php esc_html_e( 'Metric (kg, cm, km)', 'vareon-calculator-suite-lite' ); ?></option>
					<option value="imperial" <?php selected( $opts['measurement_system'] ?? 'mixed', 'imperial' ); ?>><?php esc_html_e( 'Imperial (lbs, ft, mi)', 'vareon-calculator-suite-lite' ); ?></option>
				</select>
			</div>

			<div style="
				background: #fefce8;
				border: 1px solid #fde047;
				border-radius: 12px;
				padding: 20px;
			">
				<label style="display: flex; align-items: flex-start; gap: 12px; cursor: pointer;">
					<input type="checkbox" name="vareoncalc_lite_options[branding]" value="1"
						<?php checked( ! empty( $opts['branding'] ) ); ?>
						style="margin-top: 3px; width: 18px; height: 18px;">
					<div>
						<span style="display: flex; align-items: center; gap: 6px; font-weight: 600; color: #713f12;">
							<?php esc_html_e( 'Show "Powered by Vareon" link', 'vareon-calculator-suite-lite' ); ?>
							<span class="vareoncalc-tooltip" title="<?php esc_attr_e( 'Displays a small credit link below each calculator. Helps support free development!', 'vareon-calculator-suite-lite' ); ?>" style="
								display: inline-flex;
								align-items: center;
								justify-content: center;
								width: 16px;
								height: 16px;
								background: #fcd34d;
								color: #78350f;
								border-radius: 50%;
								font-size: 11px;
								font-weight: 700;
								cursor: help;
							">?</span>
						</span>
						<span style="font-size: 13px; color: #92400e; display: block; margin-top: 4px;">
							<?php esc_html_e( 'We keep Vareon Lite free thanks to this credit. If you can leave it on, it helps us build more calculators for everyone!', 'vareon-calculator-suite-lite' ); ?> &#10084;&#65039;
						</span>
					</div>
				</label>
			</div>

			<div style="
				background: #f8fafc;
				border: 1px solid #e2e8f0;
				border-radius: 10px;
				padding: 14px 18px;
				text-align: center;
			">
				<p style="color: #64748b; font-size: 13px; margin: 0; line-height: 1.5;">
					<span style="color: #3b82f6;">&#9432;</span>
					<?php esc_html_e( 'These are just the basics! More options like custom currency symbols, layout preferences, and per-embed overrides are available in the full settings page after onboarding.', 'vareon-calculator-suite-lite' ); ?>
				</p>
			</div>
		</form>
	</div>
	<?php
}

/**
 * Render onboarding step 3.
 */
function vareoncalc_onboarding_step_first_calc() {
	?>
	<div style="max-width: 700px; margin: 0 auto;">
		<div style="text-align: center; margin-bottom: 32px;">
			<h2 style="font-size: 24px; font-weight: 700; color: #0f172a; margin: 0 0 8px;">
				<?php esc_html_e( 'Add Your First Calculator', 'vareon-calculator-suite-lite' ); ?>
			</h2>
			<p style="color: #64748b; font-size: 15px; margin: 0;">
				<?php esc_html_e( 'Choose how you want to embed calculators on your site', 'vareon-calculator-suite-lite' ); ?>
			</p>
		</div>

		<div style="display: grid; gap: 20px;">
			<div style="
				background: #fff;
				border: 2px solid #e2e8f0;
				border-radius: 16px;
				padding: 28px;
				transition: all 0.2s;
			">
				<div style="display: flex; gap: 20px;">
					<div style="
						width: 56px; height: 56px;
						background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
						border-radius: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
					">
						<span style="font-size: 24px;">&#129521;</span>
					</div>
					<div style="flex: 1;">
						<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
							<h3 style="font-size: 18px; font-weight: 700; color: #0f172a; margin: 0;"><?php esc_html_e( 'Gutenberg Block', 'vareon-calculator-suite-lite' ); ?></h3>
							<span style="background: #dcfce7; color: #166534; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px;"><?php esc_html_e( 'RECOMMENDED', 'vareon-calculator-suite-lite' ); ?></span>
						</div>
						<p style="color: #64748b; font-size: 14px; margin: 0 0 16px; line-height: 1.6;">
							<?php esc_html_e( 'The easiest way! Search for "Vareon" in the block editor to add calculators with a visual interface.', 'vareon-calculator-suite-lite' ); ?>
						</p>
						<div style="
							background: #f8fafc;
							border-radius: 8px;
							padding: 12px 16px;
							display: flex;
							align-items: center;
							gap: 12px;
						">
							<span style="font-size: 18px;">&#128221;</span>
							<span style="font-size: 13px; color: #475569;"><?php esc_html_e( 'Edit any page → Click + → Search "Vareon Calculator"', 'vareon-calculator-suite-lite' ); ?></span>
						</div>
					</div>
				</div>
			</div>

			<div style="
				background: #fff;
				border: 2px solid #e2e8f0;
				border-radius: 16px;
				padding: 28px;
				transition: all 0.2s;
			">
				<div style="display: flex; gap: 20px;">
					<div style="
						width: 56px; height: 56px;
						background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
						border-radius: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
					">
						<span style="font-size: 24px;">&#128221;</span>
					</div>
					<div style="flex: 1;">
						<h3 style="font-size: 18px; font-weight: 700; color: #0f172a; margin: 0 0 8px;"><?php esc_html_e( 'Shortcode', 'vareon-calculator-suite-lite' ); ?></h3>
						<p style="color: #64748b; font-size: 14px; margin: 0 0 16px; line-height: 1.6;">
							<?php esc_html_e( 'Copy a shortcode and paste it anywhere — posts, pages, widgets, or theme templates.', 'vareon-calculator-suite-lite' ); ?>
						</p>
						<div id="shortcode-display" style="
							background: #1e293b;
							border-radius: 8px;
							padding: 14px 18px;
							font-family: 'SF Mono', 'Consolas', monospace;
							font-size: 14px;
							color: #e2e8f0;
							display: flex;
							justify-content: space-between;
							align-items: center;
							transition: all 0.15s ease;
						">
							<code id="shortcode-text">[vareon type="<span id="shortcode-type">loan</span>"]</code>
							<button type="button" id="shortcode-copy-btn" style="
								background: #3b82f6;
								border: none;
								color: #fff;
								padding: 6px 12px;
								border-radius: 6px;
								font-size: 12px;
								font-weight: 500;
								cursor: pointer;
								transition: all 0.15s ease;
							"><?php esc_html_e( 'Copy', 'vareon-calculator-suite-lite' ); ?></button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div style="
			background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
			border: 1px solid #bfdbfe;
			border-radius: 12px;
			padding: 20px 24px;
			margin-top: 24px;
			display: flex;
			align-items: center;
			gap: 16px;
			text-align: left;
		">
			<div style="font-size: 32px;">&#128161;</div>
			<div>
				<strong style="color: #1e3a8a; font-size: 14px;"><?php esc_html_e( 'Quick Tip', 'vareon-calculator-suite-lite' ); ?></strong>
				<p style="color: #1e3a8a; margin: 4px 0 0; font-size: 14px;">
					<?php
					printf(
						/* translators: %s: shortcode example */
						esc_html__( 'Use shortcodes like %s or the Gutenberg block to embed calculators anywhere on your site.', 'vareon-calculator-suite-lite' ),
						'<code style="background: #fff; padding: 2px 6px; border-radius: 4px; color: #1e3a8a;">[vareon type="loan"]</code>'
					);
					?>
				</p>
			</div>
		</div>

		<div style="margin-top: 28px;">
			<h4 style="font-size: 14px; font-weight: 600; color: #64748b; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em;">
				<?php esc_html_e( 'Try Different Calculators', 'vareon-calculator-suite-lite' ); ?>
			</h4>
			<p style="font-size: 13px; color: #94a3b8; margin: 0 0 12px;">
				<?php esc_html_e( 'Click a calculator to update the shortcode above, then copy it.', 'vareon-calculator-suite-lite' ); ?>
			</p>
			<div style="display: flex; flex-wrap: wrap; gap: 8px;">
				<?php
				$examples = array(
					'loan'       => '&#128176; ' . esc_html__( 'Loan', 'vareon-calculator-suite-lite' ),
					'mortgage'   => '&#127968; ' . esc_html__( 'Mortgage', 'vareon-calculator-suite-lite' ),
					'tip'        => '&#129534; ' . esc_html__( 'Tip', 'vareon-calculator-suite-lite' ),
					'bmi'        => '&#128207; ' . esc_html__( 'BMI', 'vareon-calculator-suite-lite' ),
					'percentage' => '&#128175; ' . esc_html__( 'Percentage', 'vareon-calculator-suite-lite' ),
					'discount'   => '&#127991;&#65039; ' . esc_html__( 'Discount', 'vareon-calculator-suite-lite' ),
				);
				$first    = true;
				foreach ( $examples as $type => $label ) :
					?>
					<button type="button" class="vareoncalc-type-btn" data-type="<?php echo esc_attr( $type ); ?>" style="
						background: <?php echo esc_attr( $first ? '#3b82f6' : '#f1f5f9' ); ?>;
						border: 1px solid <?php echo esc_attr( $first ? '#3b82f6' : '#e2e8f0' ); ?>;
						color: <?php echo esc_attr( $first ? '#fff' : '#475569' ); ?>;
						padding: 8px 14px;
						border-radius: 8px;
						font-size: 13px;
						cursor: pointer;
						transition: all 0.15s ease;
					">
						<?php echo wp_kses_post( $label ); ?>
					</button>
					<?php
					$first = false;
				endforeach;
				?>
			</div>
		</div>
	</div>
	<?php
}

/**
 * Render onboarding step 4.
 */
function vareoncalc_onboarding_step_ready() {
	?>
	<div style="text-align: center; max-width: 600px; margin: 0 auto;">
		<div style="font-size: 80px; line-height: 1; margin-bottom: 24px;">
			&#127881;
		</div>
		<h2 style="font-size: 32px; font-weight: 700; color: #0f172a; margin: 0 0 12px;">
			<?php esc_html_e( "You're All Set!", 'vareon-calculator-suite-lite' ); ?>
		</h2>
		<p style="font-size: 17px; color: #475569; line-height: 1.7; margin: 0 0 40px;">
			<?php esc_html_e( 'Your calculator suite is ready to use. Start adding calculators to your content!', 'vareon-calculator-suite-lite' ); ?>
		</p>

		<div style="
			background: #f8fafc;
			border: 1px solid #e2e8f0;
			border-radius: 12px;
			padding: 24px;
			margin-bottom: 32px;
			text-align: left;
		">
			<h3 style="font-size: 16px; font-weight: 700; color: #334155; margin: 0 0 16px;">
				<?php esc_html_e( 'What\'s Next?', 'vareon-calculator-suite-lite' ); ?>
			</h3>
			<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
				<a href="<?php echo esc_url( 'https://vareon.dev/docs' ); ?>" target="_blank" rel="noopener noreferrer" style="
					display: flex;
					align-items: center;
					gap: 12px;
					text-decoration: none;
					color: #475569;
					padding: 12px;
					background: #fff;
					border: 1px solid #e2e8f0;
					border-radius: 8px;
					transition: all 0.2s;
				">
					<span style="font-size: 20px;">&#128218;</span>
					<div>
						<strong style="display: block; color: #0f172a; font-size: 14px;"><?php esc_html_e( 'Documentation', 'vareon-calculator-suite-lite' ); ?></strong>
						<span style="font-size: 12px;"><?php esc_html_e( 'Guides & Tutorials', 'vareon-calculator-suite-lite' ); ?></span>
					</div>
				</a>
				<a href="<?php echo esc_url( 'https://vareon.dev/docs/calculator-library/' ); ?>" target="_blank" rel="noopener noreferrer" style="
					display: flex;
					align-items: center;
					gap: 12px;
					text-decoration: none;
					color: #475569;
					padding: 12px;
					background: #fff;
					border: 1px solid #e2e8f0;
					border-radius: 8px;
					transition: all 0.2s;
				">
					<span style="font-size: 20px;">&#129518;</span>
					<div>
						<strong style="display: block; color: #0f172a; font-size: 14px;"><?php esc_html_e( 'Calculator Library', 'vareon-calculator-suite-lite' ); ?></strong>
						<span style="font-size: 12px;"><?php esc_html_e( 'Browse all calculators', 'vareon-calculator-suite-lite' ); ?></span>
					</div>
				</a>
			</div>
		</div>

	</div>
	<?php
}

/**
 * Render the restart onboarding footer button.
 *
 * @return string HTML button markup.
 */
function vareoncalc_render_restart_onboarding_button() {
	$base_url = add_query_arg(
		array(
			'page'                          => 'vareoncalc',
			'tab'                           => 'welcome',
			'onboarding_step'               => 1,
			'vareoncalc_restart_onboarding' => '1',
		),
		admin_url( 'options-general.php' )
	);

	$url = wp_nonce_url( $base_url, 'vareoncalc_restart_onboarding', '_vareoncalc_nonce' );

	return sprintf(
		'<a href="%s" class="vareoncalc-footer-link" style="display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 13px;">
			<span class="dashicons dashicons-welcome-learn-more" style="font-size: 16px; width: 16px; height: 16px;"></span>
			<span>%s</span>
		</a>',
		esc_url( $url ),
		esc_html__( 'Restart Setup Wizard', 'vareon-calculator-suite-lite' )
	);
}
