{% extends "dashboard/base.html" %}

{% block title %}Chat — {{ dashboard_title }}{% endblock %}
{% block page_title %}Chat{% endblock %}

{% block extra_head %}
  <!-- marked.js for markdown rendering -->
  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js" defer></script>
{% endblock %}

{% block content %}
<div class="chat-layout">
  <!-- Chat header with agent selector -->
  <div class="chat-header">
    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-accent); flex-shrink:0;">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
            d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
    </svg>

    {% if agents %}
    <div style="display:flex; align-items:center; gap: var(--space-3); flex:1;">
      <label for="agent-selector" class="text-sm" style="font-weight:500; white-space:nowrap;">Talk to</label>
      <select id="agent-selector" class="input" style="max-width: 18rem;">
        {% for agent in agents %}
        <option value="{{ agent.id }}"
                data-personal="{{ agent.is_personal | lower }}"
                data-configured="{{ agent.user_configured | lower }}"
                {% if agent.id == selected_agent_id %}selected{% endif %}>
          {{ agent.display_name }}{% if agent.is_personal %} (personal){% endif %}
        </option>
        {% endfor %}
      </select>
    </div>
    {% else %}
    <div class="text-muted text-sm">No agents available. Add agents to your workspace.</div>
    {% endif %}
  </div>

  <!-- Setup required banner (hidden by default) -->
  <div id="setup-required-banner" style="display:none; padding: var(--space-3) var(--space-4); background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: var(--radius-md); margin: var(--space-3) var(--space-4); text-align:center;">
    <div style="font-weight: 500; margin-bottom: var(--space-1);">This agent requires setup before you can chat</div>
    <a id="setup-required-link" href="#" class="btn btn-primary btn-sm">Configure Agent</a>
  </div>

  <!-- Messages area -->
  <div id="messages" class="messages-area">
    {% if not agents %}
    <div class="message message-system">
      <div class="message-bubble">No agents available — add AGENT.md files to your workspace.</div>
    </div>
    {% else %}
    {% set selected_name = namespace(val='') %}
    {% for agent in agents %}
      {% if agent.id == selected_agent_id %}{% set selected_name.val = agent.display_name %}{% endif %}
    {% endfor %}
    <div class="message message-system">
      <div class="message-bubble">
        Start a conversation with <strong>{{ selected_name.val or agents[0].display_name }}</strong>.
        Switch agents using the selector above.
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Loading indicator -->
  <div id="chat-loading" style="display:none; padding: var(--space-2) 0;">
    <div class="message message-assistant">
      <div class="message-avatar" style="font-size:0.75rem;">AI</div>
      <div class="message-bubble">
        <div class="typing-indicator">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Input form -->
  {% if agents and selected_agent_id %}
  <div class="chat-input-area" id="chat-input-area">
    <form id="chat-form">
      <input type="hidden" name="agent_id" value="{{ selected_agent_id }}" />
      <input type="hidden" name="session_id" id="session-id-field" value="{{ session_id or '' }}" />

      <div class="chat-input-row">
        <textarea id="chat-message-input"
                  name="message"
                  class="input chat-textarea"
                  placeholder="Type a message… (Enter to send, Shift+Enter for newline)"
                  rows="1"
                  required></textarea>
        <button type="submit" class="btn btn-primary" style="align-self:flex-end; padding: 0.5625rem var(--space-4);">
          <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
        </button>
      </div>
    </form>
  </div>
  {% endif %}
</div>

{% endblock %}