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

{% block titletag %}{{ title }}{% endblock %}

{% block extra_css %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'ai_assistant/css/admin_dashboard.css' %}">
{% endblock %}

{% block content %}
  <script src="{% static 'ai_assistant/js/admin_dashboard.js' %}" defer></script>
  {{ chat_strings|json_script:"ai-admin-chat-strings" }}

  {% include "wagtailadmin/shared/header.html" with title=title icon="help" %}
  <div class="nice-padding">
    <div
      class="ai-assistant-admin__layout"
      data-ai-admin-chat-root
      data-chat-endpoint="{{ chat_api_url }}"
      data-reset-endpoint="{{ reset_api_url }}"
      data-business-mode-available="{% if business_mode_available %}true{% else %}false{% endif %}"
    >
      <section class="ai-assistant-admin__panel" aria-labelledby="ai-admin-info-title">
        <div class="ai-assistant-admin__section">
          <h2 id="ai-admin-info-title" class="title-wrapper ai-assistant-admin__title">{% trans "About this assistant" %}</h2>
          <p class="ai-assistant-admin__muted ai-assistant-admin__subtitle">
            {% trans "Use the assistant for guidance on content editing, product workflows, and common administrative tasks." %}
          </p>
        </div>

        <div class="ai-assistant-admin__section">
          <h3 class="ai-assistant-admin__section-title">{% trans "What it can help with" %}</h3>
          <ul class="ai-assistant-admin__muted">
            <li>{% trans "Page editing and publishing flows" %}</li>
            <li>{% trans "Catalog and content maintenance questions" %}</li>
            <li>{% trans "Explaining common admin tasks step by step" %}</li>
          </ul>
        </div>

        <div class="ai-assistant-admin__section">
          <h3 class="ai-assistant-admin__section-title">{% trans "What it cannot do" %}</h3>
          <ul class="ai-assistant-admin__muted">
            <li>{% trans "It should not be treated as a source of secrets or credentials." %}</li>
            <li>{% trans "It may be incomplete for project-specific customizations." %}</li>
            <li>{% trans "It does not replace review for high-risk content or configuration changes." %}</li>
          </ul>
        </div>

        <div class="ai-assistant-admin__section">
          <div class="messages messages--warning ai-assistant-admin__warning" role="alert">
            <strong>{% trans "Do not paste passwords, API keys, or other secrets into the chat." %}</strong>
          </div>
        </div>
      </section>

      <section class="ai-assistant-admin__panel" aria-labelledby="ai-admin-chat-title">
        <div class="ai-assistant-admin__section">
          <div class="ai-assistant-admin__toolbar">
            <div>
              <h2 id="ai-admin-chat-title" class="title-wrapper ai-assistant-admin__chat-title">{% trans "Admin chat" %}</h2>
              <p class="ai-assistant-admin__muted ai-assistant-admin__subtitle">
                {% trans "Ask operational questions in plain language. Start a new chat when switching topics." %}
              </p>
            </div>
            <button
              data-ai-admin-chat-reset
              type="button"
              class="button button-secondary"
              aria-label="{% trans 'Clear admin conversation' %}"
            >
              {% trans "Clear chat" %}
            </button>
          </div>
        </div>

        <div class="ai-assistant-admin__chat-shell">
          {% if business_mode_available %}
            <div class="ai-assistant-admin__business-toggle">
              <label class="ai-assistant-admin__business-toggle-label" for="ai-admin-business-mode">
                <input
                  id="ai-admin-business-mode"
                  data-ai-admin-business-mode
                  type="checkbox"
                >
                <span>{{ business_mode_label }}</span>
              </label>
              <p class="ai-assistant-admin__muted ai-assistant-admin__business-help">
                {% trans "When enabled, the assistant may use internal business context available only to permitted staff." %}
              </p>
            </div>
          {% endif %}

          <div data-ai-admin-chat-messages class="ai-assistant-admin__messages" aria-live="polite" aria-atomic="false">
            <div data-ai-admin-chat-empty class="ai-assistant-admin__empty">
              <div class="ai-assistant-admin__empty-icon" aria-hidden="true">💬</div>
              <h3 class="mb-2">{% trans "Start an admin conversation" %}</h3>
              <p class="ai-assistant-admin__muted ai-assistant-admin__subtitle">
                {% trans "Use this space for workflow questions, editor guidance, and support triage." %}
              </p>
            </div>
          </div>

          <div data-ai-admin-chat-typing class="ai-assistant-admin__typing" hidden aria-live="polite" aria-label="{% trans 'Assistant is typing' %}">
            <div class="ai-assistant-admin__typing-pill">
              <span class="ai-assistant-admin__typing-dot" aria-hidden="true"></span>
              <span class="ai-assistant-admin__typing-dot" aria-hidden="true"></span>
              <span class="ai-assistant-admin__typing-dot" aria-hidden="true"></span>
              <span>{% trans "Assistant is typing…" %}</span>
            </div>
          </div>

          <div class="ai-assistant-admin__form">
            <div data-ai-admin-chat-error class="messages messages--error ai-assistant-admin__error" hidden role="alert">
              <div class="ai-assistant-admin__error-layout">
                <div>
                  <strong>{% trans "Message could not be sent." %}</strong>
                  <div data-ai-admin-chat-error-text>{% trans "Please try again." %}</div>
                </div>
                <button data-ai-admin-chat-retry type="button" class="button button-secondary">
                  {% trans "Retry" %}
                </button>
              </div>
            </div>

            <form data-ai-admin-chat-form novalidate>
              {% csrf_token %}
              <label for="ai-admin-chat-input" class="w-field__label">{% trans "Your admin question" %}</label>
              <textarea
                id="ai-admin-chat-input"
                data-ai-admin-chat-input
                class="w-textarea"
                rows="4"
                maxlength="4000"
                placeholder="{% trans 'Type your question…' %}"
                aria-describedby="ai-admin-chat-help ai-admin-chat-counter"
              ></textarea>
              <div class="ai-assistant-admin__toolbar ai-assistant-admin__input-meta">
                <div class="ai-assistant-admin__muted ai-assistant-admin__input-help">
                  <span id="ai-admin-chat-help">{% trans "Press Enter to send, or Shift+Enter for a new line." %}</span>
                  <span id="ai-admin-chat-counter" data-ai-admin-chat-counter class="ai-assistant-admin__counter">0 / 4000</span>
                </div>
                <button data-ai-admin-chat-submit class="button button-primary" type="submit">
                  <span data-ai-admin-chat-submit-text>{% trans "Send message" %}</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </div>
  </div>
{% endblock %}