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

{% block cms_content %}
<div class="cms-section-header">
  <h2>AI Chat Settings</h2>
  <a href="{% url 'cms_chat_sessions' %}" class="btn-cms-ghost">
    <i class="fa-solid fa-comments me-1"></i>View Sessions
  </a>
</div>

<form method="post" class="cms-form">
  {% csrf_token %}
  <div class="row g-3">
    <div class="col-lg-8">

      <div class="cms-card mb-3">
        <h5 style="margin-bottom:1rem">Widget Status</h5>
        <label style="display:flex;align-items:center;gap:.75rem;cursor:pointer;margin-bottom:.5rem">
          <input type="checkbox" name="chat_enabled" id="chat_enabled"
            {% if tenant.chat_enabled %}checked{% endif %}
            style="width:18px;height:18px;accent-color:var(--cms-accent);cursor:pointer">
          <span style="font-size:.9rem;font-weight:500">Enable AI Chat widget on this site</span>
        </label>
        <p style="color:var(--cms-muted);font-size:.8rem;margin:0;padding-left:1.75rem">
          When ON, a chat bubble appears on every public page. Powered by OpenAI GPT-4o mini.
        </p>
      </div>

      <div class="cms-card mb-3">
        <h5 style="margin-bottom:1rem">Greeting &amp; Personality</h5>
        <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 style="color:var(--cms-muted);font-size:.75rem">First message shown when the widget opens.</small>
        </div>
        <div class="form-group mb-0">
          <label>System Prompt (AI behaviour)</label>
          <textarea name="chat_system_prompt" rows="6"
            placeholder="You are a helpful assistant for {{ tenant.name }}. You help visitors with questions about our services, pricing, and how to get started...">{{ tenant.chat_system_prompt }}</textarea>
          <small style="color:var(--cms-muted);font-size:.75rem">
            Describe the business, key services, and tone. Leave blank for a generic helpful assistant.
          </small>
        </div>
      </div>

      <div class="cms-card">
        <h5 style="margin-bottom:1rem">WhatsApp Handoff</h5>
        <div class="form-group">
          <label>WhatsApp Business Number</label>
          <input type="text" name="chat_whatsapp" value="{{ tenant.chat_whatsapp }}"
            placeholder="+447700000000">
          <small style="color:var(--cms-muted);font-size:.75rem">Include country code. Leave blank to disable.</small>
        </div>
        <div class="form-group mb-0">
          <label>Handoff Trigger Keywords</label>
          <input type="text" name="chat_whatsapp_trigger"
            value="{{ tenant.chat_whatsapp_trigger }}"
            placeholder="sales,quote,pricing,buy,purchase,order,booking">
          <small style="color:var(--cms-muted);font-size:.75rem">
            Comma-separated. When any keyword appears in a visitor message, the WhatsApp button is shown.
          </small>
        </div>
      </div>

    </div>

    <div class="col-lg-4">

      <div class="cms-card mb-3">
        <h5 style="margin-bottom:1rem">Status</h5>
        <div class="d-flex align-items-center gap-2 mb-3">
          <span id="status-dot" class="fa-solid fa-circle fa-xs"
            style="color:{% if tenant.chat_enabled %}var(--cms-success){% else %}var(--cms-muted){% endif %}"></span>
          <span id="status-label" style="font-size:.88rem;font-weight:500">
            {% if tenant.chat_enabled %}Chat is ON{% else %}Chat is OFF{% endif %}
          </span>
        </div>
        {% if tenant.chat_whatsapp %}
        <div style="font-size:.8rem;color:var(--cms-muted);padding:.5rem .75rem;background:rgba(37,211,102,.07);border-radius:6px;border:1px solid rgba(37,211,102,.2)">
          <i class="fa-brands fa-whatsapp me-1" style="color:#25D366"></i>
          {{ tenant.chat_whatsapp }}
        </div>
        {% endif %}
      </div>

      <div class="cms-card">
        <h5 style="margin-bottom:1rem">Session Stats</h5>
        {% with total=tenant.chat_sessions.count %}
        <div style="font-size:2rem;font-weight:700;color:var(--cms-accent);line-height:1">{{ total }}</div>
        <div style="color:var(--cms-muted);font-size:.8rem;margin-bottom:.75rem">Total chat sessions</div>
        {% with active=tenant.chat_sessions.filter %}
        {% endwith %}
        <a href="{% url 'cms_chat_sessions' %}" style="font-size:.85rem;color:var(--cms-accent);text-decoration:none">
          View all sessions <i class="fa-solid fa-arrow-right" style="font-size:.7rem"></i>
        </a>
        {% endwith %}
      </div>

    </div>
  </div>

  <div class="d-flex gap-2 mt-3">
    <button type="submit" class="btn-cms">
      <i class="fa-solid fa-floppy-disk me-1"></i>Save Chat Settings
    </button>
  </div>
</form>

<script>
document.getElementById('chat_enabled').addEventListener('change', function () {
  const dot = document.getElementById('status-dot');
  const label = document.getElementById('status-label');
  if (this.checked) {
    dot.style.color = 'var(--cms-success)';
    label.textContent = 'Chat will be ON';
  } else {
    dot.style.color = 'var(--cms-muted)';
    label.textContent = 'Chat will be OFF';
  }
});
</script>
{% endblock %}