{% extends "admin/base.html" %}
{% block page_title %}✉️ پیام‌ها و اعلان‌ها{% endblock %}
{% block content %}
<div class="stat-cards">
  <div class="stat-card">
    <div class="num">{{ total_count }}</div>
    <div class="label">📨 کل پیام‌های ارسالی</div>
  </div>
  <div class="stat-card">
    <div class="num">{{ today_count }}</div>
    <div class="label">📅 ارسال‌شده امروز</div>
  </div>
  <div class="stat-card">
    <div class="num">{{ user_count }}</div>
    <div class="label">👤 کاربران فعال (مخاطب همگانی)</div>
  </div>
</div>

<div style="display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1.2fr);gap:1.5rem;align-items:start">
  <!-- ── COMPOSE ─────────────────────────────────────────────── -->
  <div class="stat-card" style="position:sticky;top:1rem">
    <div class="section-title" style="font-size:1.1rem">✉️ ارسال پیام جدید</div>
    <p style="color:var(--text-muted);font-size:0.85rem;line-height:1.7;margin-bottom:1.2rem">
      پیام شما بلافاصله به‌صورت <strong style="color:var(--primary)">نوتیفیکیشن</strong> برای کاربر نمایش داده می‌شود؛
      زنگ اعلان بالای سایت روشن می‌شود، صدای ملایم اعلان پخش می‌شود و پیام در پنل اعلان‌ها می‌ماند.
    </p>
    <form method="POST" action="{{ url_for('admin.messages_send') }}" id="msgForm">
      <div class="form-group">
        <label>👤 کاربر مقصد (نام کاربری، ایمیل یا شناسه عددی)</label>
        <input class="input" name="target" list="userList" value="{{ preselected.username if preselected else '' }}" placeholder="مثلاً testadmin یا player@site.com" {% if preselected %}readonly style="color:var(--primary);border-color:var(--primary){% endif %}">
        <datalist id="userList">
          {% for u in all_users %}
          <option value="{{ u.username }}">{{ u.email }} — #{{ u.id }}</option>
          {% endfor %}
        </datalist>
      </div>

      <div class="form-group">
        <label>🎨 آیکون پیام</label>
        <div style="display:flex;gap:0.4rem;flex-wrap:wrap" id="iconPicker">
          {% for ic in icons %}
          <label style="cursor:pointer">
            <input type="radio" name="icon" value="{{ ic }}" {% if ic == '📢' %}checked{% endif %} style="display:none"
                   onchange="document.querySelectorAll('#iconPicker label').forEach(l=>l.style.background='');this.closest('label').style.background='rgba(140,100,235,0.18)'">
            <span style="display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;font-size:1.1rem;background:{{ 'rgba(140,100,235,0.18)' if ic == '📢' else 'transparent' }}">{{ ic }}</span>
          </label>
          {% endfor %}
        </div>
      </div>

      <div class="form-group">
        <label>📝 عنوان پیام *</label>
        <input class="input" name="title" required maxlength="150" placeholder="مثلاً: 🏆 تورنمنت جدید باز شد!">
      </div>

      <div class="form-group">
        <label>💬 متن پیام</label>
        <textarea class="input" name="body" rows="4" maxlength="2000" placeholder="متن کامل پیام برای کاربر..."></textarea>
      </div>

      <div class="form-group" style="background:rgba(140,100,235,0.05);border:1px dashed var(--border-strong);border-radius:12px;padding:0.9rem">
        <label style="display:flex;align-items:center;gap:0.6rem;cursor:pointer;margin:0">
          <input type="checkbox" name="broadcast" style="width:18px;height:18px;accent-color:var(--primary)">
          <span>📣 <strong>ارسال همگانی</strong> — برای همه کاربران فعال بفرست</span>
        </label>
      </div>

      <button type="submit" class="btn btn-primary" style="width:100%;padding:0.9rem;font-size:1rem">
        🚀 ارسال نوتیفیکیشن
      </button>
    </form>
  </div>

  <!-- ── HISTORY ─────────────────────────────────────────────── -->
  <div>
    <div class="action-bar">
      <div class="search-box">
        <input class="input" type="text" placeholder="جستجو در پیام‌های ارسالی..." value="{{ search }}"
               onchange="window.location.href='{{ url_for('admin.messages_page') }}?q='+encodeURIComponent(this.value)">
      </div>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr>
          <th>آیکون</th><th>عنوان</th><th>گیرنده</th><th>نوع</th><th>وضعیت</th><th>زمان</th>
        </tr></thead>
        <tbody>
          {% for n in sent %}
          <tr>
            <td style="font-size:1.2rem;text-align:center">{{ n.icon or '📢' }}</td>
            <td>
              <strong style="color:var(--text)">{{ n.title }}</strong>
              {% if n.body %}<div style="color:var(--text-muted);font-size:0.78rem;margin-top:0.25rem;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ n.body }}</div>{% endif %}
            </td>
            <td>
              {% if n.user %}
                <span style="color:var(--primary);font-weight:600">{{ n.user.username }}</span>
                <div style="color:var(--text-muted);font-size:0.72rem">#{{ n.user.id }} — {{ n.user.email }}</div>
              {% else %}—{% endif %}
            </td>
            <td>
              {% if n.type == 'admin_broadcast' %}
              <span class="badge badge-amber">همگانی</span>
              {% else %}
              <span class="badge badge-green">شخصی</span>
              {% endif %}
            </td>
            <td>
              {% if n.read %}
              <span style="color:var(--text-muted)">✅ خوانده شد</span>
              {% else %}
              <span style="color:var(--primary)">🔔 نخوانده</span>
              {% endif %}
            </td>
            <td style="color:var(--text-muted);font-size:0.8rem;white-space:nowrap">{{ n.created_at.strftime('%m-%d %H:%M') if n.created_at else '—' }}</td>
          </tr>
          {% else %}
          <tr><td colspan="6" style="text-align:center;color:var(--text-muted);padding:2.5rem">
            📭 هنوز پیامی ارسال نشده — اولین نوتیفیکیشن را بفرستید!
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
@media(max-width:1100px){
  div[style*="grid-template-columns:minmax(320px,1fr)"] { grid-template-columns:1fr !important; }
  .stat-card[style*="sticky"] { position:static !important; }
}
</style>
{% endblock %}