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

$readjutsu_can_premium  = readjutsu_can_use_premium();
$readjutsu_upgrade_url  = readjutsu_upgrade_url();
$readjutsu_analytics_on = (bool) get_option('readjutsu_analytics_activate', true);
$readjutsu_retention    = (int) get_option('readjutsu_analytics_retention', 365);

// Engine class only exists in premium builds with an active licence — the
// stats helpers are static and guarded here, never resolved in the free build.
$readjutsu_has_engine = $readjutsu_can_premium && class_exists('\ReadJutsu\Analytics_Pro');
$readjutsu_periods    = [7, 30, 90];
?>

<div id="analytics-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">
      <path d="M3 3v18h18" />
      <path d="M7 14l4-4 3 3 5-6" />
    </svg>
    <?php esc_html_e('Reading Analytics', 'readjutsu'); ?>
  </div>

  <?php if (! $readjutsu_has_engine) : ?>

    <?php
    // Ghost dashboard: same layout as the real one, skeleton bars instead of
    // data, upsell overlay on top — "show without unlocking".
    $readjutsu_skel_rows = [
      ['title' => 62, 'views' => 38, 'depth' => 84, 'completion' => 71],
      ['title' => 45, 'views' => 30, 'depth' => 67, 'completion' => 52],
      ['title' => 70, 'views' => 26, 'depth' => 58, 'completion' => 38],
      ['title' => 38, 'views' => 22, 'depth' => 41, 'completion' => 24],
      ['title' => 55, 'views' => 18, 'depth' => 29, 'completion' => 12],
    ];
    ?>
    <div class="readjutsu-analytics-locked">
      <div class="readjutsu-analytics-locked__ghost" aria-hidden="true">

        <div class="readjutsu-analytics-totals">
          <?php foreach ([__('Views', 'readjutsu'), __('Avg. depth', 'readjutsu'), __('Completion', 'readjutsu')] as $readjutsu_skel_label) : ?>
            <div class="readjutsu-stat-card">
              <span class="readjutsu-stat-card__value"><span class="readjutsu-skel" style="width:54px"></span></span>
              <span class="readjutsu-stat-card__label"><?php echo esc_html($readjutsu_skel_label); ?></span>
            </div>
          <?php endforeach; ?>
        </div>

        <table class="readjutsu-analytics-table">
          <thead>
            <tr>
              <th><?php esc_html_e('Post', 'readjutsu'); ?></th>
              <th><?php esc_html_e('Views', 'readjutsu'); ?></th>
              <th><?php esc_html_e('Avg. depth', 'readjutsu'); ?></th>
              <th><?php esc_html_e('Completion', 'readjutsu'); ?></th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($readjutsu_skel_rows as $readjutsu_skel) : ?>
              <tr>
                <td><span class="readjutsu-skel" style="width:<?php echo esc_attr($readjutsu_skel['title']); ?>%"></span></td>
                <td><span class="readjutsu-skel" style="width:<?php echo esc_attr($readjutsu_skel['views']); ?>px"></span></td>
                <td>
                  <div class="readjutsu-cell-bar">
                    <span class="readjutsu-cell-bar__track"><i style="width:<?php echo esc_attr($readjutsu_skel['depth']); ?>%;background:#c9d2dd"></i></span>
                    <span class="readjutsu-cell-bar__value"><span class="readjutsu-skel" style="width:26px"></span></span>
                  </div>
                </td>
                <td>
                  <div class="readjutsu-cell-bar">
                    <span class="readjutsu-cell-bar__track"><i style="width:<?php echo esc_attr($readjutsu_skel['completion']); ?>%;background:#c9d2dd"></i></span>
                    <span class="readjutsu-cell-bar__value"><span class="readjutsu-skel" style="width:26px"></span></span>
                  </div>
                </td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>

      </div>

      <div class="readjutsu-analytics-locked__overlay">
        <span class="readjutsu-pro-badge readjutsu-pro-badge--inline">PRO</span>
        <strong><?php esc_html_e('Privacy-first reading analytics', 'readjutsu'); ?></strong>
        <p><?php esc_html_e('See how far visitors actually read: views, average scroll depth and completion rate per post. No cookies, no personal data, GDPR-friendly by design.', 'readjutsu'); ?></p>
        <a class="button button-primary" href="<?php echo esc_url($readjutsu_upgrade_url); ?>"><?php esc_html_e('Upgrade to Pro', 'readjutsu'); ?> &rarr;</a>
      </div>
    </div>

  <?php else : ?>

    <div class="readjutsu-settings__menu-content__option">
      <div class="readjutsu-settings__menu-content__label">
        <strong><?php esc_html_e('Enable Analytics', 'readjutsu'); ?></strong>
        <p><?php esc_html_e('Track reads anonymously (no cookies, no personal data).', 'readjutsu'); ?></p>
      </div>
      <div class="readjutsu-settings__menu-content__option__input">
        <label class="readjutsu-settings__activate">
          <input type="checkbox" name="readjutsu_analytics_activate" value="1" <?php checked($readjutsu_analytics_on); ?>>
          <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('Data Retention', 'readjutsu'); ?></strong>
        <p><?php esc_html_e('Daily aggregates older than this are deleted.', 'readjutsu'); ?></p>
      </div>
      <div class="readjutsu-settings__menu-content__option__input">
        <input type="number" name="readjutsu_analytics_retention" value="<?php echo esc_attr($readjutsu_retention); ?>" min="30" max="3650" step="1" class="readjutsu-input-number">
        <span class="readjutsu-input-unit"><?php esc_html_e('days', 'readjutsu'); ?></span>
      </div>
    </div>

    <div class="readjutsu-settings__menu-content__option readjutsu-option--stacked">
      <div class="readjutsu-settings__menu-content__label">
        <strong><?php esc_html_e('Top Posts', 'readjutsu'); ?></strong>
      </div>

      <div class="readjutsu-analytics-period readjutsu-radio-group">
        <?php foreach ($readjutsu_periods as $readjutsu_p) : ?>
          <button type="button" class="button<?php echo 30 === $readjutsu_p ? ' button-primary' : ''; ?>" data-period="<?php echo esc_attr($readjutsu_p); ?>">
            <?php /* translators: %d: number of days */ printf(esc_html__('%d days', 'readjutsu'), (int) $readjutsu_p); ?>
          </button>
        <?php endforeach; ?>
      </div>

      <?php foreach ($readjutsu_periods as $readjutsu_p) : ?>
        <?php
        $readjutsu_rows   = \ReadJutsu\Analytics_Pro::get_stats($readjutsu_p);
        $readjutsu_totals = \ReadJutsu\Analytics_Pro::get_totals($readjutsu_p);
        ?>
        <div class="readjutsu-analytics-panel" id="readjutsu-analytics-<?php echo esc_attr($readjutsu_p); ?>" <?php echo 30 === $readjutsu_p ? '' : 'style="display:none"'; ?>>

          <?php if (empty($readjutsu_rows)) : ?>
            <p class="description"><?php esc_html_e('No data yet — stats appear once visitors read tracked posts.', 'readjutsu'); ?></p>
          <?php else : ?>

            <?php $readjutsu_total_completion = $readjutsu_totals->views > 0 ? round($readjutsu_totals->completes / $readjutsu_totals->views * 100) : 0; ?>
            <div class="readjutsu-analytics-totals">
              <div class="readjutsu-stat-card">
                <span class="readjutsu-stat-card__value"><?php echo esc_html(number_format_i18n((int) $readjutsu_totals->views)); ?></span>
                <span class="readjutsu-stat-card__label"><?php esc_html_e('Views', 'readjutsu'); ?></span>
              </div>
              <div class="readjutsu-stat-card">
                <span class="readjutsu-stat-card__value"><?php echo esc_html((int) $readjutsu_totals->avg_depth . '%'); ?></span>
                <span class="readjutsu-stat-card__label"><?php esc_html_e('Avg. depth', 'readjutsu'); ?></span>
              </div>
              <div class="readjutsu-stat-card">
                <span class="readjutsu-stat-card__value"><?php echo esc_html($readjutsu_total_completion . '%'); ?></span>
                <span class="readjutsu-stat-card__label"><?php esc_html_e('Completion', 'readjutsu'); ?></span>
              </div>
            </div>

            <table class="readjutsu-analytics-table">
              <thead>
                <tr>
                  <th><?php esc_html_e('Post', 'readjutsu'); ?></th>
                  <th><?php esc_html_e('Views', 'readjutsu'); ?></th>
                  <th><?php esc_html_e('Avg. depth', 'readjutsu'); ?></th>
                  <th><?php esc_html_e('Completion', 'readjutsu'); ?></th>
                </tr>
              </thead>
              <tbody>
                <?php foreach ($readjutsu_rows as $readjutsu_row) : ?>
                  <tr>
                    <td>
                      <?php $readjutsu_title = get_the_title((int) $readjutsu_row->post_id); ?>
                      <a href="<?php echo esc_url((string) get_edit_post_link((int) $readjutsu_row->post_id)); ?>">
                        <?php echo esc_html($readjutsu_title ? $readjutsu_title : sprintf('#%d', (int) $readjutsu_row->post_id)); ?>
                      </a>
                    </td>
                    <td class="readjutsu-analytics-table__num"><?php echo esc_html(number_format_i18n((int) $readjutsu_row->views)); ?></td>
                    <td>
                      <?php $readjutsu_depth_hue = (int) round((int) $readjutsu_row->avg_depth * 1.2); ?>
                      <div class="readjutsu-cell-bar">
                        <span class="readjutsu-cell-bar__track"><i style="width:<?php echo esc_attr((int) $readjutsu_row->avg_depth); ?>%;background:hsl(<?php echo esc_attr($readjutsu_depth_hue); ?>,75%,44%)"></i></span>
                        <span class="readjutsu-cell-bar__value"><?php echo esc_html((int) $readjutsu_row->avg_depth . '%'); ?></span>
                      </div>
                    </td>
                    <?php
                    $readjutsu_completion = $readjutsu_row->views > 0 ? round($readjutsu_row->completes / $readjutsu_row->views * 100) : 0;
                    // Red (hue 0) → orange → green (hue 120) along the 0–100% scale.
                    $readjutsu_hue = (int) round($readjutsu_completion * 1.2);
                    ?>
                    <td>
                      <div class="readjutsu-cell-bar readjutsu-cell-bar--complete">
                        <span class="readjutsu-cell-bar__track"><i style="width:<?php echo esc_attr((int) $readjutsu_completion); ?>%;background:hsl(<?php echo esc_attr($readjutsu_hue); ?>,75%,44%)"></i></span>
                        <span class="readjutsu-cell-bar__value"><?php echo esc_html($readjutsu_completion . '%'); ?></span>
                      </div>
                    </td>
                  </tr>
                <?php endforeach; ?>
              </tbody>
            </table>

          <?php endif; ?>
        </div>
      <?php endforeach; ?>
    </div>

  <?php endif; ?>

</div>
