{# plugins/admin/templates/admin/dashboard.html #}
{% extends 'core/base.html' %}
{% block title %}Admin Dashboard – Nature In Pots{% endblock %}

{% block styles %}
<style>
  .dashboard-chart { height: 250px; }
</style>
{% endblock %}

{% block content %}
<h1 class="mb-4">Admin Dashboard</h1>

{# ─── Tab Nav ─────────────────────────────────────────────────────── #}
<ul class="nav nav-tabs mb-4" id="adminTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="overview-tab"
      data-bs-toggle="tab"
      data-bs-target="#overview"
      type="button"
      role="tab"
      aria-controls="overview"
      aria-selected="true">
      Overview
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="stats-tab"
      data-bs-toggle="tab"
      data-bs-target="#stats"
      type="button"
      role="tab"
      aria-controls="stats"
      aria-selected="false">
      Stats
    </button>
  </li>
</ul>

<div class="tab-content" id="adminTabsContent">
  {# ─── Overview Pane ─────────────────────────────────────────────── #}
  <div
    class="tab-pane fade show active"
    id="overview"
    role="tabpanel"
    aria-labelledby="overview-tab"
  >
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 mb-5">
      {% for label, value in [
        ('Total Users', total_users),
        ('Active Users', active_users),
        ('Suspended Users', suspended_users),
        ('Banned Users', banned_users),
        ('Deleted Users', deleted_users),
        ('New Sign-ups (7d)', new_7d_users),
        ('Total Logs', total_logs),
        ('Logs (7d)', logs_7d),
        ('Error Rate %', error_pct),
      ] %}
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">{{ label }}</h6>
            <p class="display-6 mb-0">{{ value }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="row g-4 mb-5">
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-header">Sign-ups (Last 30 days)</div>
          <div class="card-body">
            <canvas id="signupChart" class="dashboard-chart w-100"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-header">User Status Breakdown</div>
          <div class="card-body">
            <canvas id="statusChart" class="dashboard-chart w-100"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4 mb-5">
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-header">Top Routes (7d)</div>
          <ul class="list-group list-group-flush">
            {% for r in top_routes %}
            <li class="list-group-item d-flex justify-content-between">
              {{ r.path }}
              <span class="badge bg-secondary">{{ r.count }}</span>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-header">Top Referrers (7d)</div>
          <ul class="list-group list-group-flush">
            {% for ref, cnt in referrers.items() %}
            <li class="list-group-item d-flex justify-content-between">
              {{ ref }}
              <span class="badge bg-secondary">{{ cnt }}</span>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-header">Browsers (7d)</div>
          <div class="card-body">
            <canvas id="browserChart" class="dashboard-chart w-100"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  {# ─── Stats Pane ────────────────────────────────────────────────── #}
  <div
    class="tab-pane fade"
    id="stats"
    role="tabpanel"
    aria-labelledby="stats-tab"
  >
    <div class="row row-cols-1 row-cols-md-2 g-4 mb-5">
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">Total Plants</h6>
            <p class="display-6 mb-0">{{ total_plants }}</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">Total Images</h6>
            <p class="display-6 mb-0">{{ total_images }}</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">Active Plants</h6>
            <p class="display-6 mb-0">{{ active_plants }}</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">Total Logs</h6>
            <p class="display-6 mb-0">{{ total_logs }}</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <h6 class="text-muted">Logs (7d)</h6>
            <p class="display-6 mb-0">{{ logs_7d }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-5">
      <div class="card-header">Top 5 Plant Types</div>
      <ul class="list-group list-group-flush">
        {% for ptype, cnt in popular_plants %}
        <li class="list-group-item d-flex justify-content-between">
          {{ ptype }}
          <span class="badge bg-secondary">{{ cnt }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const chartOpts = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { position: 'bottom' } }
  };

  // Sign-ups
  new Chart(
    document.getElementById('signupChart'),
    {
      type: 'line',
      data: {
        labels: {{ chart_dates|tojson }},
        datasets: [{ label: 'Sign-ups', data: {{ signup_counts|tojson }}, fill: false }]
      },
      options: chartOpts
    }
  );

  // Status breakdown
  new Chart(
    document.getElementById('statusChart'),
    {
      type: 'pie',
      data: {
        labels: ['Active','Suspended','Banned','Deleted'],
        datasets: [{
          data: [
            {{ active_users }},
            {{ suspended_users }},
            {{ banned_users }},
            {{ deleted_users }}
          ]
        }]
      },
      options: chartOpts
    }
  );

  // Browsers
  new Chart(
    document.getElementById('browserChart'),
    {
      type: 'pie',
      data: {
        labels: {{ browsers.keys()|list|tojson }},
        datasets: [{ data: {{ browsers.values()|list|tojson }} }]
      },
      options: chartOpts
    }
  );
</script>
{% endblock %}
