<?php
/**
 * Simple Admin Speed Test Page
 *
 * @package MaplePress_SearchSpeedTest
 */

if ( ! current_user_can( 'manage_options' ) ) {
	wp_die( esc_html__( 'You do not have permission to access this page.', 'maplepress-searchspeedtest' ) );
}
?>

<div class="wrap mpss-wrap">
	<!-- Header -->
	<div style="margin: 30px 0 40px 0;">
		<h1 style="font-size: 32px; font-weight: 300; margin: 0 0 10px 0; color: #1e1e1e;">
			<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600;">
				<?php esc_html_e( 'How Fast is Your Search?', 'maplepress-searchspeedtest' ); ?>
			</span>
		</h1>
		<p style="font-size: 16px; color: #666; margin: 0;">
			<?php esc_html_e( 'Find out how quickly visitors can search your website', 'maplepress-searchspeedtest' ); ?>
		</p>
	</div>

	<!-- Test Configuration -->
	<div class="mpss-test-config">
		<div class="mpss-card" style="max-width: 900px; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border: none; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 40px;">

			<!-- Number of Queries Section -->
			<div style="margin-bottom: 35px;">
				<label for="mpss-query-count" style="display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: #1e1e1e;">
					<span style="display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%; margin-right: 10px; font-size: 14px;">1</span>
					<?php esc_html_e( 'How thorough should the test be?', 'maplepress-searchspeedtest' ); ?>
				</label>
				<p style="font-size: 13px; color: #666; margin: 0 0 15px 42px; line-height: 1.5;">
					<?php esc_html_e( 'More searches = more accurate results, but takes longer to complete', 'maplepress-searchspeedtest' ); ?>
				</p>
				<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
					<select id="mpss-query-count" name="query_count" style="width: 100%; padding: 12px 16px; font-size: 15px; border: 2px solid #e0e0e0; border-radius: 8px; background: white; cursor: pointer; transition: all 0.2s;">
						<option value="10" selected>10 searches - Super quick (recommended to start) ⭐</option>
						<option value="50">50 searches - Quick and accurate</option>
						<option value="100">100 searches - Balanced (good choice)</option>
						<option value="250">250 searches - Very thorough</option>
						<option value="500">500 searches - Heavy load test</option>
						<option value="1000">1,000 searches - Serious stress test</option>
						<option value="2500">2,500 searches - Extreme testing</option>
						<option value="5000">5,000 searches - Maximum stress 🔥</option>
						<option value="10000">10,000 searches - Ultimate challenge 💪</option>
					</select>
				</div>
			</div>

			<!-- Execution Mode Section -->
			<div style="margin-bottom: 35px;">
				<label style="display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: #1e1e1e;">
					<span style="display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 50%; margin-right: 10px; font-size: 14px;">2</span>
					<?php esc_html_e( 'How should we test?', 'maplepress-searchspeedtest' ); ?>
				</label>
				<p style="font-size: 13px; color: #666; margin: 0 0 15px 42px; line-height: 1.5;">
					<?php esc_html_e( 'Choose how the test simulates visitors searching your site', 'maplepress-searchspeedtest' ); ?>
				</p>

				<!-- Normal Mode Card -->
				<label class="mpss-mode-card" for="mpss-mode-serial" style="display: block; margin-bottom: 15px; cursor: pointer;">
					<input type="radio" name="execution_mode" id="mpss-mode-serial" value="serial" checked style="display: none;">
					<div class="mpss-mode-card-inner" style="background: white; padding: 20px; border-radius: 12px; border: 2px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: all 0.3s;">
						<div style="display: flex; align-items: center; margin-bottom: 8px;">
							<span style="font-size: 24px; margin-right: 12px;">👤</span>
							<div>
								<div style="font-size: 16px; font-weight: 600; color: #1e1e1e;">
									<?php esc_html_e( 'Normal - One Person at a Time', 'maplepress-searchspeedtest' ); ?>
									<span class="mpss-mode-badge" style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #e8f5e9; color: #2e7d32; font-size: 11px; font-weight: 600; border-radius: 4px; text-transform: uppercase;">Start Here</span>
								</div>
								<div style="font-size: 13px; color: #666; margin-top: 4px;">
									<?php esc_html_e( 'Simulates one visitor searching at a time', 'maplepress-searchspeedtest' ); ?>
								</div>
							</div>
						</div>
						<div id="mpss-serial-explanation" style="margin-top: 12px; padding: 12px; background: linear-gradient(to right, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05)); border-left: 3px solid #667eea; border-radius: 6px; font-size: 13px; color: #666; line-height: 1.6;">
							💡 <?php esc_html_e( 'Best for everyday testing. Shows how fast searches are under normal conditions.', 'maplepress-searchspeedtest' ); ?>
						</div>
					</div>
				</label>

				<!-- Stress Test Mode Card -->
				<label class="mpss-mode-card" for="mpss-mode-parallel" style="display: block; cursor: pointer;">
					<input type="radio" name="execution_mode" id="mpss-mode-parallel" value="parallel" style="display: none;">
					<div class="mpss-mode-card-inner" style="background: white; padding: 20px; border-radius: 12px; border: 2px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: all 0.3s;">
						<div style="display: flex; align-items: center; margin-bottom: 8px;">
							<span style="font-size: 24px; margin-right: 12px;">👥</span>
							<div>
								<div style="font-size: 16px; font-weight: 600; color: #1e1e1e;">
									<?php esc_html_e( 'Stress Test - Many People at Once', 'maplepress-searchspeedtest' ); ?>
									<span class="mpss-mode-badge" style="display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fff3e0; color: #e65100; font-size: 11px; font-weight: 600; border-radius: 4px; text-transform: uppercase;">Advanced</span>
								</div>
								<div style="font-size: 13px; color: #666; margin-top: 4px;">
									<?php esc_html_e( 'Simulates many visitors searching at the same time', 'maplepress-searchspeedtest' ); ?>
								</div>
							</div>
						</div>
						<div id="mpss-parallel-explanation" style="margin-top: 12px; padding: 12px; background: linear-gradient(to right, rgba(255, 152, 0, 0.05), rgba(255, 87, 34, 0.05)); border-left: 3px solid #ff9800; border-radius: 6px; font-size: 13px; color: #e65100; line-height: 1.6;">
							⚠️ <?php esc_html_e( 'Tests your site under heavy load. May temporarily slow down your website.', 'maplepress-searchspeedtest' ); ?>
						</div>
					</div>
				</label>
			</div>

			<!-- Run Button -->
			<div style="text-align: center; margin-top: 40px;">
				<button id="mpss-run-test" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 18px 56px; font-size: 17px; font-weight: 600; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px;">
					<span style="font-size: 22px;">🚀</span>
					<?php esc_html_e( 'Start Test Now', 'maplepress-searchspeedtest' ); ?>
				</button>
				<p style="font-size: 12px; color: #999; margin-top: 15px;">
					<?php esc_html_e( 'This won\'t affect your live website or visitors', 'maplepress-searchspeedtest' ); ?>
				</p>
			</div>
		</div>
	</div>

	<!-- Progress -->
	<div id="mpss-progress" class="mpss-progress" style="display: none;">
		<div class="mpss-card" style="max-width: 900px; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border: none; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 40px;">
			<div style="text-align: center;">
				<div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
				<h2 style="font-size: 24px; font-weight: 600; margin: 0 0 15px 0;">
					<?php esc_html_e( 'Testing Your Search Speed...', 'maplepress-searchspeedtest' ); ?>
				</h2>
				<p id="mpss-progress-text" style="font-size: 15px; color: #666; margin-bottom: 10px;">
					<?php esc_html_e( 'Please wait, this will only take a moment...', 'maplepress-searchspeedtest' ); ?>
				</p>
				<div id="mpss-progress-counter" style="font-size: 32px; font-weight: bold; color: #667eea; margin: 15px 0;">
					<span id="mpss-completed-count">0</span> / <span id="mpss-total-count">0</span>
				</div>
				<p style="font-size: 13px; color: #999; margin-bottom: 5px;">searches completed</p>
				<p id="mpss-time-estimate" style="font-size: 13px; color: #667eea; font-weight: 600; margin-bottom: 25px;">
					<?php esc_html_e( 'Estimated time: calculating...', 'maplepress-searchspeedtest' ); ?>
				</p>
			</div>
			<div class="mpss-progress-bar">
				<div id="mpss-progress-fill" class="mpss-progress-fill" style="width: 0%;"></div>
			</div>
			<div style="text-align: center; margin-top: 20px;">
				<button id="mpss-cancel-test" style="background: transparent; color: #dc3232; border: 2px solid #dc3232; padding: 10px 24px; font-size: 14px; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s;">
					<span style="font-size: 16px;">✕</span> <?php esc_html_e( 'Cancel Test', 'maplepress-searchspeedtest' ); ?>
				</button>
			</div>
		</div>
	</div>

	<!-- Results -->
	<div id="mpss-results" class="mpss-results" style="display: none;">
		<div class="mpss-card" style="max-width: 900px; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border: none; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 40px;">
			<div style="text-align: center; margin-bottom: 30px;">
				<div style="font-size: 64px; margin-bottom: 15px;">✅</div>
				<h2 style="font-size: 28px; font-weight: 600; margin: 0 0 10px 0;">
					<?php esc_html_e( 'Your Results Are Ready!', 'maplepress-searchspeedtest' ); ?>
				</h2>
				<p style="font-size: 15px; color: #666; margin: 0;">
					<?php esc_html_e( 'Here\'s how your search performed', 'maplepress-searchspeedtest' ); ?>
				</p>
			</div>

			<!-- Summary Stats -->
			<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 30px auto; max-width: 800px;">
				<div style="text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);">
					<div style="font-size: 48px; font-weight: bold; color: #fff; margin-bottom: 10px;" id="mpss-total-queries">-</div>
					<div style="font-size: 14px; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;"><?php esc_html_e( 'Searches Tested', 'maplepress-searchspeedtest' ); ?></div>
				</div>
				<div style="text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);">
					<div style="font-size: 48px; font-weight: bold; color: #fff; margin-bottom: 10px;" id="mpss-total-time">-</div>
					<div style="font-size: 14px; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;"><?php esc_html_e( 'Time Taken', 'maplepress-searchspeedtest' ); ?></div>
				</div>
			</div>

			<!-- Quick Recommendations -->
			<div id="mpss-recommendations" style="margin: 30px 0;"></div>

			<!-- Chart -->
			<div style="margin: 40px 0;">
				<h3 style="font-size: 18px; font-weight: 600; margin: 0 0 20px 0; color: #1e1e1e;">
					📊 <?php esc_html_e( 'Individual Search Times', 'maplepress-searchspeedtest' ); ?>
				</h3>
				<canvas id="mpss-chart"></canvas>
			</div>

			<!-- Actions -->
			<div style="display: flex; gap: 15px; justify-content: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #e0e0e0;">
				<button id="mpss-run-again" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 32px; font-size: 15px; font-weight: 600; border-radius: 50px; cursor: pointer; box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px;">
					<span style="font-size: 16px;">🔄</span>
					<?php esc_html_e( 'Test Again', 'maplepress-searchspeedtest' ); ?>
				</button>
				<button id="mpss-share-results" style="background: #3b5998; color: white; border: none; padding: 12px 32px; font-size: 15px; font-weight: 600; border-radius: 50px; cursor: pointer; box-shadow: 0 2px 10px rgba(59, 89, 152, 0.3); transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px;">
					<span style="font-size: 16px;">📤</span>
					<?php esc_html_e( 'Share Results', 'maplepress-searchspeedtest' ); ?>
				</button>
				<button id="mpss-export-results" style="background: white; color: #667eea; border: 2px solid #667eea; padding: 12px 32px; font-size: 15px; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px;">
					<span style="font-size: 16px;">📥</span>
					<?php esc_html_e( 'Download Results', 'maplepress-searchspeedtest' ); ?>
				</button>
			</div>
		</div>
	</div>

	<!-- Share Modal -->
	<div id="mpss-share-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center;">
		<div style="background: white; padding: 40px; border-radius: 20px; max-width: 600px; width: 90%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); position: relative;">
			<button id="mpss-close-share-modal" style="position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #999; transition: color 0.2s;" onmouseover="this.style.color='#333'" onmouseout="this.style.color='#999'">✖</button>

			<h2 style="margin: 0 0 25px 0; font-size: 24px; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
				📤 Share Your Results
			</h2>

			<div id="mpss-share-content" style="margin-bottom: 30px; text-align: center;">
				<div id="mpss-share-graphic" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 16px; color: white; margin-bottom: 20px;">
					<!-- Share graphic will be generated here -->
				</div>
				<p style="color: #666; font-size: 13px;">Click a button below to share your results</p>
			</div>

			<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
				<button class="mpss-share-twitter" style="background: #1DA1F2; color: white; border: none; padding: 15px; font-size: 15px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 15px rgba(29, 161, 242, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
					<span style="font-size: 18px;">🐦</span>
					Twitter / X
				</button>
				<button class="mpss-share-facebook" style="background: #1877F2; color: white; border: none; padding: 15px; font-size: 15px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 15px rgba(24, 119, 242, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
					<span style="font-size: 18px;">👥</span>
					Facebook
				</button>
				<button class="mpss-share-linkedin" style="background: #0A66C2; color: white; border: none; padding: 15px; font-size: 15px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 15px rgba(10, 102, 194, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
					<span style="font-size: 18px;">💼</span>
					LinkedIn
				</button>
				<button class="mpss-share-copy" style="background: #10b981; color: white; border: none; padding: 15px; font-size: 15px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 15px rgba(16, 185, 129, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
					<span style="font-size: 18px;">📋</span>
					Copy Link
				</button>
			</div>
		</div>
	</div>

</div>
