{% extends "base.html" %}
{% block title %}Mi cuenta — GhostFlix{% endblock %}
{% block content %}
<h1>Mi cuenta</h1>

<div class="info-row"><span class="k">Usuario</span><span class="v">{{ user.username }}</span></div>
<div class="info-row"><span class="k">Nombre visible</span><span class="v" id="display-name">{{ user.display_name }}</span></div>
<div class="info-row"><span class="k">Avatar</span><span class="v" id="avatar">{{ user.avatar }}</span></div>
<div class="info-row"><span class="k">Plan</span>
  <span class="v">
    <span class="badge {{ 'badge-premium' if user.plan == 'premium' else 'badge-free' }}" id="plan-badge">
      {{ user.plan }}
    </span>
  </span>
</div>
<div class="info-row"><span class="k">Meses premium acumulados</span><span class="v" id="premium-months">{{ user.premium_months }}</span></div>

<h2 class="section-title">Editar perfil</h2>
<div class="auth-card" style="margin:0 0 0 0; max-width:420px;">
  <div class="field">
    <label>Nombre visible</label>
    <input type="text" id="input-display-name" value="{{ user.display_name }}">
  </div>
  <div class="field">
    <label>Avatar (emoji)</label>
    <input type="text" id="input-avatar" value="{{ user.avatar }}">
  </div>
  <button class="btn" id="btn-save-profile" style="width:100%">Guardar cambios</button>
  <div class="status-line" id="profile-status"></div>
</div>

<h2 class="section-title">Cupón de bienvenida</h2>
<div class="auth-card" style="margin:0; max-width:420px;">
  <p style="color:var(--text-dim); margin-bottom:12px;">
    Tienes un cupón de un solo uso asociado a tu cuenta:
    <strong style="color:var(--text)">{{ coupon_code }}</strong>
    {% if coupon and coupon.redeemed_by %}
      <br><span style="color:#ff8a8a;">ya canjeado por «{{ coupon.redeemed_by }}»</span>
    {% endif %}
  </p>
  <div class="field">
    <label>Código de cupón</label>
    <input type="text" id="input-coupon" value="{{ coupon_code }}">
  </div>
  <button class="btn" id="btn-redeem">Canjear cupón (+1 mes Premium)</button>
  <div class="status-line" id="coupon-status"></div>
</div>

<p style="margin-top:30px;">
  <a href="{{ url_for('reset_account') }}" class="btn btn-outline">↺ Reiniciar mi cuenta (para repetir un reto)</a>
</p>

<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}