{% extends "base.html" %}

{% block title %}Admin Analytics · CampusCart{% endblock %}

{% macro metric(label, value, icon, color, endpoint=none, params={}, tooltip='Management page coming soon.') %}
  {% set available = endpoint and has_endpoint(endpoint) %}
  {% set unavailable = endpoint and not available %}
  <div class="col-6 col-md-4 col-xl-3">
    {% if available %}
      <a class="card admin-metric-card admin-metric-clickable h-100 border-0 shadow-sm text-decoration-none"
         href="{{ url_for(endpoint, **params) }}">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }} <i class="bi bi-arrow-right admin-metric-arrow" aria-hidden="true"></i></div>
        </div>
      </a>
    {% elif unavailable %}
      <div class="card admin-metric-card admin-metric-disabled h-100 border-0 shadow-sm"
           tabindex="0" role="button" aria-disabled="true" title="{{ tooltip }}">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }} <i class="bi bi-lock admin-metric-lock" aria-hidden="true"></i></div>
        </div>
      </div>
    {% else %}
      <div class="card admin-metric-card h-100 border-0 shadow-sm">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }}</div>
        </div>
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% block content %}
<div class="admin-page">
  <div class="mb-4">
    <h1 class="page-title mb-1">Platform Analytics</h1>
    <p class="text-muted mb-0">Marketplace health, growth, engagement and Premium adoption across CampusCart.</p>
  </div>

  {# ---------- Platform overview ---------- #}
  {% set o = dashboard.overview %}
  <h2 class="admin-section-title">Platform overview</h2>
  <div class="row g-3 mb-4">
    {{ metric('Total Users', "{:,}".format(o.total_users), 'bi-people-fill', 'primary', endpoint='admin.users') }}
    {{ metric('New Users (30d)', "{:,}".format(o.new_users_30d), 'bi-person-plus-fill', 'info') }}
    {{ metric('Active Listings', "{:,}".format(o.active_listings), 'bi-bag-check-fill', 'success', endpoint='admin.listings', params={'status': 'active'}) }}
    {{ metric('Sold Listings', "{:,}".format(o.sold_listings), 'bi-cart-check-fill', 'secondary', endpoint='admin.listings', params={'status': 'sold'}) }}
    {{ metric('Total Listings', "{:,}".format(o.total_listings), 'bi-box-seam-fill', 'primary') }}
    {{ metric('Premium Members', "{:,}".format(o.premium_members), 'bi-star-fill', 'warning', endpoint='admin.users', params={'premium': 'active'}) }}
    {{ metric('Featured Listings', "{:,}".format(o.featured_listings), 'bi-stars', 'warning', endpoint='admin.listings', params={'featured': 1}) }}
    {{ metric('Advertisements', "{:,}".format(o.advertisements), 'bi-megaphone-fill', 'info', endpoint='admin.ad_list') }}
    {{ metric('Conversations', "{:,}".format(o.total_conversations), 'bi-chat-dots-fill', 'primary', endpoint='admin.conversations') }}
    {{ metric('Messages', "{:,}".format(o.total_messages), 'bi-envelope-fill', 'secondary') }}
    {{ metric('Offers', "{:,}".format(o.total_offers), 'bi-tag-fill', 'success', endpoint='admin.offers') }}
    {{ metric('Total Views', "{:,}".format(o.total_views), 'bi-eye-fill', 'info') }}
    {{ metric('Pending Reports', "{:,}".format(o.pending_reports), 'bi-flag-fill', 'danger', endpoint='admin.reports', params={'status': 'pending'}) }}
    {{ metric('Pending Verifications', "{:,}".format(o.pending_verifications), 'bi-patch-check-fill', 'warning', endpoint='admin.verifications') }}
  </div>

  {# ---------- Recent admin activity ---------- #}
  <div class="d-flex align-items-center justify-content-between">
    <h2 class="admin-section-title mb-0">Recent admin activity</h2>
    {% if has_endpoint('admin.audit_logs') %}
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.audit_logs') }}">View all <i class="bi bi-arrow-right"></i></a>
    {% endif %}
  </div>
  <div class="card border-0 shadow-sm mb-4 mt-2"><div class="card-body p-3">
    {% if dashboard.recent_admin_activity %}
      <ul class="analytics-timeline">
        {% for a in dashboard.recent_admin_activity %}
          {% set item_url = url_for('admin.audit_logs', highlight=a.id) if has_endpoint('admin.audit_logs') else None %}
          <li class="analytics-timeline-item">
            <span class="analytics-timeline-ico"><i class="bi bi-shield-check"></i></span>
            <div class="flex-grow-1 min-w-0">
              <p class="analytics-timeline-text mb-0">
                {% if item_url %}<a class="text-decoration-none fw-semibold" href="{{ item_url }}">{{ a.label }}</a>{% else %}<span class="fw-semibold">{{ a.label }}</span>{% endif %}
                {% if a.entity_name %}<span class="text-muted">· {{ a.entity_name }}</span>{% endif %}
              </p>
              <span class="text-muted small">{{ a.admin_name }} · <time data-relative datetime="{{ a.created_at.isoformat() }}">{{ a.created_at.strftime('%d %b %Y %H:%M') }}</time></span>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-muted text-center py-4 mb-0">No administrative activity recorded yet.</p>
    {% endif %}
  </div></div>

  {# ---------- Report moderation ---------- #}
  {% set ma = dashboard.moderation_analytics %}
  <div class="d-flex align-items-center justify-content-between">
    <h2 class="admin-section-title mb-0">Report moderation</h2>
    {% if has_endpoint('admin.reports') %}<a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.reports') }}">Open queue <i class="bi bi-arrow-right"></i></a>{% endif %}
  </div>
  <div class="row g-3 mt-1 mb-4">
    <div class="col-md-6 col-xl-3">
      <div class="card admin-metric-card h-100 border-0 shadow-sm"><div class="card-body">
        <span class="admin-metric-icon text-bg-danger-subtle text-danger"><i class="bi bi-flag-fill"></i></span>
        <div class="admin-metric-value">{{ "{:,}".format(ma.reports_this_month) }}</div>
        <div class="admin-metric-label">Reports this month</div>
      </div></div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card admin-metric-card h-100 border-0 shadow-sm"><div class="card-body">
        <span class="admin-metric-icon text-bg-info-subtle text-info"><i class="bi bi-clock-history"></i></span>
        <div class="admin-metric-value">{{ ('%.1f' % ma.avg_resolution_hours ~ ' h') if ma.avg_resolution_hours is not none else '—' }}</div>
        <div class="admin-metric-label">Avg. resolution time</div>
      </div></div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card admin-metric-card h-100 border-0 shadow-sm"><div class="card-body">
        <span class="admin-metric-icon text-bg-warning-subtle text-warning"><i class="bi bi-exclamation-diamond-fill"></i></span>
        <div class="admin-metric-value" style="font-size: 1.25rem">{{ ma.most_common_reason or '—' }}</div>
        <div class="admin-metric-label">Most common reason</div>
      </div></div>
    </div>
    <div class="col-md-6 col-xl-3">
      <div class="card admin-metric-card h-100 border-0 shadow-sm"><div class="card-body">
        <span class="admin-metric-icon text-bg-secondary-subtle text-secondary"><i class="bi bi-hourglass-split"></i></span>
        <div class="admin-metric-value">{{ "{:,}".format(o.pending_reports) }}</div>
        <div class="admin-metric-label">Pending review</div>
      </div></div>
    </div>
  </div>
  <div class="row g-3 mb-4">
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-3">
        <h3 class="h6 fw-bold px-1">Reports · last 30 days</h3>
        <div class="chart-container" style="--chart-h: 180px;"><canvas id="reportsChart"></canvas></div>
      </div></div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-3">
        <h3 class="h6 fw-bold">Top reported categories</h3>
        {% if ma.top_categories %}
          <ul class="list-unstyled small mb-0">
            {% for name, count in ma.top_categories %}<li class="d-flex justify-content-between py-1"><span class="text-truncate">{{ name }}</span><span class="badge text-bg-light">{{ count }}</span></li>{% endfor %}
          </ul>
        {% else %}<p class="text-muted small mb-0">No reported categories yet.</p>{% endif %}
      </div></div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-3">
        <h3 class="h6 fw-bold">Top reported sellers</h3>
        {% if ma.top_sellers %}
          <ul class="list-unstyled small mb-0">
            {% for seller in ma.top_sellers %}
              <li class="d-flex justify-content-between py-1">
                {% if has_endpoint('admin.reports') and seller.public_id %}<a class="text-truncate text-decoration-none" href="{{ url_for('admin.reports', seller=seller.public_id) }}">{{ seller.name }}</a>{% else %}<span class="text-truncate">{{ seller.name }}</span>{% endif %}
                <span class="badge text-bg-light">{{ seller.count }}</span>
              </li>
            {% endfor %}
          </ul>
        {% else %}<p class="text-muted small mb-0">No reported sellers yet.</p>{% endif %}
      </div></div>
    </div>
  </div>

  {# ---------- Recent reports ---------- #}
  <div class="d-flex align-items-center justify-content-between">
    <h2 class="admin-section-title mb-0">Recent reports</h2>
    {% if has_endpoint('admin.reports') %}<a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.reports') }}">View all <i class="bi bi-arrow-right"></i></a>{% endif %}
  </div>
  <div class="card border-0 shadow-sm mb-4 mt-2"><div class="card-body p-0">
    {% if dashboard.recent_reports %}
      <div class="table-responsive"><table class="table admin-table align-middle mb-0">
        <tbody>
          {% set status_badge = {'pending': 'warning', 'under_review': 'info', 'resolved': 'success', 'dismissed': 'secondary'} %}
          {% for r in dashboard.recent_reports %}
            {% set url = url_for('admin.report_detail', public_id=r.public_id) if has_endpoint('admin.report_detail') else None %}
            <tr {% if url %}class="admin-row-clickable" data-href="{{ url }}"{% endif %}>
              <td class="text-nowrap"><code class="small">{{ r.short_id }}</code></td>
              <td class="text-truncate" style="max-width: 16rem">{{ r.entity_name }}</td>
              <td>{{ r.reason }}</td>
              <td><span class="badge text-bg-{{ status_badge.get(r.status, 'secondary') }}">{{ r.status_label }}</span></td>
              <td class="text-nowrap text-muted small"><time data-relative datetime="{{ r.created_at.isoformat() }}">{{ r.created_at.strftime('%d %b %Y') }}</time></td>
            </tr>
          {% endfor %}
        </tbody>
      </table></div>
    {% else %}
      <p class="text-muted text-center py-4 mb-0">No reports have been submitted.</p>
    {% endif %}
  </div></div>

  {# ---------- Marketplace activity (30-day trends) ---------- #}
  <h2 class="admin-section-title">Marketplace activity · last 30 days</h2>
  <div class="row g-3 mb-4">
    {% for cid, title in [('usersChart','New Users'), ('listingsChart','New Listings'), ('viewsChart','Listing Views'), ('messagesChart','Messages'), ('offersChart','Offers')] %}
      <div class="col-md-6 col-xl-4">
        <div class="card border-0 shadow-sm h-100"><div class="card-body p-3">
          <h3 class="h6 fw-bold px-1">{{ title }}</h3>
          <div class="chart-container" style="--chart-h: 180px;"><canvas id="{{ cid }}"></canvas></div>
        </div></div>
      </div>
    {% endfor %}
  </div>

  {# ---------- Traffic ---------- #}
  {% set tr = dashboard.traffic %}
  <h2 class="admin-section-title">Traffic insights</h2>
  <div class="row g-3 mb-3">
    {{ metric('Most Active Day', tr.most_active_day or '—', 'bi-calendar-week', 'primary') }}
    {{ metric('Peak Hour', tr.peak_hour_label or '—', 'bi-clock-fill', 'info') }}
    {{ metric('Unique Visitors (30d)', "{:,}".format(tr.unique_visitors), 'bi-person-badge', 'success') }}
    {{ metric('Returning Visitors', "{:,}".format(tr.returning_visitors), 'bi-arrow-repeat', 'warning') }}
    {{ metric('Total Views (30d)', "{:,}".format(tr.total_views_30d), 'bi-eye-fill', 'info') }}
    {{ metric('Top Category', tr.top_category or '—', 'bi-tags-fill', 'secondary',
              endpoint=('main.marketplace' if tr.top_category_id else none),
              params={'category': tr.top_category_id}) }}
  </div>
  <div class="row g-3 mb-4">
    <div class="col-lg-7"><div class="card border-0 shadow-sm"><div class="card-body p-3"><h3 class="h6 fw-bold px-1">Top viewed categories (30 days)</h3><div class="chart-container" style="--chart-h: 260px;"><canvas id="categoriesChart"></canvas></div></div></div></div>
    <div class="col-lg-5"><div class="card border-0 shadow-sm"><div class="card-body p-3"><h3 class="h6 fw-bold px-1">Listing status distribution</h3><div class="chart-container" style="--chart-h: 260px;"><canvas id="statusChart"></canvas></div></div></div></div>
  </div>

  {# ---------- Premium + Advertisements ---------- #}
  <div class="row g-4 mb-4">
    <div class="col-lg-7">
      <h2 class="admin-section-title">Premium</h2>
      {% set p = dashboard.premium %}
      <div class="row g-3">
        {{ metric('Active Members', "{:,}".format(p.active_members), 'bi-star-fill', 'warning') }}
        {{ metric('Expired Members', "{:,}".format(p.expired_members), 'bi-hourglass-bottom', 'secondary') }}
        {{ metric('Featured Listings', "{:,}".format(p.featured_listings), 'bi-stars', 'warning') }}
        {{ metric('Avg Featured Days Left', p.avg_featured_days_remaining, 'bi-calendar-check', 'info') }}
        {{ metric('Adoption', p.adoption_pct ~ '%', 'bi-graph-up-arrow', 'success') }}
        {{ metric('Conversion Rate', p.conversion_pct ~ '%', 'bi-person-check-fill', 'primary') }}
      </div>
      <div class="d-flex flex-wrap gap-2 mt-3">
        <a class="btn btn-sm btn-outline-primary" href="{{ url_for('premium.admin_requests') }}">
          <i class="bi bi-inbox me-1"></i> Review Premium Requests
        </a>
      </div>
    </div>
    <div class="col-lg-5">
      <h2 class="admin-section-title">Premium vs Free</h2>
      <div class="card border-0 shadow-sm"><div class="card-body p-3"><div class="chart-container" style="--chart-h: 240px;"><canvas id="premiumChart"></canvas></div></div></div>
    </div>
  </div>

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
    <h2 class="admin-section-title mb-0">Advertisements</h2>
    <div class="d-flex flex-wrap gap-2">
      <a class="btn btn-sm btn-primary" href="{{ url_for('admin.ad_create') }}"><i class="bi bi-plus-lg me-1"></i> Create Advertisement</a>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.ad_list') }}"><i class="bi bi-card-list me-1"></i> Manage Advertisements</a>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.ad_list', status='active') }}"><i class="bi bi-broadcast me-1"></i> View Active Ads</a>
    </div>
  </div>
  {% set ad = dashboard.advertisements %}
  {% if ad.total == 0 %}
    <div class="card border-0 shadow-sm my-3"><div class="card-body text-center py-4">
      <i class="bi bi-megaphone fs-2 text-muted d-block mb-2"></i>
      <p class="fw-semibold mb-1">No advertisements yet</p>
      <p class="text-muted small mb-3">Create your first promotion to start reaching students.</p>
      <a class="btn btn-primary btn-sm" href="{{ url_for('admin.ad_create') }}"><i class="bi bi-plus-lg me-1"></i> Create Advertisement</a>
    </div></div>
  {% else %}
    <div class="row g-3 my-1 mb-4">
      {{ metric('Total Ads', "{:,}".format(ad.total), 'bi-megaphone-fill', 'primary', endpoint='admin.ad_list') }}
      {{ metric('Active Ads', "{:,}".format(ad.active), 'bi-broadcast', 'success', endpoint='admin.ad_list', params={'status': 'active'}) }}
      {{ metric('Expired Ads', "{:,}".format(ad.expired), 'bi-hourglass-bottom', 'warning', endpoint='admin.ad_list', params={'status': 'expired'}) }}
      {{ metric('Ad Views', "{:,}".format(ad.impressions), 'bi-eye', 'info') }}
      {{ metric('Ad Clicks', "{:,}".format(ad.clicks), 'bi-hand-index-thumb', 'secondary') }}
      {{ metric('CTR', (ad.ctr ~ '%') if ad.ctr is not none else 'Not Available', 'bi-percent', 'primary') }}
    </div>
  {% endif %}

  {# ---------- Top sellers ---------- #}
  <div class="row g-4 mb-4">
    <div class="col-lg-7">
      <h2 class="admin-section-title">Top sellers</h2>
      <div class="card border-0 shadow-sm"><div class="card-body p-0">
        <div class="table-responsive">
          <table class="table admin-table align-middle mb-0">
            <thead><tr><th>#</th><th>Seller</th><th class="text-end">Listings</th><th class="text-end">Views</th><th class="text-end">Favs</th><th class="text-end">Offers</th><th class="text-end">Score</th><th class="text-end">Actions</th></tr></thead>
            <tbody>
              {% for s in dashboard.top_sellers %}
                <tr>
                  <td class="text-muted">{{ loop.index }}</td>
                  <td>{{ s.name }}{% if s.is_premium %} <span class="badge text-bg-warning">Premium</span>{% endif %}</td>
                  <td class="text-end">{{ s.listings }}</td>
                  <td class="text-end">{{ "{:,}".format(s.views) }}</td>
                  <td class="text-end">{{ "{:,}".format(s.favorites) }}</td>
                  <td class="text-end">{{ "{:,}".format(s.offers) }}</td>
                  <td class="text-end fw-bold">{{ "{:,}".format(s.score) }}</td>
                  <td class="text-end">
                    {% if s.public_id %}
                      <a class="btn btn-sm btn-outline-primary" href="{{ url_for('auth.public_profile', public_id=s.public_id) }}">
                        <i class="bi bi-person me-1"></i>View Profile <i class="bi bi-arrow-right" aria-hidden="true"></i>
                      </a>
                    {% endif %}
                  </td>
                </tr>
              {% else %}
                <tr><td colspan="8" class="text-center text-muted py-4">No sellers yet.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div></div>
    </div>
    <div class="col-lg-5">
      <h2 class="admin-section-title">Seller scores</h2>
      <div class="card border-0 shadow-sm"><div class="card-body p-3"><div class="chart-container" style="--chart-h: 280px;"><canvas id="sellersChart"></canvas></div></div></div>
    </div>
  </div>

  {# ---------- Top listings ---------- #}
  <h2 class="admin-section-title">Top listings</h2>
  <div class="card border-0 shadow-sm mb-4"><div class="card-body p-0">
    <div class="table-responsive">
      <table class="table admin-table align-middle mb-0">
        <thead><tr><th>Listing</th><th>Seller</th><th class="text-end">Views</th><th class="text-end">Favs</th><th class="text-end">Offers</th><th>Status</th><th class="text-end">Action</th></tr></thead>
        <tbody>
          {% for l in dashboard.top_listings %}
            {% set detail_url = url_for('marketplace.listing_detail', public_id=l.public_id) %}
            <tr class="admin-row-clickable" data-href="{{ detail_url }}">
              <td>
                <div class="d-flex align-items-center gap-2">
                  <span class="admin-top-thumb">
                    {% if l.image %}<img src="{{ url_for('marketplace.listing_image', filename=l.image) }}" alt="">{% else %}<i class="bi bi-image"></i>{% endif %}
                  </span>
                  <a class="text-decoration-none fw-semibold" href="{{ detail_url }}">{{ l.title }}</a>
                  {% if l.is_featured %}<span class="badge text-bg-warning">Featured</span>{% endif %}
                </div>
              </td>
              <td class="text-muted">{{ l.seller }}</td>
              <td class="text-end">{{ "{:,}".format(l.views) }}</td>
              <td class="text-end">{{ "{:,}".format(l.favorites) }}</td>
              <td class="text-end">{{ "{:,}".format(l.offers) }}</td>
              <td><span class="badge status-{{ l.status }}">{{ l.status|title }}</span></td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-primary" href="{{ detail_url }}">
                  View Listing <i class="bi bi-arrow-right" aria-hidden="true"></i>
                </a>
              </td>
            </tr>
          {% else %}
            <tr><td colspan="7" class="text-center text-muted py-4">No listings yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div></div>

  {# ---------- Marketplace health + moderation + insights ---------- #}
  <div class="row g-4 mb-4">
    <div class="col-lg-4">
      <h2 class="admin-section-title">Marketplace health</h2>
      {% set h = dashboard.health %}
      <div class="card border-0 shadow-sm"><div class="card-body p-4">
        <dl class="analytics-traffic mb-0">
          <div><dt>Avg views / listing</dt><dd>{{ h.avg_views_per_listing }}</dd></div>
          <div><dt>Avg offers / listing</dt><dd>{{ h.avg_offers_per_listing }}</dd></div>
          <div><dt>Avg conversations / listing</dt><dd>{{ h.avg_conversations_per_listing }}</dd></div>
          <div><dt>Avg favorites / listing</dt><dd>{{ h.avg_favorites_per_listing }}</dd></div>
          <div><dt>Avg messages / conversation</dt><dd>{{ h.avg_messages_per_conversation }}</dd></div>
          <div><dt>Featured listings</dt><dd>{{ h.featured_pct }}%</dd></div>
          <div><dt>Premium users</dt><dd>{{ h.premium_pct }}%</dd></div>
        </dl>
      </div></div>
    </div>

    <div class="col-lg-4">
      <h2 class="admin-section-title">Moderation</h2>
      {% set m = dashboard.moderation %}
      <div class="card border-0 shadow-sm"><div class="card-body p-4">
        <dl class="analytics-traffic mb-0">
          <div><dt>Deleted listings</dt><dd>{{ m.deleted_listings }}</dd></div>
          <div><dt>Reserved listings</dt><dd>{{ m.reserved_listings }}</dd></div>
          <div><dt>Sold listings</dt><dd>{{ m.sold_listings }}</dd></div>
          {% if m.reports_available %}
            <div><dt>Reported listings</dt><dd>{{ m.reported_listings }}</dd></div>
            <div><dt>Pending reports</dt><dd>{{ m.pending_reports }}</dd></div>
            <div><dt>Resolved reports</dt><dd>{{ m.resolved_reports }}</dd></div>
          {% endif %}
        </dl>
        {% if not m.reports_available %}
          <p class="text-muted small mb-0 mt-2"><i class="bi bi-info-circle me-1"></i> Report moderation is not enabled yet.</p>
        {% endif %}
      </div></div>
    </div>

    <div class="col-lg-4">
      <h2 class="admin-section-title">Growth insights</h2>
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-3">
        {% if dashboard.insights %}
          <ul class="analytics-insights">
            {% for insight in dashboard.insights %}<li><i class="bi bi-check-circle-fill"></i> {{ insight }}</li>{% endfor %}
          </ul>
        {% else %}
          <p class="text-muted text-center py-4 mb-0">Not enough data for insights yet.</p>
        {% endif %}
      </div></div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script id="adminChartData" type="application/json">{{ dashboard.charts|tojson }}</script>
<script>
  (function () {
    if (typeof Chart === "undefined") return;
    var el = document.getElementById("adminChartData");
    if (!el) return;
    var c = JSON.parse(el.textContent);

    function line(id, series, color) {
      var el = document.getElementById(id);
      if (!el || !series) return;
      window.createChart(el, {
        type: "line",
        data: { labels: series.labels, datasets: [{ data: series.values, borderColor: color,
                 backgroundColor: color.replace("rgb", "rgba").replace(")", ",0.12)"), fill: true, tension: 0.35, pointRadius: 1 }] },
        options: { plugins: { legend: { display: false } },
                   scales: { y: { beginAtZero: true, ticks: { precision: 0 } }, x: { ticks: { autoSkip: true, maxRotation: 0, font: { size: 9 } } } } },
      });
    }
    function bars(id, series, color) {
      var el = document.getElementById(id);
      if (!el || !series) return;
      window.createChart(el, { type: "bar",
        data: { labels: series.labels, datasets: [{ data: series.values, backgroundColor: color, borderRadius: 6, maxBarThickness: 30 }] },
        options: { plugins: { legend: { display: false } },
                   scales: { y: { beginAtZero: true, ticks: { precision: 0 } }, x: { ticks: { autoSkip: false, maxRotation: 50, font: { size: 10 } } } } } });
    }
    function doughnut(id, series, colors) {
      var el = document.getElementById(id);
      if (!el || !series) return;
      window.createChart(el, { type: "doughnut",
        data: { labels: series.labels, datasets: [{ data: series.values, backgroundColor: colors }] },
        options: { plugins: { legend: { position: "bottom" } } } });
    }

    line("usersChart", c.users, "rgb(37,99,235)");
    line("listingsChart", c.listings, "rgb(22,163,74)");
    line("viewsChart", c.views, "rgb(0,74,198)");
    line("messagesChart", c.messages, "rgb(124,58,237)");
    line("offersChart", c.offers, "rgb(245,158,11)");
    line("reportsChart", c.reports, "rgb(220,38,38)");
    bars("categoriesChart", c.top_categories, "#2563eb");
    bars("sellersChart", c.top_sellers, "#7c3aed");
    doughnut("statusChart", c.status, ["#16a34a", "#f59e0b", "#64748b", "#94a3b8", "#db2777", "#0891b2"]);
    doughnut("premiumChart", c.premium_free, ["#f59e0b", "#c3c6d7"]);
  })();
</script>
{% endblock %}