{% extends "cms/base.html" %}
{% load cms_time %}
{% block title %}{% if tab == 'whatsapp' %}WA Chat{% else %}AI Chat{% endif %}{% endblock %}
{% block page_title %}{% if tab == 'whatsapp' %}WA Chat{% else %}AI Chat{% endif %}{% endblock %}

{% block extra_head %}
<style>
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:160px;color:var(--cms-text); }
  .search-inline button { background:none;border:none;padding:0;color:#94a3b8;cursor:pointer;line-height:1; }
  .search-inline button:hover { color:var(--cms-accent); }

  /* ── Settings drawer ── */
  .settings-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:1040; }
  .settings-overlay.open { display:block; }
  .settings-drawer {
    position:fixed;top:0;right:0;height:100vh;width:440px;max-width:92vw;
    background:#fff;border-left:1px solid #e2e8f0;box-shadow:-4px 0 24px rgba(0,0,0,.1);
    z-index:1050;transform:translateX(100%);transition:transform .25s ease;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .settings-drawer.open { transform:translateX(0); }
  .drawer-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 1.4rem;border-bottom:1px solid #f1f5f9;background:#fafbfc;flex-shrink:0;
  }
  .drawer-header h5 { margin:0;font-size:.95rem;font-weight:700;color:#1e293b; }
  .drawer-close { background:none;border:none;cursor:pointer;color:#94a3b8;font-size:1.1rem;padding:.25rem;line-height:1;border-radius:6px;transition:background .15s; }
  .drawer-close:hover { background:#f1f5f9;color:#475569; }
  .drawer-body { flex:1;overflow-y:auto;padding:1.25rem 1.4rem; }
  .drawer-footer { padding:.85rem 1.4rem;border-top:1px solid #f1f5f9;background:#fafbfc;flex-shrink:0; }

  /* drawer form — light */
  .drawer-body .form-group { margin-bottom:1rem; }
  .drawer-body label { display:block;font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.35rem; }
  .drawer-body input[type="text"], .drawer-body input[type="number"], .drawer-body textarea {
    width:100%;border:1px solid #e2e8f0;border-radius:8px;padding:.6rem .85rem;
    font-size:.875rem;color:#1e293b;background:#fff;outline:none;transition:border .15s;font-family:inherit;resize:vertical;
  }
  .drawer-body input:focus, .drawer-body textarea:focus { border-color:#16517b; }
  .drawer-body small { font-size:.73rem;color:#94a3b8;margin-top:.3rem;display:block; }
  .drawer-divider { border:none;border-top:1px solid #f1f5f9;margin:1.1rem 0; }
  .drawer-section-label { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin-bottom:.65rem; }

  /* ON/OFF toggle at top of drawer */
  .chat-onoff-row {
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1rem;border-radius:10px;border:1px solid;margin-bottom:1.1rem;
    transition:all .2s;
  }
  .chat-onoff-row.on  { background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.3); }
  .chat-onoff-row.off { background:#f8fafc;border-color:#e2e8f0; }
  .chat-onoff-label { font-size:.9rem;font-weight:700; }
  .chat-onoff-row.on  .chat-onoff-label { color:#16a34a; }
  .chat-onoff-row.off .chat-onoff-label { color:#94a3b8; }
  .toggle-switch { position:relative;width:40px;height:22px;flex-shrink:0; }
  .toggle-switch input { opacity:0;width:0;height:0; }
  .toggle-track {
    position:absolute;inset:0;border-radius:22px;cursor:pointer;transition:.2s;
    background:#cbd5e1;
  }
  .toggle-track:before {
    content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;
    background:#fff;border-radius:50%;transition:.2s;
  }
  .toggle-switch input:checked + .toggle-track { background:#16a34a; }
  .toggle-switch input:checked + .toggle-track:before { transform:translateX(18px); }

  .kw-chip { display:inline-block;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:.15rem .5rem;font-size:.72rem;margin:.1rem;color:#475569; }

  /* timing badge */
  .time-idle { font-size:.72rem;color:#94a3b8; }
  .time-idle.warn { color:#f59e0b;font-weight:600; }
  .time-idle.danger { color:#ef4444;font-weight:700; }
</style>
{% endblock %}

{% block cms_content %}

{% if tab == 'sessions' or not tab %}

<div class="cms-section-header">
  <h2>AI Chat {% if show_archive %}<span style="font-size:.6em;font-weight:400;color:var(--cms-muted)">— Archive</span>{% endif %}</h2>
  <div class="d-flex align-items-center gap-2">

    <form method="get" class="search-inline">
      <input type="hidden" name="tab" value="sessions">
      {% if show_archive %}<input type="hidden" name="archived" value="1">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8"></i>
      <input type="text" name="q" value="{{ search }}" placeholder="Name / email / IP">
      {% if search %}<a href="?tab=sessions{% if show_archive %}&archived=1{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem">&#x2715;</a>{% endif %}
    </form>

    {% if show_archive %}
      {% if closed_count %}
      <form method="post" action="{% url 'cms_chat_archive_closed' %}" onsubmit="return confirm('Permanently delete all {{ closed_count }} archived session(s)?')">
        {% csrf_token %}
        <input type="hidden" name="next_tab" value="sessions">
        <button type="submit" class="btn-cms-danger">
          <i class="fa-solid fa-trash me-1"></i>Delete all ({{ closed_count }})
        </button>
      </form>
      {% endif %}
      <a href="?tab=sessions" class="btn-cms-ghost">
        <i class="fa-solid fa-arrow-left me-1"></i>Back
      </a>
    {% else %}
      <a href="?tab=sessions&archived=1" class="btn-cms-ghost">
        <i class="fa-solid fa-box-archive me-1"></i>
        Archive
        {% if closed_count %}<span style="background:#94a3b8;color:#fff;font-size:.65rem;font-weight:700;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px">{{ closed_count }}</span>{% endif %}
      </a>
    {% endif %}

    <button type="button" onclick="openDrawer('drawer-ai')" class="btn-cms-ghost">
      <i class="fa-solid fa-sliders me-1"></i>Settings
    </button>

  </div>
</div>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table" style="margin:0">
    <thead>
      <tr>
        <th style="text-align:center">#</th>
        <th style="text-align:left">Subject</th>
        <th style="text-align:center">IP</th>
        <th style="text-align:center">Status</th>
        <th style="text-align:center">Messages</th>
        <th style="text-align:center">Last Active</th>
        <th style="text-align:center">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for s in sessions %}
      <tr {% if s.status == 'closed' %}style="opacity:.5"{% endif %}>
        <td style="color:var(--cms-muted);font-size:.78rem;font-weight:600;text-align:center">{{ forloop.counter }}</td>
        <td style="text-align:left">
          <div style="font-weight:600;font-size:.875rem;color:var(--cms-text)">{{ s.display_label }}</div>
          {% if s.visitor_name and s.topic %}<div style="font-size:.73rem;color:var(--cms-muted)">{{ s.topic }}</div>{% endif %}
          {% if s.visitor_email %}<div style="font-size:.75rem;color:var(--cms-muted)">{{ s.visitor_email }}</div>{% endif %}
        </td>
        <td style="text-align:center;font-size:.76rem;color:var(--cms-muted);white-space:nowrap">{{ s.visitor_ip|default:"—" }}</td>
        <td style="text-align:center">
          {% if s.status == 'active' %}<span class="badge-resolved">Active</span>
          {% elif s.status == 'handoff' %}<span style="display:inline-flex;align-items:center;gap:.3rem;background:rgba(37,211,102,.1);color:#16a34a;border:1px solid rgba(37,211,102,.3);border-radius:20px;padding:.2rem .65rem;font-size:.7rem;font-weight:700"><i class="fa-brands fa-whatsapp me-1"></i>Handoff</span>
          {% else %}<span class="badge-closed">Closed</span>{% endif %}
        </td>
        <td style="font-size:.83rem;color:var(--cms-muted);text-align:center">{{ s.messages.count }}</td>
        <td style="text-align:center">
          {% if s.last_msg_at %}
            <span class="time-idle" data-ts="{{ s.last_msg_at|date:'c' }}">{{ s.last_msg_at|short_ago }} ago</span>
          {% else %}
            <span class="time-idle">{{ s.created_at|short_ago }} ago</span>
          {% endif %}
        </td>
        <td style="white-space:nowrap;text-align:center">
          <a href="{% url 'cms_chat_session_detail' s.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e" title="View detail"><i class="fa-solid fa-eye"></i></a>
          {% if s.status != 'closed' %}
          <a href="{% url 'cms_chat_live' %}?session={{ s.pk }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#0891b2" title="Open in Live Chat"><i class="fa-solid fa-comment-dots"></i></a>
          <form method="post" action="{% url 'cms_chat_session_close' s.pk %}" style="display:inline" onsubmit="return confirm('Archive this session?')">
            {% csrf_token %}
            <input type="hidden" name="next_tab" value="sessions">
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#94a3b8" title="Archive"><i class="fa-solid fa-box-archive"></i></button>
          </form>
          {% endif %}
          <form method="post" action="{% url 'cms_chat_session_delete' s.pk %}" style="display:inline" onsubmit="return confirm('Permanently delete this session?')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-danger" style="padding:.3rem .6rem;font-size:.8rem"><i class="fa-solid fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" style="text-align:center;color:var(--cms-muted);padding:3rem">
          {% if show_archive %}No archived sessions.{% elif search %}No sessions match your search.{% else %}No active AI chat sessions.{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if sessions.has_other_pages %}
  <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid var(--cms-border);font-size:.8rem;color:var(--cms-muted)">
    <span>Page {{ sessions.number }} of {{ sessions.paginator.num_pages }} &mdash; {{ sessions.paginator.count }} sessions</span>
    <div style="display:flex;gap:.3rem">
      {% if sessions.has_previous %}
        <a href="?tab=sessions{% if show_archive %}&archived=1{% endif %}{% if search %}&q={{ search }}{% endif %}&page={{ sessions.previous_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-left"></i></a>
      {% endif %}
      {% for num in sessions.paginator.page_range %}
        {% if num == sessions.number %}
          <span style="padding:.3rem .65rem;background:#033152;color:#fff;border-radius:6px;font-size:.78rem;font-weight:600">{{ num }}</span>
        {% elif num >= sessions.number|add:'-2' and num <= sessions.number|add:'2' %}
          <a href="?tab=sessions{% if show_archive %}&archived=1{% endif %}{% if search %}&q={{ search }}{% endif %}&page={{ num }}" class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.78rem">{{ num }}</a>
        {% endif %}
      {% endfor %}
      {% if sessions.has_next %}
        <a href="?tab=sessions{% if show_archive %}&archived=1{% endif %}{% if search %}&q={{ search }}{% endif %}&page={{ sessions.next_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-right"></i></a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

<div class="settings-overlay" id="overlay-ai" onclick="closeDrawer('drawer-ai')"></div>
<div class="settings-drawer" id="drawer-ai">
  <div class="drawer-header">
    <h5><i class="fa-solid fa-robot me-2" style="color:var(--cms-accent)"></i>AI Chat Settings</h5>
    <button class="drawer-close" onclick="closeDrawer('drawer-ai')"><i class="fa-solid fa-xmark"></i></button>
  </div>
  <form method="post" action="{% url 'cms_chat' %}?tab=sessions" style="display:contents">
    {% csrf_token %}
    <input type="hidden" name="form_type" value="chat">
    <div class="drawer-body">

      <div class="chat-onoff-row {% if tenant.chat_enabled %}on{% else %}off{% endif %}" id="onoff-row">
        <div>
          <div class="chat-onoff-label" id="onoff-label">{% if tenant.chat_enabled %}Chat is ON{% else %}Chat is OFF{% endif %}</div>
          <div style="font-size:.75rem;color:#94a3b8;margin-top:.2rem">Chat bubble on your public site</div>
        </div>
        <label class="toggle-switch">
          <input type="checkbox" name="chat_enabled" id="chat_enabled" {% if tenant.chat_enabled %}checked{% endif %} onchange="updateOnOff(this)">
          <span class="toggle-track"></span>
        </label>
      </div>

      <hr class="drawer-divider">

      <div class="drawer-section-label">Greeting &amp; Personality</div>
      <div class="form-group">
        <label>Opening Greeting</label>
        <input type="text" name="chat_greeting" value="{{ tenant.chat_greeting|default:'Hi! How can I help you today?' }}" placeholder="Hi! How can I help you today?">
        <small>First message shown when the widget opens.</small>
      </div>
      <div class="form-group">
        <label>System Prompt</label>
        <textarea name="chat_system_prompt" rows="4" placeholder="You are a helpful assistant for {{ tenant.name }}...">{{ tenant.chat_system_prompt }}</textarea>
        <small>Describe the business, services, and tone. Leave blank for a generic assistant.</small>
      </div>

      <hr class="drawer-divider">

      <div class="drawer-section-label">Widget Colours</div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-bottom:.25rem">

        <div class="form-group" style="margin-bottom:0">
          <label>Header</label>
          <div style="display:flex;align-items:center;gap:.5rem">
            <input type="color" name="chat_header_bg" value="{{ tenant.chat_header_bg|default:'#033152' }}"
              style="width:36px;height:36px;padding:2px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;background:none">
            <span style="font-size:.72rem;color:#94a3b8" id="lbl-header-bg">{{ tenant.chat_header_bg|default:'#033152' }}</span>
          </div>
        </div>

        <div class="form-group" style="margin-bottom:0">
          <label>Buttons / You</label>
          <div style="display:flex;align-items:center;gap:.5rem">
            <input type="color" name="chat_accent_color" value="{{ tenant.chat_accent_color|default:tenant.accent_colour|default:'#e8b400' }}"
              style="width:36px;height:36px;padding:2px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;background:none">
            <span style="font-size:.72rem;color:#94a3b8" id="lbl-accent">{{ tenant.chat_accent_color|default:tenant.accent_colour|default:'#e8b400' }}</span>
          </div>
        </div>

        <div class="form-group" style="margin-bottom:0">
          <label>Bot Bubble</label>
          <div style="display:flex;align-items:center;gap:.5rem">
            <input type="color" name="chat_bot_bubble_bg" value="{{ tenant.chat_bot_bubble_bg|default:'#f0f4ff' }}"
              style="width:36px;height:36px;padding:2px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;background:none">
            <span style="font-size:.72rem;color:#94a3b8" id="lbl-bot-bubble">{{ tenant.chat_bot_bubble_bg|default:'#f0f4ff' }}</span>
          </div>
        </div>

      </div>

      <div id="chat-color-preview" style="margin:.75rem 0 0;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0;font-size:.8rem">
        <div id="prev-header" style="background:{{ tenant.chat_header_bg|default:'#033152' }};color:#fff;padding:.5rem .75rem;font-weight:600;display:flex;align-items:center;gap:.5rem">
          <span style="width:22px;height:22px;border-radius:50%;background:{{ tenant.chat_accent_color|default:tenant.accent_colour|default:'#e8b400' }};display:inline-block"></span>
          Assistant
        </div>
        <div style="background:#f8fafc;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.35rem">
          <div id="prev-bot" style="background:{{ tenant.chat_bot_bubble_bg|default:'#f0f4ff' }};border:1px solid rgba(0,0,0,.06);padding:.35rem .65rem;border-radius:8px;align-self:flex-start;max-width:80%">Hi! How can I help you?</div>
          <div id="prev-user" style="background:{{ tenant.chat_accent_color|default:tenant.accent_colour|default:'#e8b400' }};padding:.35rem .65rem;border-radius:8px;align-self:flex-end;max-width:80%">Great, thanks!</div>
        </div>
      </div>
      <small style="color:#94a3b8">Live preview — save to apply to the public widget.</small>

      <hr class="drawer-divider">

      <div class="drawer-section-label">Auto-close Inactive Sessions</div>
      <div class="form-group">
        <label>Inactivity timeout (minutes)</label>
        <input type="number" name="chat_inactivity_minutes" value="{{ tenant.chat_inactivity_minutes|default:30 }}" min="5" max="1440" style="width:120px">
        <small>Session is automatically closed after this many minutes of no messages.</small>
      </div>
      <div class="form-group">
        <label>Farewell message</label>
        <textarea name="chat_farewell_message" rows="3">{{ tenant.chat_farewell_message }}</textarea>
        <small>Sent by the bot before the session closes.</small>
      </div>
      <div class="form-group">
        <label>Daily token budget</label>
        <input type="number" name="chat_daily_token_budget" min="0" step="10000" value="{{ tenant.chat_daily_token_budget }}">
        <small>Caps what the chat can spend on OpenAI each day. Once reached, visitors are sent to the contact form until midnight. Set to 0 for no limit.</small>
      </div>

      <button type="button" onclick="closeInactive()" class="btn-cms-ghost w-100" style="text-align:center;display:block;color:#d9534f;border-color:#d9534f;margin-top:.5rem">
        <i class="fa-solid fa-clock me-1"></i>Close inactive now
      </button>

    </div>
    <div class="drawer-footer d-flex gap-2">
      <button type="submit" class="btn-cms" style="flex:1"><i class="fa-solid fa-floppy-disk me-1"></i>Save Settings</button>
      <button type="button" class="btn-cms-ghost" onclick="closeDrawer('drawer-ai')">Cancel</button>
    </div>
  </form>
</div>

{% elif tab == 'whatsapp' %}

<div class="cms-section-header">
  <h2>WA Chat {% if wa_show_archive %}<span style="font-size:.6em;font-weight:400;color:var(--cms-muted)">— Archive</span>{% endif %}</h2>
  <div class="d-flex align-items-center gap-2">

    {% if wa_show_archive %}
      {% if wa_closed_count %}
      <form method="post" action="{% url 'cms_chat_archive_closed' %}" onsubmit="return confirm('Permanently delete all {{ wa_closed_count }} archived WA session(s)?')">
        {% csrf_token %}
        <input type="hidden" name="wa_only" value="1">
        <input type="hidden" name="next_tab" value="whatsapp">
        <button type="submit" class="btn-cms-danger">
          <i class="fa-solid fa-trash me-1"></i>Delete all ({{ wa_closed_count }})
        </button>
      </form>
      {% endif %}
      <a href="?tab=whatsapp" class="btn-cms-ghost">
        <i class="fa-solid fa-arrow-left me-1"></i>Back
      </a>
    {% else %}
      <a href="?tab=whatsapp&wa_archived=1" class="btn-cms-ghost">
        <i class="fa-solid fa-box-archive me-1"></i>
        Archive
        {% if wa_closed_count %}<span style="background:#94a3b8;color:#fff;font-size:.65rem;font-weight:700;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px">{{ wa_closed_count }}</span>{% endif %}
      </a>
    {% endif %}

    <button type="button" onclick="openDrawer('drawer-wa')" class="btn-cms-ghost">
      <i class="fa-solid fa-sliders me-1"></i>Settings
    </button>

  </div>
</div>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table" style="margin:0">
    <thead>
      <tr>
        <th style="text-align:center">#</th>
        <th style="text-align:left">Subject</th>
        <th style="text-align:center">IP</th>
        <th style="text-align:center">Status</th>
        <th style="text-align:center">Messages</th>
        <th style="text-align:center">{% if wa_show_archive %}Closed{% else %}Last Active{% endif %}</th>
        <th style="text-align:center">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for s in wa_sessions %}
      <tr {% if s.status == 'closed' %}style="opacity:.5"{% endif %}>
        <td style="color:var(--cms-muted);font-size:.78rem;font-weight:600;text-align:center">{{ forloop.counter }}</td>
        <td style="text-align:left">
          <div style="font-weight:600;font-size:.875rem;color:var(--cms-text)">{{ s.display_label }}</div>
          <div style="font-size:.72rem;color:var(--cms-muted);font-family:monospace">{{ s.reference }}</div>
          {% if s.visitor_name and s.topic %}<div style="font-size:.73rem;color:var(--cms-muted)">{{ s.topic }}</div>{% endif %}
          {% if s.visitor_email %}<div style="font-size:.75rem;color:var(--cms-muted)">{{ s.visitor_email }}</div>{% endif %}
        </td>
        <td style="text-align:center;font-size:.76rem;color:var(--cms-muted);white-space:nowrap">{{ s.visitor_ip|default:"—" }}</td>
        <td style="text-align:center">
          {% if s.status == 'active' %}<span class="badge-resolved">Active</span>
          {% elif s.status == 'handoff' %}<span style="display:inline-flex;align-items:center;gap:.3rem;background:rgba(37,211,102,.1);color:#16a34a;border:1px solid rgba(37,211,102,.3);border-radius:20px;padding:.2rem .65rem;font-size:.7rem;font-weight:700"><i class="fa-brands fa-whatsapp me-1"></i>Handoff</span>
          {% else %}<span class="badge-closed">Closed</span>{% endif %}
        </td>
        <td style="font-size:.83rem;color:var(--cms-muted);text-align:center">{{ s.messages.count }}</td>
        <td style="text-align:center">
          <span class="time-idle" style="font-size:.78rem;color:var(--cms-muted)">{{ s.updated_at|short_ago }} ago</span>
        </td>
        <td style="white-space:nowrap;text-align:center">
          <a href="{% url 'cms_chat_session_detail' s.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e" title="View"><i class="fa-solid fa-eye"></i></a>
          {% if s.status != 'closed' %}
          <form method="post" action="{% url 'cms_chat_session_close' s.pk %}" style="display:inline" onsubmit="return confirm('Archive this WA session?')">
            {% csrf_token %}
            <input type="hidden" name="next_tab" value="whatsapp">
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#94a3b8" title="Archive"><i class="fa-solid fa-box-archive"></i></button>
          </form>
          {% endif %}
          <form method="post" action="{% url 'cms_chat_session_delete' s.pk %}" style="display:inline" onsubmit="return confirm('Permanently delete this WA session?')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-danger" style="padding:.3rem .6rem;font-size:.8rem"><i class="fa-solid fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" style="text-align:center;color:var(--cms-muted);padding:3rem">
          {% if wa_show_archive %}No archived WA sessions.{% else %}No active WhatsApp handoff sessions.{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if wa_sessions.has_other_pages %}
  <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid var(--cms-border);font-size:.8rem;color:var(--cms-muted)">
    <span>Page {{ wa_sessions.number }} of {{ wa_sessions.paginator.num_pages }} &mdash; {{ wa_sessions.paginator.count }} sessions</span>
    <div style="display:flex;gap:.3rem">
      {% if wa_sessions.has_previous %}
        <a href="?tab=whatsapp{% if wa_show_archive %}&wa_archived=1{% endif %}{% if wa_search %}&wa_q={{ wa_search }}{% endif %}&page={{ wa_sessions.previous_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-left"></i></a>
      {% endif %}
      {% for num in wa_sessions.paginator.page_range %}
        {% if num == wa_sessions.number %}
          <span style="padding:.3rem .65rem;background:#033152;color:#fff;border-radius:6px;font-size:.78rem;font-weight:600">{{ num }}</span>
        {% elif num >= wa_sessions.number|add:'-2' and num <= wa_sessions.number|add:'2' %}
          <a href="?tab=whatsapp{% if wa_show_archive %}&wa_archived=1{% endif %}{% if wa_search %}&wa_q={{ wa_search }}{% endif %}&page={{ num }}" class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.78rem">{{ num }}</a>
        {% endif %}
      {% endfor %}
      {% if wa_sessions.has_next %}
        <a href="?tab=whatsapp{% if wa_show_archive %}&wa_archived=1{% endif %}{% if wa_search %}&wa_q={{ wa_search }}{% endif %}&page={{ wa_sessions.next_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-right"></i></a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

<div class="settings-overlay" id="overlay-wa" onclick="closeDrawer('drawer-wa')"></div>
<div class="settings-drawer" id="drawer-wa">
  <div class="drawer-header">
    <h5><i class="fa-brands fa-whatsapp me-2" style="color:#25D366"></i>WhatsApp Settings</h5>
    <button class="drawer-close" onclick="closeDrawer('drawer-wa')"><i class="fa-solid fa-xmark"></i></button>
  </div>
  <form method="post" action="{% url 'cms_chat' %}?tab=whatsapp" style="display:contents">
    {% csrf_token %}
    <input type="hidden" name="form_type" value="whatsapp">
    <div class="drawer-body">
      <div class="chat-onoff-row {% if tenant.chat_whatsapp %}on{% else %}off{% endif %}">
        <div>
          <div class="chat-onoff-label">{% if tenant.chat_whatsapp %}WhatsApp is ON{% else %}WhatsApp is OFF{% endif %}</div>
          <div style="font-size:.75rem;color:#94a3b8;margin-top:.2rem">WhatsApp handoff on your public site</div>
        </div>
        <div style="font-size:.75rem;font-weight:600;color:{% if tenant.chat_whatsapp %}#16a34a{% else %}#94a3b8{% endif %}">
          {% if tenant.chat_whatsapp %}<i class="fa-brands fa-whatsapp me-1"></i>{{ tenant.chat_whatsapp }}{% else %}No number set{% endif %}
        </div>
      </div>
      <hr class="drawer-divider">
      <div class="drawer-section-label">Business Number</div>
      <div class="form-group">
        <label>WhatsApp Number</label>
        <input type="text" name="chat_whatsapp" value="{{ tenant.chat_whatsapp }}" placeholder="+447700000000">
        <small>Include country code. Leave blank to disable.</small>
      </div>
      <hr class="drawer-divider">
      <div class="drawer-section-label">Trigger Keywords</div>
      <div class="form-group">
        <label>Keywords (comma-separated)</label>
        <input type="text" name="chat_whatsapp_trigger" value="{{ tenant.chat_whatsapp_trigger }}" placeholder="sales,quote,pricing,buy">
        <small>When any keyword appears, the WhatsApp button is shown.</small>
      </div>
      {% if tenant.chat_whatsapp_trigger %}
      <div style="margin-top:.4rem">
        {% for kw in tenant.chat_whatsapp_trigger.split %}
        <span class="kw-chip">{{ kw }}</span>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    <div class="drawer-footer d-flex gap-2">
      <button type="submit" class="btn-cms" style="flex:1"><i class="fa-solid fa-floppy-disk me-1"></i>Save</button>
      <button type="button" class="btn-cms-ghost" onclick="closeDrawer('drawer-wa')">Cancel</button>
    </div>
  </form>
</div>

{% endif %}

<form id="form-close-inactive" method="post" action="{% url 'cms_chat_close_inactive' %}" style="display:none">
  {% csrf_token %}
</form>

<script>
function closeInactive() {
  if (confirm('Close all currently inactive sessions now?')) {
    document.getElementById('form-close-inactive').submit();
  }
}
function openDrawer(id) {
  var key = id.replace('drawer-', '');
  document.getElementById('overlay-' + key).classList.add('open');
  document.getElementById(id).classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeDrawer(id) {
  var key = id.replace('drawer-', '');
  document.getElementById('overlay-' + key).classList.remove('open');
  document.getElementById(id).classList.remove('open');
  document.body.style.overflow = '';
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.querySelectorAll('.settings-drawer.open').forEach(function(d) { closeDrawer(d.id); });
  }
});
// Live colour preview
document.querySelectorAll('input[name="chat_header_bg"], input[name="chat_accent_color"], input[name="chat_bot_bubble_bg"]').forEach(function(inp) {
  inp.addEventListener('input', function() {
    var v = this.value;
    var name = this.name;
    if (name === 'chat_header_bg') {
      document.getElementById('prev-header').style.background = v;
      document.getElementById('lbl-header-bg').textContent = v;
    } else if (name === 'chat_accent_color') {
      document.getElementById('prev-user').style.background = v;
      document.getElementById('prev-header').querySelector('span').style.background = v;
      document.getElementById('lbl-accent').textContent = v;
    } else if (name === 'chat_bot_bubble_bg') {
      document.getElementById('prev-bot').style.background = v;
      document.getElementById('lbl-bot-bubble').textContent = v;
    }
  });
});
function updateOnOff(cb) {
  var row = document.getElementById('onoff-row');
  var label = document.getElementById('onoff-label');
  if (cb.checked) {
    row.className = 'chat-onoff-row on';
    label.textContent = 'Chat is ON';
  } else {
    row.className = 'chat-onoff-row off';
    label.textContent = 'Chat is OFF';
  }
}
</script>
{% endblock %}