{% extends "cms/base.html" %}
{% block title %}Live Chat{% endblock %}
{% block page_title %}Live Chat{% endblock %}

{% block extra_head %}
<style>
/* Live chat — main brand colour for left panel */
.livechat-wrap { --lc-blue: #033152; --lc-blue-light: #e8eff6; }

.livechat-wrap {
  display: flex;
  height: calc(100vh - 7.5rem);   /* content padding + section header + margin */
  min-height: 420px;              /* stops the panel collapsing on short screens */
  background: var(--cms-card);
  border: 1px solid var(--cms-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

/* ── LEFT PANEL ─────────────────────────────────────────── */
.lc-left {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--cms-border);
  display: flex;
  flex-direction: column;
  background: var(--cms-bg);
}
.lc-left-hdr {
  padding: .9rem 1.1rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lc-blue);
}
.lc-left-hdr h5 { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; }
.lc-badge {
  font-size: .65rem; font-weight: 700;
  background: rgba(255,255,255,.2); color: #fff;
  border-radius: 20px; padding: .1rem .45rem;
}
.lc-search-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--cms-border);
  background: var(--cms-bg);
}
.lc-search-row input {
  border: none; outline: none; font-size: .83rem;
  flex: 1; color: var(--cms-text); background: transparent;
}
.lc-section-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #94a3b8;
  padding: .65rem 1.1rem .35rem;
}
.lc-sessions { flex: 1; overflow-y: auto; }
.lc-empty-list {
  text-align: center; padding: 2.5rem 1rem;
  color: #94a3b8; font-size: .83rem;
}
.lc-empty-list i { display: block; font-size: 2rem; margin-bottom: .5rem; opacity: .35; }

.lc-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.1rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s;
  position: relative;
}
.lc-item:hover { background: rgba(0,0,0,.04); }
.lc-item.active {
  background: var(--lc-blue-light);
  border-left-color: var(--lc-blue);
}
.lc-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff;
  flex-shrink: 0; position: relative;
}
.lc-av-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}
.lc-item-info { flex: 1; min-width: 0; }
.lc-item-topic { font-size:.72rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lc-item-name {
  font-size: .84rem; font-weight: 700; color: #033152;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-item-preview {
  font-size: .73rem; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: .1rem; font-weight: 500;
}
.lc-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex-shrink: 0; }
.lc-item-time { font-size: .67rem; color: #94a3b8; }
.lc-unread {
  background: var(--lc-blue); color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ── RIGHT PANEL ────────────────────────────────────────── */
.lc-right {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.lc-no-session {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #94a3b8; gap: .65rem;
}
.lc-no-session i { font-size: 3.5rem; opacity: .2; }
.lc-no-session p { font-size: .875rem; font-weight: 600; color: #64748b; margin: 0; }
.lc-no-session small { font-size: .78rem; }

.lc-chat-view {
  display: none; flex: 1; flex-direction: column; min-height: 0;
}
.lc-chat-view.visible { display: flex; }

.lc-chat-hdr {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1.3rem;
  border-bottom: 1px solid var(--cms-border);
  background: var(--cms-card); flex-shrink: 0;
}
.lc-chat-hdr .lc-av { width: 36px; height: 36px; font-size: .72rem; }
.lc-chat-hdr-name { font-size: .9rem; font-weight: 700; color: var(--cms-text); }
.lc-chat-hdr-status { font-size: .72rem; color: #22c55e; }
.lc-chat-hdr-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.lc-action-btn {
  background: none; border: 1px solid var(--cms-border); border-radius: 7px;
  padding: .3rem .6rem; cursor: pointer; color: #64748b; font-size: .82rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
  transition: all .12s; line-height: 1.4;
}
.lc-action-btn:hover { background: var(--cms-bg); color: var(--cms-text); border-color: var(--cms-border); }
.lc-action-btn.danger:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }

.lc-msgs {
  flex: 1; overflow-y: auto;
  padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: #fff;
}
.lc-bubble-wrap { display: flex; gap: .4rem; align-items: flex-end; }
.lc-bubble-wrap.agent-msg { flex-direction: row-reverse; }

.lc-bubble {
  max-width: 60%; padding: .6rem .9rem;
  border-radius: 14px; font-size: .87rem;
  line-height: 1.5; word-break: break-word;
}
.lc-bubble.visitor-b {
  background: #374151; border: none;
  border-bottom-left-radius: 4px; color: #fff;
}
.lc-bubble.agent-b {
  background: var(--lc-blue); color: #fff;
  border-bottom-right-radius: 4px;
}
.lc-bubble-time {
  font-size: .63rem; color: #94a3b8; margin-top: .1rem;
  flex-shrink: 0; align-self: flex-end; padding-bottom: 2px;
}

.lc-typing-wrap { display: flex; align-items: center; gap: .35rem; padding: .2rem 0; }
.lc-typing-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #94a3b8; animation: lcBlink 1.2s infinite;
  margin: 0 1px;
}
.lc-typing-dots span:nth-child(2) { animation-delay: .2s; }
.lc-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes lcBlink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

.lc-closed-notice {
  padding: .55rem 1.3rem; background: #fef2f2;
  border-top: 1px solid #fecaca;
  font-size: .78rem; color: #dc2626; text-align: center;
}

.lc-input-row {
  display: flex; align-items: flex-end; gap: .65rem;
  padding: .75rem 1.3rem;
  border-top: 1px solid var(--cms-border); background: var(--cms-card); flex-shrink: 0;
}
.lc-input-row textarea {
  flex: 1; border: 1px solid var(--cms-border); border-radius: 10px;
  padding: .6rem .9rem; font-size: .875rem; resize: none;
  outline: none; font-family: inherit; max-height: 120px;
  line-height: 1.4; transition: border .15s; color: var(--cms-text); background: var(--cms-card);
}
.lc-input-row textarea:focus { border-color: #033152; }
.lc-send {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--lc-blue); color: #fff; border: none;
  cursor: pointer; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .12s, opacity .12s;
}
.lc-send:hover { transform: scale(1.08); }
.lc-send:disabled { opacity: .45; cursor: default; transform: none; }

/* Date divider */
.lc-date-divider {
  display: flex; align-items: center; gap: .75rem;
  color: #94a3b8; font-size: .68rem; margin: .25rem 0;
}
.lc-date-divider::before, .lc-date-divider::after {
  content: ''; flex: 1; border-top: 1px solid var(--cms-border);
}
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>Live Chat <span id="page-count-badge" style="font-size:.75em;font-weight:400;color:var(--cms-muted)"></span></h2>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_chat_sessions' %}" class="btn-cms-ghost"><i class="fa-solid fa-clock-rotate-left me-1"></i>History</a>
    <a href="{% url 'cms_chat' %}?tab=sessions" class="btn-cms-ghost"><i class="fa-solid fa-sliders me-1"></i>Settings</a>
  </div>
</div>

<div class="livechat-wrap">

  <div class="lc-left">
    <div class="lc-left-hdr">
      <h5><i class="fa-solid fa-circle-dot me-2" style="opacity:.85;color:#4ade80"></i>Active Sessions</h5>
      <span class="lc-badge" id="lc-count-badge">0</span>
    </div>
    <div class="lc-sessions" id="lc-session-list">
      <div class="lc-empty-list" id="lc-empty-notice">
        <i class="fa-solid fa-inbox"></i>
        No active sessions right now
      </div>
    </div>
  </div>

  <div class="lc-right">

    <div class="lc-no-session" id="lc-no-session">
      <i class="fa-solid fa-comment-dots"></i>
      <p>Select a conversation</p>
      <small>Pick a session from the left to start chatting</small>
    </div>

    <div class="lc-chat-view" id="lc-chat-view">

      <div class="lc-chat-hdr">
        <div class="lc-av" id="lc-hdr-av">?</div>
        <div>
          <div class="lc-chat-hdr-name" id="lc-hdr-name">Visitor</div>
          <div class="lc-chat-hdr-status" id="lc-hdr-status">● Active</div>
        </div>
        <div class="lc-chat-hdr-actions">
          <a href="#" id="lc-detail-link" class="lc-action-btn" title="Full session detail" target="_blank">
            <i class="fa-solid fa-up-right-from-square"></i> Detail
          </a>
          <button class="lc-action-btn danger" onclick="lcArchive()" title="Archive session">
            <i class="fa-solid fa-box-archive"></i> Archive
          </button>
        </div>
      </div>

      <div class="lc-msgs" id="lc-msgs"></div>

      <div class="lc-closed-notice" id="lc-closed-notice" style="display:none">
        This session is closed — you can no longer reply.
      </div>

      <div class="lc-input-row" id="lc-input-row">
        <textarea id="lc-ta" placeholder="Type a reply... (Enter to send, Shift+Enter for new line)" rows="1"
          onkeydown="lcKey(event)" oninput="lcGrow(this)"></textarea>
        <button class="lc-send" id="lc-send-btn" onclick="lcSend()">
          <i class="fa-solid fa-paper-plane"></i>
        </button>
      </div>

    </div>
  </div>
</div>


<script>
(function() {
  const SESSIONS_URL = '{% url "cms_chat_live_sessions_json" %}';
  const MSGS_URL     = pk => `/cms/chat/sessions/${pk}/messages.json`;
  const REPLY_URL    = pk => `/cms/chat/sessions/${pk}/reply/`;
  const CLOSE_URL    = pk => `/cms/chat/sessions/${pk}/close/`;
  const DETAIL_URL   = pk => `/cms/chat/sessions/${pk}/`;

  function csrf() {
    const c = document.cookie.split(';').find(x => x.trim().startsWith('csrftoken='));
    return c ? c.split('=')[1] : '';
  }

  // ── State ──────────────────────────────────────────────
  let sessions     = [];
  let activePk     = null;
  let lastMsgPk    = 0;
  let isSending    = false;
  let searchQ      = '';
  let unreadCounts = {};   // pk → count
  let prevMsgCounts= {};   // pk → msg_count (for detecting new messages)
  let msgPollTimer = null;
  let sessPollTimer= null;

  // ── Session list ───────────────────────────────────────
  async function pollSessions() {
    try {
      const r = await fetch(SESSIONS_URL);
      const d = await r.json();
      const incoming = d.sessions || [];

      // Detect new messages in non-active sessions
      incoming.forEach(s => {
        if (s.pk !== activePk) {
          const prev = prevMsgCounts[s.pk];
          if (prev !== undefined && s.msg_count > prev) {
            unreadCounts[s.pk] = (unreadCounts[s.pk] || 0) + (s.msg_count - prev);
          }
        } else {
          unreadCounts[s.pk] = 0;
        }
        prevMsgCounts[s.pk] = s.msg_count;
      });

      sessions = incoming;
      renderList();
    } catch(e) {}
  }

  function renderList() {
    const list   = document.getElementById('lc-session-list');
    const empty  = document.getElementById('lc-empty-notice');
    const badge  = document.getElementById('lc-count-badge');

    list.querySelectorAll('.lc-item').forEach(el => el.remove());

    let filtered = sessions;
    if (searchQ) {
      const q = searchQ.toLowerCase();
      filtered = sessions.filter(s =>
        (s.visitor_name||'').toLowerCase().includes(q) ||
        (s.topic||'').toLowerCase().includes(q) ||
        (s.visitor_email||'').toLowerCase().includes(q)
      );
    }

    badge.textContent = sessions.length;
    const pageBadge = document.getElementById('page-count-badge');
    if (pageBadge) pageBadge.textContent = sessions.length ? `(${sessions.length})` : '';
    empty.style.display = filtered.length ? 'none' : 'block';

    filtered.forEach(s => {
      const initials = avatarInitials(s.visitor_name);
      const color    = avatarColor(s.visitor_name, s.pk);
      const time     = timeAgo(s.last_msg_at);
      const u        = unreadCounts[s.pk] || 0;
      const preview  = s.last_msg_preview || 'No messages yet';
      const roleHint = s.last_msg_role === 'assistant' ? '↩ ' : '';

      const el = document.createElement('div');
      el.className = 'lc-item' + (s.pk === activePk ? ' active' : '');
      el.dataset.pk = s.pk;
      el.onclick = () => selectSession(s.pk);
      el.innerHTML = `
        <div class="lc-av" style="background:${color}">
          ${esc(initials)}<span class="lc-av-dot"></span>
        </div>
        <div class="lc-item-info">
          <div class="lc-item-name">${esc(s.visitor_name)}</div>
          ${s.is_named && s.topic ? `<div class="lc-item-topic">${esc(s.topic)}</div>` : ''}
          <div class="lc-item-preview">${roleHint}${esc(preview)}</div>
        </div>
        <div class="lc-item-meta">
          <span class="lc-item-time">${time}</span>
          ${u > 0 ? `<span class="lc-unread">${u}</span>` : ''}
        </div>
      `;
      list.appendChild(el);
    });
  }

  // ── Select session ─────────────────────────────────────
  function selectSession(pk) {
    activePk  = pk;
    lastMsgPk = 0;
    unreadCounts[pk] = 0;

    const url = new URL(window.location);
    url.searchParams.set('session', pk);
    history.pushState({}, '', url);

    document.getElementById('lc-no-session').style.display  = 'none';
    document.getElementById('lc-chat-view').classList.add('visible');
    document.getElementById('lc-msgs').innerHTML = '';
    document.getElementById('lc-detail-link').href = DETAIL_URL(pk);

    renderList();
    stopMsgPoll();
    loadMessages(true);
    msgPollTimer = setInterval(() => loadMessages(false), 3000);
    document.getElementById('lc-ta').focus();
  }

  // ── Messages ───────────────────────────────────────────
  async function loadMessages(initial) {
    if (!activePk) return;
    try {
      const after = initial ? 0 : lastMsgPk;
      const r = await fetch(MSGS_URL(activePk) + (after ? `?after=${after}` : ''));
      const d = await r.json();

      // Update header
      const name = d.visitor_name || 'Anonymous';
      const initials = avatarInitials(name);
      const color    = avatarColor(name, activePk);
      document.getElementById('lc-hdr-name').textContent = name;
      document.getElementById('lc-hdr-av').innerHTML = esc(initials) + '<span class="lc-av-dot"></span>';
      document.getElementById('lc-hdr-av').style.background = color;

      // Status
      const closed = d.session_status === 'closed';
      document.getElementById('lc-hdr-status').textContent = closed ? '● Closed' : '● Active';
      document.getElementById('lc-hdr-status').style.color = closed ? '#94a3b8' : '#22c55e';
      document.getElementById('lc-closed-notice').style.display = closed ? 'block' : 'none';
      document.getElementById('lc-input-row').style.display    = closed ? 'none' : 'flex';

      // Append messages
      const msgsEl = document.getElementById('lc-msgs');
      const msgs = d.messages || [];
      let scrolled = false;

      msgs.forEach(m => {
        if (m.pk > lastMsgPk) {
          lastMsgPk = m.pk;
          msgsEl.appendChild(buildBubble(m));
          scrolled = true;
        }
      });

      if (initial || scrolled) {
        msgsEl.scrollTop = msgsEl.scrollHeight;
      }
    } catch(e) {}
  }

  function buildBubble(m) {
    const isAgent = m.role === 'assistant';
    const time    = new Date(m.created_at).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
    const wrap    = document.createElement('div');
    wrap.className = 'lc-bubble-wrap' + (isAgent ? ' agent-msg' : '');
    wrap.innerHTML = `
      <div class="lc-bubble ${isAgent ? 'agent-b' : 'visitor-b'}">${esc(m.content).replace(/\n/g,'<br>')}</div>
      <div class="lc-bubble-time">${time}</div>
    `;
    return wrap;
  }

  // ── Send ───────────────────────────────────────────────
  async function send() {
    if (isSending || !activePk) return;
    const ta   = document.getElementById('lc-ta');
    const text = ta.value.trim();
    if (!text) return;

    isSending = true;
    document.getElementById('lc-send-btn').disabled = true;
    ta.value = '';
    ta.style.height = 'auto';

    try {
      const r = await fetch(REPLY_URL(activePk), {
        method: 'POST',
        headers: {'Content-Type':'application/json','X-CSRFToken':csrf()},
        body: JSON.stringify({message: text}),
      });
      const d = await r.json();
      if (d.ok) {
        const el = buildBubble({pk: d.pk, role: 'assistant', content: d.content, created_at: d.created_at});
        document.getElementById('lc-msgs').appendChild(el);
        if (d.pk > lastMsgPk) lastMsgPk = d.pk;
        document.getElementById('lc-msgs').scrollTop = 99999;
        // Update preview in list
        const s = sessions.find(x => x.pk === activePk);
        if (s) { s.last_msg_preview = text.slice(0, 70); s.last_msg_role = 'assistant'; }
        renderList();
      }
    } catch(e) {}

    isSending = false;
    document.getElementById('lc-send-btn').disabled = false;
    ta.focus();
  }

  // ── Archive session ────────────────────────────────────
  async function archive() {
    if (!activePk) return;
    if (!confirm('Archive this session? It will move to the archive view.')) return;
    const fd = new FormData();
    fd.append('next_tab', 'sessions');
    fd.append('csrfmiddlewaretoken', csrf());
    try {
      await fetch(CLOSE_URL(activePk), {method: 'POST', body: fd});
    } catch(e) {}
    sessions = sessions.filter(s => s.pk !== activePk);
    activePk = null;
    stopMsgPoll();
    document.getElementById('lc-chat-view').classList.remove('visible');
    document.getElementById('lc-no-session').style.display = 'flex';
    renderList();
  }

  function stopMsgPoll() {
    if (msgPollTimer) { clearInterval(msgPollTimer); msgPollTimer = null; }
  }

  // ── Helpers ────────────────────────────────────────────
  function esc(s) {
    return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
  function timeAgo(iso) {
    if (!iso) return '';
    const d = Math.floor((Date.now() - new Date(iso)) / 1000);
    if (d < 60) return 'now';
    if (d < 3600) return Math.floor(d/60) + 'm';
    if (d < 86400) return Math.floor(d/3600) + 'h';
    return Math.floor(d/86400) + 'd';
  }
  const AV_COLORS = [
    '#0891b2','#7c3aed','#be185d','#b45309','#15803d',
    '#0e7490','#9333ea','#dc2626','#0284c7','#16a34a','#d97706',
    '#c026d3','#0f766e','#4f46e5','#b91c1c','#7e22ce','#0369a1',
    '#166534','#92400e','#86198f','#155e75','#3730a3','#9f1239',
    '#1d4ed8','#047857','#a21caf','#0c4a6e','#14532d','#b45309',
  ];
  /* Color by session PK so every "Anonymous" gets its own colour */
  function avatarColor(name, pk) { return AV_COLORS[(pk || 0) % AV_COLORS.length]; }
  function avatarInitials(name) {
    return (name||'A').split(' ').map(w=>w[0]).join('').toUpperCase().slice(0,2);
  }

  // ── Keyboard / textarea ───────────────────────────────
  window.lcKey  = e => { if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); send(); } };
  window.lcGrow = el => { el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,120)+'px'; };
  window.lcFilter = q => { searchQ = q; renderList(); };
  window.lcSend = send;
  window.lcArchive = archive;

  // ── Boot ───────────────────────────────────────────────
  pollSessions();
  sessPollTimer = setInterval(pollSessions, 4000);

  // Pre-select from URL
  const presel = new URLSearchParams(window.location.search).get('session');
  if (presel) setTimeout(() => selectSession(parseInt(presel)), 300);
})();
</script>
{% endblock %}