<?php
/**
 * Theme help page.
 *
 * @package wuppi
 */

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

/**
 * Register the Wuppi help page under Appearance.
 */
function wuppi_add_help_page() {
	add_theme_page(
		esc_html__( 'Wuppi Help', 'wuppi' ),
		esc_html__( 'Wuppi Help', 'wuppi' ),
		wuppi_get_settings_page_capability(),
		'wuppi-help',
		'wuppi_render_help_page'
	);
}
add_action( 'admin_menu', 'wuppi_add_help_page' );

/**
 * Render the Wuppi help page.
 */
function wuppi_render_help_page() {
	if ( ! current_user_can( wuppi_get_settings_page_capability() ) ) {
		return;
	}

	$settings_url   = admin_url( 'themes.php?page=wuppi-settings' );
	$editor_url     = admin_url( 'site-editor.php' );
	$navigation_url = admin_url( 'site-editor.php?postType=wp_navigation' );
	?>
	<div class="wrap">
		<h1 class="wp-heading-inline"><?php echo esc_html__( 'Wuppi Help', 'wuppi' ); ?></h1>
		<a class="page-title-action" href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Wuppi Settings', 'wuppi' ); ?></a>
		<hr class="wp-header-end">

		<p><?php echo esc_html__( 'Use this page as a quick reference while setting up Wuppi in the Site Editor, configuring header behavior, and working with common plugin integrations.', 'wuppi' ); ?></p>

		<div class="card">
			<h2><?php echo esc_html__( 'Quick links', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'Jump directly to the admin screens you will use most often while configuring the theme.', 'wuppi' ); ?></p>
			<p>
				<a class="button button-secondary" href="<?php echo esc_url( $editor_url ); ?>"><?php echo esc_html__( 'Open Site Editor', 'wuppi' ); ?></a>
				<a class="button button-secondary" href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Open Wuppi Settings', 'wuppi' ); ?></a>
				<a class="button button-secondary" href="<?php echo esc_url( $navigation_url ); ?>"><?php echo esc_html__( 'Open Navigation', 'wuppi' ); ?></a>
			</p>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Getting started', 'wuppi' ); ?></h2>
			<ol>
				<li><?php echo esc_html__( 'Open the Site Editor to customize templates, template parts, patterns, and global styles.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Choose a style variation that matches the site direction, then adjust content and layout in the editor.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Create your main pages and review the header, footer, and navigation structure early in the setup process.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Use Wuppi Settings only for theme behavior such as header sizing, spacing, and desktop or mobile header modes.', 'wuppi' ); ?></li>
			</ol>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Wuppi Settings', 'wuppi' ); ?></h2>
			<ul>
				<li><?php echo esc_html__( 'Header height and navigation spacing control the overall proportions of the header.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Desktop header behavior controls whether the header scrolls normally, stays fixed with a glass effect, or uses auto-hide.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Mobile header behavior lets you choose between the sticky glass header and a static mobile header.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Auto-hide reveal delay only affects the fixed auto-hide desktop mode.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Back to top button shows a fixed scroll-to-top button on the front end. It appears after scrolling down 300 px and can be disabled here if your design does not need it.', 'wuppi' ); ?></li>
			</ul>
		</div>

			<div class="card">
				<h2><?php echo esc_html__( 'WooCommerce support', 'wuppi' ); ?></h2>
				<p><?php echo esc_html__( 'If WooCommerce is active, Wuppi provides archive and single-product templates that can be customized in the Site Editor like the rest of the theme.', 'wuppi' ); ?></p>
			<p><?php echo esc_html__( 'Use WooCommerce settings for catalog and checkout behavior, and use the Site Editor for the visual layout of product templates.', 'wuppi' ); ?></p>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Responsive visibility', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'Wuppi includes CSS utility classes you can apply to any block via the "Additional CSS class(es)" field in the block Inspector sidebar (Advanced tab). Use them to show or hide content on specific screen sizes without writing custom CSS.', 'wuppi' ); ?></p>

			<h3><?php echo esc_html__( 'Hide on a specific device', 'wuppi' ); ?></h3>
			<ul>
				<li><code>wuppi-hide-mobile</code> &mdash; <?php echo esc_html__( 'hides the block on mobile (≤ 781 px)', 'wuppi' ); ?></li>
				<li><code>wuppi-hide-tablet</code> &mdash; <?php echo esc_html__( 'hides the block on tablet (782 px – 1024 px)', 'wuppi' ); ?></li>
				<li><code>wuppi-hide-desktop</code> &mdash; <?php echo esc_html__( 'hides the block on desktop (≥ 1025 px)', 'wuppi' ); ?></li>
			</ul>

			<h3><?php echo esc_html__( 'Show only on a specific device', 'wuppi' ); ?></h3>
			<ul>
				<li><code>wuppi-show-mobile</code> &mdash; <?php echo esc_html__( 'visible only on mobile; hidden on tablet and desktop', 'wuppi' ); ?></li>
				<li><code>wuppi-show-tablet</code> &mdash; <?php echo esc_html__( 'visible only on tablet; hidden on mobile and desktop', 'wuppi' ); ?></li>
				<li><code>wuppi-show-desktop</code> &mdash; <?php echo esc_html__( 'visible only on desktop; hidden on mobile and tablet', 'wuppi' ); ?></li>
			</ul>

			<p><?php echo esc_html__( 'These classes work on any block — core blocks, Wuppi Blocks, and third-party blocks alike. They carry no JavaScript overhead.', 'wuppi' ); ?></p>
			<p><strong><?php echo esc_html__( 'Tip:', 'wuppi' ); ?></strong> <?php echo esc_html__( 'To swap content between mobile and desktop, place two copies of the block: apply wuppi-show-mobile to one and wuppi-show-desktop to the other. Tablet will see neither. If you want tablet to follow the desktop version, use wuppi-hide-mobile on the desktop copy instead of wuppi-show-desktop.', 'wuppi' ); ?></p>
			<p><strong><?php echo esc_html__( 'Editor preview note:', 'wuppi' ); ?></strong> <?php echo esc_html__( 'The editor\'s Tablet preview is slightly narrower than the actual tablet breakpoint, so wuppi-show-mobile may appear visible there. The classes work correctly on real devices.', 'wuppi' ); ?></p>
		</div>

		<?php if ( function_exists( 'wuppi_fs' ) && ! wuppi_fs()->is_registered() ) : ?>
		<div class="card">
			<h2><?php echo esc_html__( 'Help improve Wuppi', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'You can help make Wuppi better by sharing anonymous usage data — WordPress version, PHP version, active plugins, and basic environment info. No personal data is ever collected, and you can opt out at any time.', 'wuppi' ); ?></p>
			<p><a class="button button-secondary" href="<?php echo esc_url( wuppi_fs()->get_activation_url() ); ?>"><?php echo esc_html__( 'Opt in to anonymous analytics', 'wuppi' ); ?></a></p>
		</div>
		<?php endif; ?>

		<div class="card">
			<h2><?php echo esc_html__( 'FAQ and troubleshooting', 'wuppi' ); ?></h2>

			<h3><?php echo esc_html__( 'Where do I change colors, typography, and templates?', 'wuppi' ); ?></h3>
			<p><?php echo esc_html__( 'Use Appearance > Editor. Wuppi Settings is intentionally limited to theme behavior and does not replace the Site Editor.', 'wuppi' ); ?></p>

				<h3><?php echo esc_html__( 'When should I use Wuppi Settings instead of the editor?', 'wuppi' ); ?></h3>
				<p><?php echo esc_html__( 'Use Wuppi Settings for behavior-level controls such as header modes and spacing. Use the editor for content, layout, styles, patterns, and template structure.', 'wuppi' ); ?></p>
		</div>
	</div>
	<?php
}
