<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AsakaBank — Admin Panel</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; color: #1a1a2e; }

  .sidebar {
    width: 100%; background: #003580; color: #fff; padding: 0;
    position: fixed; top: 0; left: 0; z-index: 100;
  }
  .sidebar-header {
    padding: 16px 24px; font-size: 20px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 10px;
  }
  .sidebar-header span { color: #FFD700; }

  .filters {
    display: flex; gap: 0; padding: 0 24px;
  }
  .filters a {
    color: rgba(255,255,255,0.7); text-decoration: none;
    padding: 12px 20px; font-size: 14px; font-weight: 500;
    border-bottom: 3px solid transparent; transition: all .2s;
  }
  .filters a:hover { color: #fff; }
  .filters a.active { color: #FFD700; border-bottom-color: #FFD700; }

  .main { margin-top: 110px; padding: 24px; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 120px; }

  .chat-list { display: flex; flex-direction: column; gap: 10px; }

  .chat-card {
    background: #fff; border-radius: 12px; padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
    cursor: pointer; text-decoration: none; color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .2s, transform .15s;
    border-left: 4px solid transparent;
  }
  .chat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-1px); }
  .chat-card.new    { border-left-color: #e74c3c; }
  .chat-card.active { border-left-color: #2ecc71; }
  .chat-card.closed { border-left-color: #bdc3c7; opacity: .7; }

  .avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: #003580; color: #FFD700;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; flex-shrink: 0;
  }

  .chat-info { flex: 1; min-width: 0; }
  .chat-name { font-weight: 600; font-size: 15px; }
  .chat-preview {
    color: #666; font-size: 13px; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-meta { text-align: right; flex-shrink: 0; }
  .chat-time { font-size: 12px; color: #999; }
  .badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; margin-top: 4px;
  }
  .badge.new    { background: #fdecea; color: #e74c3c; }
  .badge.active { background: #e8f8f0; color: #27ae60; }
  .badge.closed { background: #f0f0f0; color: #888; }

  .empty { text-align: center; padding: 60px 20px; color: #999; font-size: 16px; }

  .count-bar {
    display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
  }
  .count-pill {
    background: #fff; border-radius: 8px; padding: 10px 18px;
    font-size: 13px; color: #555; box-shadow: 0 1px 4px rgba(0,0,0,.05);
  }
  .count-pill strong { font-size: 20px; display: block; color: #003580; }
</style>
</head>
<body>

<div class="sidebar">
  <div class="sidebar-header">🏦 AsakaBank <span>Admin</span></div>
  <div class="filters">
    <a href="/?status=all"    class="{{ 'active' if active_filter=='all' else '' }}">Barchasi</a>
    <a href="/?status=new"    class="{{ 'active' if active_filter=='new' else '' }}">🔴 Yangi</a>
    <a href="/?status=active" class="{{ 'active' if active_filter=='active' else '' }}">🟢 Aktiv</a>
    <a href="/?status=closed" class="{{ 'active' if active_filter=='closed' else '' }}">⚪ Tugatilgan</a>
  </div>
</div>

<div class="main">
  {% set new_count    = chats | selectattr('status','eq','new')    | list | length %}
  {% set active_count = chats | selectattr('status','eq','active') | list | length %}
  {% set closed_count = chats | selectattr('status','eq','closed') | list | length %}

  <div class="count-bar">
    <div class="count-pill"><strong>{{ chats|length }}</strong>Jami</div>
    <div class="count-pill"><strong style="color:#e74c3c">{{ new_count }}</strong>Yangi</div>
    <div class="count-pill"><strong style="color:#27ae60">{{ active_count }}</strong>Aktiv</div>
    <div class="count-pill"><strong style="color:#888">{{ closed_count }}</strong>Tugatilgan</div>
  </div>

  <div class="chat-list">
    {% for c in chats %}
    <a href="/chat/{{ c.id }}" class="chat-card {{ c.status }}">
      <div class="avatar">{{ (c.full_name or 'U')[0] | upper }}</div>
      <div class="chat-info">
        <div class="chat-name">
          {{ c.full_name or 'Noma\'lum' }}
          {% if c.username %}<span style="color:#999;font-weight:400;font-size:13px"> @{{ c.username }}</span>{% endif %}
        </div>
        <div class="chat-preview">{{ c.last_message or '—' }}</div>
      </div>
      <div class="chat-meta">
        <div class="chat-time">
          {% if c.last_msg_time %}
            {{ c.last_msg_time.strftime('%d.%m %H:%M') }}
          {% endif %}
        </div>
        <span class="badge {{ c.status }}">
          {% if c.status == 'new' %}Yangi
          {% elif c.status == 'active' %}Aktiv
          {% else %}Tugatilgan{% endif %}
        </span>
      </div>
    </a>
    {% else %}
    <div class="empty">📭 Xabarlar yo'q</div>
    {% endfor %}
  </div>
</div>

<script>
  // Auto-refresh chat list every 15 seconds
  setInterval(() => {
    const status = new URLSearchParams(window.location.search).get('status') || 'all';
    fetch(`/api/chats?status=${status}`)
      .then(r => r.json())
      .then(chats => {
        // Simple: reload page if new chats arrived
        const currentCount = document.querySelectorAll('.chat-card').length;
        if (chats.length !== currentCount) window.location.reload();
      });
  }, 15000);
</script>
</body>
</html>
