<?php
/**
 * First-run welcome wizard view.
 *
 * @package WPLens
 */

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
// phpcs:disable WordPress.Security.NonceVerification.Recommended

$settings = \WPLens\Utils\Options::all();
$keys     = get_option( 'wplens_provider_keys', array() );
$has_key  = is_array( $keys ) && ! empty( $keys['openai'] );
$decrypt  = $has_key ? \WPLens\Utils\Encryption::decrypt( (string) $keys['openai'] ) : '';
$masked   = $decrypt ? \WPLens\Utils\Encryption::mask( $decrypt ) : '';

$step     = isset( $_GET['step'] ) ? max( 1, min( 4, absint( $_GET['step'] ) ) ) : 1;
?>
<div class="wrap">
	<div class="lens-welcome" data-current-step="<?php echo (int) $step; ?>">
		<header>
			<h1><?php echo esc_html__( 'Welcome to Lens', 'lens-ai-visibility-monitor' ); ?></h1>
			<p><?php echo esc_html__( 'See which AI bots crawl your site, what they read, and whether ChatGPT and Perplexity actually cite you.', 'lens-ai-visibility-monitor' ); ?></p>
		</header>

		<div class="steps">
			<div class="step <?php echo $step === 1 ? 'active' : ( $step > 1 ? 'done' : '' ); ?>"><?php esc_html_e( 'Welcome', 'lens-ai-visibility-monitor' ); ?></div>
			<div class="step <?php echo $step === 2 ? 'active' : ( $step > 2 ? 'done' : '' ); ?>"><?php esc_html_e( 'AI key', 'lens-ai-visibility-monitor' ); ?></div>
			<div class="step <?php echo $step === 3 ? 'active' : ( $step > 3 ? 'done' : '' ); ?>"><?php esc_html_e( 'Modules', 'lens-ai-visibility-monitor' ); ?></div>
			<div class="step <?php echo $step === 4 ? 'active' : ''; ?>"><?php esc_html_e( 'Done', 'lens-ai-visibility-monitor' ); ?></div>
		</div>

		<?php if ( 1 === $step ) : ?>
			<div class="step-body">
				<h2><?php esc_html_e( "You're all set up.", 'lens-ai-visibility-monitor' ); ?></h2>
				<p class="desc">
					<?php esc_html_e( 'Crawler logging is already running. Lens is detecting requests from 18 AI bot families — GPTBot, ClaudeBot, PerplexityBot, Google-Extended and more — and writing them to your database.', 'lens-ai-visibility-monitor' ); ?>
				</p>
				<p class="desc">
					<?php esc_html_e( 'The next two steps are optional but recommended:', 'lens-ai-visibility-monitor' ); ?>
				</p>
				<ul style="margin-left: 20px; color: #50575e; line-height: 1.8;">
					<li><?php esc_html_e( 'Connect an OpenAI key to unlock per-page AEO scoring + citation tracking.', 'lens-ai-visibility-monitor' ); ?></li>
					<li><?php esc_html_e( 'Pick which optional modules to enable.', 'lens-ai-visibility-monitor' ); ?></li>
				</ul>
			</div>
			<div class="footer">
				<a class="lens-btn ghost" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-ai-visibility-monitor' ) ); ?>"><?php esc_html_e( 'Skip the wizard', 'lens-ai-visibility-monitor' ); ?></a>
				<a class="lens-btn primary" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-welcome&step=2' ) ); ?>"><?php esc_html_e( 'Get started →', 'lens-ai-visibility-monitor' ); ?></a>
			</div>

		<?php elseif ( 2 === $step ) : ?>
			<div class="step-body">
				<h2><?php esc_html_e( 'Connect your AI provider', 'lens-ai-visibility-monitor' ); ?></h2>
				<p class="desc">
					<?php esc_html_e( 'Lens uses your own OpenAI API key — there is no Lens subscription, and we never proxy your data through our servers. A typical per-page scan costs around $0.001–0.005 on gpt-4o-mini.', 'lens-ai-visibility-monitor' ); ?>
				</p>

				<?php if ( $has_key ) : ?>
					<div class="lens-key-row" style="margin-bottom:12px;">
						<span><?php esc_html_e( 'Current key:', 'lens-ai-visibility-monitor' ); ?></span>
						<code class="lens-masked-key"><?php echo esc_html( $masked ); ?></code>
						<span class="lens-pill ok"><?php esc_html_e( 'Connected', 'lens-ai-visibility-monitor' ); ?></span>
					</div>
				<?php endif; ?>

				<form id="lens-welcome-key-form" method="post" autocomplete="off">
					<?php wp_nonce_field( 'wplens_save_settings' ); ?>
					<label for="welcome-openai-key" style="display:block;font-weight:600;margin-bottom:6px;"><?php esc_html_e( 'OpenAI API key', 'lens-ai-visibility-monitor' ); ?></label>
					<div style="display:flex;gap:8px;">
						<input id="welcome-openai-key" name="openai_api_key" type="password" autocomplete="new-password" class="lens-input" style="flex:1" placeholder="sk-..." />
						<button id="lens-test-key-btn" type="button" class="lens-btn"><span class="spinner"></span><?php esc_html_e( 'Test', 'lens-ai-visibility-monitor' ); ?></button>
					</div>
					<p class="desc" style="font-size:12px;margin-top:6px;">
						<?php
						printf(
							/* translators: %s is a link to platform.openai.com */
							esc_html__( 'Get a key at %s.', 'lens-ai-visibility-monitor' ),
							'<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">platform.openai.com/api-keys</a>'
						);
						?>
					</p>
					<input type="hidden" name="wplens_save_settings" value="1" />
				</form>
			</div>
			<div class="footer">
				<a class="lens-btn ghost" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-welcome&step=3' ) ); ?>"><?php esc_html_e( 'Skip for now', 'lens-ai-visibility-monitor' ); ?></a>
				<button id="lens-save-key-next" type="button" class="lens-btn primary"><?php esc_html_e( 'Save & continue →', 'lens-ai-visibility-monitor' ); ?></button>
			</div>

		<?php elseif ( 3 === $step ) : ?>
			<div class="step-body">
				<h2><?php esc_html_e( 'Pick your modules', 'lens-ai-visibility-monitor' ); ?></h2>
				<p class="desc"><?php esc_html_e( 'You can change these any time from Settings.', 'lens-ai-visibility-monitor' ); ?></p>

				<form id="lens-welcome-modules" method="post">
					<?php wp_nonce_field( 'wplens_save_settings' ); ?>
					<label class="toggle-row">
						<input type="checkbox" name="crawler_log" value="1" checked disabled>
						<div>
							<span class="label"><?php esc_html_e( 'AI crawler logging', 'lens-ai-visibility-monitor' ); ?></span>
							<span class="help"><?php esc_html_e( 'Logs every recognised AI bot request. Always on — this is the core of Lens.', 'lens-ai-visibility-monitor' ); ?></span>
						</div>
					</label>
					<label class="toggle-row">
						<input type="checkbox" name="aeo_scans" value="1" <?php checked( ! empty( $settings['modules']['aeo_scans'] ) ); ?>>
						<div>
							<span class="label"><?php esc_html_e( 'AEO scans', 'lens-ai-visibility-monitor' ); ?></span>
							<span class="help"><?php esc_html_e( 'Per-page citability scoring. Local checks are free; AI-enriched scoring uses your OpenAI key.', 'lens-ai-visibility-monitor' ); ?></span>
						</div>
					</label>
					<label class="toggle-row">
						<input type="checkbox" name="citation_tracking" value="1" <?php checked( ! empty( $settings['modules']['citation_tracking'] ) ); ?>>
						<div>
							<span class="label"><?php esc_html_e( 'Citation tracking', 'lens-ai-visibility-monitor' ); ?></span>
							<span class="help"><?php esc_html_e( 'Asks the major AI engines whether they cite your domain for your seed queries.', 'lens-ai-visibility-monitor' ); ?></span>
						</div>
					</label>
					<label class="toggle-row">
						<input type="checkbox" name="weekly_report" value="1" <?php checked( ! empty( $settings['modules']['weekly_report'] ) ); ?>>
						<div>
							<span class="label"><?php esc_html_e( 'Weekly visibility report', 'lens-ai-visibility-monitor' ); ?></span>
							<span class="help"><?php esc_html_e( 'Emailed every Monday morning. Configure recipients in Settings → Reporting.', 'lens-ai-visibility-monitor' ); ?></span>
						</div>
					</label>
					<input type="hidden" name="wplens_save_settings" value="1" />
				</form>
			</div>
			<div class="footer">
				<a class="lens-btn ghost" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-welcome&step=2' ) ); ?>">← <?php esc_html_e( 'Back', 'lens-ai-visibility-monitor' ); ?></a>
				<button id="lens-save-modules-next" type="button" class="lens-btn primary"><?php esc_html_e( 'Save & finish →', 'lens-ai-visibility-monitor' ); ?></button>
			</div>

		<?php elseif ( 4 === $step ) : ?>
			<?php update_option( 'wplens_setup_complete', true ); ?>
			<div class="step-body" style="text-align:center;">
				<div style="font-size:48px;margin:-8px 0 8px;">🎉</div>
				<h2><?php esc_html_e( "You're ready to go.", 'lens-ai-visibility-monitor' ); ?></h2>
				<p class="desc"><?php esc_html_e( 'Lens is now monitoring your site. New crawler data shows up on the Dashboard as bots visit. If you connected an OpenAI key, you can run AEO scans and citation checks right now.', 'lens-ai-visibility-monitor' ); ?></p>

				<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;text-align:left;">
					<div class="lens-card hoverable" style="padding:16px;">
						<strong><?php esc_html_e( 'Open the Dashboard', 'lens-ai-visibility-monitor' ); ?></strong>
						<p style="margin:6px 0 12px;font-size:13px;color:#646970;"><?php esc_html_e( 'See live crawler activity and trends.', 'lens-ai-visibility-monitor' ); ?></p>
						<a class="lens-btn primary" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-ai-visibility-monitor' ) ); ?>"><?php esc_html_e( 'Dashboard →', 'lens-ai-visibility-monitor' ); ?></a>
					</div>
					<div class="lens-card hoverable" style="padding:16px;">
						<strong><?php esc_html_e( 'Run your first scan', 'lens-ai-visibility-monitor' ); ?></strong>
						<p style="margin:6px 0 12px;font-size:13px;color:#646970;"><?php esc_html_e( 'Pick any post and get an AEO score in seconds.', 'lens-ai-visibility-monitor' ); ?></p>
						<a class="lens-btn" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-scans' ) ); ?>"><?php esc_html_e( 'Open Scans →', 'lens-ai-visibility-monitor' ); ?></a>
					</div>
				</div>
			</div>
			<div class="footer">
				<span></span>
				<a class="lens-btn primary" href="<?php echo esc_url( admin_url( 'admin.php?page=lens-ai-visibility-monitor' ) ); ?>"><?php esc_html_e( 'Take me to the Dashboard', 'lens-ai-visibility-monitor' ); ?></a>
			</div>
		<?php endif; ?>
	</div>
</div>
