{% extends "base.html" %}
{% block title %}Support Chat{% endblock %}

{% block extra_css %}
<style>
  #chat-window {
    height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: #f8f9fa;
  }
  .msg-bubble {
    max-width: 80%;
    padding: .6rem .9rem;
    border-radius: 1rem;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .msg-user   { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; align-self:flex-end; }
  .msg-ai     { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; align-self:flex-start; }
  .msg-system { background:#fff3cd; border:1px solid #ffc107; border-radius:.5rem; align-self:center;
                font-size:.8rem; text-align:center; padding:.4rem .8rem; color:#664d03; }
  .typing-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
                background:#adb5bd; margin:0 2px; animation:blink 1.2s infinite; }
  .typing-dot:nth-child(2) { animation-delay:.2s; }
  .typing-dot:nth-child(3) { animation-delay:.4s; }
  @keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
  .faq-btn { font-size:.82rem; }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">

    {# ── Header ── #}
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h4 class="mb-0"><i class="bi bi-chat-dots me-2 text-primary"></i>JQC Support Chat</h4>
        <small class="text-muted">Ask a question or browse common topics below</small>
      </div>
      <button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#submitModal">
        <i class="bi bi-envelope me-1"></i>Submit to Support
      </button>
    </div>

    {# ── Chat card ── #}
    <div class="card shadow-sm">
      {# Message window #}
      <div id="chat-window"></div>

      {# FAQ quick-reply chips #}
      <div id="faq-section" class="px-3 pt-2 pb-1 border-top bg-white">
        <p class="small text-muted mb-2"><i class="bi bi-lightning-charge me-1"></i>Common questions:</p>
        <div class="d-flex flex-wrap gap-2 mb-2">
          {% for faq in faqs %}
          <button class="btn btn-outline-secondary btn-sm faq-btn"
                  data-faq="{{ faq.text | e }}"
                  onclick="sendFaq(this)">
            <i class="{{ faq.icon }} me-1"></i>{{ faq.text }}
          </button>
          {% endfor %}
        </div>
      </div>

      {# Input row #}
      <div class="p-3 border-top bg-white">
        <div class="input-group">
          <input id="chat-input" type="text" class="form-control"
                 placeholder="Type your question…" maxlength="500"
                 {% if not groq_ready %}disabled title="AI assistant not configured"{% endif %}>
          <button id="send-btn" class="btn btn-primary" onclick="sendUserMessage()"
                  {% if not groq_ready %}disabled{% endif %}>
            <i class="bi bi-send"></i>
          </button>
        </div>
        {% if not groq_ready %}
        <div class="text-muted small mt-1">
          <i class="bi bi-info-circle me-1"></i>
          AI assistant is not configured. Please
          <a href="#" data-bs-toggle="modal" data-bs-target="#submitModal">submit a request</a>
          to reach our team.
        </div>
        {% endif %}
      </div>
    </div>

    <p class="text-muted small mt-2 text-center">
      Can't find what you need?
      <a href="#" data-bs-toggle="modal" data-bs-target="#submitModal">Submit a support request</a>
      and our team will respond by email.
    </p>

  </div>
</div>

{# ── Submit to Support modal ── #}
<div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="submitModalLabel">
          <i class="bi bi-envelope me-2"></i>Submit Support Request
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="{{ url_for('support.submit_ticket') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
            <input type="text" name="subject" class="form-control" required maxlength="200"
                   placeholder="Briefly describe your issue">
          </div>
          {% if facilities %}
          <div class="mb-3">
            <label class="form-label fw-semibold">Related Facility</label>
            <select name="facility_id" class="form-select">
              <option value="">— Not facility-specific —</option>
              {% for f in facilities %}
              <option value="{{ f.id }}">{{ f.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
          <div class="mb-3">
            <label class="form-label fw-semibold">Description <span class="text-danger">*</span></label>
            <textarea name="body" class="form-control" rows="5" required
                      placeholder="Please describe your question or concern in detail…"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-send me-1"></i>Submit Request
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  'use strict';

  const chatWindow = document.getElementById('chat-window');
  const chatInput  = document.getElementById('chat-input');
  const faqSection = document.getElementById('faq-section');
  const CSRF_TOKEN = '{{ csrf_token() }}';

  // In-memory conversation history sent to the server with each message
  let history = [];

  // ── Greeting on page load ──────────────────────────────────────────────
  var userName = {{ current_user.display_name | tojson }};
  appendMessage('ai', "👋 Hi " + userName + "! I'm your JQC support assistant. " +
    "I can help you with inspections, issues, reports, and more. " +
    "Click a question below or type your own.");

  // ── Append a message bubble ────────────────────────────────────────────
  function appendMessage(role, text) {
    const div = document.createElement('div');
    div.className = 'msg-bubble msg-' + role;
    div.textContent = text;
    chatWindow.appendChild(div);
    chatWindow.scrollTop = chatWindow.scrollHeight;
    return div;
  }

  function appendSystem(text) {
    const div = document.createElement('div');
    div.className = 'msg-bubble msg-system';
    div.textContent = text;
    chatWindow.appendChild(div);
    chatWindow.scrollTop = chatWindow.scrollHeight;
  }

  // ── Typing indicator ───────────────────────────────────────────────────
  function showTyping() {
    const div = document.createElement('div');
    div.id = 'typing-indicator';
    div.className = 'msg-bubble msg-ai';
    div.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
    chatWindow.appendChild(div);
    chatWindow.scrollTop = chatWindow.scrollHeight;
  }

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

  // ── Send message to Groq ───────────────────────────────────────────────
  function sendMessage(text) {
    if (!text.trim()) return;

    // Hide FAQ chips after first interaction
    if (faqSection) faqSection.style.display = 'none';

    appendMessage('user', text);
    history.push({ role: 'user', content: text });

    chatInput.value   = '';
    chatInput.disabled = true;
    document.getElementById('send-btn').disabled = true;
    showTyping();

    fetch('{{ url_for("support.chat_message") }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': CSRF_TOKEN,
      },
      body: JSON.stringify({ message: text, messages: history }),
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
      hideTyping();
      const reply = data.reply || 'Sorry, I could not process your request.';
      appendMessage('ai', reply);
      history.push({ role: 'assistant', content: reply });

      // Suggest escalation if the AI hints it can't help
      const lower = reply.toLowerCase();
      if (lower.includes('submit to support') || lower.includes('admin team') ||
          lower.includes("can't resolve") || lower.includes('contact us')) {
        appendSystem('💡 Tip: Click "Submit to Support" above to send a message directly to our team.');
      }
    })
    .catch(function () {
      hideTyping();
      appendMessage('ai', 'Network error — please check your connection and try again.');
    })
    .finally(function () {
      chatInput.disabled = false;
      document.getElementById('send-btn').disabled = false;
      chatInput.focus();
    });
  }

  // ── Public helpers called from inline onclick ──────────────────────────
  window.sendUserMessage = function () {
    sendMessage(chatInput.value);
  };

  window.sendFaq = function (btn) {
    btn.disabled = true;
    sendMessage(btn.dataset.faq);
  };

  // ── Enter key support ──────────────────────────────────────────────────
  if (chatInput) {
    chatInput.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage(chatInput.value);
      }
    });
  }

  // ── Pre-fill modal subject from last user message ──────────────────────
  document.getElementById('submitModal').addEventListener('show.bs.modal', function () {
    const subjectInput = this.querySelector('[name="subject"]');
    if (subjectInput && !subjectInput.value && history.length) {
      const lastUser = [...history].reverse().find(function (m) { return m.role === 'user'; });
      if (lastUser) subjectInput.value = lastUser.content.slice(0, 200);
    }
  });
}());
</script>
{% endblock %}