{% extends "base.html" %}
{% block title %}Journal comptable – AAZ Accounting{% endblock %}
{% block page_title %}Journal comptable{% endblock %}

{% block topbar_actions %}
{% if batch_id %}
<button class="btn btn-success btn-sm" onclick="validateAll()">✓ Tout valider (lot)</button>
{% endif %}
<a href="{{ url_for('export.index') }}" class="btn btn-primary btn-sm">⬇ Exporter Sage</a>
{% endblock %}

{% block content %}

<!-- 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:flex-end;flex-wrap:wrap">
      <div>
        <label style="font-size:.75rem">Statut</label>
        <select name="status" class="btn btn-outline btn-sm" onchange="this.form.submit()">
          <option value="">Tous</option>
          <option value="draft" {% if request.args.get('status')=='draft' %}selected{% endif %}>À valider</option>
          <option value="validated" {% if request.args.get('status')=='validated' %}selected{% endif %}>Validés</option>
          <option value="exported" {% if request.args.get('status')=='exported' %}selected{% endif %}>Exportés</option>
        </select>
      </div>
      <div>
        <label style="font-size:.75rem">Compte</label>
        <input type="text" name="account" value="{{ request.args.get('account','') }}" placeholder="625..." style="width:120px;padding:.35rem .7rem;border:1px solid var(--border-dark);border-radius:6px;font-size:.85rem">
      </div>
      <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
      <a href="{{ url_for('journal.index') }}" class="btn btn-outline btn-sm">Réinitialiser</a>
    </form>
  </div>
</div>

<!-- Légende -->
<div style="display:flex;gap:1rem;margin-bottom:1rem;font-size:.78rem;color:var(--text-muted)">
  <span style="background:#F0FFF4;padding:.2rem .6rem;border-radius:4px">🟢 Repas formation (TTC)</span>
  <span style="background:#FFF8F0;padding:.2rem .6rem;border-radius:4px">🟠 Contrepartie banque</span>
  <span style="background:#DBEAFE;padding:.2rem .6rem;border-radius:4px">🔵 TVA déductible</span>
  <span style="color:var(--success)">● Confiance ≥ 90%</span>
  <span style="color:var(--warning)">● 60–90%</span>
  <span style="color:var(--danger)">● < 60%</span>
</div>

<!-- Table -->
<div class="card">
  <div class="table-wrapper">
    <table id="journalTable">
      <thead>
        <tr>
          <th><input type="checkbox" id="selectAll" onchange="toggleAll(this)"></th>
          <th>Date</th>
          <th>Pièce</th>
          <th>Libellé</th>
          <th>Compte</th>
          <th>Libellé compte</th>
          <th class="text-right">Débit</th>
          <th class="text-right">Crédit</th>
          <th>TVA</th>
          <th>Conf.</th>
          <th>Statut</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for e in entries.items %}
        <tr id="row-{{ e.id }}"
            class="
              {% if e.is_formation %}tr-formation
              {% elif e.account_number == '512000' %}tr-bank
              {% elif e.account_number.startswith('445') %}tr-tva
              {% elif e.status.value == 'draft' %}tr-draft
              {% endif %}
            ">
          <td><input type="checkbox" class="row-check" value="{{ e.id }}"></td>
          <td style="white-space:nowrap">{{ e.entry_date.strftime('%d/%m/%Y') }}</td>
          <td class="font-mono" style="font-size:.8rem">{{ e.piece_ref or '–' }}</td>

          <!-- Libellé éditable -->
          <td>
            <span class="editable-label" data-id="{{ e.id }}" data-field="label"
                  title="Cliquer pour modifier"
                  style="cursor:pointer;border-bottom:1px dashed var(--border-dark)">
              {{ e.label[:55] }}{% if e.label|length > 55 %}…{% endif %}
            </span>
            {% if e.is_formation %}
              <span class="tag tag-form" style="margin-left:.3rem;font-size:.65rem">FORM.</span>
            {% endif %}
          </td>

          <!-- Compte éditable -->
          <td>
            <span class="editable-account font-mono" data-id="{{ e.id }}" data-field="account_number"
                  title="Cliquer pour modifier"
                  style="cursor:pointer;border-bottom:1px dashed var(--border-dark);font-size:.85rem">
              {{ e.account_number }}
            </span>
          </td>

          <td style="font-size:.8rem;color:var(--text-muted)">
            {{ (e.account_label or '')|truncate(25, True, '…') }}
          </td>

          <td class="text-right font-mono">
            {% if e.debit %}{{ "%.2f"|format(e.debit) }}{% endif %}
          </td>
          <td class="text-right font-mono">
            {% if e.credit %}{{ "%.2f"|format(e.credit) }}{% endif %}
          </td>

          <!-- TVA éditable -->
          <td>
            {% if e.tva_rate %}
            <select class="tva-select" data-id="{{ e.id }}"
                    style="font-size:.78rem;padding:.2rem .4rem;border:1px solid var(--border);border-radius:4px">
              {% for r in ['0','5.5','10','20','formation'] %}
              <option value="{{ r }}" {% if e.tva_rate == r %}selected{% endif %}>
                {% if r == 'formation' %}Form.{% else %}{{ r }}%{% endif %}
              </option>
              {% endfor %}
            </select>
            {% endif %}
          </td>

          <td>
            {% set conf = e.classification_confidence %}
            <span class="{% if conf >= 0.9 %}confidence-high{% elif conf >= 0.6 %}confidence-medium{% else %}confidence-low{% endif %}"
                  title="{{ e.classification_source }}">
              {{ "%.0f"|format(conf * 100) }}%
            </span>
          </td>

          <td>
            {% if e.status.value == 'draft' %}
              <span class="tag tag-warning">Brouillon</span>
            {% elif e.status.value == 'validated' %}
              <span class="tag tag-success">Validé</span>
            {% else %}
              <span class="tag tag-muted">Exporté</span>
            {% endif %}
          </td>

          <td style="white-space:nowrap">
            {% if e.status.value == 'draft' %}
            <button class="btn btn-success btn-sm" onclick="validateEntry({{ e.id }}, this)" title="Valider">✓</button>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="12" class="text-center text-muted" style="padding:2rem">Aucune écriture.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if entries.pages > 1 %}
  <div class="pagination">
    {% if entries.has_prev %}
    <a href="{{ url_for('journal.index', page=entries.prev_num, batch_id=batch_id, status=request.args.get('status'), account=request.args.get('account')) }}" class="page-btn">‹ Préc.</a>
    {% endif %}
    {% for p in entries.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
      {% if p %}
      <a href="{{ url_for('journal.index', page=p, batch_id=batch_id, status=request.args.get('status'), account=request.args.get('account')) }}"
         class="page-btn {% if p == entries.page %}active{% endif %}">{{ p }}</a>
      {% else %}
      <span class="page-btn" style="border:none;opacity:.4">…</span>
      {% endif %}
    {% endfor %}
    {% if entries.has_next %}
    <a href="{{ url_for('journal.index', page=entries.next_num, batch_id=batch_id, status=request.args.get('status'), account=request.args.get('account')) }}" class="page-btn">Suiv. ›</a>
    {% endif %}
  </div>
  {% endif %}
</div>

<!-- Barre d'actions en masse -->
<div id="bulkBar" style="display:none;position:fixed;bottom:1.5rem;left:calc(var(--sidebar-w) + 1.5rem);right:1.5rem;background:var(--primary);color:#fff;padding:.75rem 1.5rem;border-radius:10px;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 20px rgba(0,0,0,.2)">
  <span id="selectedCount">0 sélectionnés</span>
  <button class="btn btn-success btn-sm" onclick="validateSelected()">✓ Valider la sélection</button>
  <button class="btn btn-outline btn-sm" style="border-color:rgba(255,255,255,.4);color:#fff" onclick="clearSelection()">Annuler</button>
</div>

{% endblock %}

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

// ── Validation ────────────────────────────────────────────────────────────────
async function validateEntry(id, btn) {
  btn.disabled = true;
  const r = await fetch(`/journal/${id}/validate`, {
    method:'POST', headers:{'X-CSRFToken': CSRF}
  });
  if (r.ok) {
    const row = document.getElementById(`row-${id}`);
    row.querySelector('.tag').className = 'tag tag-success';
    row.querySelector('.tag').textContent = 'Validé';
    btn.remove();
    row.classList.remove('tr-draft');
  }
}

async function validateAll() {
  const batchId = {{ batch_id or 'null' }};
  if (!batchId || !confirm('Valider toutes les écritures de ce lot ?')) return;
  const r = await fetch('/journal/validate-batch', {
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
    body: JSON.stringify({batch_id: batchId})
  });
  if (r.ok) { const d = await r.json(); alert(`${d.validated} écritures validées.`); location.reload(); }
}

// ── Édition inline ────────────────────────────────────────────────────────────
document.querySelectorAll('.editable-label, .editable-account').forEach(span => {
  span.addEventListener('click', () => {
    if (span.querySelector('input')) return;
    const orig = span.textContent.trim();
    const input = document.createElement('input');
    input.value = orig;
    input.style.cssText = 'font-size:.85rem;padding:.2rem .4rem;border:1px solid var(--accent);border-radius:4px;width:100%;min-width:120px';
    span.textContent = '';
    span.appendChild(input);
    input.focus();
    const save = async () => {
      const val = input.value.trim();
      if (!val || val === orig) { span.textContent = orig; return; }
      const id = span.dataset.id;
      const field = span.dataset.field;
      const r = await fetch(`/journal/${id}/edit`, {
        method:'POST',
        headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
        body: JSON.stringify({[field]: val})
      });
      span.textContent = val.length > 55 ? val.slice(0,55)+'…' : val;
    };
    input.addEventListener('blur', save);
    input.addEventListener('keydown', e => { if(e.key==='Enter') save(); if(e.key==='Escape') { span.textContent=orig; } });
  });
});

// ── TVA en temps réel ─────────────────────────────────────────────────────────
document.querySelectorAll('.tva-select').forEach(sel => {
  sel.addEventListener('change', async () => {
    const id = sel.dataset.id;
    await fetch(`/journal/${id}/edit`, {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
      body: JSON.stringify({tva_rate: sel.value})
    });
    sel.style.background = '#DCFCE7';
    setTimeout(() => sel.style.background = '', 1500);
  });
});

// ── Sélection multiple ────────────────────────────────────────────────────────
function toggleAll(cb) {
  document.querySelectorAll('.row-check').forEach(c => c.checked = cb.checked);
  updateBulkBar();
}
document.querySelectorAll('.row-check').forEach(c => c.addEventListener('change', updateBulkBar));
function updateBulkBar() {
  const n = document.querySelectorAll('.row-check:checked').length;
  const bar = document.getElementById('bulkBar');
  bar.style.display = n > 0 ? 'flex' : 'none';
  document.getElementById('selectedCount').textContent = `${n} sélectionné${n>1?'s':''}`;
}
function clearSelection() {
  document.querySelectorAll('.row-check').forEach(c => c.checked = false);
  document.getElementById('selectAll').checked = false;
  updateBulkBar();
}
async function validateSelected() {
  const ids = [...document.querySelectorAll('.row-check:checked')].map(c => parseInt(c.value));
  if (!ids.length) return;
  for (const id of ids) {
    const btn = document.querySelector(`#row-${id} button`);
    if (btn) await validateEntry(id, btn);
  }
  clearSelection();
}
</script>
{% endblock %}