{% extends "base.html" %}
{% load i18n static %}

{% block content %}
  <link rel="stylesheet" href="{% static 'ai_assistant/css/customer_chat.css' %}">
  <script src="{% static 'ai_assistant/js/customer_chat.js' %}" defer></script>
  {{ chat_strings|json_script:"ai-chat-strings" }}

  <div class="container py-4 py-lg-5">
    <div class="row justify-content-center">
      <div class="col-12 col-xl-10">
        <div
          class="card shadow-sm border-0"
          data-ai-chat-root
          data-chat-endpoint="{{ chat_api_url }}"
          data-reset-endpoint="{{ reset_api_url }}"
        >
          <div class="card-body p-0">
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 px-4 py-4 border-bottom">
              <div>
                <h1 class="h3 mb-2">{% trans "AI Assistant" %}</h1>
                <p class="text-body-secondary mb-0">
                  {% trans "Ask a question about this website or webshop and get a quick answer." %}
                </p>
              </div>
              {% if assistant_enabled %}
                <div class="d-flex align-items-center gap-2">
                  <span class="badge text-bg-light border">{% trans "Live chat" %}</span>
                  <button
                    data-ai-chat-reset
                    type="button"
                    class="btn btn-outline-secondary btn-sm"
                    aria-label="{% trans 'Clear conversation' %}"
                  >
                    {% trans "Clear chat" %}
                  </button>
                </div>
              {% endif %}
            </div>

            {% if not assistant_enabled %}
              <div class="p-4 p-lg-5">
                <div class="alert alert-warning mb-0" role="alert">
                  {% trans "Assistant is currently disabled." %}
                </div>
              </div>
            {% else %}
              <div class="row g-0">
                <div class="col-12 col-lg-4 border-end">
                  <div class="p-4 h-100 bg-body-tertiary">
                    <h2 class="h6 text-uppercase text-body-secondary mb-3">{% trans "How to use it" %}</h2>
                    <ul class="small text-body-secondary ps-3 mb-0">
                      <li class="mb-2">{% trans "Ask one question at a time for clearer answers." %}</li>
                      <li class="mb-2">{% trans "Use clear product, content, or support terms when possible." %}</li>
                      <li>{% trans "Start a new chat if you want to change topic." %}</li>
                    </ul>
                  </div>
                </div>

                <div class="col-12 col-lg-8">
                  <div class="ai-assistant-customer__chat-shell d-flex flex-column">
                    <div
                      data-ai-chat-scroll
                      class="ai-assistant-customer__scroll flex-grow-1 px-3 px-md-4 py-4 overflow-auto"
                    >
                      <div data-ai-chat-empty class="text-center px-3 py-5">
                        <div class="ai-assistant-customer__empty-icon mx-auto mb-3 rounded-circle bg-body-tertiary d-flex align-items-center justify-content-center">
                          <span class="fs-4" aria-hidden="true">💬</span>
                        </div>
                        <h2 class="h5 mb-2">{% trans "Start a conversation" %}</h2>
                        <p class="text-body-secondary mb-0">
                          {% trans "Your messages stay in this browser session so you can continue the conversation." %}
                        </p>
                      </div>

                      <div data-ai-chat-messages class="d-flex flex-column gap-3" aria-live="polite" aria-atomic="false"></div>

                      <div data-ai-chat-typing class="d-none pt-2" aria-live="polite" aria-label="{% trans 'Assistant is typing' %}">
                        <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-body-tertiary text-body-secondary small">
                          <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
                          <span>{% trans "Assistant is typing…" %}</span>
                        </div>
                      </div>
                    </div>

                    <div class="border-top p-3 p-md-4">
                      <div data-ai-chat-error class="alert alert-danger d-none mb-3" role="alert">
                        <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
                          <div>
                            <strong class="d-block">{% trans "Message could not be sent." %}</strong>
                            <span data-ai-chat-error-text>{% trans "Please try again." %}</span>
                          </div>
                          <button data-ai-chat-retry type="button" class="btn btn-outline-danger btn-sm">
                            {% trans "Retry" %}
                          </button>
                        </div>
                      </div>

                      <form data-ai-chat-form novalidate>
                        {% csrf_token %}
                        <label for="ai-chat-input" class="form-label fw-semibold">{% trans "Your message" %}</label>
                        <div class="d-flex flex-column gap-3">
                          <textarea
                            id="ai-chat-input"
                            data-ai-chat-input
                            class="form-control"
                            rows="3"
                            maxlength="4000"
                            placeholder="{% trans 'Type your question…' %}"
                            aria-describedby="ai-chat-help ai-chat-counter"
                          ></textarea>
                          <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
                            <div class="small text-body-secondary">
                              <span id="ai-chat-help">{% trans "Press Enter to send, or Shift+Enter for a new line." %}</span>
                              <span class="ms-md-3 d-inline-block" id="ai-chat-counter" data-ai-chat-counter>0 / 4000</span>
                            </div>
                            <button data-ai-chat-submit class="btn btn-primary" type="submit">
                              <span data-ai-chat-submit-text>{% trans "Send message" %}</span>
                            </button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}