{% load static %}
<div id="bcSiteChat" data-authenticated="{% if request.user.is_authenticated %}1{% else %}0{% endif %}">
  <button type="button" class="bc-chat-launcher" id="bcChatLauncher" aria-label="باز کردن گفتگو" aria-controls="bcChatPanel" aria-expanded="false">
    <span class="bc-chat-unread" id="bcChatUnread" {% if not chat_unread_count %}hidden{% endif %} aria-label="{{ chat_unread_count }} پیام خوانده‌نشده">{{ chat_unread_count|default:"" }}</span>
    <span class="bc-chat-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5a7.5 7.5 0 0 1-7.8 7.5H8l-4.5 2 1.1-3.7A7.4 7.4 0 0 1 3 12.3 8 8 0 0 1 11.5 4 8 8 0 0 1 20 11.5Z"/><path d="M8 11.5h.01M12 11.5h.01M16 11.5h.01"/></svg>
    </span>
  </button>

  <div class="bc-chat-panel" id="bcChatPanel" aria-hidden="true" aria-label="مرکز گفتگو">
    <div class="bc-chat-top">
      <div class="bc-chat-topline">
        <div class="bc-chat-brand">
          <span class="bc-chat-brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5a7.5 7.5 0 0 1-7.8 7.5H8l-4.5 2 1.1-3.7A7.4 7.4 0 0 1 3 12.3 8 8 0 0 1 11.5 4 8 8 0 0 1 20 11.5Z"/><path d="M8 11.5h.01M12 11.5h.01M16 11.5h.01"/></svg>
          </span>
          <div>
            <span class="bc-chat-kicker">BUSINESS CENTER</span>
            <h2 class="bc-chat-title">مرکز گفتگو</h2>
            <p class="bc-chat-subtitle">راهنمایی سریع یا ارتباط مستقیم با تیم ما</p>
          </div>
        </div>
        <button type="button" class="bc-chat-close" id="bcChatClose" aria-label="بستن گفتگو">×</button>
      </div>

      <div class="bc-chat-tabs" role="tablist" aria-label="بخش‌های گفتگو">
        <button type="button" class="bc-chat-tab is-active" data-tab="faq" role="tab" aria-selected="true">سؤالات متداول</button>
        {% if request.user.is_authenticated %}<button type="button" class="bc-chat-tab" data-tab="admin" role="tab" aria-selected="false">چت با ادمین</button>{% endif %}
      </div>
    </div>

    <div class="bc-chat-content">
      <div class="bc-chat-view is-active" id="bcFaqView" role="tabpanel">
        <div class="bc-faq-toolbar"><input class="bc-faq-search" id="bcFaqSearch" type="search" placeholder="جستجو بین سؤالات متداول..." aria-label="جستجو در سؤالات متداول"></div>
        <div class="bc-faq-list" id="bcFaqList">
          {% for faq in faqs %}
            <button type="button" class="bc-faq-item" data-question="{{ faq.question|lower }}">
              <span><small class="bc-faq-meta">{{ faq.category }}</small><strong class="bc-faq-question">{{ faq.question }}</strong></span>
              <span class="bc-faq-plus" aria-hidden="true">+</span>
              <span class="bc-faq-answer">{{ faq.answer|linebreaksbr }}</span>
            </button>
          {% empty %}
            <div class="bc-empty">فعلاً سؤالی ثبت نشده است.</div>
          {% endfor %}
        </div>
      </div>

      {% if request.user.is_authenticated %}
      <div class="bc-chat-view" id="bcAdminView" role="tabpanel">
        <div class="bc-direct-status">
          <div class="bc-direct-status-line"><span class="bc-live-dot"></span>گفتگو با ادمین</div>
          <small class="bc-direct-note">پیام‌های این گفتگو مستقیماً در پنل مدیریت پیگیری می‌شوند.</small>
        </div>
        <div class="bc-direct-messages" id="bcDirectMessages">
          {% for m in messages_list %}
            <div class="bc-msg {% if m.sender_id == request.user.id %}mine{% else %}theirs{% endif %}"><div class="bc-msg-bubble">{{ m.text|linebreaksbr }}<small class="bc-msg-time">{{ m.created_at|date:'H:i' }}</small></div></div>
          {% empty %}
            <div class="bc-empty">هنوز پیامی ندارید.<br>اولین پیام را ارسال کنید.</div>
          {% endfor %}
        </div>
        <form class="bc-composer" id="bcDirectForm" method="post" action="{% url 'support_chat_send' %}">
          {% csrf_token %}
          <input class="bc-composer-input" name="text" id="bcDirectInput" maxlength="3000" autocomplete="off" placeholder="پیام خود را بنویسید..." required>
          <button type="submit" class="bc-send">ارسال</button>
        </form>
      </div>
      {% else %}
      <div class="bc-chat-view" id="bcAdminView" role="tabpanel" aria-hidden="true">
        <div class="bc-login-panel">
          <div class="bc-login-card">
            <div class="bc-login-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></svg>
            </div>
            <h3 class="bc-login-title">برای چت با ادمین وارد شوید</h3>
            <p class="bc-login-text">سؤالات متداول بدون ورود در دسترس است؛ برای گفتگوی مستقیم با تیم ما وارد حساب شوید.</p>
            <div class="bc-login-actions">
              <a class="bc-chat-login" href="{% url 'login' %}?next={{ request.path }}">ورود به حساب</a>
              <a class="bc-chat-register" href="{% url 'register' %}">ساخت حساب</a>
            </div>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<script>
(() => {
  const root = document.getElementById('bcSiteChat');
  if (!root || root.dataset.ready === '1') return;
  root.dataset.ready = '1';

  const launcher = document.getElementById('bcChatLauncher');
  const panel = document.getElementById('bcChatPanel');
  const closeBtn = document.getElementById('bcChatClose');
  const tabs = [...root.querySelectorAll('.bc-chat-tab')];
  const views = { faq: document.getElementById('bcFaqView'), admin: document.getElementById('bcAdminView') };
  const search = document.getElementById('bcFaqSearch');
  const faqItems = [...root.querySelectorAll('.bc-faq-item')];
  const form = document.getElementById('bcDirectForm');
  const input = document.getElementById('bcDirectInput');
  const messagesBox = document.getElementById('bcDirectMessages');
  const unreadBadge = document.getElementById('bcChatUnread');

  const escapeHtml = (value) => String(value)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#039;');

  const updateUnread = (count) => {
    if (!unreadBadge) return;
    const n = Math.max(0, Number(count) || 0);
    unreadBadge.textContent = n ? String(n) : '';
    unreadBadge.hidden = !n;
    unreadBadge.setAttribute('aria-label', n + ' پیام خوانده‌نشده');
  };

  const setOpen = (open) => {
    panel.classList.toggle('is-open', open);
    panel.setAttribute('aria-hidden', String(!open));
    launcher.setAttribute('aria-expanded', String(open));
    if (open) {
      pollMessages(views.admin?.classList.contains('is-active'));
      root.querySelector('.bc-faq-search')?.focus({preventScroll:true});
    }
  };

  launcher?.addEventListener('click', () => setOpen(!panel.classList.contains('is-open')));
  closeBtn?.addEventListener('click', () => setOpen(false));
  document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && panel.classList.contains('is-open')) setOpen(false); });

  tabs.forEach(tab => tab.addEventListener('click', () => {
    const key = tab.dataset.tab;
    tabs.forEach(item => {
      const active = item === tab;
      item.classList.toggle('is-active', active);
      item.setAttribute('aria-selected', String(active));
    });
    Object.entries(views).forEach(([name, view]) => view?.classList.toggle('is-active', name === key));
    if (key === 'admin' && messagesBox) { pollMessages(true); messagesBox.scrollTop = messagesBox.scrollHeight; }
    if (key === 'admin') input?.focus();
    if (key === 'faq') search?.focus({preventScroll:true});
  }));

  faqItems.forEach(item => item.addEventListener('click', () => item.classList.toggle('is-open')));
  search?.addEventListener('input', () => {
    const query = search.value.trim().toLowerCase();
    faqItems.forEach(item => { item.hidden = !!query && !item.dataset.question.includes(query); });
  });

  const renderMessages = (items) => {
    if (!messagesBox) return;
    if (!items.length) {
      messagesBox.innerHTML = '<div class="bc-empty">هنوز پیامی ندارید.<br>اولین پیام را ارسال کنید.</div>';
      return;
    }
    messagesBox.innerHTML = items.map(message =>
      `<div class="bc-msg ${message.mine ? 'mine' : 'theirs'}"><div class="bc-msg-bubble">${escapeHtml(message.text).replace(/\n/g,'<br>')}<small class="bc-msg-time">${escapeHtml(message.created_at)}</small></div></div>`
    ).join('');
    messagesBox.scrollTop = messagesBox.scrollHeight;
  };

  form?.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (!input?.value.trim()) return;
    const button = form.querySelector('.bc-send');
    button.disabled = true;
    try {
      const response = await fetch(form.action, { method: 'POST', body: new FormData(form), headers: {'X-Requested-With':'XMLHttpRequest','Accept':'application/json'} });
      if (response.status === 401 || response.status === 403) return;
      if (!response.ok) throw new Error('send-failed');
      const data = await response.json();
      if (!data.ok) throw new Error('send-failed');
      input.value = '';
      await pollMessages();
      input.focus();
    } catch (error) {
      console.error('Chat send error:', error);
    } finally {
      button.disabled = false;
    }
  });

  const pollMessages = async (markRead) => {
    if (!messagesBox) return;
    try {
      const url = '{% url 'support_chat_data' %}' + (markRead ? '?mark_read=1' : '');
      const response = await fetch(url, { headers: {'X-Requested-With':'XMLHttpRequest','Accept':'application/json'}, cache:'no-store' });
      if (!response.ok) return;
      const data = await response.json();
      renderMessages(data.messages || []);
      updateUnread(data.unread_count || 0);
    } catch (error) {
      console.debug('Chat polling skipped:', error);
    }
  };

  {% if request.user.is_authenticated %}
  pollMessages(false);
  setInterval(() => pollMessages(panel.classList.contains('is-open') && views.admin?.classList.contains('is-active')), 5000);
  {% endif %}
})();
</script>