{% extends "base.html" %}
{% block title %}GED – AAZ Accounting{% endblock %}
{% block page_title %}Gestion Électronique de Documents{% endblock %}

{% block topbar_actions %}
<label class="btn btn-primary btn-sm" style="cursor:pointer">
  ⬆ Importer des factures
  <input type="file" id="gedUpload" multiple accept=".pdf,.jpg,.jpeg,.png,.webp"
         style="display:none" onchange="uploadFiles(this)">
</label>
{% endblock %}

{% block content %}

<!-- Stats -->
<div class="kpi-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:1.5rem">
  <div class="kpi-card info"><div class="kpi-label">Total documents</div><div class="kpi-value">{{ stats.total }}</div></div>
  <div class="kpi-card warning"><div class="kpi-label">À associer</div><div class="kpi-value">{{ stats.pending }}</div></div>
  <div class="kpi-card info"><div class="kpi-label">Suggérés</div><div class="kpi-value">{{ stats.suggested }}</div></div>
  <div class="kpi-card success"><div class="kpi-label">Validés</div><div class="kpi-value">{{ stats.validated }}</div></div>
</div>

<!-- Filtres -->
<div class="card mb-2">
  <div class="card-body" style="padding:.75rem 1.5rem">
    <form method="GET" style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap">
      <input type="text" name="q" value="{{ search }}" placeholder="Rechercher fournisseur, pièce…"
             style="flex:1;min-width:200px;padding:.4rem .8rem;border:1px solid var(--border-dark);border-radius:6px;font-size:.85rem">
      <select name="status" onchange="this.form.submit()"
              style="padding:.4rem .8rem;border:1px solid var(--border-dark);border-radius:6px;font-size:.85rem">
        <option value="">Tous les statuts</option>
        <option value="uploaded" {% if status_filter=='uploaded' %}selected{% endif %}>Importés</option>
        <option value="renamed" {% if status_filter=='renamed' %}selected{% endif %}>Renommés</option>
        <option value="validated" {% if status_filter=='validated' %}selected{% endif %}>Validés</option>
      </select>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      <a href="{{ url_for('ged.index') }}" class="btn btn-outline btn-sm">Réinitialiser</a>
    </form>
  </div>
</div>

<!-- Zone de drop glisser-déposer -->
<div id="dropZone" class="upload-zone" style="margin-bottom:1.5rem;padding:1.5rem"
     ondragover="event.preventDefault();this.classList.add('drag-over')"
     ondragleave="this.classList.remove('drag-over')"
     ondrop="handleDrop(event)">
  <div class="upload-icon" style="font-size:1.5rem">📄</div>
  <div class="upload-text">Glissez vos factures PDF / JPG / PNG ici</div>
  <div class="upload-sub">ou cliquez sur "Importer des factures" ci-dessus</div>
</div>

<!-- Table documents -->
<div class="card">
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Aperçu</th>
          <th>Fichier original</th>
          <th>Nom suggéré / final</th>
          <th>Fournisseur</th>
          <th>Pièce</th>
          <th>Écriture associée</th>
          <th>Statut</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for doc in docs.items %}
        <tr id="doc-row-{{ doc.id }}">
          <!-- Aperçu miniature -->
          <td style="width:60px">
            <a href="{{ url_for('ged.view_doc', doc_id=doc.id) }}" target="_blank"
               style="display:block;width:48px;height:48px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem">
              {% if doc.is_pdf %}📄{% elif doc.is_image %}🖼{% else %}📎{% endif %}
            </a>
          </td>

          <!-- Fichier original -->
          <td style="font-size:.78rem;color:var(--text-muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
              title="{{ doc.original_filename }}">
            {{ doc.original_filename }}
          </td>

          <!-- Nom suggéré / final -->
          <td>
            <div style="display:flex;align-items:center;gap:.5rem">
              <span id="name-{{ doc.id }}" style="font-size:.85rem;font-weight:500;color:var(--primary)">
                {{ doc.final_name or doc.suggested_name or '–' }}
              </span>
              <button class="btn btn-outline btn-sm" onclick="openRenameModal({{ doc.id }}, '{{ doc.supplier_name or '' }}', '{{ doc.piece_ref or '' }}')"
                      title="Modifier le nom" style="padding:.2rem .5rem;font-size:.75rem">✎</button>
            </div>
          </td>

          <!-- Fournisseur -->
          <td>
            <span id="sup-{{ doc.id }}" class="tag tag-info" style="font-size:.75rem">
              {{ doc.supplier_name or '?' }}
            </span>
          </td>

          <!-- Pièce -->
          <td class="font-mono" style="font-size:.82rem">
            <span id="piece-{{ doc.id }}">{{ doc.piece_ref or '–' }}</span>
          </td>

          <!-- Écriture associée -->
          <td id="assoc-{{ doc.id }}">
            {% if doc.journal_entry %}
              <div style="font-size:.8rem">
                <div class="font-mono">{{ doc.journal_entry.piece_ref }}</div>
                <div style="color:var(--text-muted)">{{ doc.journal_entry.label[:35] }}…</div>
                <div style="color:var(--success);font-size:.72rem">{{ "%.2f"|format(doc.journal_entry.debit or 0) }} €</div>
              </div>
            {% else %}
              <button class="btn btn-outline btn-sm"
                      onclick="openAssocModal({{ doc.id }}, '{{ doc.supplier_name or '' }}')"
                      style="font-size:.75rem">
                🔗 Associer
              </button>
            {% endif %}
          </td>

          <!-- Statut -->
          <td>
            {% if doc.association_status == 'validated' %}
              <span class="tag tag-success">✓ Validé</span>
            {% elif doc.association_status == 'suggested' %}
              <span class="tag tag-warning">💡 Suggéré</span>
            {% else %}
              <span class="tag tag-muted">En attente</span>
            {% endif %}
          </td>

          <!-- Actions -->
          <td style="white-space:nowrap">
            <a href="{{ url_for('ged.view_doc', doc_id=doc.id) }}" target="_blank"
               class="btn btn-outline btn-sm" title="Voir">👁</a>
            <a href="{{ url_for('ged.download', doc_id=doc.id) }}"
               class="btn btn-outline btn-sm" title="Télécharger">⬇</a>
            {% if current_user.is_admin and doc.association_status != 'validated' %}
            <button class="btn btn-danger btn-sm" onclick="deleteDoc({{ doc.id }})" title="Supprimer">✕</button>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="8" class="text-center text-muted" style="padding:3rem">
          Aucun document. Importez vos premières factures.
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if docs.pages > 1 %}
  <div class="pagination">
    {% if docs.has_prev %}<a href="{{ url_for('ged.index', page=docs.prev_num) }}" class="page-btn">‹</a>{% endif %}
    {% for p in docs.iter_pages() %}
      {% if p %}<a href="{{ url_for('ged.index', page=p) }}" class="page-btn {% if p==docs.page %}active{% endif %}">{{ p }}</a>
      {% else %}<span class="page-btn" style="border:none">…</span>{% endif %}
    {% endfor %}
    {% if docs.has_next %}<a href="{{ url_for('ged.index', page=docs.next_num) }}" class="page-btn">›</a>{% endif %}
  </div>
  {% endif %}
</div>

<!-- ── MODAL RENOMMAGE ─────────────────────────────────────────────────────── -->
<div id="renameModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center">
  <div style="background:var(--surface);border-radius:12px;padding:2rem;width:100%;max-width:500px;margin:1rem">
    <h3 style="margin-bottom:1.5rem;color:var(--primary)">✎ Renommer le document</h3>
    <input type="hidden" id="renameDocId">
    <div class="form-group">
      <label>Nom du fournisseur</label>
      <input type="text" id="renameSupplier" placeholder="ex: IONOS, Buffalo Grill, SFR">
    </div>
    <div class="form-group">
      <label>Numéro de pièce</label>
      <input type="text" id="renamePiece" placeholder="ex: AC-0126-03">
    </div>
    <div style="background:var(--bg);padding:.75rem;border-radius:8px;margin-bottom:1rem;font-size:.85rem">
      <strong>Aperçu :</strong>
      <span id="renamePreview" style="color:var(--primary);font-weight:600"></span>
    </div>
    <div class="form-group">
      <label>Ou saisir un nom personnalisé</label>
      <input type="text" id="renameCustom" placeholder="laisser vide pour utiliser la suggestion">
    </div>
    <div style="display:flex;gap:.75rem;justify-content:flex-end">
      <button class="btn btn-outline" onclick="closeModal('renameModal')">Annuler</button>
      <button class="btn btn-primary" onclick="saveRename()">Enregistrer</button>
    </div>
  </div>
</div>

<!-- ── MODAL ASSOCIATION ───────────────────────────────────────────────────── -->
<div id="assocModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center">
  <div style="background:var(--surface);border-radius:12px;padding:2rem;width:100%;max-width:600px;margin:1rem;max-height:80vh;overflow-y:auto">
    <h3 style="margin-bottom:1.5rem;color:var(--primary)">🔗 Associer à une écriture comptable</h3>
    <input type="hidden" id="assocDocId">

    <!-- Suggestions automatiques -->
    <div id="suggestionsBlock">
      <p style="font-size:.85rem;color:var(--text-muted);margin-bottom:.75rem">💡 Correspondances détectées :</p>
      <div id="suggestionsList"></div>
    </div>

    <!-- Recherche manuelle -->
    <div style="margin-top:1.25rem">
      <p style="font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem">🔍 Rechercher manuellement :</p>
      <input type="text" id="assocSearch" placeholder="Numéro de pièce, libellé, fournisseur…"
             oninput="searchEntries(this.value)"
             style="width:100%;padding:.5rem .8rem;border:1.5px solid var(--border-dark);border-radius:6px;font-size:.85rem">
      <div id="searchResults" style="margin-top:.5rem"></div>
    </div>

    <div style="display:flex;justify-content:flex-end;margin-top:1.5rem">
      <button class="btn btn-outline" onclick="closeModal('assocModal')">Fermer</button>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
const CSRF = document.cookie.match(/csrf_token=([^;]+)/)?.[1] || '';

// ── Upload fichiers ────────────────────────────────────────────────────────────
async function uploadFiles(input) {
  const form = new FormData();
  for (const f of input.files) form.append('files', f);
  form.append('csrf_token', CSRF);
  const r = await fetch('{{ url_for("ged.upload") }}', { method:'POST', body: form });
  if (r.redirected || r.ok) location.reload();
}

function handleDrop(e) {
  e.preventDefault();
  document.getElementById('dropZone').classList.remove('drag-over');
  const dt = e.dataTransfer;
  const input = document.getElementById('gedUpload');
  // Créer un nouveau FileList via DataTransfer
  const dtr = new DataTransfer();
  for (const f of dt.files) dtr.items.add(f);
  input.files = dtr.files;
  uploadFiles(input);
}

// ── Modal renommage ────────────────────────────────────────────────────────────
let _renameDocId = null;
function openRenameModal(id, supplier, piece) {
  _renameDocId = id;
  document.getElementById('renameDocId').value = id;
  document.getElementById('renameSupplier').value = supplier;
  document.getElementById('renamePiece').value = piece;
  updatePreview();
  showModal('renameModal');
}
function updatePreview() {
  const sup = document.getElementById('renameSupplier').value.trim();
  const piece = document.getElementById('renamePiece').value.trim();
  let preview = '';
  if (sup && piece) preview = `${sup} - ${piece}.pdf`;
  else if (sup) preview = `${sup}.pdf`;
  else if (piece) preview = `${piece}.pdf`;
  document.getElementById('renamePreview').textContent = preview || '–';
}
document.getElementById('renameSupplier')?.addEventListener('input', updatePreview);
document.getElementById('renamePiece')?.addEventListener('input', updatePreview);

async function saveRename() {
  const id = document.getElementById('renameDocId').value;
  const r = await fetch(`/ged/${id}/rename`, {
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
    body: JSON.stringify({
      supplier_name: document.getElementById('renameSupplier').value.trim(),
      piece_ref: document.getElementById('renamePiece').value.trim(),
      custom_name: document.getElementById('renameCustom').value.trim(),
    })
  });
  if (r.ok) {
    const d = await r.json();
    document.getElementById(`name-${id}`).textContent = d.final_name;
    closeModal('renameModal');
  }
}

// ── Modal association ──────────────────────────────────────────────────────────
async function openAssocModal(id, supplier) {
  document.getElementById('assocDocId').value = id;
  document.getElementById('suggestionsList').innerHTML = '<div style="color:var(--text-muted);font-size:.85rem">Chargement…</div>';
  document.getElementById('searchResults').innerHTML = '';
  showModal('assocModal');

  // Charger les suggestions
  const r = await fetch(`/ged/${id}/suggestions`);
  const suggestions = await r.json();
  const container = document.getElementById('suggestionsList');

  if (!suggestions.length) {
    container.innerHTML = '<div style="color:var(--text-muted);font-size:.82rem">Aucune correspondance automatique trouvée.</div>';
    return;
  }
  container.innerHTML = suggestions.map(s => `
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.65rem .75rem;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;cursor:pointer"
         onclick="associateEntry(${id}, ${s.entry_id})">
      <div>
        <div style="display:flex;gap:.5rem;align-items:center">
          <span class="font-mono" style="font-size:.82rem">${s.piece_ref || '–'}</span>
          <span style="font-size:.78rem;color:var(--text-muted)">${s.date}</span>
          <span style="background:#DBEAFE;color:#1E40AF;padding:.1rem .4rem;border-radius:4px;font-size:.72rem">${s.score}% conf.</span>
        </div>
        <div style="font-size:.85rem;margin-top:.2rem">${s.label}</div>
        <div style="font-size:.78rem;color:var(--text-muted)">${s.account}</div>
      </div>
      <div style="font-weight:700;color:var(--primary);white-space:nowrap;margin-left:1rem">
        ${s.amount.toFixed(2)} €
      </div>
    </div>
  `).join('');
}

let _searchTimeout;
async function searchEntries(q) {
  clearTimeout(_searchTimeout);
  if (q.length < 2) { document.getElementById('searchResults').innerHTML = ''; return; }
  _searchTimeout = setTimeout(async () => {
    const r = await fetch(`/ged/search-entries?q=${encodeURIComponent(q)}`);
    const entries = await r.json();
    const id = document.getElementById('assocDocId').value;
    document.getElementById('searchResults').innerHTML = entries.map(e => `
      <div style="display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;margin-bottom:.3rem;cursor:pointer"
           onclick="associateEntry(${id}, ${e.id})">
        <div>
          <span class="font-mono" style="font-size:.8rem">${e.piece_ref || '–'}</span>
          <span style="font-size:.8rem;margin-left:.5rem">${e.label}</span>
        </div>
        <span style="font-weight:600;color:var(--primary)">${e.amount.toFixed(2)} €</span>
      </div>
    `).join('') || '<div style="font-size:.82rem;color:var(--text-muted)">Aucun résultat.</div>';
  }, 300);
}

async function associateEntry(docId, entryId) {
  const r = await fetch(`/ged/${docId}/associate`, {
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
    body: JSON.stringify({entry_id: entryId})
  });
  if (r.ok) {
    const d = await r.json();
    document.getElementById(`assoc-${docId}`).innerHTML =
      `<span class="tag tag-success">✓ ${d.piece_ref || 'Validé'}</span>`;
    document.getElementById(`name-${docId}`).textContent = d.final_name;
    closeModal('assocModal');
  }
}

// ── Supprimer ─────────────────────────────────────────────────────────────────
async function deleteDoc(id) {
  if (!confirm('Supprimer ce document ?')) return;
  const r = await fetch(`/ged/${id}/delete`, { method:'DELETE', headers:{'X-CSRFToken':CSRF} });
  if (r.ok) document.getElementById(`doc-row-${id}`).remove();
  else { const d = await r.json(); alert(d.error); }
}

// ── Helpers modaux ────────────────────────────────────────────────────────────
function showModal(id) { document.getElementById(id).style.display = 'flex'; }
function closeModal(id) { document.getElementById(id).style.display = 'none'; }
document.querySelectorAll('[id$="Modal"]').forEach(m => {
  m.addEventListener('click', e => { if (e.target === m) m.style.display = 'none'; });
});
</script>
{% endblock %}