{# task_execution.html — Chat interface with voice support #}
{% extends "base.html" %}
{% block content %}
  <div class="container mt-4 d-flex flex-column" style="max-height: calc(100vh - 120px);">
    <div id="chatWindow" class="flex-grow-1 overflow-auto p-3 mb-3 rounded">
      {% for msg in chat_history %}
        {% if msg.role=='user' %}
          <div class="d-flex justify-content-end mb-2">
            <div class="chat-bubble user">{{ msg.content }}</div>
          </div>
        {% else %}
          <div class="d-flex justify-content-start mb-2">
            <div class="chat-bubble bot">{{ msg.content }}</div>
          </div>
        {% endif %}
      {% endfor %}
    </div>

    <!-- Processing spinner (shown while waiting for AI response) -->
    <div id="chat-processing" class="text-center py-2" style="display:none;">
      <span class="spinner-border spinner-border-sm text-primary mr-2" role="status"></span>
      <small class="text-muted">Thinking...</small>
    </div>

    <!-- Voice status bar -->
    <div class="d-flex align-items-center mb-1" style="min-height: 22px;">
      <small id="voice-status" class="text-muted mr-2"></small>
      <small id="voice-mode-indicator" class="text-muted mr-2"></small>
      <form method="POST" action="{{ url_for('task_clear_history') }}" class="ml-auto mb-0"
            onsubmit="return confirm('Clear chat history?');">
        <button type="submit" class="btn btn-sm btn-outline-secondary border-0 p-1"
                id="clear-chat-btn" title="Clear chat history">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="3 6 5 6 21 6"></polyline>
            <path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"></path>
            <path d="M10 11v6"></path><path d="M14 11v6"></path>
            <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path>
          </svg>
        </button>
      </form>
    </div>

    <!-- Chat input with voice controls -->
    <form method="POST" class="input-group" id="chat-form">
      <button type="button" class="btn btn-outline-secondary voice-idle" id="voice-mic-btn"
              title="Click to start recording" style="border-right:0;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
          <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line>
          <line x1="8" y1="23" x2="16" y2="23"></line>
        </svg>
      </button>
      <textarea name="task" class="form-control" rows="1"
                placeholder="Type your message or click the mic to speak..." required autofocus
                style="border-left:0; border-right:0;">{{ prefill_task or '' }}</textarea>
      <div class="input-group-append" style="position:relative;">
        <!-- Speaker toggle -->
        <button type="button" class="btn btn-outline-primary" id="voice-speaker-btn"
                title="Auto-speak on" style="border-right:0;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
          </svg>
        </button>
        <!-- Voice picker icon + popup -->
        <button type="button" class="btn btn-outline-secondary" id="voice-picker-btn"
                title="Choose voice" style="border-left:0; border-right:0;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </button>
        <div id="voice-picker-popup" style="display:none; position:absolute; bottom:100%; right:0; z-index:1050; min-width:160px; margin-bottom:4px;">
          <div class="card shadow-sm border">
            <div class="card-body p-2">
              <small class="text-muted d-block mb-1 px-1">Voice</small>
              <div id="voice-options-list"></div>
            </div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" id="send-btn">Send</button>
      </div>
    </form>
  </div>

  <style>
    #voice-mic-btn { transition: all 0.2s; }
    #voice-mic-btn.voice-recording {
      color: #dc3545 !important;
      border-color: #dc3545 !important;
      animation: pulse-mic 1s ease-in-out infinite;
    }
    #voice-mic-btn.voice-processing {
      color: #6c757d !important;
      pointer-events: none;
    }
    #voice-mic-btn.voice-speaking {
      color: #28a745 !important;
      border-color: #28a745 !important;
    }
    @keyframes pulse-mic {
      0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
      50% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    }
    .voice-option {
      display: block;
      width: 100%;
      padding: 5px 10px;
      border: none;
      background: none;
      text-align: left;
      font-size: 13px;
      color: #495057;
      border-radius: 4px;
      cursor: pointer;
    }
    .voice-option:hover { background: #f0f0f0; }
    .voice-option.active { background: #e7f1ff; color: #0d6efd; font-weight: 600; }
  </style>

  <script src="{{ url_for('static', filename='js/voice.js') }}"></script>
  <script>
    // Auto-scroll to bottom
    var cw = document.getElementById('chatWindow');
    if (cw) cw.scrollTop = cw.scrollHeight;

    // Show processing spinner when form is submitted
    var chatForm = document.getElementById('chat-form');
    var sendBtn = document.getElementById('send-btn');
    var processing = document.getElementById('chat-processing');
    if (chatForm) {
      chatForm.addEventListener('submit', function () {
        sessionStorage.setItem("qd_voice_interacted", "1");
        if (sendBtn) { sendBtn.disabled = true; sendBtn.textContent = '...'; }
        if (processing) processing.style.display = 'block';
        if (cw) setTimeout(function () { cw.scrollTop = cw.scrollHeight; }, 50);
      });
    }
  </script>
{% endblock %}