{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-6">

  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">Dashboard</h1>
    <div class="flex items-center gap-3">
      <div id="fetch-result"></div>
      <button class="btn btn-primary btn-sm"
              hx-post="/fetch"
              hx-target="#fetch-result"
              hx-swap="innerHTML"
              hx-indicator="#fetch-spinner"
              hx-disabled-elt="this">
        <span id="fetch-spinner" class="loading loading-spinner loading-xs htmx-indicator"></span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        Fetch Mail
      </button>
    </div>
  </div>

  <!-- Stat cards -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">

    <div class="stat bg-base-100 rounded-box shadow-sm">
      <div class="stat-title">Emails Today</div>
      <div class="stat-value text-primary">{{ total_today }}</div>
      <div class="stat-desc">{{ total_week }} this week</div>
    </div>

    <div class="stat bg-base-100 rounded-box shadow-sm">
      <div class="stat-title">Total Processed</div>
      <div class="stat-value">{{ total_all }}</div>
      <div class="stat-desc">all time</div>
    </div>

    <div class="stat bg-base-100 rounded-box shadow-sm">
      <div class="stat-title">Failures</div>
      <div class="stat-value {% if failed_count > 0 %}text-error{% endif %}">{{ failed_count }}</div>
      <div class="stat-desc">processing errors</div>
    </div>

    <div class="stat bg-base-100 rounded-box shadow-sm">
      <div class="stat-title">Avg Confidence</div>
      <div class="stat-value {% if avg_conf and avg_conf < 70 %}text-warning{% elif avg_conf %}text-success{% endif %}">
        {% if avg_conf %}{{ avg_conf }}%{% else %}—{% endif %}
      </div>
      <div class="stat-desc">LLM classification</div>
    </div>

  </div>

  <!-- Action breakdown + override count -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    <div class="lg:col-span-2 card bg-base-100 shadow-sm">
      <div class="card-body">
        <h2 class="card-title text-base">Action Breakdown</h2>
        {% if action_counts %}
        <div class="overflow-x-auto">
          <table class="table table-sm">
            <thead>
              <tr>
                <th>Action</th>
                <th class="text-right">Count</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% set max_count = action_counts[0].count if action_counts else 1 %}
              {% for item in action_counts %}
              <tr>
                <td class="font-medium">{{ item.label }}</td>
                <td class="text-right tabular-nums">{{ item.count }}</td>
                <td class="w-40">
                  <div class="bg-base-200 rounded-full h-2">
                    <div class="bg-primary rounded-full h-2" style="width: {{ (item.count / max_count * 100)|int }}%"></div>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <p class="text-base-content/50 text-sm">No data yet.</p>
        {% endif %}
      </div>
    </div>

    <div class="card bg-base-100 shadow-sm">
      <div class="card-body">
        <h2 class="card-title text-base">Rule Overrides</h2>
        <div class="text-4xl font-bold {% if override_count > 0 %}text-warning{% endif %}">
          {{ override_count }}
        </div>
        <p class="text-sm text-base-content/60 mt-1">
          Times a business rule changed the LLM's recommended action.
        </p>
      </div>
    </div>

  </div>

  <!-- Recent activity -->
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <div class="flex items-center justify-between mb-2">
        <h2 class="card-title text-base">Recent Activity</h2>
        <a href="/log" class="btn btn-ghost btn-xs">View all →</a>
      </div>
      {% if recent %}
      <div class="overflow-x-auto">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>Received</th>
              <th>Sender</th>
              <th>Subject</th>
              <th>Type</th>
              <th>Action</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for e in recent %}
            <tr class="hover cursor-pointer" onclick="window.location='/log/{{ e.id }}'">
              <td class="text-xs text-base-content/60 whitespace-nowrap">
                {{ e.received_at.strftime('%m/%d %H:%M') if e.received_at else '—' }}
              </td>
              <td class="text-xs max-w-[160px] truncate">{{ e.sender_address }}</td>
              <td class="text-xs max-w-[200px] truncate">{{ e.subject or '—' }}</td>
              <td>
                <span class="badge badge-xs badge-ghost">{{ e.sender_type }}</span>
              </td>
              <td class="text-xs">{{ action_labels.get(e.final_action, e.final_action) }}</td>
              <td>
                {% if e.status == 'completed' %}
                  <span class="badge badge-xs badge-success">done</span>
                {% elif e.status == 'failed' %}
                  <span class="badge badge-xs badge-error">failed</span>
                {% elif e.status == 'processing' %}
                  <span class="badge badge-xs badge-warning">processing</span>
                {% else %}
                  <span class="badge badge-xs">{{ e.status }}</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-base-content/50 text-sm">No emails processed yet.</p>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}