﻿<% const k = kpis; %>
<%- include('../partials/adminTopbar', {
  pageTitle: 'Dashboard',
  pageSubtitle: todayLabel,
  topbarActions: `
    <a href="/admin/blog/new" class="btn-primary text-xs">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      New Post
    </a>
  `
}) %>

<main class="admin-main flex-1 overflow-y-auto overflow-x-hidden" id="dashboard-page"
  data-growth="<%= encodeURIComponent(JSON.stringify(growth)) %>"
  data-categories="<%= encodeURIComponent(JSON.stringify(categories)) %>">

  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
    <div>
      <h2 class="text-lg sm:text-xl font-bold text-white break-words">Welcome back, <%= userName %> 👋</h2>
      <p class="text-sm mt-0.5" style="color:rgba(255,255,255,.4)">Here's what's happening with Analytics Grade today.</p>
    </div>
    <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full" style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2)">
      <span class="w-1.5 h-1.5 rounded-full bg-green-400 pulse"></span>
      <span class="text-xs font-semibold text-green-400">All systems operational</span>
    </div>
  </div>

  <div class="admin-stat-grid">
    <div class="card stat-card">
      <div class="flex items-start justify-between mb-4">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:rgba(128,101,248,.2);border:1px solid rgba(128,101,248,.3)">
          <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z"/></svg>
        </div>
        <% if (k.posts.publishedThisMonth > 0) { %>
        <span class="badge badge-green text-xs">+<%= k.posts.publishedThisMonth %></span>
        <% } %>
      </div>
      <p class="text-2xl font-bold text-white mb-0.5"><%= k.posts.total %></p>
      <p class="text-xs" style="color:rgba(255,255,255,.45)">Total Blog Posts</p>
      <p class="text-xs mt-2 trend-up"><%= k.posts.published %> published · <%= k.posts.drafts %> drafts</p>
    </div>

    <div class="card stat-card">
      <div class="flex items-start justify-between mb-4">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:rgba(19,179,180,.2);border:1px solid rgba(19,179,180,.3)">
          <svg class="w-4 h-4 text-teal-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </div>
        <% if (k.newsletter.newThisWeek > 0) { %>
        <span class="badge badge-green text-xs">+<%= k.newsletter.newThisWeek %></span>
        <% } %>
      </div>
      <p class="text-2xl font-bold text-white mb-0.5"><%= k.newsletter.total.toLocaleString() %></p>
      <p class="text-xs" style="color:rgba(255,255,255,.45)">Newsletter Subscribers</p>
      <p class="text-xs mt-2 trend-up">↑ <%= k.newsletter.newThisWeek %> new this week</p>
    </div>

    <div class="card stat-card">
      <div class="flex items-start justify-between mb-4">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:rgba(68,144,211,.2);border:1px solid rgba(68,144,211,.3)">
          <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        </div>
        <% if (k.forms.unread > 0) { %>
        <span class="badge badge-red text-xs"><%= k.forms.unread %> new</span>
        <% } %>
      </div>
      <p class="text-2xl font-bold text-white mb-0.5"><%= k.forms.total %></p>
      <p class="text-xs" style="color:rgba(255,255,255,.45)">Form Submissions</p>
      <p class="text-xs mt-2" style="color:<%= k.forms.unread ? '#f87171' : 'rgba(255,255,255,.35)' %>"><%= k.forms.unread ? '← ' + k.forms.unread + ' unread' : 'All caught up' %></p>
    </div>

    <div class="card stat-card">
      <div class="flex items-start justify-between mb-4">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.25)">
          <svg class="w-4 h-4 text-yellow-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 .953.353 1.07.857l1.04 4.163A2 2 0 0016.01 10H19a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2"/></svg>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mb-0.5"><%= k.posts.published %></p>
      <p class="text-xs" style="color:rgba(255,255,255,.45)">Published Posts</p>
      <p class="text-xs mt-2 trend-up"><%= k.posts.publishedThisMonth %> published this month</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <div class="card lg:col-span-2">
      <div class="flex items-center justify-between mb-5">
        <div>
          <p class="text-sm font-semibold text-white">Subscriber Growth</p>
          <p class="text-xs mt-0.5" style="color:rgba(255,255,255,.35)">New subscribers per day — last 30 days</p>
        </div>
      </div>
      <div style="height:200px"><canvas id="subscriberChart"></canvas></div>
    </div>

    <div class="card">
      <p class="text-sm font-semibold text-white mb-1">Posts by Category</p>
      <p class="text-xs mb-5" style="color:rgba(255,255,255,.35)">Distribution of all content</p>
      <div style="height:160px" class="mb-4"><canvas id="categoryChart"></canvas></div>
      <div id="category-legend" class="space-y-2.5">
        <% if (!categories.legend.length) { %>
        <p class="text-xs" style="color:rgba(255,255,255,.35)">No categorized posts yet.</p>
        <% } %>
        <% categories.legend.forEach(function(item) { %>
        <div class="flex items-center justify-between text-xs">
          <span class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full" style="background:<%= item.color %>"></span>
            <span style="color:rgba(255,255,255,.6)"><%= item.label %></span>
          </span>
          <span class="font-semibold text-white"><%= item.count %></span>
        </div>
        <% }); %>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    <div class="card">
      <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
        <p class="text-sm font-semibold text-white">Recent Posts</p>
        <a href="/admin/blog" class="text-xs font-medium text-purple-400 hover:text-purple-300 transition-colors shrink-0">View all →</a>
      </div>
      <div class="admin-feed-list">
        <% if (!recentPosts.length) { %>
        <p class="text-xs py-4 text-center" style="color:rgba(255,255,255,.35)">No posts yet.</p>
        <% } %>
        <% recentPosts.forEach(function(p) { %>
        <a href="/admin/blog/<%= p._id %>/edit" class="admin-feed-row">
          <div class="admin-feed-main">
            <% if (p.imageCover) { %>
            <img src="<%= p.imageCover %>" alt="" class="admin-feed-thumb"/>
            <% } else { %>
            <div class="admin-feed-thumb-placeholder" aria-hidden="true"></div>
            <% } %>
            <div class="admin-feed-body">
              <p class="admin-feed-title"><%= p.displayTitle %></p>
              <p class="admin-feed-meta"><%= p.dateLabel %><% if (p.categoryLabel) { %> · <%= p.categoryLabel %><% } %></p>
            </div>
          </div>
          <span class="badge <%= p.statusBadge %>"><%= p.statusLabel %></span>
        </a>
        <% }); %>
      </div>
    </div>

    <div class="card">
      <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
        <p class="text-sm font-semibold text-white">Recent Form Submissions</p>
        <a href="/admin/forms" class="text-xs font-medium text-purple-400 hover:text-purple-300 transition-colors shrink-0">View all →</a>
      </div>
      <div class="admin-feed-list">
        <% if (!recentForms.length) { %>
        <p class="text-xs py-4 text-center" style="color:rgba(255,255,255,.35)">No submissions yet.</p>
        <% } %>
        <% recentForms.forEach(function(f) { %>
        <a href="/admin/forms" class="admin-feed-row">
          <div class="admin-feed-main">
            <div class="admin-feed-thumb-placeholder flex items-center justify-center text-[10px] font-bold text-white" style="background:linear-gradient(135deg,#8065f8,#4490d3)" aria-hidden="true"><%= f.initials %></div>
            <div class="admin-feed-body">
              <p class="admin-feed-title"><%= f.name %> · <%= f.typeLabel %></p>
              <p class="admin-feed-meta"><%= f.email %> · <%= f.timeLabel %></p>
            </div>
          </div>
          <span class="badge <%= f.statusBadge %>"><%= f.statusLabel %></span>
        </a>
        <% }); %>
      </div>
    </div>
  </div>

  <div class="card">
    <p class="text-sm font-semibold text-white mb-4">Quick Actions</p>
    <div class="flex flex-wrap gap-2 sm:gap-3">
      <a href="/admin/blog/new" class="btn-primary">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        Write New Post
      </a>
      <a href="/admin/newsletter" class="btn-ghost">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        Newsletter
      </a>
      <a href="/admin/forms" class="btn-ghost">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        Review Submissions
      </a>
      <a href="/admin/blog" class="btn-ghost">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
        Manage Posts
      </a>
      <a href="/admin/files" class="btn-ghost">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
        File Manager
      </a>
      <a href="/" target="_blank" rel="noopener noreferrer" class="btn-ghost">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
        View Live Site
      </a>
    </div>
  </div>
</main>