{% extends "base.html" %}
{% block title %}کانال‌ها{% endblock %}
{% block page_title %}<i class="bi bi-broadcast"></i> مدیریت کانال‌ها{% endblock %}

{% block content %}

<div class="alert alert-warning mb-4">
  <i class="bi bi-arrow-repeat me-2"></i>
  تغییرات کانال‌ها پس از <strong>راه‌اندازی مجدد سرویس</strong> اعمال می‌شوند.
</div>

<ul class="nav nav-tabs mb-4" id="channelTabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#sources">
      <i class="bi bi-arrow-down-circle me-1"></i>کانال‌های منبع
      <span class="badge rounded-pill ms-1" style="background:#ede9fe;color:#6d28d9;font-size:.68rem">{{ sources|length }}</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#destinations">
      <i class="bi bi-arrow-up-circle me-1"></i>کانال‌های مقصد
      <span class="badge rounded-pill ms-1" style="background:#d1fae5;color:#065f46;font-size:.68rem">{{ destinations|length }}</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#picker">
      <i class="bi bi-cloud-download me-1" style="color:#7c3aed"></i>انتخابگر تلگرام
      <span class="badge rounded-pill ms-1" style="background:#f5f3ff;color:#7c3aed;font-size:.68rem">جدید</span>
    </a>
  </li>
</ul>

<div class="tab-content">

  {# ── Sources ───────────────────────────────────────────────── #}
  <div class="tab-pane fade show active" id="sources">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h6><i class="bi bi-telegram me-2" style="color:#0088cc"></i>کانال‌های منبع تلگرام</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"
                onclick="setAddType('source','telegram')">
          <i class="bi bi-plus-lg me-1"></i>افزودن کانال
        </button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th>#</th><th>عنوان</th><th>Chat ID</th><th>Username</th>
              <th>پلتفرم</th><th>وضعیت</th><th style="width:120px">عملیات</th>
            </tr>
          </thead>
          <tbody>
            {% for ch in sources %}
            <tr>
              <td class="text-muted text-xs font-mono">{{ ch.id }}</td>
              <td>
                <div class="fw-semibold">{{ ch.title or '—' }}</div>
                {% if ch.description %}<div class="text-muted text-xs text-truncate" style="max-width:180px">{{ ch.description }}</div>{% endif %}
              </td>
              <td class="font-mono text-xs text-muted">{{ ch.chat_id or '—' }}</td>
              <td class="text-xs text-muted">{{ ch.username or '—' }}</td>
              <td><span class="chip chip-{{ ch.platform }}"><i class="bi bi-{{ 'telegram' if ch.platform=='telegram' else 'chat-dots' }}"></i>{{ ch.platform }}</span></td>
              <td><span class="chip {{ 'chip-active' if ch.is_active else 'chip-inactive' }}"><i class="bi bi-{{ 'check-circle' if ch.is_active else 'x-circle' }}"></i>{{ 'فعال' if ch.is_active else 'غیرفعال' }}</span></td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-sm btn-outline-secondary" title="ویرایش"
                          data-bs-toggle="modal" data-bs-target="#editModal"
                          onclick="fillEdit({{ ch.id }},'{{ ch.chat_id or '' }}','{{ ch.username or '' }}','{{ ch.title or '' }}','{{ (ch.description or '')|replace("'","\\'") }}','{{ ch.channel_type }}','{{ ch.platform }}',{{ 'true' if ch.is_active else 'false' }})">
                    <i class="bi bi-pencil"></i>
                  </button>
                  <form method="POST" action="{{ url_for('channels.toggle', ch_id=ch.id) }}" class="d-inline">
                    <button class="btn btn-sm {{ 'btn-outline-warning' if ch.is_active else 'btn-outline-success' }}" title="{{ 'غیرفعال' if ch.is_active else 'فعال' }}">
                      <i class="bi {{ 'bi-pause-fill' if ch.is_active else 'bi-play-fill' }}"></i>
                    </button>
                  </form>
                  <form method="POST" action="{{ url_for('channels.delete', ch_id=ch.id) }}" class="d-inline"
                        onsubmit="return confirm('حذف کانال «{{ ch.title or ch.chat_id }}»؟')">
                    <button class="btn btn-sm btn-outline-danger" title="حذف"><i class="bi bi-trash3"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="7">
              <div class="empty-state">
                <i class="bi bi-broadcast"></i>
                <p>هیچ کانال منبعی تعریف نشده</p>
                <button class="btn btn-sm btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#addModal" onclick="setAddType('source','telegram')">
                  <i class="bi bi-plus-lg me-1"></i>افزودن اولین کانال
                </button>
              </div>
            </td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Destinations ──────────────────────────────────────────── #}
  <div class="tab-pane fade" id="destinations">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h6><i class="bi bi-send-fill me-2 text-success"></i>کانال‌های مقصد</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"
                onclick="setAddType('destination','telegram')">
          <i class="bi bi-plus-lg me-1"></i>افزودن مقصد
        </button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th>#</th><th>عنوان</th><th>Chat ID</th><th>Username</th>
              <th>پلتفرم</th><th>وضعیت</th><th style="width:120px">عملیات</th>
            </tr>
          </thead>
          <tbody>
            {% for ch in destinations %}
            <tr>
              <td class="text-muted text-xs font-mono">{{ ch.id }}</td>
              <td>
                <div class="fw-semibold">{{ ch.title or '—' }}</div>
                {% if ch.description %}<div class="text-muted text-xs text-truncate" style="max-width:180px">{{ ch.description }}</div>{% endif %}
              </td>
              <td class="font-mono text-xs text-muted">{{ ch.chat_id or '—' }}</td>
              <td class="text-xs text-muted">{{ ch.username or '—' }}</td>
              <td><span class="chip chip-{{ ch.platform }}"><i class="bi bi-{{ 'telegram' if ch.platform=='telegram' else 'chat-dots' }}"></i>{{ ch.platform }}</span></td>
              <td><span class="chip {{ 'chip-active' if ch.is_active else 'chip-inactive' }}"><i class="bi bi-{{ 'check-circle' if ch.is_active else 'x-circle' }}"></i>{{ 'فعال' if ch.is_active else 'غیرفعال' }}</span></td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-sm btn-outline-secondary" title="ویرایش"
                          data-bs-toggle="modal" data-bs-target="#editModal"
                          onclick="fillEdit({{ ch.id }},'{{ ch.chat_id or '' }}','{{ ch.username or '' }}','{{ ch.title or '' }}','{{ (ch.description or '')|replace("'","\\'") }}','{{ ch.channel_type }}','{{ ch.platform }}',{{ 'true' if ch.is_active else 'false' }})">
                    <i class="bi bi-pencil"></i>
                  </button>
                  <form method="POST" action="{{ url_for('channels.toggle', ch_id=ch.id) }}" class="d-inline">
                    <button class="btn btn-sm {{ 'btn-outline-warning' if ch.is_active else 'btn-outline-success' }}" title="{{ 'غیرفعال' if ch.is_active else 'فعال' }}">
                      <i class="bi {{ 'bi-pause-fill' if ch.is_active else 'bi-play-fill' }}"></i>
                    </button>
                  </form>
                  <form method="POST" action="{{ url_for('channels.delete', ch_id=ch.id) }}" class="d-inline"
                        onsubmit="return confirm('حذف مقصد «{{ ch.title or ch.chat_id }}»؟')">
                    <button class="btn btn-sm btn-outline-danger" title="حذف"><i class="bi bi-trash3"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="7">
              <div class="empty-state">
                <i class="bi bi-send"></i>
                <p>هیچ کانال مقصدی تعریف نشده</p>
                <button class="btn btn-sm btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#addModal" onclick="setAddType('destination','telegram')">
                  <i class="bi bi-plus-lg me-1"></i>افزودن مقصد
                </button>
              </div>
            </td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Telegram Picker ───────────────────────────────────────── #}
  <div class="tab-pane fade" id="picker">

    {# Info banner #}
    <div class="alert alert-info mb-3" style="font-size:.85rem">
      <i class="bi bi-info-circle-fill me-2"></i>
      تمام گفتگوهای حساب تلگرام متصل را بارگذاری کنید، فیلتر و جستجو کنید، سپس موارد دلخواه را به‌عنوان <strong>کانال‌های منبع</strong> یا <strong>کانال‌های مقصد</strong> اضافه نمایید.
    </div>

    {# Load button + actions bar #}
    <div class="card mb-3">
      <div class="card-body py-3 d-flex flex-wrap align-items-center gap-3">
        <button class="btn btn-primary" id="loadDialogsBtn" onclick="loadDialogs()">
          <i class="bi bi-cloud-download me-2"></i>بارگذاری گفتگوهای تلگرام
        </button>
        <div class="d-none align-items-center gap-2" id="addTargetWrap" style="display:none">
          <span class="text-muted small">افزودن به:</span>
          <div class="btn-group btn-group-sm" role="group" id="addTargetGroup">
            <button type="button" class="btn btn-primary" data-target="source" onclick="setAddTarget(this)">
              <i class="bi bi-arrow-down-circle me-1"></i>کانال منبع
            </button>
            <button type="button" class="btn btn-outline-primary" data-target="destination" onclick="setAddTarget(this)">
              <i class="bi bi-arrow-up-circle me-1"></i>کانال مقصد
            </button>
          </div>
        </div>
        <button class="btn btn-success d-none" id="addSelectedBtn" onclick="addSelected(addTarget)" disabled>
          <i class="bi bi-plus-circle me-2"></i>افزودن انتخاب‌شده‌ها
          <span class="badge bg-white text-success ms-1" id="selectedCount" style="font-size:.75rem">0</span>
        </button>
        <button class="btn btn-outline-secondary d-none" id="clearSelBtn" onclick="clearSelection()">
          <i class="bi bi-x me-1"></i>لغو انتخاب
        </button>
        <div id="pickerStatus" class="text-muted small ms-auto"></div>
      </div>
    </div>

    {# Filter toolbar — hidden until data loads #}
    <div class="card mb-3 d-none" id="pickerFilterCard">
      <div class="table-toolbar flex-column align-items-stretch" style="gap:.75rem">
        <div class="d-flex flex-wrap align-items-center gap-2">
          <div class="btn-group btn-group-sm" role="group" id="categoryFilter">
            <button type="button" class="btn btn-primary"        data-cat="all"     onclick="setCategory(this)">همه</button>
            <button type="button" class="btn btn-outline-primary" data-cat="channel" onclick="setCategory(this)"><i class="bi bi-broadcast me-1"></i>کانال‌ها</button>
            <button type="button" class="btn btn-outline-primary" data-cat="group"   onclick="setCategory(this)"><i class="bi bi-people me-1"></i>گروه‌ها</button>
            <button type="button" class="btn btn-outline-primary" data-cat="private" onclick="setCategory(this)"><i class="bi bi-person me-1"></i>چت خصوصی</button>
          </div>
          <input type="text" class="form-control form-control-sm" id="searchInput"
                 placeholder="جستجو بر اساس نام، Username یا ID..." oninput="renderFiltered()" style="max-width:300px">
          <div class="form-check form-switch ms-1 mb-0">
            <input class="form-check-input" type="checkbox" id="canSendOnly" onchange="renderFiltered()">
            <label class="form-check-label small" for="canSendOnly">فقط موارد قابل ارسال</label>
          </div>
          <div class="form-check form-switch ms-1 mb-0">
            <input class="form-check-input" type="checkbox" id="showHash" onchange="toggleHashColumn()">
            <label class="form-check-label small" for="showHash">نمایش Access Hash</label>
          </div>
          <div class="d-flex align-items-center gap-2 ms-auto text-muted small">
            <i class="bi bi-funnel"></i>
            <span id="filteredCount">0</span> / <span id="totalCount">0</span> گفتگو
            <span class="mx-1">•</span>
            <i class="bi bi-check2-square"></i> <span id="selSummary">0</span> انتخاب‌شده
          </div>
        </div>
      </div>
    </div>

    {# Dialogs table #}
    <div class="card position-relative" id="pickerTableCard" style="display:none!important">
      <div id="pickerLoadingOverlay" class="loading-overlay d-none">
        <div class="text-center">
          <div class="spinner-border text-primary mb-2" role="status" style="width:2.5rem;height:2.5rem"></div>
          <div class="text-muted small">در حال دریافت گفتگوها...</div>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="dialogsTable">
          <thead>
            <tr>
              <th style="width:40px">
                <input type="checkbox" class="form-check-input" id="selectAllChk" onchange="toggleSelectAll(this)"
                       title="انتخاب همه موارد فیلترشده">
              </th>
              <th class="sortable" data-sort="name"     onclick="setSort('name')">نام <i class="bi bi-arrow-down-up sort-ico"></i></th>
              <th class="sortable" data-sort="id"       onclick="setSort('id')">Telegram ID <i class="bi bi-arrow-down-up sort-ico"></i></th>
              <th class="sortable" data-sort="type"     onclick="setSort('type')">نوع <i class="bi bi-arrow-down-up sort-ico"></i></th>
              <th class="sortable" data-sort="members"  onclick="setSort('members')">اعضا <i class="bi bi-arrow-down-up sort-ico"></i></th>
              <th>Username</th>
              <th class="sortable" data-sort="can_send" onclick="setSort('can_send')">ارسال پیام <i class="bi bi-arrow-down-up sort-ico"></i></th>
              <th class="hash-col" style="display:none">Access Hash</th>
            </tr>
          </thead>
          <tbody id="dialogsTbody"></tbody>
        </table>
      </div>
    </div>

    {# Notification toast #}
    <div class="position-fixed bottom-0 start-0 p-3" style="z-index:9999">
      <div id="pickerToast" class="toast align-items-center border-0" role="alert">
        <div class="d-flex">
          <div class="toast-body fw-semibold" id="pickerToastMsg"></div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      </div>
    </div>

  </div><!-- /picker -->

</div><!-- /tab-content -->


{# ── Add Modal ─────────────────────────────────────────────────── #}
<div class="modal fade" id="addModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form method="POST" action="{{ url_for('channels.add') }}" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-plus-circle me-2 text-primary"></i>افزودن کانال</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-6">
            <label class="form-label">نوع کانال</label>
            <select name="channel_type" id="add_type_sel" class="form-select">
              <option value="source">منبع (دریافت)</option>
              <option value="destination">مقصد (ارسال)</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">پلتفرم</label>
            <select name="platform" id="add_plat_sel" class="form-select">
              <option value="telegram">Telegram</option>
              <option value="bale">Bale</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">Chat ID</label>
            <input type="text" name="chat_id" class="form-control font-mono" placeholder="-1001234567890">
            <div class="form-text">برای گروه / کانال خصوصی</div>
          </div>
          <div class="col-6">
            <label class="form-label">Username</label>
            <input type="text" name="username" class="form-control" placeholder="@channel_name">
            <div class="form-text">برای کانال‌های عمومی</div>
          </div>
          <div class="col-12">
            <label class="form-label">نام نمایشی</label>
            <input type="text" name="title" class="form-control" placeholder="نام قابل تشخیص">
          </div>
          <div class="col-12">
            <label class="form-label">توضیحات (اختیاری)</label>
            <textarea name="description" class="form-control" rows="2"></textarea>
          </div>
          <div class="col-12">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="is_active" value="1" checked id="add_active">
              <label class="form-check-label" for="add_active">کانال فعال باشد</label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button>
        <button type="submit" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>افزودن</button>
      </div>
    </form>
  </div>
</div>

{# ── Edit Modal ────────────────────────────────────────────────── #}
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form method="POST" id="editForm" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil me-2 text-warning"></i>ویرایش کانال</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-6">
            <label class="form-label">نوع کانال</label>
            <select name="channel_type" id="edit_type" class="form-select">
              <option value="source">منبع (دریافت)</option>
              <option value="destination">مقصد (ارسال)</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">پلتفرم</label>
            <select name="platform" id="edit_platform" class="form-select">
              <option value="telegram">Telegram</option>
              <option value="bale">Bale</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">Chat ID</label>
            <input type="text" name="chat_id" id="edit_chat_id" class="form-control font-mono">
          </div>
          <div class="col-6">
            <label class="form-label">Username</label>
            <input type="text" name="username" id="edit_username" class="form-control">
          </div>
          <div class="col-12">
            <label class="form-label">نام نمایشی</label>
            <input type="text" name="title" id="edit_title" class="form-control">
          </div>
          <div class="col-12">
            <label class="form-label">توضیحات</label>
            <textarea name="description" id="edit_desc" class="form-control" rows="2"></textarea>
          </div>
          <div class="col-12">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" name="is_active" id="edit_active" value="1">
              <label class="form-check-label" for="edit_active">کانال فعال باشد</label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button>
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>ذخیره تغییرات</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block scripts %}
<style>
  .dialog-row { cursor: pointer; }
  .dialog-row:hover { background: rgba(124,58,237,.04) !important; }
  .dialog-row.selected { background: rgba(124,58,237,.07) !important; }
  .dialog-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  #pickerTableCard { display: block !important; }
  .type-badge { font-size:.7rem; }
  th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  th.sortable:hover { color: var(--accent); }
  th.sortable .sort-ico { font-size:.7rem; opacity:.4; margin-inline-start:.2rem; }
  th.sortable.sort-asc  .sort-ico::before { content: "\F575"; } /* bi-sort-up */
  th.sortable.sort-desc .sort-ico::before { content: "\F570"; } /* bi-sort-down */
  th.sortable.sort-asc .sort-ico, th.sortable.sort-desc .sort-ico { opacity:1; color: var(--accent); }
  .chip-send-yes { background:rgba(96,165,95,.18); color:#8fd08e; }
  .chip-send-no  { background:rgba(224,104,79,.18); color:#f0a595; }
  .verified-ico { color:#4a9fd8; font-size:.78rem; }
  .scam-badge { background:rgba(224,104,79,.2); color:#f0a595; font-size:.62rem; padding:1px 5px; border-radius:6px; font-weight:700; }
</style>
<script>
/* ── Modals helpers ──────────────────────────────────────────── */
function setAddType(type, platform) {
  document.getElementById('add_type_sel').value = type;
  document.getElementById('add_plat_sel').value = platform;
}
function fillEdit(id, chatId, username, title, desc, type, platform, active) {
  document.getElementById('editForm').action = '/channels/' + id + '/edit';
  document.getElementById('edit_chat_id').value = chatId;
  document.getElementById('edit_username').value = username;
  document.getElementById('edit_title').value = title;
  document.getElementById('edit_desc').value = desc;
  document.getElementById('edit_type').value = type;
  document.getElementById('edit_platform').value = platform;
  document.getElementById('edit_active').checked = active;
}

/* ── Telegram Picker ─────────────────────────────────────────── */
/*
 * State model:
 *   allDialogs   — full list returned by the API (never mutated after load)
 *   selected     — Map<id, dialog> persisting selection across filter/sort
 *   category     — coarse filter: all | channel | group | private
 *   sortKey/Dir  — current column sort
 * Rendering always derives from allDialogs → filter → sort → DOM, so
 * selection survives every filter/search/sort change.
 */
let allDialogs = [];
const selected = new Map();
let category = 'all';
let sortKey = 'name';
let sortDir = 1; // 1 = asc, -1 = desc

const TYPE_LABELS = {
  channel:    ['chip-channel', 'کانال', 'bi-broadcast'],
  supergroup: ['chip-supergroup', 'سوپرگروه', 'bi-people-fill'],
  gigagroup:  ['chip-supergroup', 'گروه بزرگ', 'bi-megaphone'],
  group:      ['chip-group', 'گروه', 'bi-people'],
  private:    ['chip-private', 'چت خصوصی', 'bi-person'],
  bot:        ['chip-private', 'ربات', 'bi-robot'],
  unknown:    ['chip-inactive', 'نامشخص', 'bi-question-circle'],
};

const AVATAR_COLORS = [
  '#7c3aed','#4338ca','#0284c7','#059669','#d97706','#dc2626','#db2777','#7c3aed'
];
function avatarColor(name) {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xFFFFFF;
  return AVATAR_COLORS[Math.abs(h) % AVATAR_COLORS.length];
}

function loadDialogs() {
  const btn = document.getElementById('loadDialogsBtn');
  const status = document.getElementById('pickerStatus');
  const overlay = document.getElementById('pickerLoadingOverlay');
  const tableCard = document.getElementById('pickerTableCard');
  const filterCard = document.getElementById('pickerFilterCard');

  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>در حال بارگذاری...';
  status.textContent = '';
  overlay.classList.remove('d-none');
  tableCard.style.display = 'block';
  filterCard.classList.remove('d-none');

  fetch('/telegram-picker/api/dialogs')
    .then(r => r.json())
    .then(data => {
      overlay.classList.add('d-none');
      if (data.error) {
        showToast('خطا: ' + data.error, 'danger');
        status.textContent = 'خطا در بارگذاری';
        tableCard.style.display = 'none';
        filterCard.classList.add('d-none');
      } else {
        allDialogs = data.dialogs || [];
        document.getElementById('totalCount').textContent = toFa(allDialogs.length);
        renderFiltered();
        status.textContent = toFa(allDialogs.length) + ' گفتگو بارگذاری شد';
        const wrap = document.getElementById('addTargetWrap');
        wrap.classList.remove('d-none'); wrap.style.display = 'flex';
        document.getElementById('addSelectedBtn').classList.remove('d-none');
        document.getElementById('clearSelBtn').classList.remove('d-none');
        showToast(toFa(allDialogs.length) + ' گفتگو با موفقیت بارگذاری شد', 'success');
      }
    })
    .catch(err => {
      overlay.classList.add('d-none');
      showToast('خطای شبکه: ' + err.message, 'danger');
      status.textContent = 'خطای اتصال';
    })
    .finally(() => {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-arrow-clockwise me-2"></i>بارگذاری مجدد';
    });
}

/* Compute the current filtered + sorted view. */
function currentView() {
  const q = document.getElementById('searchInput').value.trim().toLowerCase();
  const canSendOnly = document.getElementById('canSendOnly').checked;

  let view = allDialogs.filter(d => {
    if (category !== 'all' && d.category !== category) return false;
    if (canSendOnly && !d.can_send) return false;
    if (q) {
      const hay = (d.name + ' ' + (d.username || '') + ' ' + d.id).toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  const dir = sortDir;
  view.sort((a, b) => {
    let av, bv;
    switch (sortKey) {
      case 'members':  av = a.members ?? -1; bv = b.members ?? -1; break;
      case 'id':       av = Math.abs(+a.id) || 0; bv = Math.abs(+b.id) || 0; break;
      case 'can_send': av = a.can_send ? 1 : 0; bv = b.can_send ? 1 : 0; break;
      case 'type':     av = a.type; bv = b.type; break;
      default:         av = (a.name || '').toLowerCase(); bv = (b.name || '').toLowerCase();
    }
    if (av < bv) return -1 * dir;
    if (av > bv) return 1 * dir;
    return 0;
  });
  return view;
}

function renderFiltered() {
  const view = currentView();
  renderDialogs(view);
  document.getElementById('filteredCount').textContent = toFa(view.length);
  refreshSelectionUi(view);
}

function renderDialogs(dialogs) {
  const tbody = document.getElementById('dialogsTbody');
  const showHash = document.getElementById('showHash').checked;
  tbody.innerHTML = '';
  if (!dialogs.length) {
    tbody.innerHTML = `<tr><td colspan="8"><div class="empty-state py-4">
      <i class="bi bi-search" style="font-size:2rem;opacity:.2;display:block;margin-bottom:.5rem"></i>
      <p class="text-muted small">نتیجه‌ای یافت نشد</p></div></td></tr>`;
    return;
  }
  dialogs.forEach(d => {
    const [chipCls, typeLabel, icon] = TYPE_LABELS[d.type] || TYPE_LABELS.unknown;
    const initial = (d.name || '?')[0].toUpperCase();
    const color = avatarColor(d.name || '');
    const members = d.members != null ? toFa(d.members) : '—';
    const isSel = selected.has(d.id);
    const sendChip = d.can_send
      ? '<span class="chip chip-send-yes"><i class="bi bi-check-circle me-1"></i>بله</span>'
      : '<span class="chip chip-send-no"><i class="bi bi-x-circle me-1"></i>خیر</span>';
    const verified = d.verified ? '<i class="bi bi-patch-check-fill verified-ico ms-1" title="تأییدشده"></i>' : '';
    const scam = d.scam ? '<span class="scam-badge ms-1">SCAM</span>' : '';
    const tr = document.createElement('tr');
    tr.className = 'dialog-row' + (isSel ? ' selected' : '');
    tr.dataset.id = d.id;
    tr.innerHTML = `
      <td onclick="event.stopPropagation()">
        <input type="checkbox" class="form-check-input dialog-chk" data-id="${escHtml(d.id)}"
               ${isSel ? 'checked' : ''} onchange="onRowCheck(this)">
      </td>
      <td>
        <div class="d-flex align-items-center gap-2">
          <div class="dialog-avatar" style="background:${color}">${escHtml(initial)}</div>
          <div>
            <div class="fw-semibold" style="font-size:.85rem">${escHtml(d.name || '—')}${verified}${scam}</div>
            ${d.username ? `<div class="text-muted" style="font-size:.72rem">${escHtml(d.username)}</div>` : ''}
          </div>
        </div>
      </td>
      <td class="font-mono text-xs text-muted">${escHtml(d.id)}</td>
      <td><span class="chip type-badge ${chipCls}"><i class="bi ${icon} me-1"></i>${typeLabel}</span></td>
      <td class="text-muted small">${members}</td>
      <td class="text-xs text-muted">${escHtml(d.username || '—')}</td>
      <td>${sendChip}</td>
      <td class="hash-col font-mono text-xs text-muted" style="${showHash ? '' : 'display:none'}">${escHtml(d.access_hash || '—')}</td>
    `;
    tr.addEventListener('click', () => {
      const chk = tr.querySelector('.dialog-chk');
      chk.checked = !chk.checked;
      onRowCheck(chk);
    });
    tbody.appendChild(tr);
  });
}

/* A row checkbox toggled — sync the persistent selection map. */
function onRowCheck(chk) {
  const id = chk.dataset.id;
  const tr = chk.closest('tr');
  if (chk.checked) {
    const d = allDialogs.find(x => x.id === id);
    if (d) selected.set(id, d);
    tr.classList.add('selected');
  } else {
    selected.delete(id);
    tr.classList.remove('selected');
  }
  refreshSelectionUi(currentView());
}

/* Update counters + select-all tri-state from the persistent map. */
function refreshSelectionUi(view) {
  const count = selected.size;
  document.getElementById('selectedCount').textContent = toFa(count);
  document.getElementById('selSummary').textContent = toFa(count);
  document.getElementById('addSelectedBtn').disabled = count === 0;

  const master = document.getElementById('selectAllChk');
  if (master) {
    const visIds = view.map(d => d.id);
    const visSel = visIds.filter(id => selected.has(id)).length;
    master.checked = visIds.length > 0 && visSel === visIds.length;
    master.indeterminate = visSel > 0 && visSel < visIds.length;
  }
}

function setCategory(btn) {
  category = btn.dataset.cat;
  document.querySelectorAll('#categoryFilter button').forEach(b => {
    b.classList.toggle('btn-primary', b === btn);
    b.classList.toggle('btn-outline-primary', b !== btn);
  });
  renderFiltered();
}

function setSort(key) {
  if (sortKey === key) sortDir *= -1;
  else { sortKey = key; sortDir = 1; }
  document.querySelectorAll('#dialogsTable th.sortable').forEach(th => {
    th.classList.remove('sort-asc', 'sort-desc');
    if (th.dataset.sort === sortKey) th.classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
  });
  renderFiltered();
}

function toggleHashColumn() {
  const show = document.getElementById('showHash').checked;
  document.querySelectorAll('.hash-col').forEach(el => { el.style.display = show ? '' : 'none'; });
}

/* Select-all applies only to the currently visible (filtered) rows. */
function toggleSelectAll(masterChk) {
  const view = currentView();
  view.forEach(d => {
    if (masterChk.checked) selected.set(d.id, d);
    else selected.delete(d.id);
  });
  renderDialogs(view);
  refreshSelectionUi(view);
}

function clearSelection() {
  selected.clear();
  renderFiltered();
}

/* Chosen add target: 'source' (default) or 'destination'. */
let addTarget = 'source';
function setAddTarget(btn) {
  addTarget = btn.dataset.target;
  document.querySelectorAll('#addTargetGroup button').forEach(b => {
    b.classList.toggle('btn-primary', b === btn);
    b.classList.toggle('btn-outline-primary', b !== btn);
  });
}

/* Add the current selection to the chosen channel list (source/destination). */
function addSelected(channelType) {
  if (!selected.size) return;
  const btn = document.getElementById('addSelectedBtn');
  const original = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>در حال افزودن...';

  const channels = [...selected.values()].map(d => ({
    id: d.id, name: d.name, type: d.type, username: d.username
  }));

  fetch('/channels/add-batch', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ channels, channel_type: channelType })
  })
  .then(r => r.json())
  .then(data => {
    if (data.error) {
      showToast('خطا: ' + data.error, 'danger');
    } else {
      showToast(data.message, 'success');
      selected.clear();
      setTimeout(() => location.reload(), 1800);
    }
  })
  .catch(err => showToast('خطای شبکه: ' + err.message, 'danger'))
  .finally(() => {
    btn.disabled = false;
    btn.innerHTML = original;
  });
}

function showToast(msg, type) {
  const toast = document.getElementById('pickerToast');
  const toastMsg = document.getElementById('pickerToastMsg');
  toast.className = `toast align-items-center border-0 text-bg-${type}`;
  toastMsg.textContent = msg;
  bootstrap.Toast.getOrCreateInstance(toast, { delay: 3500 }).show();
}

function toFa(n) {
  return Number(n).toLocaleString('fa-IR');
}

function escHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}
</script>
{% endblock %}