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

class SFAQ_Settings {

	private static $instance = null;
	const OPTION_KEY = 'sfaq_settings';

	public static function get_instance() {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}
		return self::$instance;
	}

	private function __construct() {
		add_action( 'admin_menu',                [ $this, 'register_menus' ] );
		add_action( 'admin_init',                [ $this, 'register_settings' ] );
		add_action( 'admin_enqueue_scripts',     [ $this, 'enqueue_admin_assets' ] );
		add_action( 'admin_notices',             [ $this, 'guide_redirect_notice' ] );
		add_action( 'wp_ajax_sfaq_reset_colors', [ $this, 'ajax_reset_colors' ] );
		add_action( 'wp_ajax_sfaq_clear_cache',  [ $this, 'ajax_clear_cache' ] );
	}

	/* ------------------------------------------------------------------ */
	/*  Defaults                                                            */
	/* ------------------------------------------------------------------ */

	public static function get_defaults() {
		return [
			// General
			'post_types'           => [ 'post', 'page' ],
			'display_method'       => 'auto_inject',   // shortcode | auto_inject | both
			'ui_style'             => 'style1',
			// Title
			'faq_title_enabled'    => '1',
			'faq_title_text'       => 'Frequently Asked Questions',
			// Visibility / Schema
			'schema_enabled'       => '1',
			'faq_visible'          => '1',
			// Colors — Question
			'q_bg'                 => '#ffffff',
			'q_text'               => '#000000',
			'q_border'             => '#cccccc',
			'q_radius'             => '10',
			'q_hover_bg'           => '#f5f5f5',
			'q_hover_text'         => '#000000',
			'q_active_bg'          => '#d8222b',
			'q_active_text'        => '#ffffff',
			// Colors — Answer
			'a_bg'                 => '#ffffff',
			'a_text'               => '#000000',
			// Colors — Section title
			'title_color'          => '#000000',
			// Spacing
			'q_padding_v'          => '14',
			'q_padding_h'          => '18',
			'a_padding_v'          => '14',
			'a_padding_h'          => '18',
			'item_gap'             => '10',
			// Font
			'font_family'          => 'inherit',
			'font_size_title'      => '24',
			'font_size_q'          => '16',
			'font_size_a'          => '15',
			'font_weight_q'        => '600',
			// Schema
			'use_custom_schema'    => '',
			'custom_schema'        => '',
		];
	}

	/* ------------------------------------------------------------------ */
	/*  Menus                                                               */
	/* ------------------------------------------------------------------ */

	public function register_menus() {
		add_menu_page(
			__( 'Smart FAQ Schema', 'accordly-smart-faq-schema' ),
			__( 'Smart FAQ', 'accordly-smart-faq-schema' ),
			'manage_options',
			'sfaq-settings',
			[ $this, 'render_settings_page' ],
			'dashicons-editor-help',
			58
		);
		add_submenu_page(
			'sfaq-settings',
			__( 'Settings', 'accordly-smart-faq-schema' ),
			__( 'Settings', 'accordly-smart-faq-schema' ),
			'manage_options',
			'sfaq-settings',
			[ $this, 'render_settings_page' ]
		);
		add_submenu_page(
			'sfaq-settings',
			__( 'Bulk FAQ Checker', 'accordly-smart-faq-schema' ),
			__( 'Bulk Checker', 'accordly-smart-faq-schema' ),
			'manage_options',
			'sfaq-bulk',
			[ SFAQ_Bulk::get_instance(), 'render_bulk_page' ]
		);
		add_submenu_page(
			'sfaq-settings',
			__( 'Guide & Documentation', 'accordly-smart-faq-schema' ),
			__( 'Guide', 'accordly-smart-faq-schema' ),
			'manage_options',
			'sfaq-guide',
			[ $this, 'render_guide_page' ]
		);
	}

	/* ------------------------------------------------------------------ */
	/*  Settings API                                                        */
	/* ------------------------------------------------------------------ */

	public function register_settings() {
		register_setting( 'sfaq_settings_group', self::OPTION_KEY, [
			'sanitize_callback' => [ $this, 'sanitize_settings' ],
		] );
	}

	public function sanitize_settings( $input ) {
		$defaults = self::get_defaults();
		$clean    = [];

		$clean['post_types']        = isset( $input['post_types'] ) && is_array( $input['post_types'] )
									  ? array_map( 'sanitize_key', $input['post_types'] )
									  : $defaults['post_types'];
		$clean['display_method']    = in_array( $input['display_method'] ?? '', [ 'shortcode', 'auto_inject', 'both' ] )
									  ? $input['display_method'] : $defaults['display_method'];
		$clean['ui_style']          = in_array( $input['ui_style'] ?? '', [ 'style1','style2','style3','style4','style5' ] )
									  ? $input['ui_style'] : $defaults['ui_style'];
		$clean['faq_title_enabled'] = ! empty( $input['faq_title_enabled'] ) ? '1' : '';
		$clean['faq_title_text']    = sanitize_text_field( $input['faq_title_text'] ?? $defaults['faq_title_text'] );
		$clean['schema_enabled']    = ! empty( $input['schema_enabled'] ) ? '1' : '';
		$clean['faq_visible']       = ! empty( $input['faq_visible'] )    ? '1' : '';

		$color_keys = [ 'q_bg','q_text','q_border','q_hover_bg','q_hover_text','q_active_bg','q_active_text','a_bg','a_text','title_color' ];
		foreach ( $color_keys as $ck ) {
			$clean[ $ck ] = $this->sanitize_hex( $input[ $ck ] ?? $defaults[ $ck ] );
		}
		$clean['q_radius']       = absint( $input['q_radius'] ?? $defaults['q_radius'] );
		$clean['q_padding_v'] = absint( $input['q_padding_v'] ?? $defaults['q_padding_v'] );
		$clean['q_padding_h'] = absint( $input['q_padding_h'] ?? $defaults['q_padding_h'] );
		$clean['a_padding_v'] = absint( $input['a_padding_v'] ?? $defaults['a_padding_v'] );
		$clean['a_padding_h'] = absint( $input['a_padding_h'] ?? $defaults['a_padding_h'] );
		$clean['item_gap']    = absint( $input['item_gap']    ?? $defaults['item_gap'] );
		$clean['font_family']    = sanitize_text_field( $input['font_family']    ?? $defaults['font_family'] );
		$clean['font_size_title'] = absint( $input['font_size_title'] ?? $defaults['font_size_title'] );
		$clean['font_size_q']    = absint( $input['font_size_q']    ?? $defaults['font_size_q'] );
		$clean['font_size_a']    = absint( $input['font_size_a']    ?? $defaults['font_size_a'] );
		$clean['font_weight_q']  = in_array( (string)( $input['font_weight_q'] ?? '' ), [ '400','500','600','700','800' ] )
								   ? (string) $input['font_weight_q'] : $defaults['font_weight_q'];
		$clean['use_custom_schema'] = ! empty( $input['use_custom_schema'] ) ? '1' : '';
		$clean['custom_schema']     = wp_kses_post( $input['custom_schema'] ?? '' );

		// Bust the CSS cache when settings change
		delete_transient( 'sfaq_dynamic_css_v' . SFAQ_VERSION );

		return $clean;
	}

	private function sanitize_hex( $hex ) {
		$hex = sanitize_hex_color( $hex );
		return $hex ?: '#000000';
	}

	/* ------------------------------------------------------------------ */
	/*  Admin Assets                                                        */
	/* ------------------------------------------------------------------ */

	public function enqueue_admin_assets( $hook ) {
		if ( strpos( $hook, 'sfaq' ) === false && $hook !== 'post.php' && $hook !== 'post-new.php' ) {
			return;
		}
		wp_enqueue_style(
			'sfaq-admin',
			SFAQ_PLUGIN_URL . 'assets/css/admin.css',
			[],
			SFAQ_VERSION
		);
		// Load frontend CSS so the Live Preview in the Styling tab renders correctly
		if ( ( sanitize_key( wp_unslash( $_GET['sfaq_tab'] ?? '' ) ) === 'styling' ) || strpos( $hook, 'post' ) !== false ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
			wp_enqueue_style(
				'sfaq-frontend-preview',
				SFAQ_PLUGIN_URL . 'assets/css/frontend.css',
				[],
				SFAQ_VERSION
			);
		}
		wp_enqueue_script(
			'sfaq-admin',
			SFAQ_PLUGIN_URL . 'assets/js/admin.js',
			[ 'jquery', 'wp-color-picker' ],
			SFAQ_VERSION,
			true
		);
		wp_enqueue_style( 'wp-color-picker' );

		// Register a virtual (no-file) style handle so wp_add_inline_style can
		// output a <style> element that the live-preview JS populates dynamically.
		wp_register_style( 'sfaq-preview', false, [], SFAQ_VERSION ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
		wp_enqueue_style( 'sfaq-preview' );
		wp_add_inline_style( 'sfaq-preview', '/* sfaq-live-preview */' );

		wp_localize_script( 'sfaq-admin', 'sfaqAdmin', [
			'ajaxUrl'  => admin_url( 'admin-ajax.php' ),
			'nonce'    => wp_create_nonce( 'sfaq_admin_nonce' ),
			'defaults' => self::get_defaults(),
			'strings'  => [
				'confirmDelete' => __( 'Delete this FAQ?', 'accordly-smart-faq-schema' ),
				'addFaq'        => __( 'Add FAQ', 'accordly-smart-faq-schema' ),
				'cacheCleared'  => __( 'Cache cleared!', 'accordly-smart-faq-schema' ),
			],
		] );
	}

	/* ------------------------------------------------------------------ */
	/*  Guide redirect notice on activation                                 */
	/* ------------------------------------------------------------------ */

	public function guide_redirect_notice() {
		if ( get_option( 'sfaq_show_guide' ) ) {
			delete_option( 'sfaq_show_guide' );
			wp_safe_redirect( admin_url( 'admin.php?page=sfaq-guide&sfaq_activated=1' ) );
			exit;
		}
	}

	/* ------------------------------------------------------------------ */
	/*  AJAX handlers                                                       */
	/* ------------------------------------------------------------------ */

	public function ajax_reset_colors() {
		check_ajax_referer( 'sfaq_admin_nonce', 'nonce' );
		if ( ! current_user_can( 'manage_options' ) ) wp_send_json_error();
		$settings = get_option( self::OPTION_KEY, [] );
		$defaults = self::get_defaults();
		$color_keys = [ 'q_bg','q_text','q_border','q_radius','q_hover_bg','q_hover_text','q_active_bg','q_active_text','a_bg','a_text','title_color' ];
		foreach ( $color_keys as $ck ) {
			$settings[ $ck ] = $defaults[ $ck ];
		}
		update_option( self::OPTION_KEY, $settings );
		delete_transient( 'sfaq_dynamic_css_v' . SFAQ_VERSION );
		wp_send_json_success( [ 'defaults' => array_intersect_key( $defaults, array_flip( $color_keys ) ) ] );
	}

	public function ajax_clear_cache() {
		check_ajax_referer( 'sfaq_admin_nonce', 'nonce' );
		if ( ! current_user_can( 'manage_options' ) ) wp_send_json_error();
		delete_transient( 'sfaq_dynamic_css_v' . SFAQ_VERSION );
		wp_send_json_success();
	}

	/* ------------------------------------------------------------------ */
	/*  Settings Page                                                       */
	/* ------------------------------------------------------------------ */

	public function render_settings_page() {
		$settings = get_option( self::OPTION_KEY, self::get_defaults() );
		$active   = sanitize_key( wp_unslash( $_GET['sfaq_tab'] ?? 'general' ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		$tabs     = [
			'general'  => __( 'General',  'accordly-smart-faq-schema' ),
			'styling'  => __( 'Styling',  'accordly-smart-faq-schema' ),
			'schema'   => __( 'Schema',   'accordly-smart-faq-schema' ),
			'advanced' => __( 'Advanced', 'accordly-smart-faq-schema' ),
		];
		?>
		<div class="wrap sfaq-wrap">
			<div class="sfaq-header">
				<div class="sfaq-header-inner">
					<span class="sfaq-logo dashicons dashicons-editor-help"></span>
					<h1><?php esc_html_e( 'Smart FAQ Schema', 'accordly-smart-faq-schema' ); ?></h1>
					<span class="sfaq-version">v<?php echo esc_html( SFAQ_VERSION ); ?></span>
				</div>
				<nav class="sfaq-tabs-nav">
					<?php foreach ( $tabs as $tab_key => $tab_label ) : ?>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=sfaq-settings&sfaq_tab=' . $tab_key ) ); ?>"
						   class="sfaq-tab <?php echo $active === $tab_key ? 'sfaq-tab--active' : ''; ?>">
							<?php echo esc_html( $tab_label ); ?>
						</a>
					<?php endforeach; ?>
				</nav>
			</div>

			<form method="post" action="options.php" class="sfaq-settings-form">
				<?php settings_fields( 'sfaq_settings_group' ); ?>

				<?php if ( $active === 'general' ) : ?>
				<div class="sfaq-tab-content">
					<?php $this->render_general_tab( $settings ); ?>
				</div>
				<?php elseif ( $active === 'styling' ) : ?>
				<div class="sfaq-tab-content">
					<?php $this->render_styling_tab( $settings ); ?>
				</div>
				<?php elseif ( $active === 'schema' ) : ?>
				<div class="sfaq-tab-content">
					<?php $this->render_schema_tab( $settings ); ?>
				</div>
				<?php elseif ( $active === 'advanced' ) : ?>
				<div class="sfaq-tab-content">
					<?php $this->render_advanced_tab( $settings ); ?>
				</div>
				<?php endif; ?>

				<?php if ( in_array( $active, [ 'general','styling','schema','advanced' ] ) ) : ?>
				<div class="sfaq-save-bar">
					<button type="submit" name="submit" class="sfaq-save-btn">
						<span class="dashicons dashicons-yes" style="font-size:20px;vertical-align:middle;margin-right:5px;line-height:1.4;"></span>
						<?php esc_html_e( 'Save Settings', 'accordly-smart-faq-schema' ); ?>
					</button>
				</div>
				<?php endif; ?>
			</form>
		</div>
		<?php
	}

	/* ----- General Tab ----- */
	private function render_general_tab( $s ) {
		$all_post_types = get_post_types( [ 'public' => true ], 'objects' );
		$sel_pts        = $s['post_types'] ?? [ 'post', 'page' ];
		?>
		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Post Types', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc"><?php esc_html_e( 'Enable the FAQ meta box for the following post types.', 'accordly-smart-faq-schema' ); ?></p>
			<div class="sfaq-checkbox-grid">
				<?php foreach ( $all_post_types as $pt ) : ?>
				<label class="sfaq-checkbox-label">
					<input type="checkbox" name="sfaq_settings[post_types][]"
					       value="<?php echo esc_attr( $pt->name ); ?>"
					       <?php checked( in_array( $pt->name, $sel_pts, true ) ); ?>>
					<?php echo esc_html( $pt->label ); ?>
				</label>
				<?php endforeach; ?>
			</div>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Display Method', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc"><?php esc_html_e( 'How should the FAQ section be added to your posts/pages?', 'accordly-smart-faq-schema' ); ?></p>
			<div class="sfaq-radio-group">
				<?php $dm = $s['display_method'] ?? 'auto_inject'; ?>
				<label class="sfaq-radio-card <?php echo $dm === 'auto_inject' ? 'sfaq-radio-card--active' : ''; ?>">
					<input type="radio" name="sfaq_settings[display_method]" value="auto_inject" <?php checked( $dm, 'auto_inject' ); ?>>
					<strong><?php esc_html_e( 'Auto-inject', 'accordly-smart-faq-schema' ); ?></strong>
					<span><?php esc_html_e( 'Automatically appended after post content on all posts/pages — works with any theme or builder.', 'accordly-smart-faq-schema' ); ?></span>
				</label>
				<label class="sfaq-radio-card <?php echo $dm === 'shortcode' ? 'sfaq-radio-card--active' : ''; ?>">
					<input type="radio" name="sfaq_settings[display_method]" value="shortcode" <?php checked( $dm, 'shortcode' ); ?>>
					<strong><?php esc_html_e( 'Shortcode only', 'accordly-smart-faq-schema' ); ?></strong>
					<span><?php esc_html_e( 'Place [sfaq] anywhere in your content or Elementor text widget.', 'accordly-smart-faq-schema' ); ?></span>
				</label>
				<label class="sfaq-radio-card <?php echo $dm === 'both' ? 'sfaq-radio-card--active' : ''; ?>">
					<input type="radio" name="sfaq_settings[display_method]" value="both" <?php checked( $dm, 'both' ); ?>>
					<strong><?php esc_html_e( 'Both', 'accordly-smart-faq-schema' ); ?></strong>
					<span><?php esc_html_e( 'Auto-inject is active and the shortcode also works independently.', 'accordly-smart-faq-schema' ); ?></span>
				</label>
			</div>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'FAQ Section Title', 'accordly-smart-faq-schema' ); ?></h2>
			<div class="sfaq-field-row">
				<label class="sfaq-toggle-label">
					<input type="hidden"   name="sfaq_settings[faq_title_enabled]" value="">
					<input type="checkbox" name="sfaq_settings[faq_title_enabled]" value="1" id="sfaq_title_enabled"
					       <?php checked( $s['faq_title_enabled'] ?? '1', '1' ); ?>>
					<span class="sfaq-toggle-slider"></span>
					<?php esc_html_e( 'Show section title above FAQs', 'accordly-smart-faq-schema' ); ?>
				</label>
			</div>
			<div class="sfaq-field-row">
				<label class="sfaq-label"><?php esc_html_e( 'Global title text', 'accordly-smart-faq-schema' ); ?></label>
				<input type="text" name="sfaq_settings[faq_title_text]"
				       value="<?php echo esc_attr( $s['faq_title_text'] ?? 'Frequently Asked Questions' ); ?>"
				       class="sfaq-input" placeholder="Frequently Asked Questions">
				<p class="sfaq-hint"><?php esc_html_e( 'You can override this per post/page in the FAQ meta box below the editor.', 'accordly-smart-faq-schema' ); ?></p>
			</div>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Global Defaults', 'accordly-smart-faq-schema' ); ?></h2>
			<div class="sfaq-field-row">
				<label class="sfaq-toggle-label">
					<input type="hidden"   name="sfaq_settings[faq_visible]" value="">
					<input type="checkbox" name="sfaq_settings[faq_visible]" value="1"
					       <?php checked( $s['faq_visible'] ?? '1', '1' ); ?>>
					<span class="sfaq-toggle-slider"></span>
					<?php esc_html_e( 'FAQ accordion visible by default (can override per post)', 'accordly-smart-faq-schema' ); ?>
				</label>
			</div>
			<div class="sfaq-field-row">
				<label class="sfaq-toggle-label">
					<input type="hidden"   name="sfaq_settings[schema_enabled]" value="">
					<input type="checkbox" name="sfaq_settings[schema_enabled]" value="1"
					       <?php checked( $s['schema_enabled'] ?? '1', '1' ); ?>>
					<span class="sfaq-toggle-slider"></span>
					<?php esc_html_e( 'Generate FAQ schema by default (can override per post)', 'accordly-smart-faq-schema' ); ?>
				</label>
			</div>
		</div>
		<?php
	}

	/* ----- Styling Tab ----- */
	private function render_styling_tab( $s ) {
		$styles = [
			'style1' => [ 'label' => 'Classic Accordion',  'desc' => 'Box border, + / − icon left, active red.' ],
			'style2' => [ 'label' => 'Minimal Line',        'desc' => 'Bottom-border only, arrow right.' ],
			'style3' => [ 'label' => 'Card / Shadow',       'desc' => 'Elevated card with shadow.' ],
			'style4' => [ 'label' => 'Left Accent Border',  'desc' => 'Coloured left border accent.' ],
			'style5' => [ 'label' => 'Modern Pill',         'desc' => 'Fully-rounded pill shape.' ],
		];
		$cur = $s['ui_style'] ?? 'style1';
		$style_labels = array_column( $styles, 'label', null );
		$style_keys   = array_keys( $styles );
		?>
		<div class="sfaq-styling-layout">

			<!-- ===== Left: Controls ===== -->
			<div class="sfaq-styling-controls">

				<!-- UI Style -->
				<div class="sfaq-card">
					<h2 class="sfaq-card-title"><?php esc_html_e( 'UI Style', 'accordly-smart-faq-schema' ); ?></h2>
					<div class="sfaq-style-grid">
						<?php foreach ( $styles as $key => $info ) : ?>
						<label class="sfaq-style-card <?php echo $cur === $key ? 'sfaq-style-card--active' : ''; ?>">
							<input type="radio" name="sfaq_settings[ui_style]" value="<?php echo esc_attr( $key ); ?>" <?php checked( $cur, $key ); ?>>
							<div class="sfaq-style-preview sfaq-preview-<?php echo esc_attr( $key ); ?>">
								<div class="sfaq-preview-q"><span class="sfaq-preview-icon">+</span> Sample Question</div>
							</div>
							<strong><?php echo esc_html( $info['label'] ); ?></strong>
							<span><?php echo esc_html( $info['desc'] ); ?></span>
						</label>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- Colors -->
				<div class="sfaq-card">
					<div class="sfaq-card-header-row">
						<h2 class="sfaq-card-title"><?php esc_html_e( 'Colors', 'accordly-smart-faq-schema' ); ?></h2>
						<button type="button" id="sfaq-reset-colors" class="sfaq-btn sfaq-btn-secondary">
							<?php esc_html_e( 'Reset to Defaults', 'accordly-smart-faq-schema' ); ?>
						</button>
					</div>
					<div class="sfaq-color-grid">
						<?php
						$color_fields = [
							'q_bg'          => 'Question — Default BG',
							'q_text'        => 'Question — Default Text',
							'q_border'      => 'Question — Border',
							'q_hover_bg'    => 'Question — Hover BG',
							'q_hover_text'  => 'Question — Hover Text',
							'q_active_bg'   => 'Question — Active BG',
							'q_active_text' => 'Question — Active Text',
							'a_bg'          => 'Answer — Background',
							'a_text'        => 'Answer — Text',
							'title_color'   => 'Section Title Color',
						];
						foreach ( $color_fields as $field => $label ) : ?>
						<div class="sfaq-color-item">
							<label class="sfaq-color-label"><?php echo esc_html( $label ); ?></label>
							<input type="text" name="sfaq_settings[<?php echo esc_attr( $field ); ?>]"
							       value="<?php echo esc_attr( $s[ $field ] ?? '' ); ?>"
							       class="sfaq-color-picker"
							       data-default-color="<?php echo esc_attr( self::get_defaults()[ $field ] ?? '' ); ?>">
						</div>
						<?php endforeach; ?>
					</div>
					<div class="sfaq-field-row sfaq-mt">
						<label class="sfaq-label"><?php esc_html_e( 'Border Radius (px)', 'accordly-smart-faq-schema' ); ?></label>
						<input type="number" name="sfaq_settings[q_radius]"
						       value="<?php echo esc_attr( $s['q_radius'] ?? '10' ); ?>"
						       min="0" max="50" step="1" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="q_radius">
					</div>
				</div>

				<!-- Spacing -->
				<div class="sfaq-card">
					<h2 class="sfaq-card-title"><?php esc_html_e( 'Spacing & Padding', 'accordly-smart-faq-schema' ); ?></h2>
					<p class="sfaq-card-desc"><?php esc_html_e( 'Adjust padding for questions and answers. Useful for Style 2 (Minimal) which has no default padding.', 'accordly-smart-faq-schema' ); ?></p>
					<div class="sfaq-spacing-grid">
						<div class="sfaq-field-row">
							<label class="sfaq-label"><?php esc_html_e( 'Question — Top/Bottom Padding (px)', 'accordly-smart-faq-schema' ); ?></label>
							<input type="number" name="sfaq_settings[q_padding_v]"
							       value="<?php echo esc_attr( $s['q_padding_v'] ?? '14' ); ?>"
							       min="0" max="60" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="q_padding_v">
						</div>
						<div class="sfaq-field-row">
							<label class="sfaq-label"><?php esc_html_e( 'Question — Left/Right Padding (px)', 'accordly-smart-faq-schema' ); ?></label>
							<input type="number" name="sfaq_settings[q_padding_h]"
							       value="<?php echo esc_attr( $s['q_padding_h'] ?? '18' ); ?>"
							       min="0" max="80" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="q_padding_h">
						</div>
						<div class="sfaq-field-row">
							<label class="sfaq-label"><?php esc_html_e( 'Answer — Top/Bottom Padding (px)', 'accordly-smart-faq-schema' ); ?></label>
							<input type="number" name="sfaq_settings[a_padding_v]"
							       value="<?php echo esc_attr( $s['a_padding_v'] ?? '14' ); ?>"
							       min="0" max="60" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="a_padding_v">
						</div>
						<div class="sfaq-field-row">
							<label class="sfaq-label"><?php esc_html_e( 'Answer — Left/Right Padding (px)', 'accordly-smart-faq-schema' ); ?></label>
							<input type="number" name="sfaq_settings[a_padding_h]"
							       value="<?php echo esc_attr( $s['a_padding_h'] ?? '18' ); ?>"
							       min="0" max="80" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="a_padding_h">
						</div>
						<div class="sfaq-field-row">
							<label class="sfaq-label"><?php esc_html_e( 'Gap between FAQ items (px)', 'accordly-smart-faq-schema' ); ?></label>
							<input type="number" name="sfaq_settings[item_gap]"
							       value="<?php echo esc_attr( $s['item_gap'] ?? '10' ); ?>"
							       min="0" max="40" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="item_gap">
						</div>
					</div>
				</div>

				<!-- Typography -->
				<div class="sfaq-card">
					<h2 class="sfaq-card-title"><?php esc_html_e( 'Typography', 'accordly-smart-faq-schema' ); ?></h2>
					<div class="sfaq-field-row">
						<label class="sfaq-label"><?php esc_html_e( 'Font Family', 'accordly-smart-faq-schema' ); ?></label>
						<select name="sfaq_settings[font_family]" class="sfaq-select">
							<?php
							$fonts = [
								'inherit'               => 'Inherit from theme',
								'Arial, sans-serif'     => 'Arial',
								'Georgia, serif'        => 'Georgia',
								"'Helvetica Neue', Helvetica, Arial, sans-serif" => 'Helvetica Neue',
								"'Open Sans', sans-serif" => 'Open Sans (Google)',
								"'Roboto', sans-serif"  => 'Roboto (Google)',
								"'Lato', sans-serif"    => 'Lato (Google)',
								"'Poppins', sans-serif" => 'Poppins (Google)',
								"'Montserrat', sans-serif" => 'Montserrat (Google)',
							];
							$cur_font = $s['font_family'] ?? 'inherit';
							foreach ( $fonts as $val => $lbl ) {
								echo '<option value="' . esc_attr( $val ) . '" ' . selected( $cur_font, $val, false ) . '>' . esc_html( $lbl ) . '</option>';
							}
							?>
						</select>
					</div>
					<div class="sfaq-field-row">
						<label class="sfaq-label"><?php esc_html_e( 'Section Title Font Size (px)', 'accordly-smart-faq-schema' ); ?></label>
						<input type="number" name="sfaq_settings[font_size_title]"
						       value="<?php echo esc_attr( $s['font_size_title'] ?? '24' ); ?>"
						       min="12" max="60" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="font_size_title">
					</div>
					<div class="sfaq-field-row">
						<label class="sfaq-label"><?php esc_html_e( 'Question Font Size (px)', 'accordly-smart-faq-schema' ); ?></label>
						<input type="number" name="sfaq_settings[font_size_q]"
						       value="<?php echo esc_attr( $s['font_size_q'] ?? '16' ); ?>"
						       min="10" max="40" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="font_size_q">
					</div>
					<div class="sfaq-field-row">
						<label class="sfaq-label"><?php esc_html_e( 'Answer Font Size (px)', 'accordly-smart-faq-schema' ); ?></label>
						<input type="number" name="sfaq_settings[font_size_a]"
						       value="<?php echo esc_attr( $s['font_size_a'] ?? '15' ); ?>"
						       min="10" max="40" class="sfaq-input sfaq-input--sm sfaq-preview-sync" data-preview-prop="font_size_a">
					</div>
					<div class="sfaq-field-row">
						<label class="sfaq-label"><?php esc_html_e( 'Question Font Weight', 'accordly-smart-faq-schema' ); ?></label>
						<select name="sfaq_settings[font_weight_q]" class="sfaq-select">
							<?php
							$weights = [ '400' => 'Normal (400)', '500' => 'Medium (500)', '600' => 'Semi-Bold (600)', '700' => 'Bold (700)', '800' => 'Extra-Bold (800)' ];
							$cur_w   = (string)( $s['font_weight_q'] ?? '600' );
							foreach ( $weights as $val => $lbl ) {
								echo '<option value="' . esc_attr( $val ) . '" ' . selected( $cur_w, $val, false ) . '>' . esc_html( $lbl ) . '</option>';
							}
							?>
						</select>
					</div>
				</div>

			</div><!-- .sfaq-styling-controls -->

			<!-- ===== Right: Live Preview ===== -->
			<div class="sfaq-preview-panel" id="sfaq-preview-panel">
				<div class="sfaq-preview-panel-header">
					<div>
						<h3><?php esc_html_e( 'Live Preview', 'accordly-smart-faq-schema' ); ?></h3>
						<span><?php esc_html_e( 'Updates in real-time. Click a question to test.', 'accordly-smart-faq-schema' ); ?></span>
					</div>
					<span class="sfaq-preview-style-badge" id="sfaq-preview-badge">
						<?php echo esc_html( $styles[ $cur ]['label'] ); ?>
					</span>
				</div>
				<div class="sfaq-preview-panel-body">
					<?php
					$sample_faqs = [
						[ 'q' => 'What is Smart FAQ Schema?',      'a' => 'It\'s a WordPress plugin that adds beautiful FAQ accordions with Google-recommended FAQPage schema markup to your posts and pages.' ],
						[ 'q' => 'Does it work with Elementor?',   'a' => 'Yes! Use the [sfaq] shortcode inside any Elementor Text or Shortcode widget, or enable auto-inject in Settings.' ],
						[ 'q' => 'Will it break my old posts?',    'a' => 'No. The FAQ section only appears on posts where you have filled in at least one FAQ — all existing posts are completely safe.' ],
					];
					?>
					<div class="sfaq-wrap <?php echo esc_attr( $cur ); ?>" id="sfaq-preview-accordion">
						<h2 class="sfaq-section-title"><?php esc_html_e( 'Frequently Asked Questions', 'accordly-smart-faq-schema' ); ?></h2>
						<div class="sfaq-accordion" role="list">
							<?php foreach ( $sample_faqs as $i => $faq ) :
								$pid = 'sfaq-prev-' . $i;
							?>
							<div class="sfaq-item" role="listitem">
								<h3 class="sfaq-question-wrap">
									<button type="button" class="sfaq-question" id="<?php echo esc_attr( $pid ); ?>"
									        aria-expanded="false"
									        aria-controls="<?php echo esc_attr( $pid ); ?>-panel">
										<span class="sfaq-icon" aria-hidden="true"></span>
										<span class="sfaq-question-text"><?php echo esc_html( $faq['q'] ); ?></span>
									</button>
								</h3>
								<div class="sfaq-answer" id="<?php echo esc_attr( $pid ); ?>-panel"
								     role="region" aria-labelledby="<?php echo esc_attr( $pid ); ?>" hidden>
									<div class="sfaq-answer-inner">
										<p><?php echo esc_html( $faq['a'] ); ?></p>
									</div>
								</div>
							</div>
							<?php endforeach; ?>
						</div>
					</div>
				</div>
			</div><!-- .sfaq-preview-panel -->

		</div><!-- .sfaq-styling-layout -->
		<?php
	}

	/* ----- Schema Tab ----- */
	private function render_schema_tab( $s ) {
		?>
		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Schema Settings', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc">
				<?php esc_html_e( 'Smart FAQ Schema uses the Google-recommended FAQPage schema type with mainEntity. You can optionally supply a custom JSON-LD template below.', 'accordly-smart-faq-schema' ); ?>
			</p>
			<div class="sfaq-field-row">
				<label class="sfaq-toggle-label">
					<input type="hidden"   name="sfaq_settings[schema_enabled]" value="">
					<input type="checkbox" name="sfaq_settings[schema_enabled]" value="1"
					       <?php checked( $s['schema_enabled'] ?? '1', '1' ); ?>>
					<span class="sfaq-toggle-slider"></span>
					<?php esc_html_e( 'Enable schema generation globally (overridable per post)', 'accordly-smart-faq-schema' ); ?>
				</label>
			</div>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Standard Schema Preview', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc"><?php esc_html_e( 'This is the schema generated for each post with FAQs (dynamic — questions/answers are filled in automatically):', 'accordly-smart-faq-schema' ); ?></p>
			<pre class="sfaq-code-block">{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "{{question}}",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{answer}}"
      }
    }
  ]
}</pre>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Custom Schema Template', 'accordly-smart-faq-schema' ); ?></h2>
			<div class="sfaq-field-row">
				<label class="sfaq-toggle-label">
					<input type="hidden"   name="sfaq_settings[use_custom_schema]" value="">
					<input type="checkbox" name="sfaq_settings[use_custom_schema]" value="1" id="sfaq_use_custom"
					       <?php checked( $s['use_custom_schema'] ?? '', '1' ); ?>>
					<span class="sfaq-toggle-slider"></span>
					<?php esc_html_e( 'Use custom schema template instead of standard FAQPage', 'accordly-smart-faq-schema' ); ?>
				</label>
			</div>
			<div class="sfaq-field-row sfaq-custom-schema-wrap">
				<label class="sfaq-label"><?php esc_html_e( 'Custom JSON-LD template', 'accordly-smart-faq-schema' ); ?></label>
				<textarea name="sfaq_settings[custom_schema]" rows="14" class="sfaq-textarea sfaq-code-input"
				          placeholder='Paste your full JSON-LD here. Use {{question}}, {{answer}}, {{page_url}}, {{page_title}}, {{faq_block}} as dynamic placeholders.'><?php echo esc_textarea( $s['custom_schema'] ?? '' ); ?></textarea>
				<p class="sfaq-hint">
					<?php esc_html_e( 'Available placeholders:', 'accordly-smart-faq-schema' ); ?>
					<code>{{question}}</code>, <code>{{answer}}</code>, <code>{{page_url}}</code>, <code>{{page_title}}</code>, <code>{{faq_block}}</code>
					<?php esc_html_e( '({{faq_block}} is replaced with the full mainEntity array).', 'accordly-smart-faq-schema' ); ?>
				</p>
			</div>
		</div>
		<?php
	}

	/* ----- Advanced Tab ----- */
	private function render_advanced_tab( $s ) {
		?>
		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Cache', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc"><?php esc_html_e( 'If colour or style changes are not reflecting on the frontend, clear the CSS cache.', 'accordly-smart-faq-schema' ); ?></p>
			<button type="button" id="sfaq-clear-cache" class="sfaq-btn sfaq-btn-secondary">
				<?php esc_html_e( 'Clear CSS Cache', 'accordly-smart-faq-schema' ); ?>
			</button>
			<span id="sfaq-cache-msg" class="sfaq-inline-msg"></span>
		</div>

		<div class="sfaq-card">
			<h2 class="sfaq-card-title"><?php esc_html_e( 'Shortcode Reference', 'accordly-smart-faq-schema' ); ?></h2>
			<p class="sfaq-card-desc"><?php esc_html_e( 'Use one of the following shortcodes in Elementor, Classic Editor, or Block Editor:', 'accordly-smart-faq-schema' ); ?></p>
			<div class="sfaq-shortcode-list">
				<div class="sfaq-shortcode-item">
					<code>[sfaq]</code>
					<span><?php esc_html_e( 'Auto-detects the current post — use this inside the post/page.', 'accordly-smart-faq-schema' ); ?></span>
				</div>
				<div class="sfaq-shortcode-item">
					<code>[sfaq id="123"]</code>
					<span><?php esc_html_e( 'Load FAQs from a specific post ID.', 'accordly-smart-faq-schema' ); ?></span>
				</div>
				<div class="sfaq-shortcode-item">
					<code>[sfaq style="3"]</code>
					<span><?php esc_html_e( 'Override the UI style (1–5) for this instance.', 'accordly-smart-faq-schema' ); ?></span>
				</div>
			</div>
		</div>
		<?php
	}

	/* ------------------------------------------------------------------ */
	/*  Guide Page                                                          */
	/* ------------------------------------------------------------------ */

	public function render_guide_page() {
		$activated = ! empty( $_GET['sfaq_activated'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		?>
		<div class="wrap sfaq-wrap">
			<div class="sfaq-header">
				<div class="sfaq-header-inner">
					<span class="sfaq-logo dashicons dashicons-editor-help"></span>
					<h1><?php esc_html_e( 'Smart FAQ Schema — Guide', 'accordly-smart-faq-schema' ); ?></h1>
				</div>
			</div>

			<?php if ( $activated ) : ?>
			<div class="sfaq-welcome-banner">
				<span class="dashicons dashicons-yes-alt"></span>
				<?php esc_html_e( 'Plugin activated! Follow the steps below to set up your FAQs.', 'accordly-smart-faq-schema' ); ?>
			</div>
			<?php endif; ?>

			<div class="sfaq-guide">

				<div class="sfaq-guide-step">
					<div class="sfaq-guide-step-number">1</div>
					<div class="sfaq-guide-step-body">
						<h3><?php esc_html_e( 'Configure Global Settings', 'accordly-smart-faq-schema' ); ?></h3>
						<p><?php esc_html_e( 'Go to Smart FAQ → Settings. Choose which post types should have the FAQ panel, pick your display method (Auto-inject or Shortcode), and set your global colours and font.', 'accordly-smart-faq-schema' ); ?></p>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=sfaq-settings' ) ); ?>" class="sfaq-btn sfaq-btn-primary"><?php esc_html_e( 'Open Settings', 'accordly-smart-faq-schema' ); ?></a>
					</div>
				</div>

				<div class="sfaq-guide-step">
					<div class="sfaq-guide-step-number">2</div>
					<div class="sfaq-guide-step-body">
						<h3><?php esc_html_e( 'Add FAQs to a Post or Page', 'accordly-smart-faq-schema' ); ?></h3>
						<p><?php esc_html_e( 'Open any post or page for editing. You will see a "Smart FAQ Schema" meta box below the editor (Classic Editor) or in the document sidebar / below the content area (Block Editor / Elementor).', 'accordly-smart-faq-schema' ); ?></p>
						<ol>
							<li><?php esc_html_e( 'Click "+ Add FAQ" to add a question/answer row.', 'accordly-smart-faq-schema' ); ?></li>
							<li><?php esc_html_e( 'Fill in the Question and Answer fields. Add up to as many FAQs as needed.', 'accordly-smart-faq-schema' ); ?></li>
							<li><?php esc_html_e( 'Use the per-post options to: override the section title, hide the accordion from visitors, or disable schema for this specific post.', 'accordly-smart-faq-schema' ); ?></li>
							<li><?php esc_html_e( 'Save / Update the post.', 'accordly-smart-faq-schema' ); ?></li>
						</ol>
						<div class="sfaq-callout">
							<strong><?php esc_html_e( 'Important:', 'accordly-smart-faq-schema' ); ?></strong>
							<?php esc_html_e( 'The FAQ section will NOT appear on posts with no FAQs filled in — old posts are completely safe.', 'accordly-smart-faq-schema' ); ?>
						</div>
					</div>
				</div>

				<div class="sfaq-guide-step">
					<div class="sfaq-guide-step-number">3</div>
					<div class="sfaq-guide-step-body">
						<h3><?php esc_html_e( 'Display on the Frontend', 'accordly-smart-faq-schema' ); ?></h3>
						<p><strong><?php esc_html_e( 'Auto-inject (recommended):', 'accordly-smart-faq-schema' ); ?></strong> <?php esc_html_e( 'Select "Auto-inject" in Settings → General. The FAQ accordion will automatically appear after the post content with no extra steps.', 'accordly-smart-faq-schema' ); ?></p>
						<p><strong><?php esc_html_e( 'Shortcode (Elementor / manual):', 'accordly-smart-faq-schema' ); ?></strong> <?php esc_html_e( 'Select "Shortcode only" or "Both" in Settings, then paste', 'accordly-smart-faq-schema' ); ?> <code>[sfaq]</code> <?php esc_html_e( 'inside a Text / Shortcode widget after the post content area in Elementor.', 'accordly-smart-faq-schema' ); ?></p>
					</div>
				</div>

				<div class="sfaq-guide-step">
					<div class="sfaq-guide-step-number">4</div>
					<div class="sfaq-guide-step-body">
						<h3><?php esc_html_e( 'Schema Generation', 'accordly-smart-faq-schema' ); ?></h3>
						<p><?php esc_html_e( 'Schema is enabled globally by default. For every post that has FAQs, a JSON-LD FAQPage block is injected into the page', 'accordly-smart-faq-schema' ); ?> &lt;head&gt;. <?php esc_html_e( 'You can turn it off globally (Settings → Schema) or per post in the FAQ meta box.', 'accordly-smart-faq-schema' ); ?></p>
						<div class="sfaq-callout">
							<?php esc_html_e( 'Tip: You can hide the FAQ accordion from visitors but still generate schema — useful for homepage schema without a visible FAQ section.', 'accordly-smart-faq-schema' ); ?>
						</div>
					</div>
				</div>

				<div class="sfaq-guide-step">
					<div class="sfaq-guide-step-number">5</div>
					<div class="sfaq-guide-step-body">
						<h3><?php esc_html_e( 'Bulk FAQ Checker', 'accordly-smart-faq-schema' ); ?></h3>
						<p><?php esc_html_e( 'Go to Smart FAQ → Bulk Checker to see all your posts, pages, and products with a ✔ / ✘ FAQ status. Click any post to jump straight to its edit screen and add FAQs.', 'accordly-smart-faq-schema' ); ?></p>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=sfaq-bulk' ) ); ?>" class="sfaq-btn sfaq-btn-secondary"><?php esc_html_e( 'Open Bulk Checker', 'accordly-smart-faq-schema' ); ?></a>
					</div>
				</div>

			</div><!-- .sfaq-guide -->
		</div><!-- .sfaq-wrap -->
		<?php
	}
}