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

<section class="upload-panel">
  <div>
    <h2>Importar documentos</h2>
    <p class="muted">Envie PDFs ou imagens de notas e cupons fiscais. A leitura é feita
      {% if openai_enabled %}por IA (OpenAI){% else %}por OCR/heurística local{% endif %},
      e você confirma antes de gravar.</p>
  </div>
  <form method="post" action="/upload" enctype="multipart/form-data" class="upload-form" id="uploadForm">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="filedrop" id="filedrop">
      <input type="file" name="files" id="fileInput" multiple accept=".pdf,.jpg,.jpeg,.png" hidden>
      <span class="filedrop-icon">⬆</span>
      <span class="filedrop-text" id="filedropText">Clique ou arraste arquivos aqui</span>
    </label>
    <button type="submit" class="btn btn-primary" id="uploadBtn">Enviar e revisar</button>
  </form>
</section>

<section class="card">
  <form method="get" action="/" class="filters">
    <label class="field grow">
      <span>Categoria</span>
      <select name="category" onchange="this.form.submit()">
        <option value="">Todas</option>
        {% for c in categorias %}
        <option value="{{ c.id }}" {{ 'selected' if selected_category == c.id | string else '' }}>{{ c.categoria }}</option>
        {% endfor %}
        <option value="none" {{ 'selected' if selected_category == 'none' else '' }}>Sem categoria</option>
      </select>
    </label>
    <div class="filters-actions">
      <button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
      <a href="/" class="btn btn-ghost btn-sm">Limpar</a>
    </div>
  </form>
</section>

<section class="kpis">
  <div class="kpi">
    <span class="kpi-label">Total gasto</span>
    <strong class="kpi-value money">{{ totals.total | money }}</strong>
    <span class="kpi-foot">{{ totals.count }} documento(s)</span>
  </div>
  <div class="kpi">
    <span class="kpi-label">Ticket médio</span>
    <strong class="kpi-value">{{ totals.avg | money }}</strong>
    <span class="kpi-foot">por documento</span>
  </div>
  <div class="kpi">
    <span class="kpi-label">Meses com registro</span>
    <strong class="kpi-value">{{ months | length }}</strong>
    <span class="kpi-foot">{{ suppliers | length }} fornecedor(es) no top</span>
  </div>
</section>

<section class="grid-3">
  <div class="card">
    <h3>Gastos por mês</h3>
    {% if months %}
    <div class="barlist">
      {% for m in months %}
      <div class="barrow">
        <span class="barlabel">{{ m.label }}</span>
        <span class="bartrack"><span class="barfill" style="width: {{ m.pct }}%"></span></span>
        <span class="barval">{{ m.total | money }}</span>
      </div>
      {% endfor %}
    </div>
    {% else %}<p class="muted">Sem dados ainda.</p>{% endif %}
  </div>

  <div class="card">
    <h3>Gastos por fornecedor</h3>
    {% if suppliers %}
    <div class="barlist">
      {% for s in suppliers %}
      <div class="barrow">
        <span class="barlabel" title="{{ s.supplier_name }}">{{ s.supplier_name }}</span>
        <span class="bartrack"><span class="barfill alt" style="width: {{ s.pct }}%"></span></span>
        <span class="barval">{{ s.total | money }}</span>
      </div>
      {% endfor %}
    </div>
    {% else %}<p class="muted">Sem dados ainda.</p>{% endif %}
  </div>

  <div class="card">
    <h3>Gastos por categoria</h3>
    {% if categories %}
    <div class="barlist">
      {% for c in categories %}
      <div class="barrow">
        <span class="barlabel" title="{{ c.categoria }}">{{ c.categoria }}</span>
        <span class="bartrack"><span class="barfill" style="width: {{ c.pct }}%"></span></span>
        <span class="barval">{{ c.total | money }}</span>
      </div>
      {% endfor %}
    </div>
    {% else %}<p class="muted">Sem dados ainda.</p>{% endif %}
  </div>
</section>

<section class="card">
  <div class="card-head">
    <h3>Últimos documentos</h3>
    <a href="/documents" class="btn btn-ghost btn-sm">Ver todos</a>
  </div>
  {% if recent %}
  <div class="table-scroll">
    <table class="table">
      <thead><tr><th>Competência</th><th>Fornecedor</th><th>Categoria</th><th class="r">Valor</th><th></th></tr></thead>
      <tbody>
        {% for d in recent %}
        <tr>
          <td class="nowrap">{{ d.mes | competencia(d.ano) }}</td>
          <td>{{ d.supplier_name }}</td>
          <td>{{ d.categoria_nome or '' }}</td>
          <td class="r money nowrap">{{ d.total_paid | money }}</td>
          <td class="r"><a href="/documents/{{ d.id }}/edit" class="link">editar</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}<p class="muted">Nenhum documento confirmado. Comece importando acima.</p>{% endif %}
</section>

{% endblock %}