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

$readjutsu_activate   = get_option('readjutsu_badge_activate', true);

$readjutsu_display    = get_option('readjutsu_badge_display', '');
$readjutsu_pos_raw    = get_option('readjutsu_badge_position', 'before');
if ( '' === $readjutsu_display ) {
	$readjutsu_display = ( 'none' === $readjutsu_pos_raw ) ? 'manual' : 'auto';
}
$readjutsu_position   = ( 'after' === $readjutsu_pos_raw ) ? 'after' : 'before';

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

$readjutsu_style          = get_option('readjutsu_badge_style', 'pill');
$readjutsu_float_position = get_option('readjutsu_badge_float_position', 'bottom-right');
$readjutsu_show_icon  = get_option('readjutsu_badge_icon', true);
$readjutsu_prefix     = get_option('readjutsu_badge_prefix', __('Reading time:', 'readjutsu'));
$readjutsu_postfix    = get_option('readjutsu_badge_postfix', __('min read', 'readjutsu'));
$readjutsu_color      = get_option('readjutsu_badge_color', '#0069FF');
$readjutsu_text_color = get_option('readjutsu_badge_text_color', '#ffffff');

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

<div id="badge-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">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
    <?php esc_html_e('Reading Time Badge', 'readjutsu'); ?>
  </div>

  <div class="readjutsu-settings__menu-content__option">
    <div class="readjutsu-settings__menu-content__label">
      <strong><?php esc_html_e('Enable Badge', 'readjutsu'); ?></strong>
      <p><?php esc_html_e('Show the estimated reading time on your posts.', 'readjutsu'); ?></p>
    </div>
    <div class="readjutsu-settings__menu-content__option__input">
      <label class="readjutsu-settings__activate">
        <input type="checkbox" name="readjutsu_badge_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('Place the badge 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_badge_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_badge_display" value="manual" <?php checked($readjutsu_display, 'manual'); ?>>
        <?php esc_html_e('Manual (block / shortcode)', 'readjutsu'); ?>
      </label>
    </div>
  </div>

  <div id="readjutsu-badge-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 badge 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_badge_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>
      </div>
      <div class="readjutsu-settings__menu-content__option__input readjutsu-radio-group">
        <label class="readjutsu-radio-label">
          <input type="radio" name="readjutsu_badge_position" value="before" <?php checked($readjutsu_position, 'before'); ?>>
          <?php esc_html_e('Before content', 'readjutsu'); ?>
        </label>
        <label class="readjutsu-radio-label">
          <input type="radio" name="readjutsu_badge_position" value="after" <?php checked($readjutsu_position, 'after'); ?>>
          <?php esc_html_e('After content', 'readjutsu'); ?>
        </label>
      </div>
    </div>

  </div>

  <div id="readjutsu-badge-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 — Reading Time" in the block inserter and drag it exactly where you want.', 'readjutsu' ); ?>
    <br>
    <strong><?php esc_html_e( 'Shortcode', 'readjutsu' ); ?></strong> —
    <?php esc_html_e( 'Use', 'readjutsu' ); ?> <code>[readjutsu]</code> <?php esc_html_e( 'in classic editors or text widgets.', 'readjutsu' ); ?>
    <?php esc_html_e( 'Add', 'readjutsu' ); ?> <code>id="42"</code> <?php esc_html_e( 'to target a specific post.', 'readjutsu' ); ?>
  </div>

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

      <div class="readjutsu-style-card">
        <input type="radio" id="badge-pill" name="readjutsu_badge_style" value="pill" <?php checked($readjutsu_style, 'pill'); ?>>
        <label for="badge-pill">
          <div class="readjutsu-style-card__preview">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--pill" style="background:<?php echo esc_attr($readjutsu_color); ?>;color:<?php echo esc_attr($readjutsu_text_color); ?>">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              4 min read
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Pill', 'readjutsu'); ?></span>
        </label>
      </div>

      <div class="readjutsu-style-card">
        <input type="radio" id="badge-minimal" name="readjutsu_badge_style" value="minimal" <?php checked($readjutsu_style, 'minimal'); ?>>
        <label for="badge-minimal">
          <div class="readjutsu-style-card__preview">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--minimal" style="color:<?php echo esc_attr($readjutsu_color); ?>">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              4 min read
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Minimal', 'readjutsu'); ?></span>
        </label>
      </div>

      <div class="readjutsu-style-card">
        <input type="radio" id="badge-inline" name="readjutsu_badge_style" value="inline" <?php checked($readjutsu_style, 'inline'); ?>>
        <label for="badge-inline">
          <div class="readjutsu-style-card__preview">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--inline" style="color:<?php echo esc_attr($readjutsu_color); ?>">
              Reading time: 4 min
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Inline', 'readjutsu'); ?></span>
        </label>
      </div>

      <!-- PRO: Floating — selectable when premium code is available, locked upsell otherwise -->
      <?php if ( $readjutsu_can_premium ) : ?>
      <div class="readjutsu-style-card">
        <input type="radio" id="badge-floating" name="readjutsu_badge_style" value="floating" <?php checked($readjutsu_style, 'floating'); ?>>
        <label for="badge-floating">
          <div class="readjutsu-style-card__preview">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--floating" style="background:<?php echo esc_attr($readjutsu_color); ?>;color:<?php echo esc_attr($readjutsu_text_color); ?>">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              4 min
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Floating', 'readjutsu'); ?></span>
        </label>
      </div>
      <?php else : ?>
      <a href="<?php echo esc_url($readjutsu_upgrade_url); ?>" class="readjutsu-locked-card">
        <div class="readjutsu-style-card__preview">
          <span class="readjutsu-preview-badge readjutsu-preview-badge--floating">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            4 min
          </span>
        </div>
        <span class="readjutsu-style-card__name"><?php esc_html_e('Floating', 'readjutsu'); ?></span>
        <span class="readjutsu-pro-badge">PRO</span>
      </a>
      <?php endif; ?>

      <?php if ( $readjutsu_can_premium ) : ?>
      <div class="readjutsu-style-card">
        <input type="radio" id="badge-bordered" name="readjutsu_badge_style" value="bordered" <?php checked($readjutsu_style, 'bordered'); ?>>
        <label for="badge-bordered">
          <div class="readjutsu-style-card__preview">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--bordered" style="color:<?php echo esc_attr($readjutsu_color); ?>;border-color:<?php echo esc_attr($readjutsu_color); ?>">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              4 min read
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Bordered', 'readjutsu'); ?></span>
        </label>
      </div>
      <?php else : ?>
      <a href="<?php echo esc_url($readjutsu_upgrade_url); ?>" class="readjutsu-locked-card">
        <div class="readjutsu-style-card__preview">
          <span class="readjutsu-preview-badge readjutsu-preview-badge--bordered">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            4 min read
          </span>
        </div>
        <span class="readjutsu-style-card__name"><?php esc_html_e('Bordered', 'readjutsu'); ?></span>
        <span class="readjutsu-pro-badge">PRO</span>
      </a>
      <?php endif; ?>

      <?php if ( $readjutsu_can_premium ) : ?>
      <div class="readjutsu-style-card">
        <input type="radio" id="badge-glass" name="readjutsu_badge_style" value="glass" <?php checked($readjutsu_style, 'glass'); ?>>
        <label for="badge-glass">
          <div class="readjutsu-style-card__preview readjutsu-style-card__preview--dark">
            <span class="readjutsu-preview-badge readjutsu-preview-badge--glass">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
              4 min read
            </span>
          </div>
          <span class="readjutsu-style-card__name"><?php esc_html_e('Glass', 'readjutsu'); ?></span>
        </label>
      </div>
      <?php else : ?>
      <a href="<?php echo esc_url($readjutsu_upgrade_url); ?>" class="readjutsu-locked-card">
        <div class="readjutsu-style-card__preview readjutsu-style-card__preview--dark">
          <span class="readjutsu-preview-badge readjutsu-preview-badge--glass">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            4 min read
          </span>
        </div>
        <span class="readjutsu-style-card__name"><?php esc_html_e('Glass', 'readjutsu'); ?></span>
        <span class="readjutsu-pro-badge">PRO</span>
      </a>
      <?php endif; ?>

    </div>
  </div>

  <?php if ( $readjutsu_can_premium ) : ?>
  <div id="readjutsu-float-position-row" class="readjutsu-settings__menu-content__option" <?php echo 'floating' !== $readjutsu_style ? 'style="display:none"' : ''; ?>>
    <div class="readjutsu-settings__menu-content__label">
      <strong><?php esc_html_e( 'Floating Position', 'readjutsu' ); ?></strong>
      <p><?php esc_html_e( 'Corner where the badge 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_badge_float_position" value="top-left" <?php checked( $readjutsu_float_position, 'top-left' ); ?>>
        <?php esc_html_e( 'Top left', 'readjutsu' ); ?>
      </label>
      <label class="readjutsu-radio-label">
        <input type="radio" name="readjutsu_badge_float_position" value="top-right" <?php checked( $readjutsu_float_position, 'top-right' ); ?>>
        <?php esc_html_e( 'Top right', 'readjutsu' ); ?>
      </label>
      <label class="readjutsu-radio-label">
        <input type="radio" name="readjutsu_badge_float_position" value="bottom-left" <?php checked( $readjutsu_float_position, 'bottom-left' ); ?>>
        <?php esc_html_e( 'Bottom left', 'readjutsu' ); ?>
      </label>
      <label class="readjutsu-radio-label">
        <input type="radio" name="readjutsu_badge_float_position" value="bottom-right" <?php checked( $readjutsu_float_position, 'bottom-right' ); ?>>
        <?php esc_html_e( 'Bottom right', 'readjutsu' ); ?>
      </label>
    </div>
  </div>
  <?php endif; ?>

  <div class="readjutsu-settings__menu-content__option">
    <div class="readjutsu-settings__menu-content__label">
      <strong><?php esc_html_e('Show Icon', 'readjutsu'); ?></strong>
      <p><?php esc_html_e('Display a clock icon next to the reading time.', 'readjutsu'); ?></p>
    </div>
    <div class="readjutsu-settings__menu-content__option__input">
      <label class="readjutsu-settings__activate">
        <input type="checkbox" name="readjutsu_badge_icon" value="1" <?php checked($readjutsu_show_icon); ?>>
        <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('Prefix', 'readjutsu'); ?></strong>
      <p><?php esc_html_e('Text before the reading time number.', 'readjutsu'); ?></p>
    </div>
    <div class="readjutsu-settings__menu-content__option__input">
      <input type="text" name="readjutsu_badge_prefix" value="<?php echo esc_attr($readjutsu_prefix); ?>" class="readjutsu-input-text" placeholder="<?php esc_attr_e('Reading time:', 'readjutsu'); ?>">
    </div>
  </div>

  <div class="readjutsu-settings__menu-content__option">
    <div class="readjutsu-settings__menu-content__label">
      <strong><?php esc_html_e('Postfix', 'readjutsu'); ?></strong>
      <p><?php esc_html_e('Text after the reading time number.', 'readjutsu'); ?></p>
    </div>
    <div class="readjutsu-settings__menu-content__option__input">
      <input type="text" name="readjutsu_badge_postfix" value="<?php echo esc_attr($readjutsu_postfix); ?>" class="readjutsu-input-text" placeholder="<?php esc_attr_e('min read', 'readjutsu'); ?>">
    </div>
  </div>

  <div class="readjutsu-settings__menu-content__option">
    <div class="readjutsu-settings__menu-content__label">
      <strong><?php esc_html_e('Badge Color', 'readjutsu'); ?></strong>
    </div>
    <div class="readjutsu-settings__menu-content__option__input readjutsu-color-pair">
      <label class="readjutsu-color-label">
        <?php esc_html_e('Background', 'readjutsu'); ?>
        <input type="color" name="readjutsu_badge_color" value="<?php echo esc_attr($readjutsu_color); ?>">
      </label>
      <label class="readjutsu-color-label">
        <?php esc_html_e('Text', 'readjutsu'); ?>
        <input type="color" name="readjutsu_badge_text_color" value="<?php echo esc_attr($readjutsu_text_color); ?>">
      </label>
    </div>
  </div>

</div>