<section class="member-hero">
  <div class="container">
    <h1>Mon profil</h1>
    <p class="member-hero-sub">Gérez vos informations, votre offre et votre compte.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="profil-grid">

      <!-- Offre active -->
      <div class="panel">
        <h2 class="panel-title">Mon offre</h2>
        <% if (access.hasAccess) { %>
          <p class="dash-status dash-status-ok">● Accès actif</p>
          <table class="kv-table">
            <tr><th>Offre</th><td><%= access.planLabel %></td></tr>
            <% if (access.expiresAt) { %>
              <tr><th>Date d'expiration</th><td><strong><%= fmtDateTime(access.expiresAt) %></strong></td></tr>
            <% } else { %>
              <tr><th>Date d'expiration</th><td>—</td></tr>
            <% } %>
            <tr><th>Renouvellement</th><td>
              <% if (access.subscription && access.subscription.billing_mode === 'montante_cycle' && !access.cancelAtPeriodEnd) { %>
                Automatique à chaque nouvelle montante
              <% } else if (access.subscription && access.subscription.billing_mode === 'montante_cycle' && access.cancelAtPeriodEnd) { %>
                Résilié — actif sur la montante déjà réglée
              <% } else if (access.isRecurring && !access.cancelAtPeriodEnd) { %>
                Automatique
              <% } else if (access.isRecurring && access.cancelAtPeriodEnd) { %>
                Résilié — actif jusqu'à expiration
              <% } else { %>
                Aucun (paiement unique)
              <% } %>
            </td></tr>
          </table>
        <% } else { %>
          <p class="dash-status dash-status-off">● Aucun accès actif</p>
          <p>Vous n'avez pas d'offre active actuellement.</p>
          <a href="/tarifs" class="btn btn-primary">Activer le pack MONTANTE</a>
        <% } %>

        <% if (recurring && !recurring.cancel_at_period_end) { %>
          <hr class="panel-sep" />
          <h3 class="panel-subtitle">Résilier mon renouvellement</h3>
          <p class="muted">
            Vous conservez l'accès déjà réglé. Aucun nouveau prélèvement ne sera effectué
            pour la prochaine montante.
          </p>
          <form action="/profil/resilier" method="post"
                data-confirm="Confirmez-vous la résiliation du renouvellement automatique ?">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
            <button type="submit" class="btn btn-outline">Résilier le renouvellement</button>
          </form>
        <% } %>
      </div>

      <!-- Informations -->
      <div class="panel">
        <h2 class="panel-title">Mes informations</h2>
        <form action="/profil" method="post" class="form">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="field">
            <label for="name">Nom / pseudo</label>
            <input type="text" id="name" name="name" value="<%= currentUser.name %>" required maxlength="80" />
          </div>
          <div class="field">
            <label for="email">Adresse email</label>
            <input type="email" id="email" value="<%= currentUser.email %>" disabled />
            <small class="field-hint">Pour modifier votre email, contactez le support.</small>
          </div>
          <button type="submit" class="btn btn-primary">Enregistrer</button>
        </form>
      </div>

      <!-- Historique paiements -->
      <div class="panel panel-wide">
        <h2 class="panel-title">Historique des paiements</h2>
        <% if (!payments.length) { %>
          <p class="muted">Aucun paiement enregistré pour le moment.</p>
        <% } else { %>
          <div class="table-wrap">
            <table class="data-table">
              <thead>
                <tr><th>Date</th><th>Offre</th><th>Montant</th><th>Statut</th></tr>
              </thead>
              <tbody>
                <% payments.forEach(function(pay){ %>
                  <tr>
                    <td><%= fmtDate(pay.created_at) %></td>
                    <td><%= pay.plan_type %></td>
                    <td><%= fmtPrice(pay.amount_cents) %></td>
                    <td><span class="status-pill status-<%= pay.status === 'paid' ? 'won' : 'pending' %>"><%= pay.status === 'paid' ? 'Payé' : pay.status %></span></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } %>
      </div>

      <!-- Zone dangereuse -->
      <div class="panel panel-wide panel-danger">
        <h2 class="panel-title">Supprimer mon compte</h2>
        <p>
          Cette action est <strong>irréversible</strong>. Vos abonnements en cours seront
          résiliés et vos données personnelles seront anonymisées conformément au RGPD.
        </p>
        <form action="/profil/supprimer-compte" method="post" class="form"
              data-confirm="Cette action est définitive et supprimera votre compte. Continuer ?">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="field">
            <label for="confirm">Pour confirmer, saisissez <code>SUPPRIMER</code> en majuscules&nbsp;:</label>
            <input type="text" id="confirm" name="confirm" autocomplete="off" placeholder="SUPPRIMER" required />
          </div>
          <button type="submit" class="btn btn-danger">Supprimer définitivement mon compte</button>
        </form>
      </div>

    </div>
  </div>
</section>
