{% comment %}
AI Chat Widget — embed at bottom of public/base.html
Only renders when tenant.chat_enabled is True
{% endcomment %}
{% if tenant and tenant.chat_enabled %}
<style>
/* ── Chat Widget ─────────────────────────────────── */
:root {
  --chat-accent:     {{ tenant.chat_accent_color|default:tenant.accent_colour|default:"#e8b400" }};
  --chat-dark:       {{ tenant.chat_header_bg|default:"#033152" }};
  --chat-bg:         #ffffff;
  --chat-radius:     16px;
  --chat-bot-bubble: {{ tenant.chat_bot_bubble_bg|default:"#f0f4ff" }};
}

#ft-chat-widget {
  position: fixed;
  bottom: 125px;
  right: 24px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#ft-chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
#ft-chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.35); }
#ft-chat-toggle .ft-unread {
  position: absolute;
  top: 0; right: 0;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  display: none;
}

#ft-chat-box {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 360px;
  max-height: 520px;
  background: var(--chat-bg);
  border-radius: var(--chat-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  display: none;
  animation: ftSlideUp .25s ease;
}
@keyframes ftSlideUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Header */
.ft-chat-header {
  background: var(--chat-dark);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ft-chat-header-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--chat-dark);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.3);
}
.ft-chat-header-info { flex: 1; }
.ft-chat-header-name { font-weight: 600; font-size: .95rem; }
.ft-chat-header-status { font-size: .75rem; color: #4ade80; }
.ft-chat-close {
  background: none; border: none; color: #aaa;
  cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1;
}
.ft-chat-close:hover { color: #fff; }

/* Messages */
.ft-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8f8f8;
}
.ft-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}
.ft-msg-bot {
  background: #123050;
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ft-msg-user {
  background: #eb5152;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ft-msg-typing {
  background: var(--chat-bot-bubble);
  border: 1px solid rgba(0,0,0,.06);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  display: flex; gap: 4px; align-items: center; padding: 12px 16px;
}
.ft-msg-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #bbb; animation: ftBlink 1.2s infinite;
}
.ft-msg-typing span:nth-child(2) { animation-delay: .2s; }
.ft-msg-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ftBlink {
  0%,80%,100% { opacity:.3; } 40% { opacity:1; }
}

/* WhatsApp Handoff Banner */
.ft-handoff-banner {
  margin: 0 12px 8px;
  background: #25D366;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.ft-handoff-banner:hover { background: #1ebe59; color:#fff; }
.ft-handoff-banner i { font-size: 1.3rem; flex-shrink: 0; }

/* Input area */
.ft-chat-input {
  padding: 12px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 8px;
  background: #fff;
}
.ft-chat-input textarea {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .88rem;
  resize: none;
  outline: none;
  line-height: 1.4;
  max-height: 80px;
  font-family: inherit;
}
.ft-chat-input textarea:focus { border-color: var(--chat-accent); }
.ft-chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #000;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  transition: transform .15s;
}
.ft-chat-send:hover { transform: scale(1.1); }
.ft-chat-send:disabled { opacity: .5; cursor: default; transform: none; }

/* Powered by */
.ft-chat-powered {
  text-align: center;
  font-size: .7rem;
  color: #bbb;
  padding: 4px 0 8px;
  background: #fff;
}
.ft-chat-powered a { color: #bbb; text-decoration: none; }
.ft-chat-powered a:hover { color: #888; }

/* Quick reply chips */
.ft-quick-replies {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 4px 0 2px; align-self: flex-start; max-width: 100%;
}
.ft-quick-btn {
  background: #fff; border: 1.5px solid #033152;
  color: #033152; border-radius: 20px;
  padding: 5px 13px; font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.ft-quick-btn:hover { background: #033152; color: #fff; }

/* Mobile */
@media (max-width: 420px) {
  #ft-chat-box { width: calc(100vw - 32px); right: -8px; }
  #ft-chat-widget { bottom: 16px; right: 16px; }
}
</style>

<div id="ft-chat-widget">
  <div id="ft-chat-box">
    <div class="ft-chat-header">
      <div class="ft-chat-header-avatar">
        {% if tenant.logo %}
          <img src="{{ tenant.logo.url }}" alt="" style="width:75%;height:75%;object-fit:contain;">
        {% else %}
          <i class="fa-solid fa-robot"></i>
        {% endif %}
      </div>
      <div class="ft-chat-header-info">
        <div class="ft-chat-header-name">FT Assistant</div>
        <div class="ft-chat-header-status">&#9679; Online</div>
      </div>
      <button class="ft-chat-close" onclick="ftChat.close()" aria-label="Close chat">&times;</button>
    </div>
    <div class="ft-chat-messages" id="ft-chat-messages"></div>
    <div class="ft-handoff-banner" id="ft-handoff-banner" style="display:none;" target="_blank" rel="noopener">
      <i class="fa-brands fa-whatsapp"></i>
      <span>Continue on WhatsApp — tap to chat with our team directly</span>
    </div>
    <div class="ft-chat-input">
      <textarea
        id="ft-chat-textarea"
        placeholder="Type a message..."
        rows="1"
        onkeydown="ftChat.handleKey(event)"
      ></textarea>
      <button class="ft-chat-send" id="ft-chat-send" onclick="ftChat.send()" aria-label="Send">
        <i class="fa-solid fa-paper-plane"></i>
      </button>
    </div>
    <div class="ft-chat-powered">
      Powered by <a href="{{ site_url }}" target="_blank" rel="noopener">{{ company }}</a>
    </div>
  </div>

  <button id="ft-chat-toggle" onclick="ftChat.toggle()" aria-label="Open chat">
    <i class="fa-solid fa-comment-dots" id="ft-chat-icon"></i>
    <span class="ft-unread" id="ft-unread">1</span>
  </button>
</div>

<script>
const ftChat = (() => {
  const CHAT_START_URL   = '{% url "chat:start" %}';
  const CHAT_MESSAGE_URL = '{% url "chat:message" %}';
  const CHAT_HISTORY_URL = '{% url "chat:history" "00000000-0000-0000-0000-000000000000" %}'.replace('00000000-0000-0000-0000-000000000000/', '');
  const SESSION_KEY      = 'ft_chat_session_id';

  let sessionId   = sessionStorage.getItem(SESSION_KEY) || null;
  let isOpen      = false;
  let isSending   = false;
  let whatsappUrl = null;
  let historyLoaded = false;

  const box       = document.getElementById('ft-chat-box');
  const msgs      = document.getElementById('ft-chat-messages');
  const textarea  = document.getElementById('ft-chat-textarea');
  const sendBtn   = document.getElementById('ft-chat-send');
  const unread    = document.getElementById('ft-unread');
  const toggleBtn = document.getElementById('ft-chat-toggle');
  const icon      = document.getElementById('ft-chat-icon');
  const handoff   = document.getElementById('ft-handoff-banner');

  function open() {
    box.style.display = 'flex';
    isOpen = true;
    unread.style.display = 'none';
    icon.className = 'fa-solid fa-xmark';
    textarea.focus();
    if (sessionId && !historyLoaded) {
      loadHistory(sessionId);
    } else if (!sessionId) {
      startSession();
    }
  }

  function close() {
    box.style.display = 'none';
    isOpen = false;
    icon.className = 'fa-solid fa-comment-dots';
  }

  function toggle() { isOpen ? close() : open(); }

  function scrollBottom() {
    msgs.scrollTop = msgs.scrollHeight;
  }

  function renderContent(text) {
    // Escape HTML first to prevent XSS
    const escaped = text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
    // Convert markdown links [text](url) → clickable <a> tags
    const linked = escaped.replace(
      /\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g,
      '<a href="$2" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;opacity:.9">$1</a>'
    );
    // Newlines → <br>
    return linked.replace(/\n/g, '<br>');
  }

  function appendMsg(role, content) {
    const div = document.createElement('div');
    div.className = role === 'user' ? 'ft-msg ft-msg-user' : 'ft-msg ft-msg-bot';
    div.innerHTML = renderContent(content);
    msgs.appendChild(div);
    scrollBottom();
    return div;
  }

  // Keep these in step with QUICK_REPLY_TOPICS in apps/chat/models.py,
  // which maps each message back to the label for the CMS Subject column.
  const QUICK_REPLIES = [
    { label: '🌐 Premium Domains',        msg: 'I\'m interested in your premium domains.' },
    { label: '💼 Web Design',             msg: 'I\'d like to discuss a web design project.' },
    { label: '📱 App Design',             msg: 'I\'m looking for app design services.' },
    { label: '🚀 Startup Solutions',      msg: 'I\'d like to hear about your startup solutions.' },
    { label: '📈 Digital Marketing',      msg: 'I\'m interested in digital marketing.' },
    { label: '🔍 SEO & SEM',              msg: 'I\'d like to talk about seo and sem.' },
    { label: '🛒 Ecommerce Store',        msg: 'I want to build an ecommerce store.' },
    { label: '🖥️ Hosting & Support',      msg: 'I have a question about hosting and maintenance.' },
    { label: '🛠️ Technical Consultation', msg: 'I need a technical consultation.' },
    { label: '💬 Other',                  msg: 'I need help with something else.' },
  ];

  function showQuickReplies() {
    const wrap = document.createElement('div');
    wrap.className = 'ft-quick-replies';
    wrap.id = 'ft-quick-replies';
    QUICK_REPLIES.forEach(function(qr) {
      const btn = document.createElement('button');
      btn.className = 'ft-quick-btn';
      btn.textContent = qr.label;
      btn.onclick = function() {
        document.getElementById('ft-quick-replies')?.remove();
        textarea.value = qr.msg;
        ftChat.send();
      };
      wrap.appendChild(btn);
    });
    msgs.appendChild(wrap);
    scrollBottom();
  }

  function showTyping() {
    const t = document.createElement('div');
    t.className = 'ft-msg-typing';
    t.id = 'ft-typing';
    t.innerHTML = '<span></span><span></span><span></span>';
    msgs.appendChild(t);
    scrollBottom();
  }

  function hideTyping() {
    const t = document.getElementById('ft-typing');
    if (t) t.remove();
  }

  async function startSession() {
    try {
      const res = await fetch(CHAT_START_URL, {
        method: 'POST',
        headers: { 'X-CSRFToken': getCsrf() },
      });
      const data = await res.json();
      if (data.session_id) {
        sessionId = data.session_id;
        sessionStorage.setItem(SESSION_KEY, sessionId);
        historyLoaded = true;
        // Load history so we get the greeting's pk and set lastKnownPk correctly.
        // This prevents the poll loop from duplicating the greeting
        // and ensures CMS agent replies are picked up immediately.
        try {
          const hr = await fetch(CHAT_HISTORY_URL + sessionId + '/');
          if (hr.ok) {
            const hd = await hr.json();
            if (hd.messages && hd.messages.length) {
              hd.messages.forEach(function(m) {
                appendMsg(m.role === 'user' ? 'user' : 'bot', m.content);
                if (m.pk && m.pk > lastKnownPk) lastKnownPk = m.pk;
              });
            } else {
              appendMsg('bot', data.greeting);
            }
            // Show chips if no user message exists yet
            if (!hd.messages || !hd.messages.some(function(m){ return m.role === 'user'; })) {
              showQuickReplies();
            }
          } else {
            appendMsg('bot', data.greeting);
            showQuickReplies();
          }
        } catch(e) {
          appendMsg('bot', data.greeting);
          showQuickReplies();
        }
      }
    } catch (e) {
      appendMsg('bot', 'Sorry, chat is temporarily unavailable.');
    }
  }

  async function loadHistory(sid) {
    historyLoaded = true;
    try {
      const res = await fetch(CHAT_HISTORY_URL + sid + '/');
      if (!res.ok) {
        // Session expired or not found — start fresh
        sessionStorage.removeItem(SESSION_KEY);
        sessionId = null;
        historyLoaded = false;
        startSession();
        return;
      }
      const data = await res.json();
      // If session was closed/archived, discard it and start a new one
      if (data.session_status === 'closed') {
        sessionStorage.removeItem(SESSION_KEY);
        sessionId = null;
        historyLoaded = false;
        startSession();
        return;
      }
      if (data.messages && data.messages.length) {
        data.messages.forEach(function (m) {
          appendMsg(m.role === 'user' ? 'user' : 'bot', m.content);
          if (m.pk && m.pk > lastKnownPk) lastKnownPk = m.pk;
        });
        // Restore handoff banner if it was triggered
        if (data.handoff && data.handoff.triggered && data.handoff.url) {
          whatsappUrl = data.handoff.url;
          handoff.style.display = 'flex';
          handoff.onclick = () => window.open(whatsappUrl, '_blank', 'noopener');
        }
      } else {
        // No messages yet — just show greeting
        appendMsg('bot', '{{ tenant.chat_greeting|default:"Hi! How can I help you today?"|escapejs }}');
      }
      // Show chips if no user message exists yet
      if (!data.messages || !data.messages.some(function(m){ return m.role === 'user'; })) {
        showQuickReplies();
      }
    } catch (e) {
      startSession();
    }
  }

  async function send() {
    if (isSending || !sessionId) return;
    const text = textarea.value.trim();
    if (!text) return;

    textarea.value = '';
    textarea.style.height = 'auto';
    appendMsg('user', text);
    isSending = true;
    sendBtn.disabled = true;
    showTyping();

    try {
      const res = await fetch(CHAT_MESSAGE_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': getCsrf(),
        },
        body: JSON.stringify({ session_id: sessionId, message: text }),
      });

      const data = await res.json();
      hideTyping();

      if (data.reply) {
        const msgEl = appendMsg('bot', data.reply);
        // Track the pk if returned so poll doesn't re-show it
        if (data.msg_pk && data.msg_pk > lastKnownPk) lastKnownPk = data.msg_pk;
      }

      // WhatsApp handoff
      if (data.handoff && data.handoff.triggered && data.handoff.url) {
        whatsappUrl = data.handoff.url;
        handoff.style.display = 'flex';
        handoff.onclick = () => window.open(whatsappUrl, '_blank', 'noopener');
      }

    } catch (e) {
      hideTyping();
      appendMsg('bot', 'Sorry, something went wrong. Please try again.');
    }

    isSending = false;
    sendBtn.disabled = false;
    textarea.focus();
  }

  function handleKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      send();
    }
    // Auto-grow textarea
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 80) + 'px';
  }

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

  // Show unread dot after 3s if widget not opened
  setTimeout(() => {
    if (!isOpen) {
      unread.style.display = 'flex';
    }
  }, 3000);

  // ── Poll for new CMS-agent messages every 4 seconds ───────
  let lastKnownPk = 0;
  setInterval(async () => {
    if (!sessionId) return;
    try {
      const url = CHAT_HISTORY_URL + sessionId + '/?after=' + lastKnownPk;
      const res = await fetch(url);
      if (!res.ok) return;
      const data = await res.json();
      (data.messages || []).forEach(m => {
        if (m.pk > lastKnownPk) {
          lastKnownPk = m.pk;
          // Only append assistant messages (visitor's own are already shown)
          if (m.role === 'assistant') {
            appendMsg('bot', m.content);
            if (!isOpen) {
              unread.style.display = 'flex';
            }
          }
        }
      });
      if (data.session_status === 'closed') {
        const ta = document.getElementById('ft-chat-textarea');
        const sb = document.getElementById('ft-chat-send');
        if (ta) ta.disabled = true;
        if (sb) sb.disabled = true;
      }
    } catch(e) {}
  }, 2000);

  return { open, close, toggle, send, handleKey };
})();
</script>
{% endif %}