<?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' );
	$editor_styles  = admin_url( 'site-editor.php?canvas=edit&path=/styles' );
	$editor_css     = admin_url( 'site-editor.php?canvas=edit&path=/styles/css' );
	$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 Design', 'wuppi' ); ?></a>
		<hr class="wp-header-end">

		<p><?php echo esc_html__( 'Use this page as a quick reference while setting up your site with Wuppi. For templates, global styles, colors, and font families use the WordPress Site Editor — available with any block theme. For controls specific to Wuppi such as header behavior, border radius, shadows, and button styles, use Wuppi Design.', '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 Design', '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__( 'What lives where', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'Both the Site Editor and Wuppi Design control the look of your site. This table shows where to go for each type of change.', 'wuppi' ); ?></p>
			<table class="widefat striped">
				<thead>
					<tr>
						<th><?php echo esc_html__( 'What you want to change', 'wuppi' ); ?></th>
						<th><?php echo esc_html__( 'Where to find it', 'wuppi' ); ?></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><?php echo esc_html__( 'Color palette', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_styles ); ?>"><?php echo esc_html__( 'Site Editor → Styles → Colors', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Font families', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_styles ); ?>"><?php echo esc_html__( 'Site Editor → Styles → Typography', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Heading and body line-height, letter-spacing', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_styles ); ?>"><?php echo esc_html__( 'Site Editor → Styles → Typography → Text / Heading', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Button font size and padding', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_styles ); ?>"><?php echo esc_html__( 'Site Editor → Styles → Blocks → Button', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Custom CSS', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_css ); ?>"><?php echo esc_html__( 'Site Editor → Styles → Additional CSS', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Templates and template parts', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $editor_url ); ?>"><?php echo esc_html__( 'Site Editor → Templates', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Header radius, shadows, transitions, button hover colors', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Wuppi Design', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Header sticky behavior, auto-hide, mobile menu', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Wuppi Design → Header', 'wuppi' ); ?></a></td>
					</tr>
					<tr>
						<td><?php echo esc_html__( 'Form field focus ring', 'wuppi' ); ?></td>
						<td><a href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Wuppi Design → Advanced', 'wuppi' ); ?></a></td>
					</tr>
				</tbody>
			</table>
		</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__( 'Open Wuppi Design to configure theme-specific controls: header modes, border radius, shadows, transitions, and button hover colors. These settings complement the Site Editor without replacing it.', 'wuppi' ); ?></li>
			</ol>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Wuppi Design', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'Wuppi Design is a settings page exclusive to this theme. It controls theme-specific behavior and visual tokens that go beyond what the Site Editor exposes. The Site Editor remains the home for colors, font families, typography spacing, templates, and layout.', 'wuppi' ); ?></p>
			<p><?php echo esc_html__( 'The page is organized into tabs. Each tab covers a specific area of the theme.', 'wuppi' ); ?></p>
			<ul>
				<li><strong><?php echo esc_html__( 'General', 'wuppi' ); ?></strong> &mdash; <?php echo esc_html__( 'Back to top button and mobile content padding.', 'wuppi' ); ?></li>
				<li><strong><?php echo esc_html__( 'Header', 'wuppi' ); ?></strong> &mdash; <?php echo esc_html__( 'Header height, navigation spacing and font weight, active navigation indicator, desktop behavior (scroll / fixed glass / auto-hide), auto-hide delay, and mobile behavior.', 'wuppi' ); ?></li>
				<li><strong><?php echo esc_html__( 'Buttons', 'wuppi' ); ?></strong> &mdash; <?php echo esc_html__( 'Button border radius and hover colors for primary and outline buttons. Padding, font size, and font weight are set in the Site Editor under Styles → Blocks → Button.', 'wuppi' ); ?></li>
				<li><strong><?php echo esc_html__( 'Design', 'wuppi' ); ?></strong> &mdash; <?php echo esc_html__( 'Global border radius preset with per-element overrides for images, cards, and inputs. Shadow controls for cards, images, and buttons (intensity, per-element, hover-only mode). Transition speed and reduced-motion preference.', 'wuppi' ); ?></li>
				<li><strong><?php echo esc_html__( 'Advanced', 'wuppi' ); ?></strong> &mdash; <?php echo esc_html__( 'Form field focus ring color and style. For custom CSS, use Site Editor → Styles → Additional CSS.', '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, fonts, and custom CSS?', 'wuppi' ); ?></h3>
			<p><?php echo esc_html__( 'In the Site Editor. Colors and font families live under Styles → Colors and Styles → Typography. Custom CSS goes in Styles → Additional CSS. Line-height and letter-spacing for headings and body text are under Styles → Typography → Text and Heading.', 'wuppi' ); ?> <a href="<?php echo esc_url( $editor_styles ); ?>"><?php echo esc_html__( 'Open Site Editor Styles', 'wuppi' ); ?></a></p>

			<h3><?php echo esc_html__( 'When should I use Wuppi Design instead of the editor?', 'wuppi' ); ?></h3>
			<p><?php echo esc_html__( 'Use Wuppi Design for theme-level tokens and behavior: header modes, border radius, shadows, transitions, button hover colors, and form focus ring. Use the Site Editor for colors, font families, typography spacing, custom CSS, content, layout, patterns, and template structure.', 'wuppi' ); ?></p>

			<h3><?php echo esc_html__( 'Do Wuppi Design settings conflict with Site Editor styles?', 'wuppi' ); ?></h3>
			<p><?php echo esc_html__( 'Wuppi Design and the Site Editor control different things by design. Where both have a relevant control — for example, shadows on blocks — Wuppi provides global token-level control while the Site Editor gives you per-block control. Per-block Site Editor styles take precedence over Wuppi global tokens.', 'wuppi' ); ?></p>
		</div>
	</div>
	<?php
}
