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

{% block content %}

{% macro account_form_fields(a) %}
<div class="row g-3">
  <div class="col-md-6">
    <label class="form-label">نام اکانت *</label>
    <input type="text" name="name" class="form-control" required value="{{ a.name if a else '' }}">
  </div>
  <div class="col-md-6">
    <label class="form-label">نقش تلگرام</label>
    <select name="account_type" class="form-select">
      <option value="worker" {{ 'selected' if a and a.account_type=='worker' else '' }}>Worker</option>
      <option value="mother" {{ 'selected' if a and a.account_type=='mother' else '' }}>Mother</option>
    </select>
  </div>
  <div class="col-md-6">
    <label class="form-label">API ID {% if a %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label>
    <input type="text" name="api_id" class="form-control font-mono" {{ 'placeholder=بدون تغییر' if a else 'required' }}>
  </div>
  <div class="col-md-6">
    <label class="form-label">API Hash {% if a %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label>
    <input type="text" name="api_hash" class="form-control font-mono" {{ 'placeholder=بدون تغییر' if a else 'required' }}>
  </div>
  <div class="col-12">
    <label class="form-label">Session String {% if a %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label>
    <textarea name="session_string" class="form-control font-mono" rows="2" {{ '' if a else 'required' }} placeholder="{{ 'بدون تغییر' if a else '1BJWap...' }}"></textarea>
  </div>
  <div class="col-md-6">
    <label class="form-label">شماره تلفن (اختیاری)</label>
    <input type="text" name="phone" class="form-control" value="{{ a.phone if a and a.phone else '' }}">
  </div>
  <div class="col-md-6 d-flex align-items-end">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ 'checked' if (a is none) or a.is_active else '' }}>
      <label class="form-check-label">اکانت فعال باشد</label>
    </div>
  </div>
</div>
{% endmacro %}

{% macro provider_fields(p) %}
<div class="row g-3">
  <div class="col-md-6">
    <label class="form-label">نام *</label>
    <input type="text" name="name" class="form-control" required value="{{ p.name if p else '' }}">
  </div>
  <div class="col-md-6">
    <label class="form-label">نوع Provider</label>
    <select name="provider_type" class="form-select">
      {% for t in provider_types %}
      <option value="{{ t }}" {{ 'selected' if p and p.provider_type==t else '' }}>{{ t }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-8">
    <label class="form-label">Base URL</label>
    <input type="text" name="base_url" class="form-control font-mono" value="{{ p.base_url if p else '' }}" placeholder="https://api.openai.com/v1">
  </div>
  <div class="col-md-4">
    <label class="form-label">Model</label>
    <input type="text" name="model" class="form-control" value="{{ p.model if p else '' }}" placeholder="gpt-4o-mini">
  </div>
  <div class="col-12">
    <label class="form-label">API Key {% if p %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label>
    <input type="text" name="api_key" class="form-control font-mono" placeholder="{{ 'بدون تغییر' if p else 'sk-...' }}">
  </div>
  <div class="col-md-3"><label class="form-label">Context Window</label><input type="number" name="context_window" class="form-control" value="{{ p.context_window if p else 8192 }}"></div>
  <div class="col-md-3"><label class="form-label">Max Tokens</label><input type="number" name="max_tokens" class="form-control" value="{{ p.max_tokens if p else 1024 }}"></div>
  <div class="col-md-3"><label class="form-label">Temperature</label><input type="number" step="0.05" name="temperature" class="form-control" value="{{ p.temperature if p else 0.7 }}"></div>
  <div class="col-md-3"><label class="form-label">Top P</label><input type="number" step="0.05" name="top_p" class="form-control" value="{{ p.top_p if p else 1.0 }}"></div>
  <div class="col-md-3"><label class="form-label">Frequency Penalty</label><input type="number" step="0.05" name="frequency_penalty" class="form-control" value="{{ p.frequency_penalty if p else 0.0 }}"></div>
  <div class="col-md-3"><label class="form-label">Presence Penalty</label><input type="number" step="0.05" name="presence_penalty" class="form-control" value="{{ p.presence_penalty if p else 0.0 }}"></div>
  <div class="col-md-3"><label class="form-label">قیمت/۱K ورودی ($)</label><input type="number" step="0.0001" name="price_per_1k_in" class="form-control" value="{{ p.price_per_1k_in if p else 0.0 }}"></div>
  <div class="col-md-3"><label class="form-label">قیمت/۱K خروجی ($)</label><input type="number" step="0.0001" name="price_per_1k_out" class="form-control" value="{{ p.price_per_1k_out if p else 0.0 }}"></div>
  <div class="col-12">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ 'checked' if (p is none) or p.is_active else '' }}>
      <label class="form-check-label">فعال</label>
    </div>
  </div>
</div>
{% endmacro %}

{% macro bale_fields(b, creds) %}
<div class="row g-3">
  <div class="col-md-6"><label class="form-label">نام *</label><input name="name" class="form-control" required value="{{ b.name if b else '' }}"></div>
  <div class="col-md-6"><label class="form-label">Base URL</label><input name="base_url" class="form-control font-mono" value="{{ creds.get('base_url','https://tapi.bale.ai') if creds else 'https://tapi.bale.ai' }}"></div>
  <div class="col-12"><label class="form-label">Bot Token {% if b %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label><input name="bot_token" class="form-control font-mono" {{ 'placeholder=بدون تغییر' if b else 'required' }}></div>
  <div class="col-md-6"><label class="form-label">Chat ID</label><input name="chat_id" class="form-control font-mono" value="{{ creds.get('chat_id','') if creds else '' }}"></div>
  <div class="col-md-6 d-flex align-items-end"><div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ 'checked' if (b is none) or b.is_active else '' }}>
    <label class="form-check-label">فعال</label></div></div>
</div>
{% endmacro %}

{% macro bot_fields(bot, creds) %}
<div class="row g-3">
  <div class="col-md-6"><label class="form-label">نام *</label><input name="name" class="form-control" required value="{{ bot.name if bot else '' }}"></div>
  <div class="col-md-6"><label class="form-label">Base URL</label><input name="base_url" class="form-control font-mono" value="{{ creds.get('base_url','https://api.telegram.org') if creds else 'https://api.telegram.org' }}"></div>
  <div class="col-12"><label class="form-label">Bot Token {% if bot %}<span class="text-muted text-xs">(برای تغییر وارد کنید)</span>{% endif %}</label><input name="bot_token" class="form-control font-mono" {{ 'placeholder=بدون تغییر' if bot else 'required' }} placeholder="{{ '123456:ABC-DEF...' if not bot else '' }}"></div>
  <div class="col-12"><div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ 'checked' if (bot is none) or bot.is_active else '' }}>
    <label class="form-check-label">فعال</label></div></div>
</div>
{% endmacro %}

<ul class="nav nav-tabs mb-4" id="accTabs">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-telegram"><i class="bi bi-telegram me-1"></i>تلگرام ({{ accounts|length }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-bale"><i class="bi bi-chat-dots me-1"></i>بله ({{ bale_accounts|length }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-ai"><i class="bi bi-cpu me-1"></i>هوش مصنوعی ({{ providers|length }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-bot"><i class="bi bi-robot me-1"></i>ربات تلگرام ({{ bot_accounts|length }})</a></li>
</ul>

<div class="tab-content">
  {# ── Telegram ── #}
  <div class="tab-pane fade show active" id="tab-telegram">
    <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:#4a9fd8"></i>اکانت‌های تلگرام</h6>
        <div class="d-flex gap-2">
          <button class="btn btn-sm btn-outline-success" id="bulkJoinBtn" disabled onclick="openBulkJoin()"><i class="bi bi-box-arrow-in-left me-1"></i>عضویت گروهی (<span id="bulkJoinCount">0</span>)</button>
          <button class="btn btn-sm btn-outline-primary" onclick="checkAll()"><i class="bi bi-heart-pulse me-1"></i>بررسی سلامت همه</button>
          <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addAccModal"><i class="bi bi-plus-lg me-1"></i>افزودن اکانت</button>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr><th><input type="checkbox" class="form-check-input" id="accSelectAll" onclick="toggleSelectAllAcc(this)"></th><th>#</th><th>نام</th><th>نقش</th><th>Session</th><th>وضعیت</th><th>آخرین اتصال</th><th style="width:210px">عملیات</th></tr>
          </thead>
          <tbody>
            {% for a in accounts %}
            <tr id="acc-row-{{ a.id }}">
              <td><input type="checkbox" class="form-check-input" data-acc-select="{{ a.id }}" onchange="updateBulkJoinCount()"></td>
              <td class="text-muted text-xs">{{ a.id }}</td>
              <td class="fw-semibold">{{ a.name }}{% if a.tg_username %}<div class="text-muted text-xs">@{{ a.tg_username }}</div>{% endif %}</td>
              <td>
                {% if a.account_type == MOTHER %}<span class="chip chip-channel"><i class="bi bi-diagram-3 me-1"></i>Mother</span>
                {% else %}<span class="chip chip-group"><i class="bi bi-person me-1"></i>Worker</span>{% endif %}
              </td>
              <td class="font-mono text-xs text-muted">{{ previews[a.id] or '—' }}</td>
              <td class="acc-status">
                {% set sm = {'connected':'chip-active','auth_error':'chip-inactive','error':'chip-inactive','disconnected':'chip-group'} %}
                <span class="chip {{ sm.get(a.health_status,'chip-private') }}">{{ a.health_status }}</span>
                {% if a.health_detail %}<div class="text-muted text-xs acc-detail">{{ a.health_detail }}</div>{% endif %}
              </td>
              <td class="text-xs text-muted">{{ a.last_connected|jalali if a.last_connected else '—' }}</td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-xs btn-outline-primary" onclick="checkOne({{ a.id }})" title="بررسی سلامت"><i class="bi bi-heart-pulse"></i></button>
                  <button class="btn btn-xs btn-success" onclick="openOps({{ a.id }}, '{{ a.name|replace("'","\\'") }}')" title="عملیات"><i class="bi bi-gear"></i> عملیات</button>
                  <button class="btn btn-xs btn-outline-secondary" title="ویرایش" data-bs-toggle="modal" data-bs-target="#editAccModal{{ a.id }}"><i class="bi bi-pencil"></i></button>
                  <form method="POST" action="{{ url_for('accounts.toggle', account_id=a.id) }}" class="d-inline">
                    <button class="btn btn-xs {{ 'btn-outline-warning' if a.is_active else 'btn-outline-success' }}" title="{{ 'غیرفعال' if a.is_active else 'فعال' }}"><i class="bi {{ 'bi-pause-fill' if a.is_active else 'bi-play-fill' }}"></i></button>
                  </form>
                  <form method="POST" action="{{ url_for('accounts.delete', account_id=a.id) }}" class="d-inline" onsubmit="return confirm('حذف اکانت «{{ a.name }}»؟')">
                    <button class="btn btn-xs btn-outline-danger" title="حذف"><i class="bi bi-trash3"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="8"><div class="empty-state"><i class="bi bi-person-x"></i><p>هنوز اکانتی ثبت نشده است</p></div></td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Bale ── #}
  <div class="tab-pane fade" id="tab-bale">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-chat-dots me-2"></i>اکانت‌های بله</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addBaleModal"><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>Base URL</th><th>وضعیت</th><th style="width:120px"></th></tr></thead>
          <tbody>
            {% for b in bale_accounts %}
            <tr>
              <td class="text-muted text-xs">{{ b.id }}</td>
              <td class="fw-semibold">{{ b.name }}</td>
              <td class="font-mono text-xs text-muted">{{ bale_creds[b.id].get('chat_id','—') }}</td>
              <td class="font-mono text-xs text-muted">{{ bale_creds[b.id].get('base_url','—') }}</td>
              <td><span class="chip {{ 'chip-active' if b.is_active else 'chip-inactive' }}">{{ 'فعال' if b.is_active else 'غیرفعال' }}</span></td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editBale{{ b.id }}"><i class="bi bi-pencil"></i></button>
                  <form method="POST" action="{{ url_for('accounts.bale_delete', account_id=b.id) }}" onsubmit="return confirm('حذف اکانت بله «{{ b.name }}»؟')">
                    <button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="6"><div class="empty-state"><i class="bi bi-chat-square-x"></i><p>هنوز اکانت بله‌ای ثبت نشده است</p></div></td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── AI ── #}
  <div class="tab-pane fade" id="tab-ai">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-cpu me-2"></i>اکانت‌های هوش مصنوعی (Provider)</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addProvModal"><i class="bi bi-plus-lg me-1"></i>افزودن Provider</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>نوع</th><th>Model</th><th>API Key</th><th>وضعیت</th><th style="width:190px">عملیات</th></tr></thead>
          <tbody>
            {% for p in providers %}
            <tr>
              <td class="text-muted text-xs">{{ p.id }}</td>
              <td class="fw-semibold">{{ p.name }}</td>
              <td><span class="chip chip-channel">{{ p.provider_type }}</span></td>
              <td class="text-xs font-mono text-muted">{{ p.model or '—' }}</td>
              <td class="font-mono text-xs text-muted">{{ ai_masks[p.id] or '—' }}</td>
              <td><span class="chip {{ 'chip-active' if p.is_active else 'chip-inactive' }}">{{ 'فعال' if p.is_active else 'غیرفعال' }}</span></td>
              <td>
                <div class="d-flex gap-1 align-items-center">
                  <button class="btn btn-xs btn-outline-primary" onclick="testAi({{ p.id }})" title="تست اتصال"><i class="bi bi-plug"></i></button>
                  <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editProv{{ p.id }}" title="ویرایش"><i class="bi bi-pencil"></i></button>
                  <form method="POST" action="{{ url_for('ai_providers.delete', provider_id=p.id) }}" onsubmit="return confirm('حذف Provider «{{ p.name }}»؟')">
                    <button class="btn btn-xs 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-cpu"></i><p>هنوز Providerی اضافه نشده است</p></div></td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {# ── Telegram Bot (forward-approval requests) ── #}
  <div class="tab-pane fade" id="tab-bot">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-robot me-2"></i>ربات‌های تلگرام (برای تاییدیهٔ فوروارد)</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addBotModal"><i class="bi bi-plus-lg me-1"></i>افزودن ربات</button>
      </div>
      <div class="text-muted text-xs px-3 pt-2">توکن ربات را از @BotFather بگیرید. این ربات برای ارسال درخواست تاییدیه (بخش فوروارد خودکار) استفاده می‌شود.</div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>توکن</th><th>وضعیت</th><th style="width:110px"></th></tr></thead>
          <tbody>
            {% for bot in bot_accounts %}
            {% set bot_token = bot_creds[bot.id].get('bot_token','') %}
            <tr>
              <td class="text-muted text-xs">{{ bot.id }}</td>
              <td class="fw-semibold">{{ bot.name }}</td>
              <td class="font-mono text-xs text-muted">{{ (bot_token[:6] + '••••••••') if bot_token else '—' }}</td>
              <td><span class="chip {{ 'chip-active' if bot.is_active else 'chip-inactive' }}">{{ 'فعال' if bot.is_active else 'غیرفعال' }}</span></td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editBot{{ bot.id }}"><i class="bi bi-pencil"></i></button>
                  <form method="POST" action="{{ url_for('accounts.bot_delete', account_id=bot.id) }}" onsubmit="return confirm('حذف ربات «{{ bot.name }}»؟')">
                    <button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="5"><div class="empty-state"><i class="bi bi-robot"></i><p>هنوز رباتی اضافه نشده است</p></div></td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{# ── AI Provider add/edit modals ── #}
{% for p in providers %}
<div class="modal fade" id="editProv{{ p.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('ai_providers.edit', provider_id=p.id) }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="bi bi-pencil me-2 text-warning"></i>ویرایش «{{ p.name }}»</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ provider_fields(p) }}</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">ذخیره</button></div>
  </form>
</div></div>
{% endfor %}

<div class="modal fade" id="addProvModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('ai_providers.add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="bi bi-plus-circle me-2 text-primary"></i>افزودن Provider</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ provider_fields(None) }}</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>

{# ── Telegram edit modals ── #}
{% for a in accounts %}
<div class="modal fade" id="editAccModal{{ a.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.edit', account_id=a.id) }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="bi bi-pencil me-2 text-warning"></i>ویرایش «{{ a.name }}»</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ account_form_fields(a) }}</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">ذخیره</button></div>
  </form>
</div></div>
{% endfor %}

{# ── Telegram add modal ── #}
<div class="modal fade" id="addAccModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.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">{{ account_form_fields(None) }}</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>

{# ── Bulk join modal ── #}
<div class="modal fade" id="bulkJoinModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <div class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="bi bi-box-arrow-in-left me-2 text-success"></i>عضویت گروهی — <span id="bulkJoinModalCount">0</span> اکانت</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <label class="form-label">آدرس گروه/کانال (@username یا لینک دعوت)</label>
      <div class="d-flex gap-2 mb-2">
        <input id="bulkJoinTarget" class="form-control" placeholder="@channel یا https://t.me/+...">
        <button class="btn btn-success" onclick="submitBulkJoin()" style="white-space:nowrap"><i class="bi bi-box-arrow-in-left me-1"></i>شروع عضویت</button>
      </div>
      <div class="text-muted text-xs mb-2">همهٔ اکانت‌های انتخاب‌شده هم‌زمان تلاش می‌کنند عضو این گروه/کانال شوند؛ نتیجهٔ هرکدام جداگانه زیر نمایش داده می‌شود.</div>
      <div id="bulkJoinResults" style="max-height:280px;overflow:auto"></div>
    </div>
  </div>
</div></div>

{# ── Bale modals ── #}
<div class="modal fade" id="addBaleModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.bale_add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">افزودن اکانت بله</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ bale_fields(None, None) }}</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">افزودن</button></div>
  </form>
</div></div>
{% for b in bale_accounts %}
<div class="modal fade" id="editBale{{ b.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.bale_edit', account_id=b.id) }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">ویرایش «{{ b.name }}»</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ bale_fields(b, bale_creds[b.id]) }}</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">ذخیره</button></div>
  </form>
</div></div>
{% endfor %}

{# ── Telegram Bot modals ── #}
<div class="modal fade" id="addBotModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.bot_add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">افزودن ربات تلگرام</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ bot_fields(None, None) }}</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">افزودن</button></div>
  </form>
</div></div>
{% for bot in bot_accounts %}
<div class="modal fade" id="editBot{{ bot.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('accounts.bot_edit', account_id=bot.id) }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">ویرایش «{{ bot.name }}»</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">{{ bot_fields(bot, bot_creds[bot.id]) }}</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">ذخیره</button></div>
  </form>
</div></div>
{% endfor %}

{# ── Telegram operations modal (shared) ── #}
<div class="modal fade" id="opsModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <div class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="bi bi-gear me-2 text-accent"></i>عملیات اکانت — <span id="opsAccName"></span></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <ul class="nav nav-tabs mb-3" style="font-size:.8rem">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#ops-profile">پروفایل</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ops-membership">عضویت گروه/کانال</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#ops-chats">چت‌ها و پیام‌ها</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="ops-profile">
          <div class="row g-2 mb-2">
            <div class="col-md-6"><label class="form-label">نام</label><input id="opFirst" class="form-control form-control-sm"></div>
            <div class="col-md-6"><label class="form-label">نام خانوادگی</label><input id="opLast" class="form-control form-control-sm"></div>
            <div class="col-12"><label class="form-label">بیو (Bio)</label><textarea id="opAbout" class="form-control form-control-sm" rows="2"></textarea></div>
          </div>
          <button class="btn btn-sm btn-primary" onclick="opProfile()"><i class="bi bi-save me-1"></i>ذخیره نام و بیو</button>
          <hr>
          <div class="row g-2 align-items-end">
            <div class="col-md-8"><label class="form-label">یوزرنیم عمومی</label><input id="opUsername" class="form-control form-control-sm" placeholder="بدون @"></div>
            <div class="col-md-4"><button class="btn btn-sm btn-primary w-100" onclick="opUsername()">تغییر یوزرنیم</button></div>
          </div>
          <hr>
          <div class="row g-2 align-items-end">
            <div class="col-md-8"><label class="form-label">عکس پروفایل</label><input id="opPhoto" type="file" accept="image/*" class="form-control form-control-sm"></div>
            <div class="col-md-4"><button class="btn btn-sm btn-primary w-100" onclick="opPhoto()">آپلود عکس</button></div>
          </div>
        </div>
        <div class="tab-pane fade" id="ops-membership">
          <label class="form-label">آدرس گروه/کانال (@username یا لینک دعوت)</label>
          <div class="d-flex gap-2">
            <input id="opTarget" class="form-control form-control-sm" placeholder="@channel یا https://t.me/+...">
            <button class="btn btn-sm btn-success" onclick="opJoin()" style="white-space:nowrap"><i class="bi bi-box-arrow-in-left me-1"></i>عضویت</button>
            <button class="btn btn-sm btn-outline-danger" onclick="opLeave()" style="white-space:nowrap"><i class="bi bi-box-arrow-right me-1"></i>خروج</button>
          </div>
        </div>
        <div class="tab-pane fade" id="ops-chats">
          <div class="d-flex gap-2 mb-2">
            <button class="btn btn-sm btn-outline-primary" onclick="opListChats()"><i class="bi bi-list-ul me-1"></i>لیست چت‌ها</button>
            <input id="opReadChat" class="form-control form-control-sm" placeholder="chat id / @username" style="max-width:200px">
            <input id="opReadLimit" type="number" class="form-control form-control-sm" value="20" style="max-width:90px" title="limit">
            <button class="btn btn-sm btn-outline-primary" onclick="opReadMessages()"><i class="bi bi-chat-text me-1"></i>خواندن پیام‌ها</button>
          </div>
          <div id="opsResult" style="max-height:300px;overflow:auto;font-size:.8rem"></div>
        </div>
      </div>
      <div id="opsStatus" class="small mt-2"></div>
    </div>
  </div>
</div></div>

{% endblock %}

{% block scripts %}
<script>
const OPS_BASE = '/accounts';
let opsAccountId = null;

/* ── health ── */
function rowEls(id){ const row=document.getElementById('acc-row-'+id); return {row, cell: row.querySelector('.acc-status')}; }
function renderStatus(id, d){ const {cell}=rowEls(id); const ok=d.ok; cell.innerHTML=`<span class="chip ${ok?'chip-active':'chip-inactive'}">${ok?'connected':(d.status||'error')}</span><div class="text-muted text-xs">${esc(d.detail||'')}</div>`; }
function checkOne(id){ const {cell}=rowEls(id); cell.innerHTML='<span class="spinner-border spinner-border-sm text-primary"></span>'; fetch(`${OPS_BASE}/${id}/health`,{method:'POST'}).then(r=>r.json()).then(d=>renderStatus(id,d)).catch(()=>cell.innerHTML='<span class="chip chip-inactive">خطا</span>'); }
function checkAll(){ document.querySelectorAll('[id^="acc-row-"]').forEach(r=>checkOne(r.id.replace('acc-row-',''))); }

/* ── bulk join ── */
function selectedAccIds(){ return [...document.querySelectorAll('[data-acc-select]:checked')].map(c=>+c.dataset.accSelect); }
function updateBulkJoinCount(){
  const n = selectedAccIds().length;
  document.getElementById('bulkJoinCount').textContent = n;
  document.getElementById('bulkJoinBtn').disabled = n === 0;
  const all = document.querySelectorAll('[data-acc-select]');
  document.getElementById('accSelectAll').checked = all.length > 0 && n === all.length;
}
function toggleSelectAllAcc(box){
  document.querySelectorAll('[data-acc-select]').forEach(c => c.checked = box.checked);
  updateBulkJoinCount();
}
function openBulkJoin(){
  const n = selectedAccIds().length;
  if (!n) return;
  document.getElementById('bulkJoinModalCount').textContent = n;
  document.getElementById('bulkJoinTarget').value = '';
  document.getElementById('bulkJoinResults').innerHTML = '';
  new bootstrap.Modal(document.getElementById('bulkJoinModal')).show();
}
function submitBulkJoin(){
  const ids = selectedAccIds();
  const target = document.getElementById('bulkJoinTarget').value.trim();
  const box = document.getElementById('bulkJoinResults');
  if (!target){ box.innerHTML = '<div class="text-danger text-xs">لینک یا آیدی گروه/کانال را وارد کنید</div>'; return; }
  box.innerHTML = '<span class="spinner-border spinner-border-sm"></span> در حال عضویت همهٔ اکانت‌ها...';
  fetch(`${OPS_BASE}/ops/bulk-join`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ account_ids: ids, target })
  }).then(r => r.json()).then(d => {
    if (!d.ok){ box.innerHTML = `<div class="text-danger text-xs">${esc(d.error||'خطا')}</div>`; return; }
    box.innerHTML = d.results.map(r => `
      <div class="d-flex justify-content-between align-items-center text-xs mb-1 pb-1" style="border-bottom:1px solid var(--border-light)">
        <span>${esc(r.account_name || ('#'+r.account_id))}</span>
        <span class="${r.ok ? 'text-success' : 'text-danger'}">${r.ok ? '✓ عضو شد' : '✗ '+esc(r.error||'ناموفق')}</span>
      </div>`).join('');
  }).catch(() => { box.innerHTML = '<div class="text-danger text-xs">خطای شبکه</div>'; });
}

/* ── AI test ── */
function testAi(id){
  const cell=document.querySelector('.ai-test-cell-'+id);
  const html=cell.innerHTML;
  cell.innerHTML='<span class="spinner-border spinner-border-sm"></span>';
  fetch(`/ai-providers/${id}/test`,{method:'POST'}).then(r=>r.json()).then(d=>{
    cell.innerHTML = d.ok ? `<span class="chip chip-active" title="${esc(d.sample||'')}">✓ متصل (${d.tokens||0} توکن)</span>`
                          : `<span class="chip chip-inactive" title="${esc(d.error||'')}">✗ ناموفق</span>`;
    setTimeout(()=>{cell.innerHTML=html;}, 6000);
  }).catch(()=>{cell.innerHTML=html;});
}

/* ── operations ── */
function openOps(id, name){ opsAccountId=id; document.getElementById('opsAccName').textContent=name; document.getElementById('opsStatus').textContent=''; document.getElementById('opsResult').innerHTML=''; new bootstrap.Modal(document.getElementById('opsModal')).show(); }
function opsStatus(ok, msg){ const el=document.getElementById('opsStatus'); el.className='small mt-2 '+(ok?'text-success':'text-danger'); el.textContent=msg; }
function opsPost(path, body){ return fetch(`${OPS_BASE}/${opsAccountId}/ops/${path}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body||{})}).then(r=>r.json()); }

function opProfile(){ opsPost('profile',{first_name:val('opFirst'),last_name:val('opLast'),about:val('opAbout')}).then(d=>opsStatus(d.ok, d.ok?'پروفایل بروزرسانی شد':('خطا: '+d.error))); }
function opUsername(){ opsPost('username',{username:val('opUsername')}).then(d=>opsStatus(d.ok, d.ok?'یوزرنیم تغییر کرد':('خطا: '+d.error))); }
function opPhoto(){
  const f=document.getElementById('opPhoto').files[0];
  if(!f){opsStatus(false,'فایلی انتخاب نشده');return;}
  const fd=new FormData(); fd.append('photo',f);
  fetch(`${OPS_BASE}/${opsAccountId}/ops/photo`,{method:'POST',body:fd}).then(r=>r.json()).then(d=>opsStatus(d.ok, d.ok?'عکس پروفایل تغییر کرد':('خطا: '+d.error)));
}
function opJoin(){ opsStatus(true,'در حال عضویت...'); opsPost('join',{target:val('opTarget')}).then(d=>opsStatus(d.ok, d.ok?'عضویت انجام شد':('خطا: '+d.error))); }
function opLeave(){ opsStatus(true,'در حال خروج...'); opsPost('leave',{target:val('opTarget')}).then(d=>opsStatus(d.ok, d.ok?'خروج انجام شد':('خطا: '+d.error))); }
function opListChats(){
  const box=document.getElementById('opsResult'); box.innerHTML='<span class="spinner-border spinner-border-sm"></span>';
  fetch(`${OPS_BASE}/${opsAccountId}/ops/list-chats`).then(r=>r.json()).then(d=>{
    if(!d.ok){box.innerHTML=`<div class="text-danger">${esc(d.error)}</div>`;return;}
    box.innerHTML='<table class="table table-sm"><thead><tr><th>نام</th><th>ID</th><th>نوع</th><th>Username</th></tr></thead><tbody>'+
      d.chats.map(c=>`<tr><td>${esc(c.name)}</td><td class="font-mono text-xs">${esc(c.id)}</td><td>${esc(c.type)}</td><td class="text-xs">${esc(c.username||'')}</td></tr>`).join('')+'</tbody></table>';
  }).catch(e=>box.innerHTML='<div class="text-danger">خطای شبکه</div>');
}
function opReadMessages(){
  const chat=val('opReadChat'), limit=val('opReadLimit')||20;
  if(!chat){opsStatus(false,'chat را وارد کنید');return;}
  const box=document.getElementById('opsResult'); box.innerHTML='<span class="spinner-border spinner-border-sm"></span>';
  fetch(`${OPS_BASE}/${opsAccountId}/ops/read-messages?chat=${encodeURIComponent(chat)}&limit=${limit}`).then(r=>r.json()).then(d=>{
    if(!d.ok){box.innerHTML=`<div class="text-danger">${esc(d.error)}</div>`;return;}
    box.innerHTML=d.messages.map(m=>`<div class="mb-1 pb-1" style="border-bottom:1px solid var(--border-light)"><span class="text-muted text-xs">${esc(m.date||'')} ${m.out?'↑':'↓'}</span><div>${esc(m.text||'(بدون متن)')}</div></div>`).join('') || '<div class="text-muted">پیامی یافت نشد</div>';
  }).catch(e=>box.innerHTML='<div class="text-danger">خطای شبکه</div>');
}

function val(id){ const el=document.getElementById(id); return el?el.value.trim():''; }
function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

/* Re-open a tab after redirect with #hash (e.g. #bale, #ai) — see the
   bale_add/bale_edit and ai_providers add/edit/delete route redirects. */
if (location.hash === '#bale' || location.hash === '#ai' || location.hash === '#bot') {
  const tabLink = document.querySelector(`#accTabs a[href="#tab-${location.hash.slice(1)}"]`);
  if (tabLink) new bootstrap.Tab(tabLink).show();
}
</script>
{% endblock %}