{% extends "base.html" %}
{% block title %}Gravações{% endblock %}
{% set active = "recordings" %}
{% block head %}
<style>
  .rec-player { display: flex; align-items: center; gap: 8px; }
  .rec-player audio { height: 34px; min-width: 180px; }
  .badge-inbound { background: #e3f2fd; color: #1565c0; }
  .badge-outbound { background: #fce4ec; color: #c62828; }
  .badge-answered { background: #e8f5e9; color: #2e7d32; }
  .badge-lost { background: #fff3e0; color: #e65100; }
  .badge-busy { background: #f3e5f5; color: #6a1b9a; }
  .rec-ext { font-family: monospace; font-weight: 600; }
  @media (max-width: 768px) {
    .rec-player { flex-direction: column; align-items: flex-start; }
    .rec-player audio { min-width: 140px; max-width: 200px; }
  }
</style>
{% endblock %}
{% block content %}
<h4 class="mb-3">🎙️ Gravações</h4>

<form class="row g-2 mb-3 align-items-end" method="get" action="/app/recordings">
  <div class="col-md-2">
    <label class="form-label" style="font-size:0.8rem">Data início</label>
    <input type="date" name="data_inicio" class="form-control form-control-sm" value="{{ data_inicio }}">
  </div>
  <div class="col-md-2">
    <label class="form-label" style="font-size:0.8rem">Data fim</label>
    <input type="date" name="data_fim" class="form-control form-control-sm" value="{{ data_fim }}">
  </div>
  <div class="col-md-2">
    <label class="form-label" style="font-size:0.8rem">Diretório</label>
    <select name="fila" class="form-select form-select-sm">
      <option value="">Todos</option>
      {% for q in queues %}
      <option value="{{ q }}" {% if fila_filtro == q %}selected{% endif %}>{{ q }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label" style="font-size:0.8rem">Buscar (ramal, número, nome)</label>
    <input type="text" name="search" class="form-control form-control-sm" placeholder="Ex: 100, 554799..." value="{{ search_filtro }}">
  </div>
  <div class="col-md-1">
    <button type="submit" class="btn btn-sm btn-primary w-100">Filtrar</button>
  </div>
  <div class="col-md-1">
    <a href="/app/recordings" class="btn btn-sm btn-outline-secondary w-100">Limpar</a>
  </div>
</form>

<div class="row mb-3">
  <div class="col-md-2">
    <div class="card card-dash text-center">
      <div class="card-title">{{ total }}</div>
      <div class="card-text small">gravações</div>
    </div>
  </div>
</div>

{% if files %}
<div class="table-responsive">
  <table class="table table-hover align-middle small" id="recordingsTable">
    <thead class="table-light">
      <tr>
        <th>Uniq.ID</th>
        <th>Data/Hora</th>
        <th>Ramal</th>
        <th>Cliente</th>
        <th>Direção</th>
        <th>Status</th>
        <th>Duração</th>
        <th>Arquivo</th>
        <th style="min-width:240px">Player</th>
      </tr>
    </thead>
    <tbody>
      {% for f in files %}
      <tr>
        <td style="font-size:0.75em;font-family:monospace;max-width:120px;overflow:hidden;text-overflow:ellipsis" title="{{ f.uniqueid }}">{{ f.uniqueid[:20] }}{% if f.uniqueid|length > 20 %}...{% endif %}</td>
        <td class="small">{{ f.date }}</td>
        <td><span class="rec-ext">{{ f.extension }}</span></td>
        <td>{{ f.caller }}</td>
        <td>
          {% if f.direction == "inbound" %}
          <span class="badge badge-inbound">Entrada</span>
          {% elif f.direction == "outbound" %}
          <span class="badge badge-outbound">Saída</span>
          {% else %}
          <span class="badge bg-secondary">—</span>
          {% endif %}
        </td>
        <td>
          {% if f.status == "answered" %}
          <span class="badge badge-answered">Atendida</span>
          {% elif f.status == "lost" %}
          <span class="badge badge-lost">Perdida</span>
          {% elif f.status == "busy" %}
          <span class="badge badge-busy">Ocupado</span>
          {% elif f.status %}
          <span class="badge bg-secondary">{{ f.status }}</span>
          {% else %}
          <span class="badge bg-light text-muted">—</span>
          {% endif %}
        </td>
        <td>{{ f.duration or f.size_mb ~ " MB" }}</td>
        <td class="text-muted" style="max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{ f.name }}">
          {{ f.name[:30] ~ "..." if f.name|length > 30 else f.name }}
        </td>
        <td>
          <div class="rec-player">
            <audio controls preload="none" style="height:32px; width:200px;">
              <source src="/app/recordings/play?path={{ f.path | urlencode }}" type="audio/wav">
              Navegador nao suporta audio HTML5.
            </audio>
            <a href="/app/recordings/download?path={{ f.path | urlencode }}" class="btn btn-sm btn-outline-secondary" title="Download">⬇</a>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if total_pages > 1 %}
<nav>
  <ul class="pagination pagination-sm justify-content-center">
    {% for p in range(1, total_pages + 1) %}
    <li class="page-item {% if p == page %}active{% endif %}">
      <a class="page-link" href="?data_inicio={{ data_inicio }}&data_fim={{ data_fim }}&fila={{ fila_filtro }}&search={{ search_filtro }}&page={{ p }}">{{ p }}</a>
    </li>
    {% endfor %}
  </ul>
</nav>
{% endif %}

{% else %}
<div class="card">
  <div class="card-body text-center text-muted py-5">
    {% if data_inicio or data_fim or fila_filtro or search_filtro %}
    Nenhuma gravacao encontrada com esses filtros.
    {% else %}
    Nenhuma gravacao disponivel. As gravacoes aparecerao apos realizar chamadas com gravacao ativada.
    {% endif %}
  </div>
</div>
{% endif %}
{% endblock %}