{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
  <div class="flex items-center justify-between mb-2">
    <h1 class="text-2xl font-bold tracking-tight text-slate-800">Cost Breakdown</h1>
    <span class="text-xs text-slate-500 font-mono">Resource & token auditing</span>
  </div>

  <div class="grid grid-cols-2 gap-6">
    <!-- Cost by Session Card (Airbnb style border grid) -->
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-5 shadow-sm flex flex-col justify-between">
      <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">By Session</h2>
      <div class="space-y-4">
        {% for s in by_session %}
        <div class="space-y-1.5">
          <div class="flex justify-between text-xs font-mono">
            <span class="text-slate-700 font-bold">Session {{ s.id[:12] }}</span>
            <span class="text-[#ff385c] font-bold">${{ "%.4f"|format(s.total_cost) }}</span>
          </div>
          <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
            {% set pct = (s.total_cost * 100) / (by_session|map(attribute='total_cost')|sum or 1) %}
            <div class="bg-[#ff385c] h-1.5 rounded-full" style="width: {{ [pct, 100]|min }}%"></div>
          </div>
          <div class="flex justify-between text-[10px] text-slate-400 font-mono">
            <span>In: {{ "{:,}".format(s.total_tokens_in) }}</span>
            <span>Out: {{ "{:,}".format(s.total_tokens_out) }}</span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Cost by Model Card -->
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-5 shadow-sm flex flex-col justify-between">
      <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">By Model</h2>
      <div class="space-y-4">
        {% for m in by_model %}
        <div class="space-y-1.5">
          <div class="flex justify-between text-xs font-mono">
            <span class="text-slate-700 font-bold truncate max-w-[180px]" title="{{ m.model }}">{{ m.model }}</span>
            <span class="text-[#ff385c] font-bold">${{ "%.4f"|format(m.total_cost) }}</span>
          </div>
          <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
            {% set pct_m = (m.total_cost * 100) / (by_model|map(attribute='total_cost')|sum or 1) %}
            <div class="bg-[#460479] h-1.5 rounded-full" style="width: {{ [pct_m, 100]|min }}%"></div>
          </div>
          <div class="flex justify-between text-[10px] text-slate-400 font-mono">
            <span>In: {{ "{:,}".format(m.total_tokens_in) }}</span>
            <span>Out: {{ "{:,}".format(m.total_tokens_out) }}</span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Cost by Day Table -->
  <div class="bg-white border border-[#dddddd] rounded-[14px] overflow-hidden shadow-sm">
    <div class="px-5 py-3.5 bg-gray-50 border-b border-gray-150">
      <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Daily Ingest Log</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-left text-xs font-mono border-collapse">
        <thead>
          <tr class="bg-gray-50 text-slate-500 border-b border-gray-150">
            <th class="px-6 py-2.5">Date</th>
            <th class="px-6 py-2.5">Turns</th>
            <th class="px-6 py-2.5">Tokens In</th>
            <th class="px-6 py-2.5">Tokens Out</th>
            <th class="px-6 py-2.5 text-right">Cost</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for d in by_day %}
          <tr class="hover:bg-gray-50/50 transition-colors">
            <td class="px-6 py-2.5 text-slate-700 font-bold">{{ d.day }}</td>
            <td class="px-6 py-2.5 text-slate-500">{{ d.turn_count }}</td>
            <td class="px-6 py-2.5 text-slate-400">{{ "{:,}".format(d.total_tokens_in) }}</td>
            <td class="px-6 py-2.5 text-slate-400">{{ "{:,}".format(d.total_tokens_out) }}</td>
            <td class="px-6 py-2.5 text-right text-[#ff385c] font-bold">${{ "%.4f"|format(d.total_cost) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}