{% extends "base.html" %}
{% block title %}Importer – AAZ Accounting{% endblock %}
{% block page_title %}Importer un relevé bancaire{% endblock %}
{% block content %}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem">

  <!-- Upload relevé -->
  <div class="card">
    <div class="card-header">📄 Relevé bancaire (PDF / XLSX / CSV)</div>
    <div class="card-body">
      <form method="POST" action="{{ url_for('upload.upload_bank_statement') }}" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="upload-zone" id="dropzone" onclick="document.getElementById('bankFile').click()">
          <div class="upload-icon">⬆</div>
          <div class="upload-text">Glissez votre relevé ici ou cliquez pour parcourir</div>
          <div class="upload-sub">PDF, XLSX, XLS, CSV – 20 MB max</div>
          <input type="file" id="bankFile" name="file" accept=".pdf,.xlsx,.xls,.csv" style="display:none" onchange="showFile(this)">
        </div>
        <div id="fileInfo" class="hidden" style="margin-top:1rem;padding:.75rem;background:var(--bg);border-radius:8px;font-size:.85rem"></div>
        <button type="submit" class="btn btn-primary w-100 mt-2">Traiter et classifier automatiquement</button>
      </form>
    </div>
  </div>

  <!-- Import FEC historique -->
  <div class="card">
    <div class="card-header">📊 FEC historique (enrichissement règles)</div>
    <div class="card-body">
      <p style="font-size:.87rem;color:var(--text-muted);margin-bottom:1rem">
        Importez un FEC existant pour enrichir automatiquement le référentiel fournisseurs 
        et détecter les frais fixes récurrents.
      </p>
      <form method="POST" action="{{ url_for('upload.upload_fec') }}" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group">
          <label>Fichier FEC (XLSX)</label>
          <input type="file" name="file" accept=".xlsx,.xls,.csv" class="w-100">
        </div>
        <button type="submit" class="btn btn-outline w-100">Importer le référentiel FEC</button>
      </form>
    </div>
  </div>
</div>

<!-- Historique imports -->
{% if recent_batches %}
<div class="card mt-2">
  <div class="card-header">Imports récents</div>
  <div class="table-wrapper">
    <table>
      <thead><tr><th>Date</th><th>Fichier</th><th>Opérations</th><th>Période</th><th>Statut</th><th>Action</th></tr></thead>
      <tbody>
        {% for b in recent_batches %}
        <tr>
          <td>{{ b.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
          <td>{{ b.original_filename }}</td>
          <td class="text-right">{{ b.entries_count }}</td>
          <td>{% if b.period_start %}{{ b.period_start.strftime('%d/%m') }} → {{ b.period_end.strftime('%d/%m/%Y') }}{% endif %}</td>
          <td>
            {% if b.status == 'done' %}<span class="tag tag-success">✓ Traité</span>
            {% elif b.status == 'error' %}<span class="tag tag-danger">✗ Erreur</span>
            {% else %}<span class="tag tag-warning">En cours</span>{% endif %}
          </td>
          <td><a href="{{ url_for('journal.index', batch_id=b.id) }}" class="btn btn-outline btn-sm">Voir journal</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<script>
const dz = document.getElementById('dropzone');
dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
dz.addEventListener('drop', e => {
  e.preventDefault(); dz.classList.remove('drag-over');
  const f = e.dataTransfer.files[0];
  if (f) { document.getElementById('bankFile').files = e.dataTransfer.files; showFile({ files: [f] }); }
});
function showFile(input) {
  const f = input.files[0];
  if (!f) return;
  const info = document.getElementById('fileInfo');
  info.classList.remove('hidden');
  info.innerHTML = `📄 <strong>${f.name}</strong> – ${(f.size/1024).toFixed(1)} Ko`;
}
</script>
{% endblock %}