{% extends 'base.html.twig' %}
{% block title %}Créer votre personnage — CSI World{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .cc-wrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
  }

  .cc-panel {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cc-heading { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .cc-sub { font-size: .82rem; color: var(--muted); }

  .cc-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
  }
  .cc-section-title {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .cc-errors {
    background: rgba(248,81,73,.1);
    border: 1px solid rgba(248,81,73,.35);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: .84rem;
    color: #f85149;
  }

  /* ── Name ── */
  .cc-name-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 11px;
    color: var(--text);
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
  }
  .cc-name-input:focus { border-color: var(--accent2); }
  .cc-name-hint { font-size: .72rem; color: var(--muted); margin-top: 5px; }

  /* ── Class select + description ── */
  .class-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .class-select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 11px;
    color: var(--text);
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    flex-shrink: 0;
    width: 200px;
    cursor: pointer;
  }
  .class-select:focus { border-color: var(--accent2); }
  select.class-select option { background: #1a1f27; }

  .class-desc-box {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    min-height: 60px;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
  }
  .class-desc-box .class-desc-name {
    font-weight: 700;
    color: var(--text);
    font-size: .88rem;
    margin-bottom: 4px;
  }
  .class-desc-box .class-desc-roles {
    font-size: .72rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .class-desc-empty { font-style: italic; }

  /* ── Avatar-style model picker ── */
  .model-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .model-option {
    position: relative;
    cursor: pointer;
  }
  .model-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .model-option-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .model-option img,
  .model-option-placeholder {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px solid var(--border);
    object-fit: contain;
    image-rendering: pixelated;
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
  }
  .model-option-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--bg);
  }
  .model-option-name {
    font-size: .68rem;
    color: var(--muted);
    text-align: center;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
  }
  .model-option:hover img,
  .model-option:hover .model-option-placeholder { border-color: var(--accent2); }
  .model-option.selected img,
  .model-option.selected .model-option-placeholder {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
  }
  .model-option.selected .model-option-name { color: var(--accent); }

  /* ── Locked models (abonnés uniquement) ── */
  .model-option--locked { position: relative; cursor: not-allowed !important; opacity: .55; }
  .model-option--locked:hover img,
  .model-option--locked:hover .model-option-placeholder { border-color: var(--border); }
  .model-option--locked input { pointer-events: none; }
  .model-option--locked img,
  .model-option--locked .model-option-placeholder { filter: grayscale(.85); }
  .model-option-lock {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0, 0, 0, .7); border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; pointer-events: none;
  }
  .model-tier-pill {
    display: inline-block; margin-left: 5px;
    font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 8px;
  }
  .model-tier-pill.tier-bronze  { background: rgba(205,127,50,.18); color: #cd7f32; }
  .model-tier-pill.tier-argent  { background: rgba(192,192,192,.18); color: #c0c0c0; }
  .model-tier-pill.tier-gold    { background: rgba(245,197,66,.18); color: #f5c542; }
  .model-tier-pill.tier-platine { background: rgba(99,84,214,.22); color: #b9a4ff; }

  /* ── Submit ── */
  .cc-actions { display: flex; align-items: center; gap: 14px; }
  .btn-cc-submit {
    background: var(--accent);
    color: #0d1117;
    border: none;
    border-radius: 6px;
    padding: 9px 26px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
  }
  .btn-cc-submit:hover { opacity: .85; }
  .cc-submit-note { font-size: .75rem; color: var(--muted); }
</style>
{% endblock %}

{% block body %}
<div class="cc-wrap">
  <div class="cc-panel">

    <div>
      <div class="cc-heading">Créer votre personnage</div>
      <div class="cc-sub">Choisissez votre nom, votre classe et votre apparence.</div>
    </div>

    {% if errors %}
    <div class="cc-errors">
      {% for e in errors %}<div>{{ e }}</div>{% endfor %}
    </div>
    {% endif %}

    {# Class data for JS #}
    <script>
    var ROLE_MAP   = {{ roleMap|json_encode|raw }};
    var CLASS_DATA = {{ classes|map(c => {
      id: c.id,
      name: c.name,
      description: c.description,
      roles: c.roles
    })|json_encode|raw }};
    </script>

    {# Premier modèle non verrouillé, utilisé comme sélection par défaut #}
    {% set firstUnlockedModel = models|filter(m => player_meets_tier(app.user, m.minSubscriptionTier))|first %}

    <form method="post" action="{{ path('character_create') }}" id="cc-form">
      <input type="hidden" name="modelId" id="modelIdInput"
             value="{{ values.modelId ?: (firstUnlockedModel ? firstUnlockedModel.id : 0) }}">

      {# ── Nom ── #}
      <div class="cc-section" style="margin-bottom:16px">
        <div class="cc-section-title">Nom du personnage</div>
        <input
          type="text"
          name="characterName"
          class="cc-name-input"
          placeholder="Nom du personnage..."
          maxlength="50"
          value="{{ values.characterName }}"
          autocomplete="off"
          required
        >
        <div class="cc-name-hint">Entre 2 et 50 caractères. Visible par les autres joueurs.</div>
      </div>

      {# ── Classe ── #}
      <div class="cc-section" style="margin-bottom:16px">
        <div class="cc-section-title">Classe</div>
        {% if classes is empty %}
          <span style="font-size:.84rem;color:var(--muted)">Aucune classe disponible pour le moment.</span>
        {% else %}
        <div class="class-row">
          <select name="classId" id="classSelect" class="class-select" required>
            <option value="">— Choisir —</option>
            {% for class in classes %}
            <option value="{{ class.id }}" {{ values.classId == class.id ? 'selected' }}>
              {{ class.name }}
            </option>
            {% endfor %}
          </select>
          <div class="class-desc-box" id="classDescBox">
            <div class="class-desc-empty">Sélectionnez une classe pour voir sa description.</div>
          </div>
        </div>
        {% endif %}
      </div>

      {# ── Apparence ── #}
      <div class="cc-section" style="margin-bottom:16px">
        <div class="cc-section-title">Apparence</div>
        {% if models is empty %}
          <p style="font-size:.84rem;color:var(--muted);margin:0">
            Aucun modèle disponible pour le moment. Vous pourrez personnaliser votre apparence depuis votre profil.
          </p>
        {% else %}
        <div class="model-grid">
          {% for model in models %}
            {% set locked = not player_meets_tier(app.user, model.minSubscriptionTier) %}
            {% set isDefaultSelected = (values.modelId == model.id) or (not values.modelId and firstUnlockedModel and firstUnlockedModel.id == model.id) %}
            <label class="model-option {{ isDefaultSelected ? 'selected' }}{{ locked ? ' model-option--locked' }}"
                   title="{{ locked ? 'Réservé aux abonnés ' ~ model.minSubscriptionTier ~ ' ou plus' : model.name }}">
              <input type="radio" name="modelId" value="{{ model.id }}"
                     {{ isDefaultSelected ? 'checked' }}
                     {{ locked ? 'disabled' }}>
              <div class="model-option-inner">
                {% if model.filename %}
                  <img src="{{ asset('uploads/models/' ~ model.filename) }}" alt="{{ model.name }}">
                {% else %}
                  <div class="model-option-placeholder">🧙</div>
                {% endif %}
                <div class="model-option-name">
                  {{ model.name }}
                  {% if model.minSubscriptionTier %}
                    <span class="model-tier-pill tier-{{ model.minSubscriptionTier }}">{{ model.minSubscriptionTier|capitalize }}</span>
                  {% endif %}
                </div>
                {% if locked %}<div class="model-option-lock">🔒</div>{% endif %}
              </div>
            </label>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      {# ── Submit ── #}
      <div class="cc-section">
        <div class="cc-actions">
          <button type="submit" class="btn-cc-submit">Créer le personnage</button>
          <span class="cc-submit-note">La classe sera modifiable ultérieurement.</span>
        </div>
      </div>

    </form>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function () {
  // ── Model picker ──
  document.querySelectorAll('.model-option input[type="radio"]').forEach(function (radio) {
    radio.addEventListener('change', function () {
      document.querySelectorAll('.model-option').forEach(function (el) { el.classList.remove('selected'); });
      radio.closest('.model-option').classList.add('selected');
    });
  });

  // ── Class description ──
  var classMap = {};
  (CLASS_DATA || []).forEach(function (c) { classMap[String(c.id)] = c; });

  var select  = document.getElementById('classSelect');
  var descBox = document.getElementById('classDescBox');

  function updateDesc() {
    if (!select || !descBox) return;
    var cls = classMap[select.value];
    if (!cls) {
      descBox.innerHTML = '<div class="class-desc-empty">Sélectionnez une classe pour voir sa description.</div>';
      return;
    }
    var html = '<div class="class-desc-name">' + cls.name + '</div>';
    if (cls.roles && cls.roles.length) {
      var roleNames = cls.roles.map(function (id) { return ROLE_MAP[id] || id; });
      html += '<div class="class-desc-roles">' + roleNames.join(' · ') + '</div>';
    }
    html += '<div>' + (cls.description || '<em style="color:var(--muted)">Aucune description.</em>') + '</div>';
    descBox.innerHTML = html;
  }

  if (select) {
    select.addEventListener('change', updateDesc);
    updateDesc(); // init on load if a value is pre-selected
  }
})();
</script>
{% endblock %}