{% load custom_filters %}

{% if error %}
<!-- Error message -->
<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full bg-error/10">
      <svg data-src="https://unpkg.com/heroicons/20/solid/exclamation-triangle.svg" class="h-6 w-6 m-2 text-error"></svg>
    </div>
  </div>
  <div class="chat-bubble chat-bubble-error">{{ error }}</div>
</div>
{% else %}
<!-- User input message on right -->
<div class="chat chat-end">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full bg-base-300">
      <svg data-src="https://unpkg.com/heroicons/20/solid/user.svg" class="h-6 w-6 m-2 text-base-content"></svg>
    </div>
  </div>
  <div class="chat-bubble chat-bubble-primary prose text-primary-content">{{ metrics.input_text|markdown|safe }}</div>
</div>

<!-- AI output message on left -->
<div class="chat chat-start">
  <div class="chat-image avatar">
    <div class="w-10 rounded-full bg-primary/10">
      <svg data-src="https://unpkg.com/heroicons/20/solid/cpu-chip.svg" class="h-6 w-6 m-2 text-primary"></svg>
    </div>
  </div>
  <div class="chat-bubble chat-bubble-secondary prose text-secondary-content">{{ metrics.output_text|markdown|safe }}</div>
</div>

<!-- Metrics display -->
<div class="chat-metrics bg-base-200 rounded-lg p-4 text-sm space-y-2">
  {% if metrics.embedding_tokens %}
  <div>Embedding Tokens: {{ metrics.embedding_tokens }}</div>
  {% endif %}
  {% if metrics.llm_prompt_tokens %}
  <div>LLM Prompt Tokens: {{ metrics.llm_prompt_tokens }}</div>
  {% endif %}
  {% if metrics.llm_completion_tokens %}
  <div>LLM Completion Tokens: {{ metrics.llm_completion_tokens }}</div>
  {% endif %}
  {% if metrics.total_llm_tokens %}
  <div>Total LLM Tokens: {{ metrics.total_llm_tokens }}</div>
  {% endif %}
  
  <!-- Collapsible Sources -->
  <div class="collapse bg-base-100">
    <input type="checkbox" id="collapse-{{ metrics.id }}" /> 
    <label for="collapse-{{ metrics.id }}" class="collapse-title text-base font-medium flex items-center gap-2 cursor-pointer">
      <svg data-src="https://unpkg.com/heroicons/20/solid/document-magnifying-glass.svg" class="h-5 w-5"></svg>
      Retrieved Sources
    </label>
    <div class="collapse-content">
      <div class="overflow-x-auto">
        <table class="table table-xs">
          <thead>
            <tr>
              <th>Source Text</th>
              <th>Score</th>
              <th>Metadata</th>
            </tr>
          </thead>
          <tbody>
            {% for source in metrics.sources_used %}
            <tr>
              <td class="whitespace-pre-wrap">{{ source.text }}</td>
              <td>{{ source.score|floatformat:3 }}</td>
              <td>
                {% for key, value in source.metadata.items %}
                <div><span class="font-semibold">{{ key }}:</span> {{ value }}</div>
                {% endfor %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Plugin Widgets -->
  {% for widget_url in plugin_widgets %}
    {% with plugin_name=widget_url|cut:":"|cut:"_widget_for_source"|title %}
    <div class="collapse bg-base-100 mt-2"
         hx-get="{% url widget_url metrics.id %}?event=chat_send"
         hx-trigger="load"
         hx-swap="outerHTML"
         hx-indicator="#loading-{{ forloop.counter }}">
      <div id="loading-{{ forloop.counter }}" class="flex items-center gap-2 p-4">
        <div class="loading loading-spinner"></div>
        <div class="font-medium">{{ plugin_name }} Analysis</div>
      </div>
    </div>
    {% endwith %}
  {% endfor %}
</div>
{% endif %}