<?php
defined( 'ABSPATH' ) or die( 'Something went wrong.' );

$readjutsu_activate  = get_option( 'readjutsu_progress_activate', true );
$readjutsu_scope     = get_option( 'readjutsu_progress_scope', 'content' );

$readjutsu_display   = get_option( 'readjutsu_progress_display', 'auto' );
if ( 'none' === $readjutsu_display ) {
	$readjutsu_display = 'manual'; // legacy value
}

$readjutsu_legacy_types   = (array) get_option( 'readjutsu_post_types', [ 'post' ] );
$readjutsu_post_types     = (array) get_option( 'readjutsu_progress_post_types', $readjutsu_legacy_types );
$readjutsu_all_post_types = get_post_types( [ 'public' => true ], 'objects' );
$readjutsu_exclude_types  = [ 'attachment' ];

$readjutsu_position       = get_option( 'readjutsu_progress_position', 'top' );
$readjutsu_donut_position = get_option( 'readjutsu_progress_donut_position', 'bottom-right' );
$readjutsu_donut_size     = (int) get_option( 'readjutsu_progress_donut_size', 46 );
$readjutsu_style     = get_option( 'readjutsu_progress_style', 'gradient' );
$readjutsu_color     = get_option( 'readjutsu_progress_color', '#0069FF' );
$readjutsu_color2    = get_option( 'readjutsu_progress_color2', '#00AAFF' );
$readjutsu_bg        = get_option( 'readjutsu_progress_bg', '#ddeeff' );
$readjutsu_height    = (int) get_option( 'readjutsu_progress_height', 3 );
$readjutsu_is_grad   = 'gradient' === $readjutsu_style;

$readjutsu_upgrade_url = readjutsu_upgrade_url();
$readjutsu_can_premium = readjutsu_can_use_premium();
?>

<div id="progress-settings" class="readjutsu-settings__menu-content">

	<div class="readjutsu-settings__menu-content__title">
		<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
		<?php esc_html_e( 'Progress Bar', 'readjutsu' ); ?>
	</div>

	<div class="readjutsu-settings__menu-content__option">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Enable Progress Bar', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'Show a scroll progress bar on single posts/pages.', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input">
			<label class="readjutsu-settings__activate">
				<input type="checkbox" name="readjutsu_progress_activate" value="1" <?php checked( $readjutsu_activate ); ?>>
				<span class="readjutsu-settings__activate__toggle"></span>
			</label>
		</div>
	</div>

	<div class="readjutsu-settings__menu-content__option">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Display', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'Show the bar automatically, or insert it yourself.', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input readjutsu-radio-group">
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_display" value="auto" <?php checked( $readjutsu_display, 'auto' ); ?>>
				<?php esc_html_e( 'Automatic', 'readjutsu' ); ?>
			</label>
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_display" value="manual" <?php checked( $readjutsu_display, 'manual' ); ?>>
				<?php esc_html_e( 'Manual (block / shortcode)', 'readjutsu' ); ?>
			</label>
		</div>
	</div>

	<div id="readjutsu-progress-auto" <?php echo 'auto' === $readjutsu_display ? '' : 'style="display:none"'; ?>>

		<div class="readjutsu-settings__menu-content__option">
			<div class="readjutsu-settings__menu-content__label">
				<strong><?php esc_html_e( 'Content Types', 'readjutsu' ); ?></strong>
				<p><?php esc_html_e( 'Show the bar automatically on these content types.', 'readjutsu' ); ?></p>
			</div>
			<div class="readjutsu-settings__menu-content__option__input readjutsu-post-types">
				<?php foreach ( $readjutsu_all_post_types as $readjutsu_pt ) : ?>
					<?php if ( in_array( $readjutsu_pt->name, $readjutsu_exclude_types, true ) ) continue; ?>
					<label class="readjutsu-checkbox-label">
						<input type="checkbox" name="readjutsu_progress_post_types[]" value="<?php echo esc_attr( $readjutsu_pt->name ); ?>" <?php checked( in_array( $readjutsu_pt->name, $readjutsu_post_types, true ) ); ?>>
						<?php echo esc_html( $readjutsu_pt->labels->singular_name ); ?>
					</label>
				<?php endforeach; ?>
			</div>
		</div>

		<div class="readjutsu-settings__menu-content__option">
			<div class="readjutsu-settings__menu-content__label">
				<strong><?php esc_html_e( 'Position', 'readjutsu' ); ?></strong>
				<p><?php esc_html_e( 'Horizontal bar (full width) or vertical bar (full height).', 'readjutsu' ); ?></p>
			</div>
			<div class="readjutsu-settings__menu-content__option__input readjutsu-radio-group">
				<label class="readjutsu-radio-label">
					<input type="radio" name="readjutsu_progress_position" value="top" <?php checked( $readjutsu_position, 'top' ); ?>>
					<?php esc_html_e( 'Top', 'readjutsu' ); ?>
				</label>
				<label class="readjutsu-radio-label">
					<input type="radio" name="readjutsu_progress_position" value="bottom" <?php checked( $readjutsu_position, 'bottom' ); ?>>
					<?php esc_html_e( 'Bottom', 'readjutsu' ); ?>
				</label>
				<label class="readjutsu-radio-label">
					<input type="radio" name="readjutsu_progress_position" value="left" <?php checked( $readjutsu_position, 'left' ); ?>>
					<?php esc_html_e( 'Left (vertical)', 'readjutsu' ); ?>
				</label>
				<label class="readjutsu-radio-label">
					<input type="radio" name="readjutsu_progress_position" value="right" <?php checked( $readjutsu_position, 'right' ); ?>>
					<?php esc_html_e( 'Right (vertical)', 'readjutsu' ); ?>
				</label>
			</div>
		</div>

	</div>

	<div id="readjutsu-progress-placement-tip" class="readjutsu-settings__menu-content__tip" <?php echo 'manual' === $readjutsu_display ? '' : 'style="display:none"'; ?>>
		<strong><?php esc_html_e( 'Gutenberg block', 'readjutsu' ); ?></strong> —
		<?php esc_html_e( 'Search for "ReadJutsu — Progress Bar" in the block inserter and place it anywhere in your content.', 'readjutsu' ); ?>
		<br>
		<strong><?php esc_html_e( 'Shortcode', 'readjutsu' ); ?></strong> —
		<?php esc_html_e( 'Use', 'readjutsu' ); ?> <code>[readjutsu_bar]</code> <?php esc_html_e( 'in classic editors or text widgets.', 'readjutsu' ); ?>
	</div>

	<div class="readjutsu-settings__menu-content__option">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Tracking Scope', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'What should the progress bar track?', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input readjutsu-radio-group">
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_scope" value="content" <?php checked( $readjutsu_scope, 'content' ); ?>>
				<?php esc_html_e( 'Article content (recommended)', 'readjutsu' ); ?>
			</label>
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_scope" value="page" <?php checked( $readjutsu_scope, 'page' ); ?>>
				<?php esc_html_e( 'Full page', 'readjutsu' ); ?>
			</label>
		</div>
	</div>

	<div class="readjutsu-settings__menu-content__option readjutsu-option--stacked">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Bar Style', 'readjutsu' ); ?></strong>
		</div>
		<div class="readjutsu-bar-cards">

			<div class="readjutsu-style-card readjutsu-style-card--bar">
				<input type="radio" id="bar-solid" name="readjutsu_progress_style" value="solid" <?php checked( $readjutsu_style, 'solid' ); ?>>
				<label for="bar-solid">
					<div class="readjutsu-style-card__preview">
						<div class="readjutsu-preview-bar" style="background:<?php echo esc_attr( $readjutsu_color ); ?>;width:65%"></div>
					</div>
					<span class="readjutsu-style-card__name"><?php esc_html_e( 'Solid', 'readjutsu' ); ?></span>
				</label>
			</div>

			<div class="readjutsu-style-card readjutsu-style-card--bar">
				<input type="radio" id="bar-gradient" name="readjutsu_progress_style" value="gradient" <?php checked( $readjutsu_style, 'gradient' ); ?>>
				<label for="bar-gradient">
					<div class="readjutsu-style-card__preview">
						<div class="readjutsu-preview-bar" style="background:linear-gradient(to right,<?php echo esc_attr( $readjutsu_color ); ?>,<?php echo esc_attr( $readjutsu_color2 ); ?>);width:65%"></div>
					</div>
					<span class="readjutsu-style-card__name"><?php esc_html_e( 'Gradient', 'readjutsu' ); ?></span>
				</label>
			</div>

			<?php if ( $readjutsu_can_premium ) : ?>
			<div class="readjutsu-style-card readjutsu-style-card--bar">
				<input type="radio" id="bar-animated" name="readjutsu_progress_style" value="animated" <?php checked( $readjutsu_style, 'animated' ); ?>>
				<label for="bar-animated">
					<div class="readjutsu-style-card__preview">
						<div class="readjutsu-preview-bar readjutsu-preview-bar--shimmer" style="background:<?php echo esc_attr( $readjutsu_color ); ?>;width:65%"></div>
					</div>
					<span class="readjutsu-style-card__name"><?php esc_html_e( 'Animated', 'readjutsu' ); ?></span>
				</label>
			</div>
			<?php else : ?>
			<a href="<?php echo esc_url( $readjutsu_upgrade_url ); ?>" class="readjutsu-locked-card readjutsu-locked-card--bar">
				<div class="readjutsu-style-card__preview">
					<div class="readjutsu-preview-bar readjutsu-preview-bar--shimmer" style="width:65%"></div>
				</div>
				<span class="readjutsu-style-card__name"><?php esc_html_e( 'Animated', 'readjutsu' ); ?></span>
				<span class="readjutsu-pro-badge">PRO</span>
			</a>
			<?php endif; ?>

			<?php if ( $readjutsu_can_premium ) : ?>
			<div class="readjutsu-style-card readjutsu-style-card--bar">
				<input type="radio" id="bar-percent" name="readjutsu_progress_style" value="percent" <?php checked( $readjutsu_style, 'percent' ); ?>>
				<label for="bar-percent">
					<div class="readjutsu-style-card__preview">
						<div class="readjutsu-preview-bar" style="background:<?php echo esc_attr( $readjutsu_color ); ?>;width:65%">
							<span class="readjutsu-preview-bar__pct">65%</span>
						</div>
					</div>
					<span class="readjutsu-style-card__name"><?php esc_html_e( 'With %', 'readjutsu' ); ?></span>
				</label>
			</div>
			<?php else : ?>
			<a href="<?php echo esc_url( $readjutsu_upgrade_url ); ?>" class="readjutsu-locked-card readjutsu-locked-card--bar">
				<div class="readjutsu-style-card__preview">
					<div class="readjutsu-preview-bar" style="background:#0069FF;width:65%">
						<span class="readjutsu-preview-bar__pct">65%</span>
					</div>
				</div>
				<span class="readjutsu-style-card__name"><?php esc_html_e( 'With %', 'readjutsu' ); ?></span>
				<span class="readjutsu-pro-badge">PRO</span>
			</a>
			<?php endif; ?>

			<?php if ( $readjutsu_can_premium ) : ?>
			<div class="readjutsu-style-card readjutsu-style-card--bar">
				<input type="radio" id="bar-donut" name="readjutsu_progress_style" value="donut" <?php checked( $readjutsu_style, 'donut' ); ?>>
				<label for="bar-donut">
					<div class="readjutsu-style-card__preview readjutsu-style-card__preview--center">
						<svg class="readjutsu-preview-donut" width="38" height="38" viewBox="0 0 38 38">
							<circle cx="19" cy="19" r="15" fill="none" stroke="#ddeeff" stroke-width="4"/>
							<circle cx="19" cy="19" r="15" fill="none" stroke="<?php echo esc_attr( $readjutsu_color ); ?>" stroke-width="4" stroke-dasharray="61 33" stroke-dashoffset="24" stroke-linecap="round"/>
							<text x="19" y="23" text-anchor="middle" font-size="8" font-weight="700" fill="<?php echo esc_attr( $readjutsu_color ); ?>">65%</text>
						</svg>
					</div>
					<span class="readjutsu-style-card__name"><?php esc_html_e( 'Donut', 'readjutsu' ); ?></span>
				</label>
			</div>
			<?php else : ?>
			<a href="<?php echo esc_url( $readjutsu_upgrade_url ); ?>" class="readjutsu-locked-card readjutsu-locked-card--bar">
				<div class="readjutsu-style-card__preview readjutsu-style-card__preview--center">
					<svg class="readjutsu-preview-donut" width="38" height="38" viewBox="0 0 38 38">
						<circle cx="19" cy="19" r="15" fill="none" stroke="#ddeeff" stroke-width="4"/>
						<circle cx="19" cy="19" r="15" fill="none" stroke="#0069FF" stroke-width="4" stroke-dasharray="61 33" stroke-dashoffset="24" stroke-linecap="round"/>
						<text x="19" y="23" text-anchor="middle" font-size="8" font-weight="700" fill="#0069FF">65%</text>
					</svg>
				</div>
				<span class="readjutsu-style-card__name"><?php esc_html_e( 'Donut', 'readjutsu' ); ?></span>
				<span class="readjutsu-pro-badge">PRO</span>
			</a>
			<?php endif; ?>

		</div>
	</div>

	<?php if ( $readjutsu_can_premium ) : ?>
	<div id="readjutsu-donut-position-row" class="readjutsu-settings__menu-content__option" <?php echo 'donut' !== $readjutsu_style ? 'style="display:none"' : ''; ?>>
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Donut Position', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'Corner where the donut appears.', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input readjutsu-radio-group">
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_donut_position" value="top-right" <?php checked( $readjutsu_donut_position, 'top-right' ); ?>>
				<?php esc_html_e( 'Top right', 'readjutsu' ); ?>
			</label>
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_donut_position" value="top-left" <?php checked( $readjutsu_donut_position, 'top-left' ); ?>>
				<?php esc_html_e( 'Top left', 'readjutsu' ); ?>
			</label>
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_donut_position" value="bottom-right" <?php checked( $readjutsu_donut_position, 'bottom-right' ); ?>>
				<?php esc_html_e( 'Bottom right', 'readjutsu' ); ?>
			</label>
			<label class="readjutsu-radio-label">
				<input type="radio" name="readjutsu_progress_donut_position" value="bottom-left" <?php checked( $readjutsu_donut_position, 'bottom-left' ); ?>>
				<?php esc_html_e( 'Bottom left', 'readjutsu' ); ?>
			</label>
		</div>
	</div>

	<div id="readjutsu-donut-size-row" class="readjutsu-settings__menu-content__option" <?php echo 'donut' !== $readjutsu_style ? 'style="display:none"' : ''; ?>>
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Donut Size', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'Diameter of the donut in pixels.', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input">
			<input type="number" name="readjutsu_progress_donut_size" value="<?php echo esc_attr( $readjutsu_donut_size ); ?>" min="24" max="120" step="1" class="readjutsu-input-number">
			<span class="readjutsu-input-unit">px</span>
		</div>
	</div>
	<?php endif; ?>

	<div class="readjutsu-settings__menu-content__option">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Colors', 'readjutsu' ); ?></strong>
		</div>
		<div class="readjutsu-settings__menu-content__option__input readjutsu-color-pair">
			<label class="readjutsu-color-label">
				<?php esc_html_e( 'Bar color', 'readjutsu' ); ?>
				<input type="color" name="readjutsu_progress_color" value="<?php echo esc_attr( $readjutsu_color ); ?>">
			</label>
			<label class="readjutsu-color-label" id="readjutsu-progress-color2-row" <?php echo $readjutsu_is_grad ? '' : 'style="display:none"'; ?>>
				<?php esc_html_e( 'Secondary (gradient)', 'readjutsu' ); ?>
				<input type="color" name="readjutsu_progress_color2" value="<?php echo esc_attr( $readjutsu_color2 ); ?>">
			</label>
			<label class="readjutsu-color-label">
				<?php esc_html_e( 'Track', 'readjutsu' ); ?>
				<input type="color" name="readjutsu_progress_bg" value="<?php echo esc_attr( $readjutsu_bg ); ?>">
			</label>
		</div>
	</div>

	<div class="readjutsu-settings__menu-content__option">
		<div class="readjutsu-settings__menu-content__label">
			<strong><?php esc_html_e( 'Height', 'readjutsu' ); ?></strong>
			<p><?php esc_html_e( 'Bar thickness in pixels.', 'readjutsu' ); ?></p>
		</div>
		<div class="readjutsu-settings__menu-content__option__input">
			<input type="number" name="readjutsu_progress_height" value="<?php echo esc_attr( $readjutsu_height ); ?>" min="1" max="20" step="1" class="readjutsu-input-number">
			<span class="readjutsu-input-unit">px</span>
		</div>
	</div>

</div>
