<?php
/**
 * Admin settings page template.
 *
 * @package IGIT_RPWT
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap igit-rpwt-settings-wrap">
	<?php /* Hidden h1 — WordPress common.js looks for the first h1 inside .wrap
	         to anchor plugin notices. Putting it here (before the hero) keeps
	         notices out of the gradient hero banner. */ ?>
	<h1 class="screen-reader-text"><?php echo esc_html( get_admin_page_title() ); ?></h1>

	<!-- ── Third-party/WP admin notices (above hero) ──────────────────── -->
	<div id="igit-rpwt-notices"></div>
	<!-- ── Hero Header ──────────────────────────────────────────────────── -->
	<div class="igit-rpwt-hero">
		<div class="igit-rpwt-hero-inner">
			<div class="igit-rpwt-hero-icon">
				<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
					<path d="M5 7.5h18M5 12.5h13M5 17.5h9" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
					<circle cx="21" cy="20" r="4" fill="rgba(255,255,255,0.9)"/>
				</svg>
			</div>
			<div class="igit-rpwt-hero-text">
				<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
				<p><?php esc_html_e( 'Configure how related posts are displayed across your site.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
			</div>
			<div class="igit-rpwt-hero-badge">
				v<?php echo esc_html( IGIT_RPWT_VERSION ); ?>
			</div>
		</div>
	</div>

	<!-- ── Settings Layout ──────────────────────────────────────────────── -->
	<div class="igit-rpwt-settings-layout">

		<!-- Main settings form -->
		<div class="igit-rpwt-settings-main">
			<form method="post" action="options.php">
				<?php
				settings_fields( 'igit_rpwt_settings_group' );
				do_settings_sections( IGIT_RPWT_Admin::PAGE_SLUG );
				submit_button( __( 'Save Settings', 'igit-related-posts-with-thumb-images-after-posts' ) );
				?>
			</form>
		</div>

		<!-- Sidebar -->
		<div class="igit-rpwt-settings-sidebar">

			<div class="igit-rpwt-card igit-rpwt-card--placement">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
					<h2><?php esc_html_e( 'Manual Placement', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>
				<p><?php esc_html_e( 'To place related posts manually, disable "Auto-show" above and add this to your theme template:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<code class="igit-rpwt-code-block">&lt;?php echo do_shortcode('[igit_related_posts]'); ?&gt;</code>
				<p><?php esc_html_e( 'Or use the shortcode directly in any post or page:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<code class="igit-rpwt-code-block">[igit_related_posts]</code>
				<p><?php esc_html_e( 'With attributes:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<code class="igit-rpwt-code-block">[igit_related_posts count="5" layout="list"]</code>
			</div>

			<!-- ── Colour Scheme ─────────────────────────────────────────────── -->
			<div class="igit-rpwt-card igit-rpwt-card--theme">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/><circle cx="6.5" cy="7.5" r="1.5" fill="currentColor"/><circle cx="10" cy="5.5" r="1.5" fill="currentColor"/><circle cx="13.5" cy="7.5" r="1.5" fill="currentColor"/><path d="M15 13.5a5 5 0 0 1-10 0 1.5 1.5 0 0 1 1.5-1.5h7A1.5 1.5 0 0 1 15 13.5Z" stroke="currentColor" stroke-width="1.5"/></svg>
					<h2><?php esc_html_e( 'Colour Scheme', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>
				<p><?php esc_html_e( 'Personalise this settings panel:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<div class="igit-rpwt-theme-slot"></div>
			</div>

			<div class="igit-rpwt-card igit-rpwt-card--block">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="1.5" y="1.5" width="5.5" height="5.5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="1.5" width="5.5" height="5.5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="1.5" y="9" width="5.5" height="5.5" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="9" width="5.5" height="5.5" rx="1" stroke="currentColor" stroke-width="1.5"/></svg>
					<h2><?php esc_html_e( 'Gutenberg Block', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>
				<p><?php esc_html_e( 'Search for "Related Posts" in the block inserter to add the block to any post or page.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
			</div>

			<div class="igit-rpwt-card igit-rpwt-card--cache">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 1.5A6.5 6.5 0 1 1 1.5 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M1.5 3.5V8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
					<h2><?php esc_html_e( 'Cache', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>
				<p><?php esc_html_e( 'Related posts are cached per-post. Cache is automatically cleared when a post is saved or settings are updated.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>

				<?php if ( ! empty( $flushed ) ) : ?>
					<p class="igit-rpwt-notice igit-rpwt-notice--success"><?php esc_html_e( 'Cache cleared successfully.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<?php endif; ?>

				<form method="post">
					<?php wp_nonce_field( 'igit_rpwt_flush_cache_action', 'igit_rpwt_flush_cache_nonce' ); ?>
					<button type="submit" name="igit_rpwt_flush_cache" value="1" class="igit-rpwt-btn-flush">
						<?php esc_html_e( 'Flush All Cache', 'igit-related-posts-with-thumb-images-after-posts' ); ?>
					</button>
				</form>
			</div>

			<!-- ── Import / Export ─────────────────────────────────────────── -->
			<div class="igit-rpwt-card igit-rpwt-card--io">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 2v8M5 7l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
					<h2><?php esc_html_e( 'Import / Export', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>

				<?php if ( 'success' === $import_status ) : ?>
					<p class="igit-rpwt-notice igit-rpwt-notice--success"><?php esc_html_e( 'Settings imported successfully.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<?php elseif ( 'invalid' === $import_status ) : ?>
					<p class="igit-rpwt-notice igit-rpwt-notice--error"><?php esc_html_e( 'Import failed: invalid or malformed JSON file.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<?php elseif ( 'no-file' === $import_status ) : ?>
					<p class="igit-rpwt-notice igit-rpwt-notice--error"><?php esc_html_e( 'Import failed: no file was uploaded.', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<?php endif; ?>

				<p class="igit-rpwt-io-label"><?php esc_html_e( 'Export current settings as a JSON file:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
					<input type="hidden" name="action" value="igit_rpwt_export">
					<?php wp_nonce_field( 'igit_rpwt_export_action', 'igit_rpwt_export_nonce' ); ?>
					<button type="submit" class="igit-rpwt-btn-io igit-rpwt-btn-io--export">
						<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7 1v7M4 5.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 11h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
						<?php esc_html_e( 'Export Settings', 'igit-related-posts-with-thumb-images-after-posts' ); ?>
					</button>
				</form>

				<p class="igit-rpwt-io-label" style="margin-top:12px;"><?php esc_html_e( 'Import settings from a previously exported JSON file:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>
				<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" enctype="multipart/form-data">
					<input type="hidden" name="action" value="igit_rpwt_import">
					<?php wp_nonce_field( 'igit_rpwt_import_action', 'igit_rpwt_import_nonce' ); ?>
					<div class="igit-rpwt-import-row">
						<input type="file" name="igit_rpwt_import_file" accept=".json,application/json" class="igit-rpwt-file-input">
						<button type="submit" class="igit-rpwt-btn-io igit-rpwt-btn-io--import">
							<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7 9V2M4 4.5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 11h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
							<?php esc_html_e( 'Import Settings', 'igit-related-posts-with-thumb-images-after-posts' ); ?>
						</button>
					</div>
				</form>
			</div>

			<!-- ── Shortcode Generator ──────────────────────────────────────── -->
			<div class="igit-rpwt-card igit-rpwt-card--shortcode">
				<div class="igit-rpwt-card-header">
					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M5 4L1.5 8 5 12M11 4l3.5 4L11 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.5 3l-3 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
					<h2><?php esc_html_e( 'Shortcode Generator', 'igit-related-posts-with-thumb-images-after-posts' ); ?></h2>
				</div>
				<p><?php esc_html_e( 'Build a custom shortcode and paste it into any post or page:', 'igit-related-posts-with-thumb-images-after-posts' ); ?></p>

				<div class="igit-rpwt-scgen" id="igit-rpwt-scgen">
					<div class="igit-rpwt-scgen-row">
						<label for="igit-scgen-count"><?php esc_html_e( 'Count', 'igit-related-posts-with-thumb-images-after-posts' ); ?></label>
						<input id="igit-scgen-count" type="number" min="1" max="20" value="<?php echo esc_attr( (int) IGIT_RPWT_Settings::get( 'post_count' ) ); ?>" class="tiny-text">
					</div>
					<div class="igit-rpwt-scgen-row">
						<label for="igit-scgen-layout"><?php esc_html_e( 'Layout', 'igit-related-posts-with-thumb-images-after-posts' ); ?></label>
						<select id="igit-scgen-layout">
							<?php
					$current_layout = IGIT_RPWT_Settings::get( 'layout' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
					foreach ( array( 'grid' => __( 'Grid', 'igit-related-posts-with-thumb-images-after-posts' ), 'list' => __( 'List', 'igit-related-posts-with-thumb-images-after-posts' ), 'compact' => __( 'Compact', 'igit-related-posts-with-thumb-images-after-posts' ) ) as $v => $l ) { // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
								printf(
									'<option value="%s" %s>%s</option>',
									esc_attr( $v ),
									selected( $current_layout, $v, false ),
									esc_html( $l )
								);
							}
							?>
						</select>
					</div>

					<div class="igit-rpwt-scgen-preview">
						<code id="igit-scgen-output">[igit_related_posts count="<?php echo esc_html( (int) IGIT_RPWT_Settings::get( 'post_count' ) ); ?>" layout="<?php echo esc_attr( IGIT_RPWT_Settings::get( 'layout' ) ); ?>"]</code>
					</div>

					<button type="button" id="igit-scgen-copy" class="igit-rpwt-btn-copy">
						<?php esc_html_e( 'Copy to Clipboard', 'igit-related-posts-with-thumb-images-after-posts' ); ?>
					</button>
					<span id="igit-scgen-copied" class="igit-rpwt-scgen-copied" style="display:none;"><?php esc_html_e( 'Copied!', 'igit-related-posts-with-thumb-images-after-posts' ); ?></span>
				</div>

				<script>
				(function () {
					var count  = document.getElementById('igit-scgen-count');
					var layout = document.getElementById('igit-scgen-layout');
					var output = document.getElementById('igit-scgen-output');
					var copy   = document.getElementById('igit-scgen-copy');
					var copied = document.getElementById('igit-scgen-copied');

					function update() {
						var c = parseInt(count.value, 10) || 4;
						var l = layout.value || 'grid';
						output.textContent = '[igit_related_posts count="' + c + '" layout="' + l + '"]';
					}

					count.addEventListener('input', update);
					layout.addEventListener('change', update);

					copy.addEventListener('click', function () {
						var text = output.textContent;
						if (navigator.clipboard && navigator.clipboard.writeText) {
							navigator.clipboard.writeText(text).then(function () {
								copied.style.display = 'inline';
								setTimeout(function () { copied.style.display = 'none'; }, 2000);
							});
						} else {
							// Fallback for older browsers.
							var ta = document.createElement('textarea');
							ta.value = text;
							ta.style.position = 'fixed';
							ta.style.opacity  = '0';
							document.body.appendChild(ta);
							ta.select();
							document.execCommand('copy');
							document.body.removeChild(ta);
							copied.style.display = 'inline';
							setTimeout(function () { copied.style.display = 'none'; }, 2000);
						}
					});
				}());
				</script>
			</div>

		</div>

	</div>

</div>
