<?php
/**
 * Settings tab - End of Post.
 *
 * Variable: $options (Options instance)
 *
 * @package Relatedly
 * @since   2.0.0
 * @since   2.3.0 Rebuilt with native form rows and dropdown theme selection.
 */

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
defined( 'ABSPATH' ) || exit;

use Relatedly\Premium\FeatureGate;

$is_premium    = FeatureGate::is_premium();
$max_posts     = FeatureGate::max_end_content_posts();
$current_theme = (string) $options->get( 'end_content_theme', 'theme1' );

$themes = [
	'theme1' => [ __( 'List', 'relatedly' ), false ],
	'theme2' => [ __( 'Simple List', 'relatedly' ), false ],
	'theme6' => [ __( 'Compact', 'relatedly' ), false ],
	'theme3' => [ __( 'Masonry', 'relatedly' ), true ],
	'theme4' => [ __( 'Carousel', 'relatedly' ), true ],
	'theme5' => [ __( 'Timeline', 'relatedly' ), true ],
];

$theme_fields = [
	'theme1' => [
		[ 'end_theme1_bg', __( 'Background', 'relatedly' ) ],
		[ 'end_theme1_border_color', __( 'Border', 'relatedly' ) ],
		[ 'end_theme1_title_color', __( 'Title', 'relatedly' ) ],
		[ 'end_theme1_label_color', __( 'Label', 'relatedly' ) ],
	],
	'theme2' => [
		[ 'end_theme2_bg', __( 'Background', 'relatedly' ) ],
		[ 'end_theme2_border_color', __( 'Border', 'relatedly' ) ],
		[ 'end_theme2_title_color', __( 'Title', 'relatedly' ) ],
		[ 'end_theme2_label_color', __( 'Label', 'relatedly' ) ],
	],
	'theme6' => [
		[ 'end_theme6_bg', __( 'Background', 'relatedly' ) ],
		[ 'end_theme6_title_color', __( 'Title', 'relatedly' ) ],
		[ 'end_theme6_label_color', __( 'Label', 'relatedly' ) ],
	],
];
?>
<div class="relatedly-settings-panel">
	<div class="relatedly-settings-panel-header">
		<h2 class="relatedly-settings-panel-title"><?php esc_html_e( 'End of Post', 'relatedly' ); ?></h2>
		<p class="relatedly-settings-panel-desc"><?php esc_html_e( 'Configure recommendations that appear after the main article content.', 'relatedly' ); ?></p>
	</div>

	<div class="relatedly-settings-panel-body">
		<table class="form-table relatedly-settings-table">
			<tbody>
				<tr>
					<th scope="row">
						<label class="relatedly-field-label" for="relatedly-end-enabled"><?php esc_html_e( 'End Content Display', 'relatedly' ); ?></label>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Show related posts when readers finish a post.', 'relatedly' ); ?></p>
					</th>
					<td>
						<div class="relatedly-toggle-row">
							<div class="relatedly-toggle-switch">
								<input type="checkbox" name="end_content_enabled" id="relatedly-end-enabled" value="1" <?php checked( $options->get( 'end_content_enabled', true ) ); ?>>
								<label for="relatedly-end-enabled"></label>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<th scope="row">
						<label class="relatedly-field-label" for="end_content_theme"><?php esc_html_e( 'Theme', 'relatedly' ); ?></label>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Choose the end-of-post display style.', 'relatedly' ); ?></p>
					</th>
					<td>
						<select name="end_content_theme" id="end_content_theme" class="relatedly-control">
							<?php foreach ( $themes as $value => $theme ) : ?>
								<?php
								$is_locked = ! $is_premium && $theme[1];
								$label     = $theme[0] . ( $is_locked ? ' - ' . __( 'Pro', 'relatedly' ) : '' );
								?>
								<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $current_theme, $value ); ?> <?php disabled( $is_locked ); ?>>
									<?php echo esc_html( $label ); ?>
								</option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>

				<tr>
					<th scope="row">
						<label class="relatedly-field-label" for="relatedly-end-max"><?php esc_html_e( 'Post Count', 'relatedly' ); ?></label>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Maximum recommendations shown after content.', 'relatedly' ); ?></p>
					</th>
					<td>
						<input type="number" name="end_content_max_posts" id="relatedly-end-max" class="relatedly-control" min="1" max="<?php echo esc_attr( $is_premium ? '20' : (string) $max_posts ); ?>" value="<?php echo esc_attr( $options->get( 'end_content_max_posts', 5 ) ); ?>">
						<?php if ( ! $is_premium ) : ?>
							<p class="relatedly-field-hint">
								<?php
								printf(
									/* translators: %d: free plan maximum end content post count. */
									esc_html__( 'Free end-of-post limit: %d.', 'relatedly' ),
									(int) $max_posts
								);
								?>
							</p>
						<?php endif; ?>
					</td>
				</tr>

				<tr>
					<th scope="row">
						<label class="relatedly-field-label" for="relatedly-end-columns"><?php esc_html_e( 'Columns', 'relatedly' ); ?></label>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Used by grid-based layouts.', 'relatedly' ); ?></p>
					</th>
					<td>
						<input type="number" name="end_content_columns" id="relatedly-end-columns" class="relatedly-control" min="1" max="4" value="<?php echo esc_attr( $options->get( 'end_content_columns', 1 ) ); ?>">
					</td>
				</tr>

				<tr>
					<th scope="row">
						<span class="relatedly-field-label"><?php esc_html_e( 'Theme Colors', 'relatedly' ); ?></span>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Adjust the available colors for the selected free theme.', 'relatedly' ); ?></p>
					</th>
					<td>
						<?php foreach ( $theme_fields as $theme_key => $fields ) : ?>
							<div class="relatedly-theme-settings <?php echo $current_theme === $theme_key ? '' : 'relatedly-is-hidden'; ?>" id="<?php echo esc_attr( 'relatedly-end-settings-' . $theme_key ); ?>">
								<div class="relatedly-color-row">
									<?php foreach ( $fields as $field ) : ?>
										<label class="relatedly-color-field">
											<input type="color" name="<?php echo esc_attr( $field[0] ); ?>" value="<?php echo esc_attr( $options->get( $field[0], '#ffffff' ) ); ?>">
											<span><?php echo esc_html( $field[1] ); ?></span>
										</label>
									<?php endforeach; ?>
								</div>
							</div>
						<?php endforeach; ?>
					</td>
				</tr>

				<tr>
					<th scope="row">
						<span class="relatedly-field-label"><?php esc_html_e( 'End Content Preview', 'relatedly' ); ?></span>
						<p class="relatedly-field-hint"><?php esc_html_e( 'Preview the selected end-of-post theme in context.', 'relatedly' ); ?></p>
					</th>
					<td>
						<div class="relatedly-preview-frame" id="relatedly-end-content-preview">
							<div class="relatedly-preview-placeholder">
								<strong><?php esc_html_e( 'You may also like', 'relatedly' ); ?></strong>
								<span><?php esc_html_e( 'An end-of-post recommendation preview will load here.', 'relatedly' ); ?></span>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="relatedly-save-bar">
		<?php submit_button( __( 'Save Changes', 'relatedly' ), 'primary', 'submit', false ); ?>
	</div>
</div>
