{% extends "base.html" %}
{% block title %}{{ user.full_name }} — KinoBot Admin{% endblock %}
{% block page_title %}Foydalanuvchi: {{ user.full_name }}{% endblock %}

{% block content %}
<div class="row g-3">
  <!-- User info card -->
  <div class="col-md-4">
    <div class="card">
      <div class="card-body text-center pt-4">
        <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3"
             style="width:80px;height:80px;">
          <i class="bi bi-person-fill text-primary" style="font-size:2.5rem;"></i>
        </div>
        <h5 class="fw-bold mb-1">{{ user.full_name }}</h5>
        {% if user.username %}
        <p class="text-muted mb-2">@{{ user.username }}</p>
        {% endif %}
        <div class="mb-3">
          {% if user.is_banned %}
          <span class="badge bg-danger fs-6">Banlangan</span>
          {% elif user.admin_profile %}
          <span class="badge bg-info fs-6">{{ user.admin_profile.role.value }}</span>
          {% else %}
          <span class="badge bg-success fs-6">Faol</span>
          {% endif %}
        </div>

        {% if not user.is_banned %}
        <button class="btn btn-danger btn-sm w-100" data-bs-toggle="modal" data-bs-target="#banModal">
          <i class="bi bi-person-x me-1"></i>Ban qilish
        </button>
        {% else %}
        <form method="post" action="/users/{{ user.telegram_id }}/unban">
          <button type="submit" class="btn btn-success btn-sm w-100">
            <i class="bi bi-person-check me-1"></i>Ban olib tashlash
          </button>
        </form>
        {% endif %}
      </div>
      <div class="card-footer p-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between px-3">
            <span class="text-muted small">Telegram ID</span>
            <code>{{ user.telegram_id }}</code>
          </li>
          <li class="list-group-item d-flex justify-content-between px-3">
            <span class="text-muted small">Til</span>
            <span>
              {% if user.language.value == 'uz' %}🇺🇿{% elif user.language.value == 'ru' %}🇷🇺{% else %}🇬🇧{% endif %}
              {{ user.language.value.upper() }}
            </span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-3">
            <span class="text-muted small">Ro'yxatdan</span>
            <span class="small">{{ user.registered_at.strftime('%d.%m.%Y') }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-3">
            <span class="text-muted small">Oxirgi faollik</span>
            <span class="small">{{ user.last_active_at.strftime('%d.%m.%Y %H:%M') }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between px-3">
            <span class="text-muted small">Jami ko'rishlar</span>
            <span class="badge bg-primary">{{ total_views }}</span>
          </li>
          {% if user.is_banned and user.ban_reason %}
          <li class="list-group-item px-3">
            <span class="text-muted small">Ban sababi:</span>
            <p class="mb-0 small text-danger">{{ user.ban_reason }}</p>
          </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>

  <!-- Recent views -->
  <div class="col-md-8">
    <div class="card">
      <div class="card-header fw-semibold bg-white">
        <i class="bi bi-clock-history text-primary me-2"></i>
        So'nggi ko'rishlar ({{ total_views }} ta jami)
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th>Kod</th>
                <th>Kino nomi</th>
                <th>Ko'rgan vaqt</th>
              </tr>
            </thead>
            <tbody>
              {% for view, movie in recent_views %}
              <tr>
                <td><code>{{ movie.code }}</code></td>
                <td>{{ movie.get_title('uz') }}</td>
                <td class="text-muted small">{{ view.viewed_at.strftime('%d.%m.%Y %H:%M') }}</td>
              </tr>
              {% else %}
              <tr><td colspan="3" class="text-center text-muted py-3">Ko'rish tarixi yo'q</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Ban Modal -->
<div class="modal fade" id="banModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger">Ban qilish</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="/users/{{ user.telegram_id }}/ban">
        <div class="modal-body">
          <p><strong>{{ user.full_name }}</strong> ni ban qilmoqchimisiz?</p>
          <div class="mb-3">
            <label class="form-label">Ban sababi</label>
            <textarea name="reason" class="form-control" rows="3"
                      placeholder="Sabab kiriting..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Bekor</button>
          <button type="submit" class="btn btn-danger">Ban qilish</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="mt-3">
  <a href="/users" class="btn btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Orqaga
  </a>
</div>
{% endblock %}