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

{% block title %}Analytics — {{ dashboard_title }}{% endblock %}
{% block page_title %}System Analytics{% endblock %}

{% block extra_head %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
  <script src="{{ base_path }}/dashboard/static/dashboard/charts.js"></script>
{% endblock %}

{% block content %}
<div class="px-8 py-6">

  <!-- Page Header + Period Selector -->
  <div class="flex flex-wrap items-end justify-between gap-6 mb-8">
    <div>
      <h1 class="text-2xl font-bold text-white tracking-tight">System Analytics</h1>
      <p class="text-slate-400 text-sm mt-1">
        <span class="inline-flex items-center gap-1.5">
          <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full {% if summary.total_executions > 0 %}animate-pulse{% endif %}"></span>
          {{ agent_names|length }} Agents &bull; {{ summary.total_executions }} Executions &bull; {{ "%.1f"|format(summary.success_rate) }}% Success
        </span>
      </p>
    </div>
    <div class="flex gap-2">
      <div class="flex items-center gap-1 bg-surface-2 p-1 rounded-xl border border-border-dark">
        {% for d, label in [(7, '7d'), (30, '30d')] %}
        <a
          class="px-3 py-1.5 rounded-lg text-xs font-bold transition-all cursor-pointer {% if days == d %}bg-primary text-white shadow-lg shadow-primary/20{% else %}text-slate-500 hover:text-white hover:bg-white/5{% endif %}"
          href="{{ base_path }}/dashboard/analytics?days={{ d }}"
        >{{ label }}</a>
        {% endfor %}
      </div>
      <a href="{{ base_path }}/dashboard/chat" class="px-4 py-2 rounded-xl bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20">
        Launch Chat
      </a>
    </div>
  </div>

  <!-- KPI Cards (4 cards) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
    <div class="bg-surface border border-border-dark rounded-xl p-5 group hover:border-primary/40 transition-all">
      <div class="flex items-center justify-between mb-3">
        <p class="text-xs font-medium text-slate-500">Configured Agents</p>
        <span class="material-symbols-outlined text-primary/50 group-hover:text-primary transition-colors text-xl">smart_toy</span>
      </div>
      <div class="flex items-baseline gap-2">
        <h3 class="text-2xl font-bold text-white">{{ agent_names|length }}</h3>
        <span class="text-emerald-400 text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 px-1.5 py-0.5 rounded-md">Ready</span>
      </div>
    </div>

    <div class="bg-surface border border-border-dark rounded-xl p-5 group hover:border-primary/40 transition-all">
      <div class="flex items-center justify-between mb-3">
        <p class="text-xs font-medium text-slate-500">Total Executions</p>
        <span class="material-symbols-outlined text-emerald-500/50 group-hover:text-emerald-500 transition-colors text-xl">terminal</span>
      </div>
      <div class="flex items-baseline gap-2">
        <h3 class="text-2xl font-bold text-white">{{ summary.total_executions }}</h3>
        <span class="text-emerald-400 text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 px-1.5 py-0.5 rounded-md">{{ "%.0f"|format(summary.success_rate) }}%</span>
      </div>
    </div>

    <div class="bg-surface border border-border-dark rounded-xl p-5 group hover:border-primary/40 transition-all">
      <div class="flex items-center justify-between mb-3">
        <p class="text-xs font-medium text-slate-500">Avg Latency</p>
        <span class="material-symbols-outlined text-rose-500/50 group-hover:text-rose-500 transition-colors text-xl">timer</span>
      </div>
      <div class="flex items-baseline gap-2">
        <h3 class="text-2xl font-bold text-white">{{ "%.0f"|format(summary.avg_duration_ms) }}ms</h3>
        <span class="text-rose-400 text-[10px] font-bold uppercase tracking-wider bg-rose-500/10 px-1.5 py-0.5 rounded-md">Avg</span>
      </div>
    </div>

    <div class="bg-surface border border-border-dark rounded-xl p-5 group hover:border-primary/40 transition-all">
      <div class="flex items-center justify-between mb-3">
        <p class="text-xs font-medium text-slate-500">Total Cost</p>
        <span class="material-symbols-outlined text-amber-500/50 group-hover:text-amber-500 transition-colors text-xl">payments</span>
      </div>
      <div class="flex items-baseline gap-2">
        <h3 class="text-2xl font-bold text-white">{{ format_cost(summary.total_cost_usd) }}</h3>
        <span class="text-amber-400 text-[10px] font-bold uppercase tracking-wider bg-amber-500/10 px-1.5 py-0.5 rounded-md">{{ days }}d</span>
      </div>
    </div>
  </div>

  <!-- Main Content Area -->
  <div id="analytics-content">
    {% include "dashboard/_analytics_charts.html" %}
  </div>

  <!-- Agent Utilization Table -->
  {% if cost_by_agent %}
  <div class="mt-8 bg-surface border border-border-dark rounded-xl shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-border-dark flex items-center justify-between">
      <h3 class="text-sm font-bold text-white">Agent Utilization</h3>
      <span class="text-xs text-slate-500">{{ days }}-day period</span>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-surface-2 border-b border-border-dark text-[11px] font-bold text-slate-500 uppercase tracking-wider">
            <th class="px-5 py-3">Agent</th>
            <th class="px-5 py-3 text-right">Executions</th>
            <th class="px-5 py-3 text-right">Avg Duration</th>
            <th class="px-5 py-3 text-right">Total Cost</th>
            <th class="px-5 py-3 text-right">Success Rate</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-border-dark/50">
          {% for row in cost_by_agent %}
          <tr class="hover:bg-surface-2 transition-colors">
            <td class="px-5 py-3.5">
              <div class="flex items-center gap-2.5">
                <div class="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                  <span class="material-symbols-outlined text-sm">smart_toy</span>
                </div>
                <span class="text-sm font-medium text-slate-200">{{ agent_names.get(row.agent_id, row.agent_id) }}</span>
              </div>
            </td>
            <td class="px-5 py-3.5 text-right text-sm font-semibold text-white">{{ row.execution_count }}</td>
            <td class="px-5 py-3.5 text-right text-sm text-slate-400 font-mono">
              {% if row.avg_duration_ms %}{{ format_duration(row.avg_duration_ms) }}{% else %}—{% endif %}
            </td>
            <td class="px-5 py-3.5 text-right text-sm font-bold text-amber-400">{{ format_cost(row.total_cost_usd) }}</td>
            <td class="px-5 py-3.5 text-right">
              {% if row.execution_count > 0 %}
              <span class="text-sm font-bold text-emerald-400">
                {{ "%.0f"|format((row.success_count / row.execution_count) * 100) }}%
              </span>
              {% else %}
              <span class="text-slate-500 text-sm">—</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}