{% extends "base.html" %}
{% block title %}Painel — Frota Trucks{% endblock %}
{% block body %}
<header>
  <div class="brand">Frota Trucks{% set h = header_info() %}{% if h.company %} · {{ h.company }}{% endif %}{% if h.machine_id %} · <span class="secondary" style="font-weight:400; font-size:0.82rem">Cód: {{ h.machine_id }}</span>{% endif %}</div>
  <nav style="display:flex; align-items:center">
    <a href="/">Painel</a>
    <a href="/manutencao">Itens de manutenção</a>
    <a href="/configuracoes">Configurações</a>
    <a href="/usuarios">Usuários</a>
    <form method="post" action="/api/logout" style="display:inline; margin-left:18px">
      <button type="submit" class="secondary-btn" style="padding:4px 10px; font-size:0.85rem">Sair</button>
    </form>
  </nav>
</header>
<main>
  {% if mensalidade_aviso %}
  <div class="badge badge-vencendo" style="margin-bottom:16px; display:flex"><span class="dot"></span>{{ mensalidade_aviso }}</div>
  {% endif %}
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px">
    <div class="secondary">
      {% if last_sync %}Última sincronização: {{ last_sync }}{% else %}Ainda não sincronizado{% endif %}
    </div>
    <form method="post" action="/api/sync">
      <button type="submit">Sincronizar agora</button>
    </form>
  </div>

  <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:24px">
    <a href="/?status=todos" class="card filter-card{{ ' active' if filtro == 'todos' else '' }}">
      <div class="muted" style="font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em">Total de trucks</div>
      <div style="font-size:2rem; font-weight:700; margin-top:6px">{{ counts.total }}</div>
    </a>
    <a href="/?status=ok" class="card filter-card{{ ' active' if filtro == 'ok' else '' }}" style="border-left:3px solid var(--status-good)">
      <div class="muted" style="font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em">OK</div>
      <div style="font-size:2rem; font-weight:700; margin-top:6px">{{ counts.ok }}</div>
    </a>
    <a href="/?status=vencendo" class="card filter-card{{ ' active' if filtro == 'vencendo' else '' }}" style="border-left:3px solid var(--status-warning)">
      <div class="muted" style="font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em">Vencendo</div>
      <div style="font-size:2rem; font-weight:700; margin-top:6px">{{ counts.vencendo }}</div>
    </a>
    <a href="/?status=vencido" class="card filter-card{{ ' active' if filtro == 'vencido' else '' }}" style="border-left:3px solid var(--status-critical)">
      <div class="muted" style="font-size:0.8rem; text-transform:uppercase; letter-spacing:0.03em">Vencido</div>
      <div style="font-size:2rem; font-weight:700; margin-top:6px">{{ counts.vencido }}</div>
    </a>
  </div>

  <div class="card">
    {% if filtro != "todos" %}
    <div class="secondary" style="margin-bottom:12px; display:flex; align-items:center; gap:8px">
      Filtrando por: <span class="badge badge-{{ filtro }}"><span class="dot"></span>
        {% if filtro == "ok" %}OK{% elif filtro == "vencendo" %}Vencendo{% else %}Vencido{% endif %}
      </span>
      <a href="/?status=todos" class="secondary" style="font-size:0.85rem">(limpar filtro)</a>
    </div>
    {% endif %}
    <table>
      <thead>
        <tr>
          <th>Truck</th>
          <th>Motor</th>
          <th>Odômetro</th>
          <th>Horas motor</th>
          <th>Status manutenção</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for row in trucks %}
        <tr>
          <td><strong>{{ row.truck.name }}</strong></td>
          <td class="secondary">{{ row.truck.engine_model or "—" }}</td>
          <td>{{ "%.0f"|format(row.truck.odometer_miles) if row.truck.odometer_miles is not none else "—" }} mi</td>
          <td>{{ "%.0f"|format(row.truck.engine_hours) if row.truck.engine_hours is not none else "—" }} h</td>
          <td>
            <span class="badge badge-{{ row.status }}"><span class="dot"></span>
              {% if row.status == "ok" %}OK
              {% elif row.status == "vencendo" %}Vencendo
              {% elif row.status == "vencido" %}Vencido
              {% elif row.status == "sem_registro" %}Sem registro
              {% else %}Sem config.{% endif %}
            </span>
          </td>
          <td><a href="/trucks/{{ row.truck.id }}" class="link-btn">Detalhes</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not trucks and filtro == "todos" %}<p class="muted">Nenhum truck encontrado. Verifique a sincronização com o Geotab.</p>{% endif %}
    {% if not trucks and filtro != "todos" %}<p class="muted">Nenhum truck com esse status agora.</p>{% endif %}
  </div>
</main>
{% endblock %}