<?php
/**
 * Documentation tab rendering for Lite.
 *
 * @package Vareon_Calculator_Suite_Lite
 */

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

/**
 * Render Documentation Tab for Lite.
 *
 * @param string $active_design Deprecated. Ignored.
 * @return void
 */
function vareoncalc_render_docs_tab_lite( $active_design = 'modern-grid' ) {
	unset( $active_design );

	$calculator_library   = function_exists( 'vareoncalc_settings_get_calculator_library' ) ? vareoncalc_settings_get_calculator_library() : array();
	$builder_calculators  = array();
	$default_builder_type = 'loan';

	foreach ( $calculator_library as $slug => $calculator ) {
		if ( empty( $calculator['title'] ) ) {
			continue;
		}

		$builder_calculators[ sanitize_key( (string) $slug ) ] = (string) $calculator['title'];
	}

	if ( empty( $builder_calculators ) ) {
		$builder_calculators = array(
			'loan' => __( 'Loan Calculator', 'vareon-calculator-suite-lite' ),
		);
	}

	if ( ! isset( $builder_calculators[ $default_builder_type ] ) ) {
		$builder_keys         = array_keys( $builder_calculators );
		$default_builder_type = (string) reset( $builder_keys );
	}

	$docs_pages = array(
		array(
			'title' => __( 'Getting Started', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/getting-started/',
		),
		array(
			'title' => __( 'Using the Block', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/using-the-block/',
		),
		array(
			'title' => __( 'Using Shortcodes', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/shortcodes/',
		),
		array(
			'title' => __( 'Calculator Library', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/calculator-library/',
		),
		array(
			'title' => __( 'Settings Reference', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/settings-reference/',
		),
		array(
			'title' => __( 'Page Builders', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/page-builders/',
		),
		array(
			'title' => __( 'Troubleshooting', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/troubleshooting/',
		),
		array(
			'title' => __( 'Updates and Support', 'vareon-calculator-suite-lite' ),
			'url'   => 'https://vareon.dev/docs/updates-and-support/',
		),
	);
	?>

	<div class="vareoncalc-docs-sidebar-wrapper">
		<aside class="vareoncalc-docs-sidebar" aria-label="<?php esc_attr_e( 'Documentation navigation', 'vareon-calculator-suite-lite' ); ?>">
			<nav class="vareoncalc-docs-sidebar__nav">
				<div class="vareoncalc-docs-nav-group">
					<div class="vareoncalc-docs-nav-label"><?php esc_html_e( 'Lite Docs', 'vareon-calculator-suite-lite' ); ?></div>
					<a href="#quick-start" class="active"><?php esc_html_e( 'Quick Start', 'vareon-calculator-suite-lite' ); ?></a>
					<a href="#embed-block"><?php esc_html_e( 'Add with Block', 'vareon-calculator-suite-lite' ); ?></a>
					<a href="#shortcodes"><?php esc_html_e( 'Add with Shortcode', 'vareon-calculator-suite-lite' ); ?></a>
					<a href="#settings-basics"><?php esc_html_e( 'Settings Basics', 'vareon-calculator-suite-lite' ); ?></a>
					<a href="#troubleshooting"><?php esc_html_e( 'Troubleshooting', 'vareon-calculator-suite-lite' ); ?></a>
					<a href="#full-docs"><?php esc_html_e( 'Full Website Docs', 'vareon-calculator-suite-lite' ); ?></a>
				</div>
			</nav>
		</aside>

		<article class="vareoncalc-docs-main-content">
			<div class="vareoncalc-docs-article">
				<h1><?php esc_html_e( 'Lite Documentation', 'vareon-calculator-suite-lite' ); ?></h1>
				<p>
					<?php esc_html_e( 'This is the short in-plugin version of the Lite docs. Use it for the common setup and embed tasks, then open the full website guides when you need deeper detail.', 'vareon-calculator-suite-lite' ); ?>
				</p>

				<section id="quick-start" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Quick Start', 'vareon-calculator-suite-lite' ); ?></h2>
					<ol>
						<li><?php esc_html_e( 'Install and activate Vareon Calculator Suite Lite.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Open Settings > Vareon Calculator Suite and review your global theme, branding, currency, and measurement settings.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Add a calculator with the Vareon Calculator block or a Vareon shortcode.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Publish the page and clear cache if your changes do not show immediately.', 'vareon-calculator-suite-lite' ); ?></li>
					</ol>

					<div class="vareoncalc-docs-note">
						<strong><?php esc_html_e( 'Requirements:', 'vareon-calculator-suite-lite' ); ?></strong>
						<?php esc_html_e( 'WordPress 6.3+, PHP 8.0+, and administrator access.', 'vareon-calculator-suite-lite' ); ?>
					</div>
				</section>

				<section id="embed-block" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Add with Block', 'vareon-calculator-suite-lite' ); ?></h2>
					<ol>
						<li><?php esc_html_e( 'Edit the page or post where you want the calculator.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Search for Vareon Calculator in the block inserter.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Choose the calculator you want and adjust theme, width, or branding only if needed.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Publish or update the page and check the frontend.', 'vareon-calculator-suite-lite' ); ?></li>
					</ol>

					<p><?php esc_html_e( 'If you do not override the block theme, it uses the global Lite theme from plugin settings.', 'vareon-calculator-suite-lite' ); ?></p>
				</section>

				<section id="shortcodes" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Add with Shortcode', 'vareon-calculator-suite-lite' ); ?></h2>
					<p><?php esc_html_e( 'Lite supports the [vareon] and [vareoncalc] shortcode tags.', 'vareon-calculator-suite-lite' ); ?></p>

					<pre class="vareoncalc-docs-code"><code><?php echo esc_html( '[vareon type="loan"]' ); ?></code></pre>
					<pre class="vareoncalc-docs-code"><code><?php echo esc_html( '[vareoncalc type="loan"]' ); ?></code></pre>

					<ul>
						<li><strong><?php esc_html_e( 'Supported attributes:', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'type, theme, width, branding', 'vareon-calculator-suite-lite' ); ?></li>
						<li><strong><?php esc_html_e( 'Supported themes:', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'light, dark, modern', 'vareon-calculator-suite-lite' ); ?></li>
						<li><strong><?php esc_html_e( 'Invalid type behavior:', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'the shortcode renders nothing', 'vareon-calculator-suite-lite' ); ?></li>
					</ul>

					<div id="shortcode-builder" class="vareoncalc-shortcode-builder" data-shortcode-builder>
						<div class="vareoncalc-shortcode-builder__header">
							<h3><?php esc_html_e( 'Shortcode Builder', 'vareon-calculator-suite-lite' ); ?></h3>
							<p><?php esc_html_e( 'Generate a valid Lite shortcode and copy it into your post, page, widget, or page builder.', 'vareon-calculator-suite-lite' ); ?></p>
						</div>

						<div class="vareoncalc-shortcode-builder__grid">
							<div class="vareoncalc-shortcode-builder__field">
								<label for="vareoncalc_shortcode_type"><?php esc_html_e( 'Calculator Type', 'vareon-calculator-suite-lite' ); ?></label>
								<select id="vareoncalc_shortcode_type" data-builder-field="type">
									<?php foreach ( $builder_calculators as $slug => $title ) : ?>
										<option value="<?php echo esc_attr( $slug ); ?>" <?php selected( $slug, $default_builder_type ); ?>><?php echo esc_html( $title ); ?></option>
									<?php endforeach; ?>
								</select>
							</div>

							<div class="vareoncalc-shortcode-builder__field">
								<label for="vareoncalc_shortcode_theme"><?php esc_html_e( 'Theme', 'vareon-calculator-suite-lite' ); ?></label>
								<select id="vareoncalc_shortcode_theme" data-builder-field="theme">
									<option value="default"><?php esc_html_e( 'Default', 'vareon-calculator-suite-lite' ); ?></option>
									<option value="light"><?php esc_html_e( 'Light', 'vareon-calculator-suite-lite' ); ?></option>
									<option value="dark"><?php esc_html_e( 'Dark', 'vareon-calculator-suite-lite' ); ?></option>
									<option value="modern"><?php esc_html_e( 'Modern', 'vareon-calculator-suite-lite' ); ?></option>
								</select>
							</div>

							<div class="vareoncalc-shortcode-builder__field">
								<label for="vareoncalc_shortcode_width"><?php esc_html_e( 'Width', 'vareon-calculator-suite-lite' ); ?></label>
								<input
									type="text"
									id="vareoncalc_shortcode_width"
									value=""
									placeholder="<?php esc_attr_e( 'e.g. 100%, 620px, 40rem, auto', 'vareon-calculator-suite-lite' ); ?>"
									data-builder-field="width"
								/>
								<p class="vareoncalc-shortcode-builder__hint"><?php esc_html_e( 'Accepted values include 100%, 620px, 40rem, auto, inherit, or initial.', 'vareon-calculator-suite-lite' ); ?></p>
							</div>

							<div class="vareoncalc-shortcode-builder__field">
								<label for="vareoncalc_shortcode_branding"><?php esc_html_e( 'Branding', 'vareon-calculator-suite-lite' ); ?></label>
								<select id="vareoncalc_shortcode_branding" data-builder-field="branding">
									<option value="default"><?php esc_html_e( 'Use global setting', 'vareon-calculator-suite-lite' ); ?></option>
									<option value="1"><?php esc_html_e( 'Show', 'vareon-calculator-suite-lite' ); ?></option>
									<option value="0"><?php esc_html_e( 'Hide', 'vareon-calculator-suite-lite' ); ?></option>
								</select>
							</div>
						</div>

						<div class="vareoncalc-shortcode-builder__output-wrap">
							<label for="vareoncalc_shortcode_output"><?php esc_html_e( 'Generated Shortcode', 'vareon-calculator-suite-lite' ); ?></label>
							<textarea
								id="vareoncalc_shortcode_output"
								class="vareoncalc-shortcode-builder__output"
								rows="2"
								readonly
								spellcheck="false"
								data-builder-output
							><?php echo esc_textarea( '[vareon type="' . $default_builder_type . '"]' ); ?></textarea>
							<div class="vareoncalc-shortcode-builder__actions">
								<button type="button" class="button button-primary" data-builder-copy><?php esc_html_e( 'Copy shortcode', 'vareon-calculator-suite-lite' ); ?></button>
								<button type="button" class="button" data-builder-reset><?php esc_html_e( 'Reset', 'vareon-calculator-suite-lite' ); ?></button>
							</div>
							<p class="vareoncalc-shortcode-builder__summary" data-builder-summary aria-live="polite">
								<?php
								printf(
									/* translators: %s: calculator title */
									esc_html__( 'Adds the %s using your global theme and branding settings.', 'vareon-calculator-suite-lite' ),
									esc_html( $builder_calculators[ $default_builder_type ] )
								);
								?>
							</p>
							<p class="vareoncalc-shortcode-builder__validation" data-builder-width-note aria-live="polite" hidden></p>
						</div>
					</div>

					<div class="vareoncalc-docs-note">
						<strong><?php esc_html_e( 'Page builders:', 'vareon-calculator-suite-lite' ); ?></strong>
						<?php esc_html_e( 'In Elementor and similar builders, use the builder shortcode widget or module. Lite does not include a native Elementor widget.', 'vareon-calculator-suite-lite' ); ?>
					</div>
				</section>

				<section id="settings-basics" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Settings Basics', 'vareon-calculator-suite-lite' ); ?></h2>
					<p><?php esc_html_e( 'The main global Lite settings are available under Settings > Vareon Calculator Suite.', 'vareon-calculator-suite-lite' ); ?></p>
					<ul>
						<li><?php esc_html_e( 'Theme preset: Light, Dark, or Modern', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Branding: show or hide the Powered by Vareon credit by default', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Currency and currency position', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Thousand and decimal separators', 'vareon-calculator-suite-lite' ); ?></li>
						<li><?php esc_html_e( 'Measurement system: Mixed, Metric, or Imperial', 'vareon-calculator-suite-lite' ); ?></li>
					</ul>
				</section>

				<section id="troubleshooting" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Troubleshooting', 'vareon-calculator-suite-lite' ); ?></h2>
					<ul>
						<li><strong><?php esc_html_e( 'Nothing renders', 'vareon-calculator-suite-lite' ); ?></strong> - <?php esc_html_e( 'Confirm the plugin is active and test with a known valid shortcode like [vareon type="loan"].', 'vareon-calculator-suite-lite' ); ?></li>
						<li><strong><?php esc_html_e( 'Changes do not show', 'vareon-calculator-suite-lite' ); ?></strong> - <?php esc_html_e( 'Clear cache, refresh the page, and recheck the live frontend.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><strong><?php esc_html_e( 'The calculator looks wrong', 'vareon-calculator-suite-lite' ); ?></strong> - <?php esc_html_e( 'Check theme overrides, branding overrides, and layout constraints in your theme or builder.', 'vareon-calculator-suite-lite' ); ?></li>
						<li><strong><?php esc_html_e( 'Builder issue', 'vareon-calculator-suite-lite' ); ?></strong> - <?php esc_html_e( 'Use a shortcode widget or module, not a plain text field.', 'vareon-calculator-suite-lite' ); ?></li>
					</ul>
				</section>

				<section id="full-docs" class="vareoncalc-docs-section">
					<h2><?php esc_html_e( 'Full Website Docs', 'vareon-calculator-suite-lite' ); ?></h2>
					<p><?php esc_html_e( 'Open the full website guides for detailed setup, shortcode reference, calculator-by-calculator coverage, builder guidance, troubleshooting, and update help.', 'vareon-calculator-suite-lite' ); ?></p>

					<ul>
						<?php foreach ( $docs_pages as $page ) : ?>
							<li><a href="<?php echo esc_url( $page['url'] ); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html( $page['title'] ); ?></a></li>
						<?php endforeach; ?>
					</ul>

					<div class="vareoncalc-docs-cta-box">
						<h4><?php esc_html_e( 'Need support?', 'vareon-calculator-suite-lite' ); ?></h4>
						<p><?php esc_html_e( 'Include your WordPress version, PHP version, Lite plugin version, and the exact shortcode or block setup when you contact support.', 'vareon-calculator-suite-lite' ); ?></p>
						<a href="<?php echo esc_url( 'https://wordpress.org/support/plugin/vareon-calculator-suite-lite/' ); ?>" target="_blank" rel="noopener noreferrer" class="button button-primary"><?php esc_html_e( 'Contact Support', 'vareon-calculator-suite-lite' ); ?></a>
					</div>

					<?php
					if ( function_exists( 'vareoncalc_render_docs_review_micro_cta' ) ) {
						// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Internal review CTA markup is fully escaped within the renderer.
						echo vareoncalc_render_docs_review_micro_cta();
					}
					?>
				</section>
			</div>
		</article>
	</div>

	<?php
}
