{% extends "base.html" %}
{% block title %}Dashboard — KinoBot Admin{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<!-- Stat cards -->
<div class="row g-3 mb-4">
  <div class="col-sm-6 col-xl-3">
    <div class="card stat-card border-primary h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-primary bg-opacity-10 p-3">
          <i class="bi bi-people-fill text-primary fs-3"></i>
        </div>
        <div>
          <div class="text-muted small">Jami foydalanuvchilar</div>
          <div class="fs-3 fw-bold">{{ total_users | default(0) }}</div>
          <div class="text-success small"><i class="bi bi-arrow-up"></i> +{{ new_today }} bugun</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card stat-card border-warning h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-warning bg-opacity-10 p-3">
          <i class="bi bi-film text-warning fs-3"></i>
        </div>
        <div>
          <div class="text-muted small">Jami kinolar</div>
          <div class="fs-3 fw-bold">{{ total_movies | default(0) }}</div>
          <div class="text-muted small">aktiv bazada</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card stat-card border-success h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-success bg-opacity-10 p-3">
          <i class="bi bi-eye-fill text-success fs-3"></i>
        </div>
        <div>
          <div class="text-muted small">Jami ko'rishlar</div>
          <div class="fs-3 fw-bold">{{ total_views | default(0) }}</div>
          <div class="text-muted small">barcha vaqt</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card stat-card border-danger h-100">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-danger bg-opacity-10 p-3">
          <i class="bi bi-person-x-fill text-danger fs-3"></i>
        </div>
        <div>
          <div class="text-muted small">Banlangan</div>
          <div class="fs-3 fw-bold">{{ banned | default(0) }}</div>
          <div class="text-info small">Faol 7k: {{ active_7d }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Charts row -->
<div class="row g-3 mb-4">
  <div class="col-lg-8">
    <div class="card h-100">
      <div class="card-header bg-white fw-semibold border-bottom">
        <i class="bi bi-graph-up text-primary me-2"></i>So'nggi 14 kun ro'yxatdan o'tishlar
      </div>
      <div class="card-body">
        <canvas id="regChart" height="80"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header bg-white fw-semibold border-bottom">
        <i class="bi bi-info-circle text-info me-2"></i>Umumiy ma'lumot
      </div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between px-0">
            <span>Yangi (bugun)</span>
            <span class="badge bg-success">{{ new_today }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-0">
            <span>Yangi (7 kun)</span>
            <span class="badge bg-primary">{{ new_week }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-0">
            <span>Faol (7 kun)</span>
            <span class="badge bg-info">{{ active_7d }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-0">
            <span>Banlangan</span>
            <span class="badge bg-danger">{{ banned }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-0">
            <span>Jami kinolar</span>
            <span class="badge bg-warning text-dark">{{ total_movies }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Top movies -->
<div class="card">
  <div class="card-header bg-white fw-semibold border-bottom d-flex justify-content-between align-items-center">
    <span><i class="bi bi-trophy text-warning me-2"></i>Top Kinolar</span>
    <a href="/movies" class="btn btn-sm btn-outline-primary">Barchasi</a>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>Kod</th>
            <th>Nomi</th>
            <th>Ko'rishlar</th>
          </tr>
        </thead>
        <tbody>
          {% for movie, views in top_movies %}
          <tr>
            <td class="text-muted">{{ loop.index }}</td>
            <td><code>{{ movie.code }}</code></td>
            <td>{{ movie.get_title('uz') }}</td>
            <td><span class="badge bg-primary">{{ views }}</span></td>
          </tr>
          {% else %}
          <tr><td colspan="4" class="text-center text-muted py-3">Ma'lumot yo'q</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const ctx = document.getElementById('regChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ reg_labels | tojson }},
    datasets: [{
      label: "Ro'yxatdan o'tishlar",
      data: {{ reg_data | tojson }},
      borderColor: '#0d6efd',
      backgroundColor: 'rgba(13,110,253,.1)',
      fill: true,
      tension: .4,
      pointRadius: 4,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
  }
});
</script>
{% endblock %}