<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Add a non-intrusive About/Upgrade page under Appearance.
 */
function baithak_register_about_page() {
	add_theme_page(
		__( 'Upgrade to Pro', 'baithak' ),
		__( 'Upgrade to Pro', 'baithak' ),
		'manage_options',
		'baithak-about',
		'baithak_render_about_page'
	);
}
add_action( 'admin_menu', 'baithak_register_about_page' );

/**
 * Load lightweight styles only on the About page.
 */
function baithak_about_page_assets( $hook ) {
	if ( 'appearance_page_baithak-about' !== $hook ) {
		return;
	}

	$css = '
		.wproyal-hero{margin-bottom:20px;padding:16px 18px;background:#fff;border:1px solid #e5e7eb;border-radius:12px}
		.wproyal-hero-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
		.wproyal-hero h1{margin:0;font-size:22px}
		.wproyal-hero p{margin:0;color:#50575e}
		.wproyal-hero-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
		.wproyal-hero .wproyal-hero-cta{font-size:14px;font-weight:600;padding:6px 16px;display:flex;align-items:center}
		.wproyal-hero .wproyal-hero-cta .dashicons{margin-right:6px}
		.wproyal-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:12px 0 24px}
		.wproyal-step-card{border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
		.wproyal-step-title{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:14px}
		.wproyal-step-badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#f0f0f1;color:#50575e}
		.wproyal-step-list{margin:0;padding-left:0;list-style:none}
		.wproyal-step-item{display:flex;gap:8px;align-items:center;margin:6px 0;color:#3c434a}
		.wproyal-step-item.is-done{color:#1a7f37}
		.wproyal-step-icon{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c3c4c7;font-size:11px;line-height:1}
		.wproyal-step-item.is-done .wproyal-step-icon{background:#1a7f37;border-color:#1a7f37;color:#fff}
		.wproyal-unlock{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:600;color:#2271b1}
		.wproyal-unlock-icon{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2271b1;color:#fff;font-size:12px;line-height:1}
		.wproyal-columns{margin-top:16px}
		.wproyal-pricing{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
		.wproyal-pricing th,.wproyal-pricing td{padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:left}
		.wproyal-pricing thead th{background:#f6f7f7;font-weight:600;color:#1d2327}
		.wproyal-pricing tbody tr:last-child td{border-bottom:none}
		.wproyal-pricing tbody tr:hover td{background:#f9fafb}
		.wproyal-pricing .is-pro{color:#1a7f37;font-weight:600}
		.wproyal-pricing .is-free{color:#50575e}
	';
	wp_register_style( 'baithak-about', false );
	wp_enqueue_style( 'baithak-about' );
	wp_add_inline_style( 'baithak-about', $css );
}
add_action( 'admin_enqueue_scripts', 'baithak_about_page_assets' );


/**
 * Render About page content.
 */
function baithak_render_about_page() {
	$theme = wp_get_theme();
	$pro_url   = apply_filters( 'baithak_pro_url', 'https://wproyal.com/baithak' );
	$docs_url  = apply_filters( 'baithak_docs_url', 'https://wproyal.com/docs/' );
	$support_url = apply_filters( 'baithak_support_url', 'https://wordpress.org/support/theme/baithak/' );
	$changelog_url = apply_filters( 'baithak_changelog_url', 'https://wordpress.org/themes/baithak/' );
	$sections = [
		[
			'label' => __( 'Setup Basics', 'baithak' ),
			'items' => [
				[ 'label' => __( 'Full Site Editing', 'baithak' ), 'done' => true ],
				[ 'label' => __( 'Colors customization', 'baithak' ), 'done' => true ],
				[ 'label' => __( 'Typography', 'baithak' ), 'done' => true ],
			],
		],
		[
			'label' => __( 'Content & Pages', 'baithak' ),
			'items' => [
				[ 'label' => __( 'Pages created', 'baithak' ), 'done' => true ],
				[ 'label' => __( 'Blog page setup', 'baithak' ), 'done' => true ],
				[ 'label' => __( 'Header & Footer', 'baithak' ), 'done' => true ],
			],
		],
		[
			'label'   => __( 'Design & Polish', 'baithak' ),
			'premium' => true,
			'items'   => [
				[ 'label' => __( 'Additional blocks layout', 'baithak' ) ],
				[ 'label' => __( 'Dark / Light mode', 'baithak' ) ],
				[ 'label' => __( 'Popular posts widget', 'baithak' ) ],
			],
		],
		[
			'label'   => __( 'Growth & Monetization', 'baithak' ),
			'premium' => true,
			'items'   => [
				[ 'label' => __( 'Advertisement blocks', 'baithak' ) ],
				[ 'label' => __( 'Social sharing', 'baithak' ) ],
				[ 'label' => __( 'Like & reactions system', 'baithak' ) ],
			],
		],
	];

	$total = $done = 0;
	foreach ( $sections as $section ) {
		if ( ! empty( $section['premium'] ) ) {
			continue;
		}
		foreach ( $section['items'] as $item ) {
			$total++;
			if ( ! empty( $item['done'] ) ) {
				$done++;
			}
		}
	}
	$progress = $total ? round( ( $done / $total ) * 100 ) : 0;
	?>

	<div class="wrap wproyal-about-wrap">
		<div class="wproyal-hero">
			<div class="wproyal-hero-header">
				<h1><?php echo esc_html( $theme->get( 'Name' ) ); ?></h1>
				<a class="button button-primary wproyal-hero-cta" href="<?php echo esc_url( $pro_url ); ?>" target="_blank" rel="noopener">
					<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
					<?php esc_html_e( 'Upgrade to Pro', 'baithak' ); ?>
				</a>
			</div>
			<p><?php esc_html_e( 'Unlock premium design tools, layouts, and blocks built for professional sites.', 'baithak' ); ?></p>
			<p><strong><?php esc_html_e( 'Current version:', 'baithak' ); ?></strong> <?php echo esc_html( $theme->get( 'Version' ) ); ?></p>
			<div class="wproyal-hero-actions">
				<a class="button" href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener"><?php esc_html_e( 'View Docs', 'baithak' ); ?></a>
				<a class="button" href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener"><?php esc_html_e( 'Get Support', 'baithak' ); ?></a>
			</div>
		</div>

		<div class="wproyal-steps-grid">
			<?php foreach ( $sections as $section ) : ?>
				<div class="wproyal-step-card<?php echo ! empty( $section['premium'] ) ? ' is-premium' : ''; ?>">
					<h3 class="wproyal-step-title">
						<?php echo esc_html( $section['label'] ); ?>
						<?php if ( ! empty( $section['premium'] ) ) : ?>
							<span class="wproyal-step-badge"><?php esc_html_e( 'Premium', 'baithak' ); ?></span>
						<?php endif; ?>
					</h3>
					<ul class="wproyal-step-list">
						<?php foreach ( $section['items'] as $item ) : ?>
							<?php $done_class = ! empty( $item['done'] ) ? ' is-done' : ''; ?>
							<li class="wproyal-step-item<?php echo esc_attr( $done_class ); ?>">
								<span class="wproyal-step-icon"><?php echo ! empty( $item['done'] ) ? '✓' : '○'; ?></span>
								<?php echo esc_html( $item['label'] ); ?>
							</li>
						<?php endforeach; ?>
					</ul>
					<?php if ( ! empty( $section['premium'] ) ) : ?>
						<p class="wproyal-unlock">
							<span class="wproyal-unlock-icon">★</span>
							<a href="<?php echo esc_url( $pro_url ); ?>" target="_blank" rel="noopener"><?php esc_html_e( 'Unlock with Pro', 'baithak' ); ?></a>
						</p>
					<?php endif; ?>
				</div>
			<?php endforeach; ?>
		</div>

		<div class="wproyal-columns">
				<h2><?php esc_html_e( 'Free vs Pro', 'baithak' ); ?></h2>
				<table class="wproyal-pricing">
					<thead>
						<tr>
							<th><?php esc_html_e( 'Feature', 'baithak' ); ?></th>
							<th><?php esc_html_e( 'Free', 'baithak' ); ?></th>
							<th><?php esc_html_e( 'Pro', 'baithak' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><?php esc_html_e( 'Full Site Editing', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Colors customization', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Typography', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Pages created', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Blog page setup', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Header & Footer', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Additional blocks layout', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Dark / Light mode', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Popular posts widget', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Advertisement blocks', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Social sharing', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Like & reactions system', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Translation Ready', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Forum Support', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Edit Footer Copyright Text', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td><?php esc_html_e( 'Priority Support', 'baithak' ); ?></td>
							<td class="is-free"><?php esc_html_e( '—', 'baithak' ); ?></td>
							<td class="is-pro"><?php esc_html_e( 'Included', 'baithak' ); ?></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td class="is-pro">
								<a class="button button-primary" href="<?php echo esc_url( $pro_url ); ?>" target="_blank" rel="noopener">
									<?php esc_html_e( 'Get Pro', 'baithak' ); ?>
								</a>
							</td>
						</tr>
					</tbody>
				</table>
		</div>
	</div>
	<?php
}