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

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

{% block content %}
<div class="px-2 py-4">
  <!-- Header Section -->
  <div class="mb-8">
    <h1 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight">Conversations</h1>
    <p class="text-slate-500 dark:text-slate-400 mt-1">Track and monitor multi-turn agent sessions and cumulative usage.</p>
  </div>

  <!-- Stats Overview -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
      <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Total Conversations</p>
      <h3 class="text-3xl font-bold">{{ total }}</h3>
    </div>
    <div class="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
      <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Active This Week</p>
      <h3 class="text-3xl font-bold text-emerald-500">{{ total }}</h3>
    </div>
    <div class="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
      <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Total Dynamic Sessions</p>
      <h3 class="text-3xl font-bold text-primary">{{ rows|length }}</h3>
    </div>
  </div>

  {% if rows %}
  <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm">
    <div class="overflow-x-auto">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-slate-50 dark:bg-slate-800/50 text-slate-500 dark:text-slate-400 uppercase text-[11px] font-bold tracking-wider">
            <th class="px-6 py-4">Session ID</th>
            <th class="px-6 py-4">Agent</th>
            <th class="px-6 py-4 text-center">Turns</th>
            <th class="px-6 py-4 text-right">Total Cost</th>
            <th class="px-6 py-4 text-right">Tokens</th>
            <th class="px-6 py-4 text-right">Last Activity</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for row in rows %}
          <tr class="group hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap">
              <a href="{{ base_path }}/dashboard/conversations/{{ row.session_id }}" class="flex items-center gap-3 group">
                <div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                </div>
                <span class="text-sm font-bold text-slate-900 dark:text-white font-mono">{{ row.session_id_short }}</span>
              </a>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="text-sm text-slate-600 dark:text-slate-300">{{ agent_names.get(row.agent_id, row.agent_id) }}</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-center">
              <span class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-[11px] font-bold rounded">{{ row.execution_count }}</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-slate-900 dark:text-white">
              {{ format_cost(row.total_cost_usd) }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-slate-500">
              {{ (row.total_input_tokens + row.total_output_tokens) | int }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-xs text-slate-400">
              {{ relative_time(row.last_activity) }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900">
      <p class="text-xs text-slate-500">
        Page <span class="font-bold text-slate-900 dark:text-white">{{ page }}</span> of <span class="font-bold text-slate-900 dark:text-white">{{ total_pages }}</span> ({{ total }} total)
      </p>
      <div class="flex items-center gap-2">
        {% if page > 1 %}
        <a href="{{ base_path }}/dashboard/conversations?page={{ page - 1 }}" class="px-3 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 transition-colors">
          Previous
        </a>
        {% endif %}
        {% if page < total_pages %}
        <a href="{{ base_path }}/dashboard/conversations?page={{ page + 1 }}" class="px-3 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 transition-colors">
          Next
        </a>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="py-20 flex flex-col items-center justify-center text-center bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800">
    <div class="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-400 mb-4">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
    </div>
    <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">No conversations yet</h3>
    <p class="text-sm text-slate-500 max-w-sm">Conversations appear here when agents are used. Each session tracks multi-turn history and usage metrics.</p>
  </div>
  {% endif %}
</div>
{% endblock %}