{% 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="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-2">
  <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>
</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>Data</th><th>Fornecedor</th><th class="r">Valor</th><th></th></tr></thead>
      <tbody>
        {% for d in recent %}
        <tr>
          <td class="nowrap">{{ d.purchase_date }}</td>
          <td>{{ d.supplier_name }}</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 %}