<%- include('../partials/head', { title, bodyClass: 'app-page admin-page' }) %>
<%- include('../partials/app-header') %>

<main class="app-main">
  <%- include('../partials/admin-nav') %>
  <section class="page-title">
    <p class="eyebrow">Conversion PRO</p>
    <h1>Codes promo</h1>
    <p>Créez une offre appliquée au premier cycle d’un pack. Le renouvellement reste au prix normal.</p>
  </section>

  <section class="glass-panel">
    <h2>Créer un code promo</h2>
    <form method="post" action="/admin/promo-codes" class="form-grid">
      <label>Code
        <input type="text" name="code" required maxlength="60" placeholder="NEO20">
      </label>
      <label>Pack concerné
        <select name="plan" required>
          <% packs.forEach((pack) => { %>
            <option value="<%= pack.key %>"><%= pack.title %> · <%= pack.priceLabel %></option>
          <% }) %>
        </select>
      </label>
      <label>Nouveau prix du premier cycle
        <input type="text" name="promo_amount" required inputmode="decimal" placeholder="24,99">
      </label>
      <label>Date de validité
        <input type="date" name="valid_until" required>
      </label>
      <label>Nombre d’utilisations
        <input type="number" name="max_uses" min="0" value="0">
        <small class="micro-copy">0 = illimité</small>
      </label>
      <label>Statut
        <select name="is_active">
          <option value="1">Actif</option>
          <option value="0">Inactif</option>
        </select>
      </label>
      <button class="btn btn-primary" type="submit">Créer le code</button>
    </form>
  </section>

  <div class="table-card">
    <table>
      <thead>
        <tr>
          <th>Code</th>
          <th>Pack</th>
          <th>Prix promo</th>
          <th>Utilisations</th>
          <th>Validité</th>
          <th>Statut</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <% if (!promoCodes.length) { %>
          <tr><td colspan="7">No hay ningún código promo creado.</td></tr>
        <% } %>
        <% promoCodes.forEach((promo) => { %>
          <% const pack = packs.find((item) => item.key === promo.plan); %>
          <tr>
            <td><strong><%= promo.code %></strong></td>
            <td><%= pack ? pack.title : promo.plan %></td>
            <td><%= formatEuroCents(promo.promo_amount_cents) %></td>
            <td>
              <%= promo.used_count || 0 %>
              /
              <%= Number(promo.max_uses || 0) === 0 ? 'illimité' : promo.max_uses %>
            </td>
            <td><%= promo.valid_until ? formatDate(promo.valid_until) : 'Sans limite' %></td>
            <td>
              <span class="status-pill <%= Number(promo.is_active) === 1 ? 'active' : '' %>">
                <%= Number(promo.is_active) === 1 ? 'Actif' : 'Inactif' %>
              </span>
            </td>
            <td>
              <form method="post" action="/admin/promo-codes/<%= promo.id %>/toggle" class="inline-form">
                <input type="hidden" name="is_active" value="<%= Number(promo.is_active) === 1 ? '0' : '1' %>">
                <button class="btn btn-soft btn-small" type="submit">
                  <%= Number(promo.is_active) === 1 ? 'Désactiver' : 'Activer' %>
                </button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
