<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<% const payrollEnabled = Boolean(app?.features?.payroll); %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head">
      <div><p class="eyebrow">Banque</p><h1>Transactions bancaires</h1><p class="muted">Crédits CAMT.054, extraits CAMT.053, rapprochements automatiques et corrections manuelles.</p></div>
      <a class="button secondary" href="<%= adminBase %>/comptabilite">Importer CAMT</a>
    </div>

    <form method="get" class="panel form-grid search-panel">
      <div class="form-grid two">
        <label>Statut<select name="status">
          <option value="">Tous</option>
          <% ['unmatched','matched','ignored','booked'].forEach((status) => { %>
            <option value="<%= status %>" <%= filters.status === status ? 'selected' : '' %>><%= ui.label(status) %></option>
          <% }) %>
        </select></label>
        <button>Filtrer</button>
      </div>
    </form>

    <div class="mobile-list">
      <% transactions.forEach((tx) => { %>
        <article class="list-card bank-transaction-card">
          <div class="list-card-head">
            <div>
              <strong><%= tx.counterparty_name || tx.remittance_info || tx.transaction_reference || 'Transaction bancaire' %></strong>
              <span><%= ui.date(tx.booking_date || tx.value_date) %> · <%= tx.message_type %> · <%= tx.direction === 'credit' ? 'Crédit' : 'Débit' %></span>
            </div>
            <span class="badge"><%= ui.label(tx.status) %></span>
          </div>
          <div class="detail-grid compact">
            <div class="detail-item"><span>Montant</span><strong><%= ui.money(tx.amount) %></strong></div>
            <div class="detail-item"><span>Référence</span><strong><%= tx.payment_reference || tx.transaction_reference || 'Sans référence' %></strong></div>
            <div class="detail-item full"><span>Communication</span><strong><%= tx.remittance_info || 'Non renseignée' %></strong></div>
          </div>
          <% if (tx.invoice_number) { %>
            <p class="panel">Rapprochée avec la facture <strong><%= tx.invoice_number %></strong>.</p>
          <% } else if (payrollEnabled && tx.payroll_period) { %>
            <p class="panel">Rapprochée avec une sortie RH <strong><%= tx.payroll_period %></strong><% if (tx.payroll_payslip_id) { %> · <%= tx.payroll_first_name %> <%= tx.payroll_last_name %><% } %>.</p>
          <% } else if (tx.status === 'unmatched' && tx.direction === 'credit') { %>
            <form method="post" action="<%= adminBase %>/comptabilite/transactions/<%= tx.id %>/rapprocher" class="form-grid inline-date-action">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <label>Facture à rapprocher<select name="invoice_id" required>
                <option value="">Sélectionner</option>
                <% invoices.forEach((invoice) => { %>
                  <option value="<%= invoice.id %>"><%= invoice.invoice_number %> · <%= invoice.first_name %> <%= invoice.last_name %> · reste <%= ui.money(invoice.total - invoice.paid_amount) %></option>
                <% }) %>
              </select></label>
              <button>Rapprocher</button>
            </form>
          <% } %>
          <% if (tx.status === 'unmatched') { %>
            <form method="post" action="<%= adminBase %>/comptabilite/transactions/<%= tx.id %>/ignorer" data-confirm="Ignorer cette transaction ?">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button class="secondary">Ignorer</button>
            </form>
          <% } %>
        </article>
      <% }) %>
      <% if (!transactions.length) { %><p class="empty-state"><strong>Aucune transaction</strong><span>Importez un fichier CAMT depuis la vue comptabilité.</span></p><% } %>
    </div>
  </section>
</div>
