<?php
// Prevent direct access
if (! defined('ABSPATH')) {
  exit;
}
?>
<div class="boostify-dashboard-wrap">
  <div class="dashboard">
    <!-- Main Content -->
    <div class="main-content">
      <div class="boostify-blog">
        <div class="main-content-left">

          <div class="boostify-header">
            <div class="logo">
              <span class="logo-icon"><img src="./assets/img/logo.svg" alt="Boostify Logo" /></span>
            </div>

            <!-- Search -->
            <form class="search-form" method="get" action="#">
              <input type="text" placeholder="Search" />
              <img src="./assets/img/search-icon.svg" alt="Search" class="search-icon" />
            </form>
          </div>

          <?php
          // Check if cron has started recently
          $cron_started = get_transient('boostify_cron_started');
          if ($cron_started): 
          ?>
          <div class="boostify-cron-notification" id="boostify-cron-notification">
            <div class="notification-icon-wrapper">
              <div class="notification-icon-bg">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="notification-icon">
                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="#0ACA45" />
                </svg>
              </div>
            </div>
            <div class="notification-content">
              <div class="notification-text">
                <h3 class="notification-title">Background Process Initialized</h3>
                <p class="notification-message">Your blogs will be generated shortly. This process runs automatically in the background.</p>
              </div>
              <button class="notification-close" id="boostify-cron-notification-close" aria-label="Close notification">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </button>
            </div>
          </div>
          <?php endif; ?>

          <!-- Total Posts -->
          <div class="total-posts">
            <div class="total-post-item">
              <div class="total-post-top-row">
                <h2>Total Post This Week</h2>
                <?php
                $total_posts = $dashboard_data['total_posts_week'];
                $percentage_change = $total_posts > 0 ? min(100, ($total_posts / 10) * 100) : 0; // Simple percentage calculation
                ?>
                <span class="post-percentage">
                  <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.605 7.16658C10.8939 7.16658 11.2056 7.04886 11.2621 6.75479C11.3126 6.49235 11.2443 6.20821 11.0574 6.00445L6.53357 1.07394C6.23913 0.753023 5.76174 0.753023 5.4673 1.07394L0.943489 6.00445C0.756538 6.20821 0.688288 6.49235 0.738738 6.75479C0.795265 7.04886 1.10699 7.16658 1.39587 7.16658L10.605 7.16658Z" fill="#0ACA45" />
                  </svg>
                  <?php echo esc_html(round($percentage_change, 1)); ?>%
                </span>
              </div>
              <div class="total-post-middle-row"><?php echo esc_html($total_posts); ?></div>
              <div class="total-post-bottom-row">
                <canvas id="total-posts-week-chart"></canvas>
              </div>
            </div>

            <div class="total-post-item">
              <div class="total-post-top-row">
                <h2>Pending Post This Week</h2>
                <?php
                $pending_posts = $dashboard_data['pending_posts_week'];
                $pending_percentage = $pending_posts > 0 ? min(100, ($pending_posts / 5) * 100) : 0; // Simple percentage calculation
                ?>
                <span class="post-percentage">
                  <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.605 7.16658C10.8939 7.16658 11.2056 7.04886 11.2621 6.75479C11.3126 6.49235 11.2443 6.20821 11.0574 6.00445L6.53357 1.07394C6.23913 0.753023 5.76174 0.753023 5.4673 1.07394L0.943489 6.00445C0.756538 6.20821 0.688288 6.49235 0.738738 6.75479C0.795265 7.04886 1.10699 7.16658 1.39587 7.16658L10.605 7.16658Z" fill="#0ACA45" />
                  </svg>
                  <?php echo esc_html(round($pending_percentage, 1)); ?>%
                </span>
              </div>
              <div class="total-post-middle-row"><?php echo esc_html($pending_posts); ?></div>
              <div class="total-post-bottom-row">
                <canvas id="pending-posts-week-chart"></canvas>
              </div>
            </div>
          </div>

          <!-- Middle Row -->
          <div class="middle-row">
            <div class="middle-row-top">
              <h2>Statistics</h2>
              <div class="statistics-calendar">
                <!-- <div id='calendar'></div> -->

                <div class="stats-dashboard">
                  <div class="stats-header">
                    <div>
                      <span class="stats-label">Total Post This Week</span>
                      <div class="stats-summary">
                        <span class="stats-total"><?php echo esc_html($dashboard_data['total_posts_week']); ?></span>
                        <span class="stats-change">
                          <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.605 7.16658C10.8939 7.16658 11.2056 7.04886 11.2621 6.75479C11.3126 6.49235 11.2443 6.20821 11.0574 6.00445L6.53357 1.07394C6.23913 0.753023 5.76174 0.753023 5.4673 1.07394L0.943489 6.00445C0.756538 6.20821 0.688288 6.49235 0.738738 6.75479C0.795265 7.04886 1.10699 7.16658 1.39587 7.16658L10.605 7.16658Z" fill="#0ACA45"></path>
                          </svg>
                          <?php echo esc_html(round($percentage_change, 0)); ?>%
                        </span>
                      </div>
                    </div>
                    <div class="stats-range">
                      <button class="range-btn">Day</button>
                      <button class="range-btn active">Week</button>
                      <button class="range-btn">Month</button>
                      <button class="range-btn">Year</button>
                    </div>
                  </div>

                  <div class="stats-legend">
                    <span><span class="legend-dot posts"></span>Current Period</span>
                    <span><span class="legend-dot avg"></span>Previous Period</span>
                  </div>
                  <canvas id="statsChart" height="320"></canvas>
                </div>
              </div>
            </div>
          </div>

          <!-- Bottom Row -->
          <div class="bottom-row">
            <h2>Pending Approval</h2>
            <p class="approval-tagline"><?php echo count($dashboard_data['pending_posts']); ?> posts awaiting your review.</p>
            <div class="pending-approval">
              <div class="carousel">
                <div class="carousel-inner">
                  <button class="carousel-arrow prev" disabled>
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22.4996 8.83331H4.31127L10.4946 2.66164C10.7143 2.44195 10.8377 2.14399 10.8377 1.83331C10.8377 1.52262 10.7143 1.22466 10.4946 1.00497C10.2749 0.785285 9.97695 0.661865 9.66627 0.661865C9.35558 0.661865 9.05762 0.785285 8.83794 1.00497L0.67127 9.17164C0.56192 9.2801 0.475127 9.40913 0.415897 9.5513C0.356666 9.69347 0.326172 9.84596 0.326172 9.99997C0.326172 10.154 0.356666 10.3065 0.415897 10.4486C0.475127 10.5908 0.56192 10.7198 0.67127 10.8283L8.83794 18.995C8.94639 19.1043 9.07543 19.1911 9.2176 19.2503C9.35977 19.3096 9.51226 19.3401 9.66627 19.3401C9.82028 19.3401 9.97277 19.3096 10.1149 19.2503C10.2571 19.1911 10.3861 19.1043 10.4946 18.995C10.604 18.8865 10.6907 18.7575 10.75 18.6153C10.8092 18.4731 10.8397 18.3207 10.8397 18.1666C10.8397 18.0126 10.8092 17.8601 10.75 17.718C10.6907 17.5758 10.604 17.4468 10.4946 17.3383L4.31127 11.1666H22.4996C22.809 11.1666 23.1058 11.0437 23.3246 10.8249C23.5434 10.6061 23.6663 10.3094 23.6663 9.99997C23.6663 9.69055 23.5434 9.39381 23.3246 9.17501C23.1058 8.95622 22.809 8.83331 22.4996 8.83331Z" fill="#AB54DB" />
                    </svg>
                  </button>

                  <button class="carousel-arrow next">
                    <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.49967 11.1666H19.688L13.5047 17.3383C13.3953 17.4468 13.3085 17.5758 13.2493 17.718C13.1901 17.8601 13.1596 18.0126 13.1596 18.1666C13.1596 18.3207 13.1901 18.4731 13.2493 18.6153C13.3085 18.7575 13.3953 18.8865 13.5047 18.995C13.6131 19.1043 13.7422 19.1911 13.8843 19.2503C14.0265 19.3096 14.179 19.3401 14.333 19.3401C14.487 19.3401 14.6395 19.3096 14.7817 19.2503C14.9239 19.1911 15.0529 19.1043 15.1613 18.995L23.328 10.8283C23.4374 10.7198 23.5242 10.5908 23.5834 10.4486C23.6426 10.3065 23.6731 10.154 23.6731 9.99997C23.6731 9.84596 23.6426 9.69347 23.5834 9.5513C23.5242 9.40913 23.4374 9.2801 23.328 9.17164L15.1613 1.00497C15.0526 0.896194 14.9234 0.809907 14.7813 0.751036C14.6392 0.692166 14.4868 0.661865 14.333 0.661865C14.0223 0.661865 13.7244 0.785285 13.5047 1.00497C13.3959 1.11375 13.3096 1.24289 13.2507 1.38501C13.1919 1.52714 13.1616 1.67947 13.1616 1.83331C13.1616 2.14399 13.285 2.44195 13.5047 2.66164L19.688 8.83331H1.49967C1.19026 8.83331 0.893509 8.95622 0.674717 9.17501C0.455924 9.39381 0.333008 9.69055 0.333008 9.99997C0.333008 10.3094 0.455924 10.6061 0.674717 10.8249C0.893509 11.0437 1.19026 11.1666 1.49967 11.1666Z" fill="#AB54DB" />
                    </svg>
                  </button>
                </div>

                <div class="pending-list">
                  <?php
                  $pending_posts = $dashboard_data['pending_posts'];
                  if (empty($pending_posts)): ?>
                    <div class="pending-card">
                      <div class="pending-card-top">
                        <img src="<?php echo esc_url(BOOSTIFY_BLOG_AI_ASSETS_DIR_URL . 'boostify-dashboard/img/pending-img1.png'); ?>" alt="No Pending Posts">
                        <div class="pending-card-top-right">
                          <h3>No Pending Posts</h3>
                          <p>All caught up!</p>
                        </div>
                      </div>
                      <div class="pending-card-bottom">
                        <p>Great job! There are no posts waiting for approval at the moment.</p>
                      </div>
                    </div>
                    <?php else:
                    foreach ($pending_posts as $index => $post):
                      $categories = get_the_category($post->ID);
                      $category_names = array_map(function ($cat) {
                        return $cat->name;
                      }, $categories);
                      $excerpt = wp_trim_words($post->post_content, 15, '...');
                      $image_num = ($index % 3) + 1;

                      // Get featured image if available
                      $featured_image = get_the_post_thumbnail_url($post->ID, 'thumbnail');
                      $image_src = $featured_image ? $featured_image : BOOSTIFY_BLOG_AI_ASSETS_DIR_URL . 'boostify-dashboard/img/pending-img' . $image_num . '.png';
                      $image_alt = $featured_image ? $post->post_title : 'Pending Post';
                    ?>
                      <div class="pending-card">
                        <div class="pending-card-top">
                          <img src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr($image_alt); ?>">
                          <div class="pending-card-top-right">
                            <h3><?php echo esc_html(wp_trim_words($post->post_title, 4, '...')); ?></h3>
                            <p><?php echo esc_html(implode(', ', array_slice($category_names, 0, 2))); ?></p>
                          </div>
                        </div>

                        <div class="pending-card-bottom">
                          <p><?php echo esc_html($excerpt); ?></p>
                          <div class="actions">
                            <button class="accept" onclick="window.open('<?php echo esc_url(get_edit_post_link($post->ID)); ?>', '_blank')" style="cursor: pointer;">Review</button>
                            <button class="reject" data-post-id="<?php echo esc_attr($post->ID); ?>" style="cursor: pointer;">Reject</button>
                          </div>
                        </div>
                      </div>
                  <?php endforeach;
                  endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
        <aside class="right-sidebar">
          <div class="right-sidebar-top">
            <h2 class="sidebar-heading">This Week Post Analytics</h2>
            <div class="analytics-cards">
              <?php
              $post_analytics = $dashboard_data['post_analytics'];
              if (empty($post_analytics)): ?>
                <div class="analytics-card-item">
                  <div class="analytics-card-item-left greenbg">
                    <img src="./assets/img/union-inc.svg" alt="Analytics" />
                  </div>
                  <div class="analytics-card-item-middle">
                    <h3>No Posts Yet</h3>
                    <p>This week</p>
                  </div>
                  <div class="analytics-card-item-right">
                    <h3>0 <img src="./assets/img/eye-icon.svg" alt="Eye Icon" /></h3>
                    <p><?php echo esc_html(date('j M Y')); ?></p>
                  </div>
                </div>
                <?php else:
                foreach ($post_analytics as $analytic):
                  $trend_class = $analytic['trend'] === 'up' ? 'greenbg' : 'redbg';
                  $trend_icon = $analytic['trend'] === 'up' ? 'union-inc.svg' : 'union-dec.svg';
                ?>
                  <div class="analytics-card-item">
                    <div class="analytics-card-item-left <?php echo esc_attr($trend_class); ?>">
                      <img src="<?php echo esc_url(BOOSTIFY_BLOG_AI_ASSETS_DIR_URL.'/boostify-dashboard/img/' . $trend_icon); ?>" alt="Analytics" />
                    </div>
                    <div class="analytics-card-item-middle">
                      <h3><?php echo esc_html(wp_trim_words($analytic['title'], 3, '...')); ?></h3>
                      <p><?php echo esc_html($analytic['categories'] ?: 'Uncategorized'); ?></p>
                    </div>
                    <div class="analytics-card-item-right">
                      <h3><?php echo esc_html($analytic['views']); ?> <img src="./assets/img/eye-icon.svg" alt="Eye Icon" /></h3>
                      <p><?php echo esc_html($analytic['date']); ?></p>
                    </div>
                  </div>
              <?php endforeach;
              endif; ?>
            </div>
          </div>

          <div class="sidebar-popular">
            <h2 class="sidebar-heading">Most Popular Topic This Month</h2>
            <div class="popular-topics">
              <?php
              $popular_topics = $dashboard_data['popular_topics'];
              $topic_colors = ['green-topic', 'blue-topic', 'yellow-topic', 'orange-topic', 'red-topic'];
              $total_posts = array_sum(array_column($popular_topics, 'count'));

              if (empty($popular_topics)): ?>
                <div class="popular-card-item">
                  <div class="popular-card-item-left green-topic"><span></span></div>
                  <div class="popular-card-item-middle">
                    <h3>No Data Yet</h3>
                    <p>0 posts</p>
                  </div>
                  <div class="popular-card-item-right">
                    <h3>0 <img src="./assets/img/eye-icon.svg" alt="Eye Icon" /></h3>
                  </div>
                </div>
                <?php else:
                foreach ($popular_topics as $index => $topic):
                  $percentage = $total_posts > 0 ? round(($topic['count'] / $total_posts) * 100) : 0;
                  $color_class = $topic_colors[intval($index) % count($topic_colors)];
                ?>
                  <div class="popular-card-item">
                    <div class="popular-card-item-left <?php echo esc_attr($color_class); ?>"><span></span></div>
                    <div class="popular-card-item-middle">
                      <h3><?php echo esc_html($topic['name']); ?> (<?php echo esc_html($percentage); ?>%)</h3>
                      <p><?php echo esc_html($topic['count']); ?> posts</p>
                    </div>
                    <div class="popular-card-item-right">
                      <h3><?php echo esc_html($topic['views']); ?> <img src="./assets/img/eye-icon.svg" alt="Eye Icon" /></h3>
                    </div>
                  </div>
              <?php endforeach;
              endif; ?>
            </div>
          </div>

          <div class="right-sidebar-bottom">
            <div class="right-sidebar-bottom-top">
              Total Blog Posts <br>This year
            </div>
            <div class="right-sidebar-counters">
              <p><?php echo number_format($dashboard_data['total_posts_year']); ?></p>
              <img src="./assets/img/green-graphs.svg" alt="Graph" />
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</div>