{% extends 'base.html.twig' %}
{% block title %}Marché — CSI World{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .market-wrap { flex: 1; max-width: 1000px; width: 100%; margin: 0 auto; padding: 32px 20px; }
  .market-wrap h1 { margin: 0; font-size: 1.4rem; color: var(--text); }
  .back-to-map {
    display: inline-block; margin-bottom: 14px;
    font-size: .78rem; font-weight: 600; color: var(--muted);
    text-decoration: none; transition: color .15s;
  }
  .back-to-map:hover { color: var(--accent2); }
  .page-hdr-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 20px; margin-bottom: 24px;
  }
  .market-money {
    display: flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 700; color: #e3b341;
  }
  .market-money img { width: 18px; height: 18px; image-rendering: pixelated; }

  /* ── Onglets ── */
  .market-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .market-tab {
    padding: 9px 20px; border-radius: 6px 6px 0 0;
    border: 1px solid transparent; border-bottom: none;
    background: none; color: var(--muted); font-size: .88rem;
    font-weight: 600; cursor: pointer; position: relative; bottom: -1px;
    transition: color .15s, background .15s;
  }
  .market-tab:hover { color: var(--text); }
  .market-tab.active {
    color: var(--text); background: var(--surface);
    border-color: var(--border); border-bottom-color: var(--surface);
  }
  .market-panel { display: none; }
  .market-panel.active { display: block; }

  /* ── Filtres ── */
  .market-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
  .mf-search {
    flex: 1; min-width: 160px; max-width: 260px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 20px; color: var(--text);
    font-size: .82rem; padding: 5px 14px; outline: none;
    transition: border-color .15s;
  }
  .mf-search:focus { border-color: var(--accent2); }
  .mf-search::placeholder { color: var(--muted); }
  .mf-btn {
    padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border);
    background: none; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .mf-btn:hover { color: var(--text); border-color: var(--accent2); }
  .mf-btn.active { color: var(--text); border-color: var(--accent2); background: rgba(88,166,255,.1); }
  .mf-count { font-size: .78rem; color: var(--muted); margin-left: auto; }

  /* ── Grille de listings ── */
  .market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .mkt-card {
    background: var(--surface);
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    transition: filter .15s;
  }
  .mkt-card:hover { filter: brightness(1.08); }
  .mkt-card-head { display: flex; align-items: center; gap: 10px; }
  .mkt-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    image-rendering: pixelated; border-radius: 4px;
    background: var(--bg);
  }
  .mkt-icon-placeholder {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--border);
  }
  .mkt-info { flex: 1; min-width: 0; }
  .mkt-name { font-size: .85rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mkt-affixes { font-size: .72rem; color: #c0a060; }
  .mkt-qty { font-size: .74rem; color: var(--muted); }
  .mkt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
  .mkt-price { display: flex; align-items: center; gap: 5px; font-size: .92rem; font-weight: 800; color: #e3b341; }
  .mkt-price img { width: 16px; height: 16px; image-rendering: pixelated; }
  .mkt-buy-btn {
    padding: 5px 12px; border-radius: 6px; border: none;
    background: var(--accent2); color: #0d1117;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
  }
  .mkt-buy-btn:hover { opacity: .85; }
  .mkt-buy-btn:disabled { opacity: .4; cursor: not-allowed; }
  .mkt-cancel-btn {
    padding: 5px 12px; border-radius: 6px;
    border: 1px solid #f85149; background: none;
    color: #f85149; font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
  }
  .mkt-cancel-btn:hover { background: rgba(248,81,73,.12); }

  .market-empty { color: var(--muted); font-size: .9rem; padding: 24px 0; text-align: center; }

  /* ── Bannière "Mettre en vente" ── */
  .mkt-sell-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 20px; margin-bottom: 20px;
  }
  .mkt-sell-bar p { margin: 0; font-size: .88rem; color: var(--muted); }
  .mkt-sell-open-btn {
    padding: 8px 18px; border-radius: 7px; border: none;
    background: var(--accent2); color: #0d1117;
    font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
  }
  .mkt-sell-open-btn:hover { opacity: .85; }

  /* ── Modal "Mettre en vente" ── */
  #sell-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 300;
    align-items: center; justify-content: center;
  }
  #sell-modal.open { display: flex; }
  .sell-modal-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px; width: 480px; max-width: 95vw;
    max-height: 80vh; display: flex; flex-direction: column; gap: 16px;
  }
  .sell-modal-box h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
  .sell-inv-list {
    overflow-y: auto; max-height: 280px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .sell-inv-item {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: border-color .15s;
  }
  .sell-inv-item:hover { border-color: #555; }
  .sell-inv-item.selected { border-color: var(--accent2); background: rgba(88,166,255,.07); }
  .sell-inv-item img { width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0; }
  .sell-inv-placeholder { width: 28px; height: 28px; flex-shrink: 0; background: var(--surface); border-radius: 3px; }
  .sell-inv-name { font-size: .8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sell-inv-qty { font-size: .72rem; color: var(--muted); }
  .sell-price-row { display: flex; align-items: center; gap: 10px; }
  .sell-price-row label { font-size: .85rem; color: var(--muted); white-space: nowrap; }
  .sell-qty-row { display: flex; align-items: center; gap: 10px; }
  .sell-qty-row label { font-size: .85rem; color: var(--muted); white-space: nowrap; }
  .sell-price-input, .sell-qty-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 7px; color: var(--text); font-size: .9rem;
    padding: 7px 12px; outline: none;
  }
  .sell-price-input:focus, .sell-qty-input:focus { border-color: var(--accent2); }
  .sell-modal-footer { display: flex; gap: 10px; justify-content: flex-end; }
  .sell-cancel-btn {
    padding: 8px 18px; border-radius: 7px;
    border: 1px solid var(--border); background: none;
    color: var(--muted); font-size: .85rem; cursor: pointer;
  }
  .sell-confirm-btn {
    padding: 8px 18px; border-radius: 7px; border: none;
    background: var(--accent2); color: #0d1117;
    font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
  }
  .sell-confirm-btn:hover { opacity: .85; }
  .sell-confirm-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* ── Card tooltip ── */
  #mkt-tooltip {
    position: fixed; z-index: 600;
    background: #161b22; border: 1px solid #30363d;
    border-radius: 8px; padding: 10px 14px;
    min-width: 190px; max-width: 270px;
    pointer-events: none;
    box-shadow: 0 6px 24px rgba(0,0,0,.7);
    font-size: .8rem; line-height: 1.5;
  }
  .mkt-tt-name   { font-weight: 700; color: #c9d1d9; margin-bottom: 3px; }
  .mkt-tt-rarity { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
  .mkt-tt-stats  { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
  .mkt-tt-affixes { margin-top: 4px; }
  .mkt-tt-affix-name { font-size: .78rem; color: #c0a060; font-weight: 600; margin-bottom: 2px; }
  .mkt-tt-affix-effs { display: flex; flex-wrap: wrap; gap: 3px 8px; }
  .mkt-tt-stat   { font-size: .78rem; color: #3fb950; font-weight: 600; }
  .mkt-tt-stat.neg { color: #f85149; }
  .mkt-tt-num    { font-size: .78rem; color: #3fb950; font-weight: 600; }
  .mkt-tt-num.neg { color: #f85149; }
  .mkt-tt-bool   { font-size: .72rem; color: #c0a060; font-style: italic; }

  /* ── Toast ── */
  #mkt-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 400;
    background: #238636; color: #fff;
    padding: 12px 20px; border-radius: 8px;
    font-size: .88rem; font-weight: 600;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
    max-width: 300px;
  }
  #mkt-toast.error { background: #da3633; }
  #mkt-toast.show { opacity: 1; pointer-events: auto; }

  .mine-section-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin-bottom: 10px;
  }

  /* ── Annonces d'échange ── */
  /* Grille propre aux annonces d'échange — largeur mini plus grande pour tenir
     la ligne offered ⇄ wanted sans troncature. */
  .trades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
  }
  .trade-card {
    background: var(--surface);
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    transition: filter .15s;
  }
  .trade-card:hover { filter: brightness(1.08); }
  .trade-swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
  .trade-swap-col { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .trade-swap-icon { width: 40px; height: 40px; flex-shrink: 0; image-rendering: pixelated; border-radius: 5px; background: var(--bg); }
  .trade-swap-icon-ph { width: 40px; height: 40px; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
  .trade-swap-arrow { color: var(--muted); font-size: 1.4rem; text-align: center; flex-shrink: 0; }
  .trade-swap-text { min-width: 0; flex: 1; }
  .trade-swap-name { font-size: .88rem; font-weight: 700; color: #fff; white-space: normal; word-break: break-word; line-height: 1.15; }
  .trade-swap-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
  .trade-notes {
    font-size: .78rem; color: var(--muted); font-style: italic;
    padding: 6px 8px; background: rgba(255,255,255,.02); border-radius: 5px;
    border-left: 2px solid var(--border);
  }
  .trade-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .trade-seller { font-size: .72rem; color: var(--muted); }
  .trade-accept-btn {
    padding: 5px 12px; border-radius: 6px; border: none;
    background: var(--accent2); color: #0d1117;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
  }
  .trade-accept-btn:hover { opacity: .85; }
  .trade-accept-btn:disabled { opacity: .4; cursor: not-allowed; }
  .trade-cancel-btn {
    padding: 5px 12px; border-radius: 6px;
    border: 1px solid #f85149; background: none;
    color: #f85149; font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
  }
  .trade-cancel-btn:hover { background: rgba(248,81,73,.12); }

  /* Modal « Créer une annonce d'échange » */
  #trade-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 300;
    align-items: center; justify-content: center;
  }
  #trade-modal.open { display: flex; }
  .trade-modal-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px; width: 640px; max-width: 95vw;
    max-height: 85vh; display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
  }
  .trade-modal-box h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
  .trade-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden; }
  .trade-modal-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }
  .trade-modal-col-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .trade-picker {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 260px; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  }
  .trade-picker-search {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-size: .82rem; padding: 6px 10px; outline: none;
    margin-bottom: 4px;
  }
  .trade-picker-search:focus { border-color: var(--accent2); }
  .trade-picker-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: border-color .15s;
  }
  .trade-picker-item:hover { border-color: #555; }
  .trade-picker-item.selected { border-color: var(--accent2); background: rgba(88,166,255,.08); }
  .trade-picker-item img { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }
  .trade-picker-item .ph { width: 24px; height: 24px; flex-shrink: 0; background: var(--bg); border-radius: 3px; }
  .trade-picker-name { font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trade-picker-qty { font-size: .7rem; color: var(--muted); margin-left: auto; flex-shrink: 0; }
  .trade-picker-empty { color: var(--muted); font-size: .78rem; padding: 12px 8px; text-align: center; }
  .trade-modal-qty-row { display: flex; gap: 6px; align-items: center; }
  .trade-modal-qty-row label { font-size: .78rem; color: var(--muted); }
  .trade-modal-qty-row input {
    width: 70px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: .82rem;
    padding: 5px 8px; outline: none;
  }
  .trade-modal-notes {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; color: var(--text); font-size: .82rem;
    resize: vertical; min-height: 60px; max-height: 120px; outline: none;
    font-family: inherit;
  }
  .trade-modal-notes:focus { border-color: var(--accent2); }
  .trade-modal-notes-label { font-size: .78rem; color: var(--muted); }
  .trade-open-btn {
    padding: 8px 18px; border-radius: 7px; border: none;
    background: var(--accent2); color: #0d1117;
    font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
  }
  .trade-open-btn:hover { opacity: .85; }
</style>
{% endblock %}

{% block body %}
<div class="market-wrap">
  <a href="{{ path('map_index') }}" class="back-to-map">← Revenir à la carte</a>
  <div class="page-hdr-card">
    <h1>Marché</h1>
    <div class="market-money" id="mkt-money-display">
      <img src="{{ asset('images/money.png') }}" alt="">
      <span>{{ player.money|number_format(0, ',', ' ') }} Dollawrs</span>
    </div>
  </div>

  <div class="market-tabs">
    <button class="market-tab active" data-tab="browse">Marché</button>
    <button class="market-tab" data-tab="trades">Annonces d'échange</button>
    <button class="market-tab" data-tab="mine">Mes annonces <span id="mine-badge" style="display:none" class="orders-badge">0</span></button>
  </div>

  {# ── Onglet Marché ── #}
  <div class="market-panel active" id="tab-browse">
    <div class="market-filters">
      <button class="mf-btn active" data-filter="">Tout</button>
      <button class="mf-btn" data-filter="weapon">Armes</button>
      <button class="mf-btn" data-filter="armor">Armures</button>
      <button class="mf-btn" data-filter="item">Objets</button>
      <input type="search" class="mf-search" id="mf-search" placeholder="Rechercher…" autocomplete="off">
      <span class="mf-count" id="browse-count"></span>
    </div>
    <div class="market-grid" id="browse-grid">
      <div class="market-empty">Chargement...</div>
    </div>
  </div>

  {# ── Onglet Annonces d'échange (troc) ── #}
  <div class="market-panel" id="tab-trades">
    <div class="mkt-sell-bar">
      <p>Proposez un objet de votre inventaire en échange d'un autre. Aucun Dollawrs impliqué.</p>
      <button class="trade-open-btn" id="open-trade-modal">Créer une annonce</button>
    </div>
    <div class="market-filters">
      <button class="mf-btn active" data-tfilter="">Tout</button>
      <button class="mf-btn" data-tfilter="weapon">Armes</button>
      <button class="mf-btn" data-tfilter="armor">Armures</button>
      <button class="mf-btn" data-tfilter="item">Objets</button>
      <input type="search" class="mf-search" id="tf-search" placeholder="Rechercher…" autocomplete="off">
      <span class="mf-count" id="trades-count"></span>
    </div>
    <div class="trades-grid" id="trades-grid">
      <div class="market-empty">Chargement...</div>
    </div>
  </div>

  {# ── Onglet Mes annonces ── #}
  <div class="market-panel" id="tab-mine">
    <div class="mine-section-title">Ventes en Dollawrs</div>
    <div class="mkt-sell-bar">
      <p>Déposez un bien pour le vendre à d'autres joueurs. Vous serez crédité immédiatement à la vente.</p>
      <button class="mkt-sell-open-btn" id="open-sell-modal">Mettre en vente</button>
    </div>
    <div class="market-grid" id="mine-grid">
      <div class="market-empty">Chargement...</div>
    </div>

    <div class="mine-section-title" style="margin-top:28px">Annonces d'échange</div>
    <div class="trades-grid" id="mine-trades-grid">
      <div class="market-empty">Chargement...</div>
    </div>
  </div>
</div>

{# ── Modal « Créer une annonce d'échange » ── #}
<div id="trade-modal">
  <div class="trade-modal-box">
    <h2>Créer une annonce d'échange</h2>
    <div class="trade-modal-cols">
      <div class="trade-modal-col">
        <div class="trade-modal-col-label">Ce que j'offre</div>
        <input type="search" class="trade-picker-search" id="trade-offered-search" placeholder="Filtrer mon inventaire…" autocomplete="off">
        <div class="trade-picker" id="trade-offered-list"></div>
        <div class="trade-modal-qty-row" id="trade-offered-qty-wrap" style="display:none">
          <label for="trade-offered-qty">Quantité</label>
          <input type="number" id="trade-offered-qty" min="1" value="1">
        </div>
      </div>
      <div class="trade-modal-col">
        <div class="trade-modal-col-label">Ce que je veux</div>
        <input type="search" class="trade-picker-search" id="trade-wanted-search" placeholder="Rechercher un objet…" autocomplete="off">
        <div class="trade-picker" id="trade-wanted-list"></div>
        <div class="trade-modal-qty-row">
          <label for="trade-wanted-qty">Quantité</label>
          <input type="number" id="trade-wanted-qty" min="1" value="1">
        </div>
      </div>
    </div>
    <label class="trade-modal-notes-label" for="trade-notes">Notes (facultatif, 500 caractères max)</label>
    <textarea id="trade-notes" class="trade-modal-notes" maxlength="500" placeholder="Précisions sur l'échange…"></textarea>
    <div class="sell-modal-footer">
      <button class="sell-cancel-btn" id="close-trade-modal">Annuler</button>
      <button class="sell-confirm-btn" id="confirm-trade" disabled>Confirmer l'annonce</button>
    </div>
  </div>
</div>

{# ── Modal "Mettre en vente" ── #}
<div id="sell-modal">
  <div class="sell-modal-box">
    <h2>Mettre en vente</h2>
    <div class="sell-inv-list" id="sell-inv-list"></div>
    <div class="sell-qty-row" id="sell-qty-wrap" style="display:none">
      <label>Quantité</label>
      <input type="number" class="sell-qty-input" id="sell-qty" min="1" value="1">
    </div>
    <div class="sell-price-row">
      <label>Prix (Dollawrs)</label>
      <input type="number" class="sell-price-input" id="sell-price" min="1" placeholder="ex: 5000">
    </div>
    <div class="sell-modal-footer">
      <button class="sell-cancel-btn" id="close-sell-modal">Annuler</button>
      <button class="sell-confirm-btn" id="confirm-sell" disabled>Confirmer</button>
    </div>
  </div>
</div>

<div id="mkt-tooltip" hidden></div>
<div id="mkt-toast"></div>

<script>
(function () {
  var iconBase     = '{{ path('api_icon', {gameId: 4, id: 0}) }}'.replace(/0$/, '');
  var buyUrlTpl    = '{{ path('market_api_buy',    {id: 0}) }}';
  var cancelUrlTpl = '{{ path('market_api_cancel', {id: 0}) }}';
  var tradeAcceptUrlTpl = '{{ path('trade_api_accept', {id: 0}) }}';
  var tradeCancelUrlTpl = '{{ path('trade_api_cancel', {id: 0}) }}';
  var tradeListUrl      = '{{ path('trade_api_list') }}';
  var tradeMineUrl      = '{{ path('trade_api_mine') }}';
  var tradeCreateUrl    = '{{ path('trade_api_create') }}';
  var currentMoney = {{ player.money }};
  var activeFilter  = '';
  var activeSearch  = '';
  var activeTFilter = '';
  var activeTSearch = '';
  var sellSelected  = null;
  var tradeOffered  = null;
  var tradeWanted   = null;
  var tradeCache    = { all: [], mine: [] };
  var inventory     = {{ inventory|json_encode|raw }};
  var tradeCatalog  = {{ tradeCatalog|json_encode|raw }};

  var RARITY = {
    1:{l:'Commun',c:'rgb(255,255,255)'},2:{l:'Peu commun',c:'rgb(12,201,12)'},
    3:{l:'Rare',c:'rgb(81,168,245)'},4:{l:'Remarquable',c:'rgb(197,84,235)'},
    5:{l:'Légendaire',c:'rgb(255,150,0)'},6:{l:'Unique',c:'rgb(255,0,102)'},
    7:{l:'Héroïque',c:'rgb(255,255,128)'},8:{l:'Séraphin',c:'rgb(255,105,180)'},
    9:{l:'Nacré',c:'rgb(0,255,255)'},10:{l:'Surnaturel',c:'rgb(189,135,255)'},
    11:{l:'Fabuleux',c:'rgb(18,255,148)'},12:{l:'Immaculé',c:'rgb(235,52,128)'},
  };

  function esc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function fmtMoney(n) { return n.toLocaleString('fr-FR'); }

  // ── Tooltip ───────────────────────────────────────────────────────────────

  var STAT_LABELS = {pvMax:'PV Max',egMax:'EG Max',attaque:'ATQ',defense:'DEF',arcane:'ARC',sagesse:'SAG',vitesse:'VIT',finesse:'FIN'};
  var CARAC_LABELS = {
    multiplierPvMax:'PV Max',multiplierEgMax:'EG Max',multiplierAttaque:'ATQ',multiplierDefense:'DEF',
    multiplierArcane:'ARC',multiplierSagesse:'SAG',multiplierVitesse:'VIT',multiplierFinesse:'FIN',
    accuracy:'Précision',evasion:'Esquive',criticalRate:'Taux critique',criticalEvasion:'Esquive critique',
    magicEvasion:'Esquive mag.',physicalCounter:'Contre phys.',magicalCounter:'Contre mag.',
    regenPv:'Régen PV',regenEg:'Régen EG',regenPower:'Régen Power',bonusHit:'Coups supp.',
    threat:'Menace',defenseRate:'Taux défense',regenRate:'Taux régen',healingRate:'Taux de soin',
    egCost:'Coût EG',powerGains:'Gains Power',physicalTaken:'Dégâts phys. reçus',magicalTaken:'Dégâts mag. reçus',xpGain:'Bonus XP'
  };
  var CARAC_BOOL = {
    bodyguard:'Garde du corps',keepsPower:'Conserve la puissance',halfEncounters:'Rencontres réduites',
    noEncounters:'Aucune rencontre',noSurprises:'Pas de surprise',morePreventives:"Plus d'initiative",
    doubleMoney:'Argent doublé',betterLoot:'Meilleur butin',noSkills:'Compétences désactivées'
  };
  function renderSnapStat(key, val) {
    if (typeof val === 'boolean') {
      return val ? '<span class="mkt-tt-bool">' + (CARAC_LABELS[key] || key) + '</span>' : '';
    }
    if (!val) return '';
    if (STAT_LABELS[key]) {
      return '<span class="mkt-tt-stat' + (val < 0 ? ' neg' : '') + '">' + (val > 0 ? '+' : '') + val + ' ' + STAT_LABELS[key] + '</span>';
    }
    if (key.startsWith('multiplier')) {
      var pct = Math.round((val - 1) * 1000) / 10;
      return '<span class="mkt-tt-num' + (pct < 0 ? ' neg' : '') + '">' + (pct > 0 ? '+' : '') + pct + '% ' + (CARAC_LABELS[key] || key) + '</span>';
    }
    return '<span class="mkt-tt-num' + (val < 0 ? ' neg' : '') + '">' + (val > 0 ? '+' : '') + (Number.isInteger(val) ? val : val.toFixed(2)) + ' ' + (CARAC_LABELS[key] || key) + '</span>';
  }

  function buildMktTooltip(snap) {
    var html = '<div class="mkt-tt-name">' + esc(snap.name || '—') + '</div>';

    var r = RARITY[snap.rarity];
    if (r) {
      html += '<div class="mkt-tt-rarity" style="color:' + r.c + '">' + r.l + '</div>';
    }

    if (snap.level != null) {
      html += '<div style="font-size:.76rem;color:#8b949e;margin-bottom:4px">Niv. requis : ' + snap.level + '</div>';
    }

    var stats = snap.statsSnapshot || snap.stats;
    if (stats) {
      var statsHtml = '';
      Object.keys(stats).forEach(function(k) {
        statsHtml += renderSnapStat(k, stats[k]);
      });
      if (statsHtml) html += '<div class="mkt-tt-stats">' + statsHtml + '</div>';
    }

    if (snap.specialEffect) {
      html += '<div style="font-size:.78rem;color:#e3b341;margin-bottom:4px">' + esc(snap.specialEffect) + '</div>';
    }

    if (snap.description) {
      html += '<div style="font-size:.76rem;color:var(--muted);font-style:italic;margin-bottom:6px">' + esc(snap.description) + '</div>';
    }

    return html;
  }

  var mktTtEl = document.getElementById('mkt-tooltip');

  function showMktTooltip(snap, x, y) {
    mktTtEl.innerHTML = buildMktTooltip(snap);
    mktTtEl.hidden = false;
    positionMktTooltip(x, y);
  }

  function hideMktTooltip() {
    mktTtEl.hidden = true;
  }

  function positionMktTooltip(x, y) {
    var W = window.innerWidth, H = window.innerHeight;
    var tw = mktTtEl.offsetWidth, th = mktTtEl.offsetHeight;
    var left = x + 14;
    var top  = y + 14;
    if (left + tw > W - 8) left = x - tw - 10;
    if (top  + th > H - 8) top  = y - th - 10;
    mktTtEl.style.left = left + 'px';
    mktTtEl.style.top  = top  + 'px';
  }

  function showToast(msg, isError) {
    var t = document.getElementById('mkt-toast');
    t.textContent = msg;
    t.className = 'show' + (isError ? ' error' : '');
    clearTimeout(t._timer);
    t._timer = setTimeout(function () { t.className = ''; }, 3000);
  }

  function updateMoneyDisplay() {
    document.getElementById('mkt-money-display').innerHTML =
      '<img src="{{ asset('images/money.png') }}" alt=""><span>' + fmtMoney(currentMoney) + ' Dollawrs</span>';
  }

  // ── Rendering helpers ──────────────────────────────────────────────────────

  function iconHtml(iconId, name) {
    if (!iconId) return '<div class="mkt-icon-placeholder"></div>';
    return '<img class="mkt-icon" src="' + iconBase + iconId + '" alt="' + esc(name) + '">';
  }

  function affixLine(affixes) {
    if (!affixes || !affixes.length) return '';
    return '<div class="mkt-affixes">' + esc(affixes.map(function(a){ return a.name; }).join(', ')) + '</div>';
  }

  function renderCard(l, isMine) {
    var snap    = l.snapshot || {};
    var card    = document.createElement('div');
    card.className = 'mkt-card';
    card.dataset.id = l.id;

    var r = RARITY[snap.rarity];
    if (r) {
      card.style.borderLeftColor = r.c;
    }

    var affixes = affixLine(snap.affixes);
    var qtyHtml = l.qty > 1 ? '<div class="mkt-qty">x' + l.qty + '</div>' : '';

    card.innerHTML =
      '<div class="mkt-card-head">' +
        iconHtml(snap.iconId, snap.name || '') +
        '<div class="mkt-info">' +
          '<div class="mkt-name">' + esc(snap.name || '—') + '</div>' +
        '</div>' +
      '</div>' +
      affixes +
      qtyHtml +
      '<div class="mkt-footer">' +
        '<div class="mkt-price"><img src="{{ asset('images/money.png') }}" alt="">' + fmtMoney(l.price) + '</div>' +
        (isMine
          ? '<button class="mkt-cancel-btn" data-id="' + l.id + '">Retirer</button>'
          : '<button class="mkt-buy-btn" data-id="' + l.id + '" data-price="' + l.price + '"' +
              (currentMoney < l.price ? ' disabled title="Fonds insuffisants"' : '') + '>Acheter</button>'
        ) +
      '</div>';

    if (isMine) {
      card.querySelector('.mkt-cancel-btn').addEventListener('click', function(e) { cancelListing(e, l); });
    } else {
      card.querySelector('.mkt-buy-btn').addEventListener('click', buyListing);
    }

    card.addEventListener('mouseenter', function(e) { showMktTooltip(snap, e.clientX, e.clientY); });
    card.addEventListener('mousemove',  function(e) { positionMktTooltip(e.clientX, e.clientY); });
    card.addEventListener('mouseleave', hideMktTooltip);

    return card;
  }

  function renderGrid(containerId, listings, isMine) {
    var grid = document.getElementById(containerId);
    grid.innerHTML = '';
    if (!listings.length) {
      grid.innerHTML = '<div class="market-empty">' + (isMine ? 'Aucune annonce active.' : 'Aucune annonce disponible.') + '</div>';
      return;
    }
    listings.forEach(function(l) { grid.appendChild(renderCard(l, isMine)); });
  }

  // ── Load browse listings ───────────────────────────────────────────────────

  var cachedListings = [];

  function loadBrowse() {
    fetch('{{ path('market_api_listings') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
      .then(function(r){ return r.json(); })
      .then(function(data) {
        cachedListings = data;
        applyFilter();
      });
  }

  function applyFilter() {
    var needle = activeSearch.toLowerCase();
    var filtered = cachedListings.filter(function(l) {
      if (activeFilter === 'weapon' && l.itemType !== 'weapon' && l.itemType !== 'weapon_instance') return false;
      if (activeFilter === 'armor'  && l.itemType !== 'armor'  && l.itemType !== 'armor_instance')  return false;
      if (activeFilter === 'item'   && l.itemType !== 'item')                                        return false;
      if (needle && !(l.snapshot && l.snapshot.name && l.snapshot.name.toLowerCase().indexOf(needle) !== -1)) return false;
      return true;
    });
    renderGrid('browse-grid', filtered, false);
    var cnt = document.getElementById('browse-count');
    cnt.textContent = filtered.length + ' annonce' + (filtered.length !== 1 ? 's' : '');
  }

  // ── Load my listings ───────────────────────────────────────────────────────

  function loadMine() {
    fetch('{{ path('market_api_mine') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
      .then(function(r){ return r.json(); })
      .then(function(data) {
        renderGrid('mine-grid', data, true);
        var badge = document.getElementById('mine-badge');
        if (data.length > 0) {
          badge.textContent = data.length;
          badge.style.display = '';
        } else {
          badge.style.display = 'none';
        }
      });
  }

  // ── Buy ───────────────────────────────────────────────────────────────────

  function buyListing(e) {
    var btn = e.currentTarget;
    var id  = btn.dataset.id;
    var price = parseInt(btn.dataset.price, 10);
    if (!confirm('Acheter cet article pour ' + fmtMoney(price) + ' Dollawrs ?')) return;
    btn.disabled = true;
    fetch(buyUrlTpl.replace('/0/', '/' + id + '/'), {
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
    })
    .then(function(r){ return r.json(); })
    .then(function(res) {
      if (res.success) {
        currentMoney = res.newMoney;
        updateMoneyDisplay();
        showToast('Achat effectué.');
        loadBrowse();
      } else {
        showToast(res.error || 'Erreur.', true);
        btn.disabled = false;
      }
    });
  }

  // ── Cancel ────────────────────────────────────────────────────────────────

  function cancelListing(e, listing) {
    var btn = e.currentTarget;
    var id  = btn.dataset.id;
    if (!confirm('Retirer cette annonce et récupérer l\'objet ?')) return;
    btn.disabled = true;
    fetch(cancelUrlTpl.replace('/0/', '/' + id + '/'), {
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
    })
    .then(function(r){ return r.json(); })
    .then(function(res) {
      if (res.success) {
        if (listing) {
          var snap  = listing.snapshot || {};
          var iType = listing.itemType;
          var iId   = listing.itemId;
          var idx   = inventory.findIndex(function(i) { return i.type === iType && i.id === iId; });
          if (idx >= 0) {
            inventory[idx].qty = (inventory[idx].qty || 0) + listing.qty;
          } else {
            inventory.push({
              type:    iType,
              id:      iId,
              qty:     listing.qty,
              name:    snap.name    || '',
              iconId:  snap.iconId  || null,
              rarity:  snap.rarity  || 0,
              affixes: snap.affixes || null,
              level:   snap.level   || null,
            });
          }
        }
        showToast('Annonce retirée, objet rendu à votre inventaire.');
        loadMine();
      } else {
        showToast(res.error || 'Erreur.', true);
        btn.disabled = false;
      }
    });
  }

  // ── Sell modal ────────────────────────────────────────────────────────────

  function openSellModal() {
    sellSelected = null;
    document.getElementById('sell-price').value = '';
    document.getElementById('sell-qty').value = '1';
    document.getElementById('confirm-sell').disabled = true;

    var list = document.getElementById('sell-inv-list');
    list.innerHTML = '';

    if (!inventory.length) {
      list.innerHTML = '<div style="color:var(--muted);font-size:.85rem;grid-column:1/-1">Votre inventaire ne contient aucun objet vendable.</div>';
    } else {
      inventory.forEach(function(item, idx) {
        var div = document.createElement('div');
        div.className = 'sell-inv-item';
        div.dataset.idx = idx;
        var iconHtmlStr = item.iconId
          ? '<img src="' + iconBase + item.iconId + '" alt="">'
          : '<div class="sell-inv-placeholder"></div>';
        div.innerHTML = iconHtmlStr +
          '<div style="min-width:0">' +
            '<div class="sell-inv-name">' + esc(item.name) + '</div>' +
            '<div class="sell-inv-qty">' + (item.qty > 1 ? 'x' + item.qty : (item.affixes && item.affixes.length ? item.affixes.map(function(a){return a.name;}).join(', ').substring(0, 30) : 'Unique')) + '</div>' +
          '</div>';
        div.addEventListener('click', function() {
          document.querySelectorAll('.sell-inv-item').forEach(function(el){ el.classList.remove('selected'); });
          div.classList.add('selected');
          sellSelected = item;
          var isInstance = item.type === 'weapon_instance' || item.type === 'armor_instance';
          var qtyWrap = document.getElementById('sell-qty-wrap');
          qtyWrap.style.display = (!isInstance && item.qty > 1) ? 'flex' : 'none';
          if (isInstance || item.qty === 1) {
            document.getElementById('sell-qty').value = '1';
          } else {
            document.getElementById('sell-qty').max = item.qty;
          }
          checkSellReady();
        });
        list.appendChild(div);
      });
    }

    document.getElementById('sell-modal').classList.add('open');
  }

  function checkSellReady() {
    var price = parseInt(document.getElementById('sell-price').value, 10);
    document.getElementById('confirm-sell').disabled = !(sellSelected && price > 0);
  }

  function confirmSell() {
    if (!sellSelected) return;
    var price = parseInt(document.getElementById('sell-price').value, 10);
    var qty   = parseInt(document.getElementById('sell-qty').value, 10) || 1;
    if (price <= 0) return;

    var btn = document.getElementById('confirm-sell');
    btn.disabled = true;

    fetch('{{ path('market_api_list') }}', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify({ itemType: sellSelected.type, itemId: sellSelected.id, qty: qty, price: price }),
    })
    .then(function(r){ return r.json(); })
    .then(function(res) {
      if (res.success) {
        document.getElementById('sell-modal').classList.remove('open');
        showToast('Annonce publiée.');
        // Retire l'item de l'inventaire local
        var inv = inventory;
        for (var i = 0; i < inv.length; i++) {
          if (inv[i].type === sellSelected.type && inv[i].id === sellSelected.id) {
            if (inv[i].qty <= qty) { inv.splice(i, 1); }
            else { inv[i] = Object.assign({}, inv[i], {qty: inv[i].qty - qty}); }
            break;
          }
        }
        loadMine();
      } else {
        showToast(res.error || 'Erreur.', true);
        btn.disabled = false;
      }
    });
  }

  // ── Tabs ──────────────────────────────────────────────────────────────────

  document.querySelectorAll('.market-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      document.querySelectorAll('.market-tab').forEach(function(t){ t.classList.remove('active'); });
      document.querySelectorAll('.market-panel').forEach(function(p){ p.classList.remove('active'); });
      tab.classList.add('active');
      document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
      if (tab.dataset.tab === 'mine') { loadMine(); loadMineTrades(); }
      if (tab.dataset.tab === 'trades') loadTrades();
    });
  });

  // ── Filters ───────────────────────────────────────────────────────────────

  document.querySelectorAll('#tab-browse .mf-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      document.querySelectorAll('#tab-browse .mf-btn').forEach(function(b){ b.classList.remove('active'); });
      btn.classList.add('active');
      activeFilter = btn.dataset.filter;
      applyFilter();
    });
  });

  document.getElementById('mf-search').addEventListener('input', function() {
    activeSearch = this.value.trim();
    applyFilter();
  });

  // ── Modal wiring ──────────────────────────────────────────────────────────

  document.getElementById('open-sell-modal').addEventListener('click', openSellModal);
  document.getElementById('close-sell-modal').addEventListener('click', function() {
    document.getElementById('sell-modal').classList.remove('open');
  });
  document.getElementById('sell-modal').addEventListener('click', function(e) {
    if (e.target === this) this.classList.remove('open');
  });
  document.getElementById('sell-price').addEventListener('input', checkSellReady);
  document.getElementById('sell-qty').addEventListener('input', checkSellReady);
  document.getElementById('confirm-sell').addEventListener('click', confirmSell);

  // ── Annonces d'échange ────────────────────────────────────────────────────

  // Charge les annonces des autres joueurs pour l'onglet Trades. Les miennes
  // sont gérées séparément par loadMineTrades() dans l'onglet « Mes annonces ».
  function loadTrades() {
    var grid = document.getElementById('trades-grid');
    grid.innerHTML = '<div class="market-empty">Chargement...</div>';
    fetch(tradeListUrl, { credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        tradeCache.all = Array.isArray(data) ? data : [];
        renderTrades();
      })
      .catch(function () {
        grid.innerHTML = '<div class="market-empty">Erreur de chargement.</div>';
      });
  }

  function renderTrades() {
    var grid = document.getElementById('trades-grid');
    grid.innerHTML = '';
    var matches = function (t) {
      var typeOk = !activeTFilter
        || matchesTypeFilterStr(t.offeredType, activeTFilter)
        || matchesTypeFilterStr(t.wantedType,  activeTFilter);
      var q = activeTSearch.toLowerCase();
      var searchOk = !q
        || (t.offeredSnapshot.name || '').toLowerCase().indexOf(q) !== -1
        || (t.wantedSnapshot.name  || '').toLowerCase().indexOf(q) !== -1;
      return typeOk && searchOk;
    };
    var others = tradeCache.all.filter(matches);
    document.getElementById('trades-count').textContent = others.length
      ? (others.length + ' annonce' + (others.length > 1 ? 's' : ''))
      : '';
    if (others.length === 0) {
      grid.innerHTML = '<div class="market-empty">Aucune annonce d\'échange pour le moment.</div>';
      return;
    }
    others.forEach(function (t) { grid.appendChild(renderTradeCard(t, false)); });
  }

  // Icône plus large (40px) que la version mkt-icon (36px) — meilleure lisibilité
  // dans les cartes d'échange qui ont plus de contenu à afficher.
  function tradeIconHtml(iconId, name) {
    if (!iconId) return '<div class="trade-swap-icon-ph"></div>';
    return '<img class="trade-swap-icon" src="' + iconBase + iconId + '" alt="' + esc(name) + '">';
  }

  // Charge et rend les annonces d'échange du joueur dans l'onglet « Mes annonces ».
  function loadMineTrades() {
    var grid = document.getElementById('mine-trades-grid');
    grid.innerHTML = '<div class="market-empty">Chargement...</div>';
    fetch(tradeMineUrl, { credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        tradeCache.mine = Array.isArray(data) ? data : [];
        renderMineTrades();
      })
      .catch(function () {
        grid.innerHTML = '<div class="market-empty">Erreur de chargement.</div>';
      });
  }

  function renderMineTrades() {
    var grid = document.getElementById('mine-trades-grid');
    grid.innerHTML = '';
    if (tradeCache.mine.length === 0) {
      grid.innerHTML = '<div class="market-empty">Vous n\'avez aucune annonce d\'échange active.</div>';
      return;
    }
    tradeCache.mine.forEach(function (t) { grid.appendChild(renderTradeCard(t, true)); });
  }

  function matchesTypeFilterStr(itemType, filter) {
    if (filter === 'weapon') return itemType === 'weapon' || itemType === 'weapon_instance';
    if (filter === 'armor')  return itemType === 'armor'  || itemType === 'armor_instance';
    if (filter === 'item')   return itemType === 'item';
    return true;
  }

  function renderTradeCard(t, isMine) {
    var card = document.createElement('div');
    card.className = 'trade-card';
    card.dataset.id = t.id;

    var offSnap = t.offeredSnapshot || {};
    var wantSnap = t.wantedSnapshot || {};
    var r = RARITY[offSnap.rarity];
    if (r) card.style.borderLeftColor = r.c;

    var swap = document.createElement('div');
    swap.className = 'trade-swap';
    swap.innerHTML =
      '<div class="trade-swap-col">' +
        tradeIconHtml(offSnap.iconId, offSnap.name || '') +
        '<div class="trade-swap-text">' +
          '<div class="trade-swap-label">' + (isMine ? 'J\'offre' : 'Il offre') + '</div>' +
          '<div class="trade-swap-name">' + esc(offSnap.name || '—') + (t.offeredQty > 1 ? ' ×' + t.offeredQty : '') + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="trade-swap-arrow">⇄</div>' +
      '<div class="trade-swap-col">' +
        tradeIconHtml(wantSnap.iconId, wantSnap.name || '') +
        '<div class="trade-swap-text">' +
          '<div class="trade-swap-label">' + (isMine ? 'Je veux' : 'Il veut') + '</div>' +
          '<div class="trade-swap-name">' + esc(wantSnap.name || '—') + (t.wantedQty > 1 ? ' ×' + t.wantedQty : '') + '</div>' +
        '</div>' +
      '</div>';
    card.appendChild(swap);

    if (t.notes) {
      var notesEl = document.createElement('div');
      notesEl.className = 'trade-notes';
      notesEl.textContent = t.notes;
      card.appendChild(notesEl);
    }

    var footer = document.createElement('div');
    footer.className = 'trade-footer';
    var seller = document.createElement('div');
    seller.className = 'trade-seller';
    seller.textContent = isMine ? 'Votre annonce' : ('Par ' + t.seller);
    footer.appendChild(seller);

    if (isMine) {
      var cancel = document.createElement('button');
      cancel.className = 'trade-cancel-btn'; cancel.textContent = 'Retirer';
      cancel.addEventListener('click', function () { cancelTrade(t); });
      footer.appendChild(cancel);
    } else {
      var accept = document.createElement('button');
      accept.className = 'trade-accept-btn'; accept.textContent = 'Accepter';
      // Le preneur doit avoir l'objet demandé — désactive sinon.
      var hasWanted = playerHasInInventory(t.wantedType, t.wantedId, t.wantedQty);
      if (!hasWanted) { accept.disabled = true; accept.title = 'Vous ne possédez pas l\'objet demandé'; }
      accept.addEventListener('click', function () { acceptTrade(t); });
      footer.appendChild(accept);
    }
    card.appendChild(footer);
    return card;
  }

  function playerHasInInventory(type, id, qty) {
    for (var i = 0; i < inventory.length; i++) {
      var it = inventory[i];
      if (it.type === type && it.id === id && (it.qty || 1) >= (qty || 1)) return true;
    }
    return false;
  }

  function acceptTrade(t) {
    if (!confirm('Accepter cet échange ? L\'objet demandé sera prélevé de votre inventaire.')) return;
    fetch(tradeAcceptUrlTpl.replace('/0/', '/' + t.id + '/'), {
      method: 'POST', credentials: 'same-origin',
    }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
      .then(function (res) {
        if (!res.ok) { showToast(res.body.error || 'Erreur.', true); return; }
        showToast('Échange conclu !');
        // Recharger inventaire et annonces — pour l'instant on force reload.
        location.reload();
      })
      .catch(function () { showToast('Erreur réseau.', true); });
  }

  function cancelTrade(t) {
    if (!confirm('Retirer cette annonce ? L\'objet offert reviendra dans votre inventaire.')) return;
    fetch(tradeCancelUrlTpl.replace('/0/', '/' + t.id + '/'), {
      method: 'POST', credentials: 'same-origin',
    }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
      .then(function (res) {
        if (!res.ok) { showToast(res.body.error || 'Erreur.', true); return; }
        showToast('Annonce retirée.');
        location.reload();
      })
      .catch(function () { showToast('Erreur réseau.', true); });
  }

  // Filtres de l'onglet Trades (data-tfilter pour ne pas collisionner avec browse).
  document.querySelectorAll('#tab-trades .mf-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('#tab-trades .mf-btn').forEach(function (b) { b.classList.remove('active'); });
      btn.classList.add('active');
      activeTFilter = btn.dataset.tfilter || '';
      renderTrades();
    });
  });
  document.getElementById('tf-search').addEventListener('input', function () {
    activeTSearch = this.value.trim();
    renderTrades();
  });

  // ── Modal « Créer une annonce d'échange » ────────────────────────────────

  function openTradeModal() {
    tradeOffered = null; tradeWanted = null;
    document.getElementById('trade-notes').value = '';
    document.getElementById('trade-offered-search').value = '';
    document.getElementById('trade-wanted-search').value = '';
    document.getElementById('trade-offered-qty').value = 1;
    document.getElementById('trade-wanted-qty').value = 1;
    document.getElementById('trade-offered-qty-wrap').style.display = 'none';
    renderTradeOfferedList('');
    renderTradeWantedList('');
    updateConfirmTradeState();
    document.getElementById('trade-modal').classList.add('open');
  }

  function closeTradeModal() {
    document.getElementById('trade-modal').classList.remove('open');
  }

  function renderTradeOfferedList(query) {
    var list = document.getElementById('trade-offered-list');
    list.innerHTML = '';
    var q = (query || '').toLowerCase();
    var matches = inventory.filter(function (it) {
      return !q || (it.name || '').toLowerCase().indexOf(q) !== -1;
    });
    if (!matches.length) {
      list.innerHTML = '<div class="trade-picker-empty">Inventaire vide.</div>';
      return;
    }
    matches.forEach(function (it) {
      var row = document.createElement('div');
      row.className = 'trade-picker-item';
      var isSel = tradeOffered && tradeOffered.type === it.type && tradeOffered.id === it.id;
      if (isSel) row.classList.add('selected');
      row.innerHTML = (it.iconId
        ? '<img src="' + iconBase + it.iconId + '" alt="">'
        : '<div class="ph"></div>') +
        '<div class="trade-picker-name">' + esc(it.name) + '</div>' +
        '<div class="trade-picker-qty">×' + (it.qty || 1) + '</div>';
      row.addEventListener('click', function () {
        tradeOffered = { type: it.type, id: it.id, name: it.name, iconId: it.iconId, maxQty: it.qty || 1 };
        var qwrap = document.getElementById('trade-offered-qty-wrap');
        // Instances : quantité forcée à 1, wrap masqué.
        var isInstance = it.type === 'weapon_instance' || it.type === 'armor_instance';
        if (isInstance) {
          qwrap.style.display = 'none';
          document.getElementById('trade-offered-qty').value = 1;
        } else if ((it.qty || 1) > 1) {
          qwrap.style.display = 'flex';
          var q = document.getElementById('trade-offered-qty');
          q.max = it.qty; q.value = 1;
        } else {
          qwrap.style.display = 'none';
          document.getElementById('trade-offered-qty').value = 1;
        }
        renderTradeOfferedList(document.getElementById('trade-offered-search').value.trim());
        updateConfirmTradeState();
      });
      list.appendChild(row);
    });
  }

  function renderTradeWantedList(query) {
    var list = document.getElementById('trade-wanted-list');
    list.innerHTML = '';
    var q = (query || '').toLowerCase();
    var matches = tradeCatalog.filter(function (it) {
      return !q || (it.name || '').toLowerCase().indexOf(q) !== -1;
    }).slice(0, 100);
    if (!matches.length) {
      list.innerHTML = '<div class="trade-picker-empty">Aucun résultat.</div>';
      return;
    }
    matches.forEach(function (it) {
      var row = document.createElement('div');
      row.className = 'trade-picker-item';
      var isSel = tradeWanted && tradeWanted.type === it.type && tradeWanted.id === it.id;
      if (isSel) row.classList.add('selected');
      row.innerHTML = (it.iconId
        ? '<img src="' + iconBase + it.iconId + '" alt="">'
        : '<div class="ph"></div>') +
        '<div class="trade-picker-name">' + esc(it.name) + '</div>';
      row.addEventListener('click', function () {
        tradeWanted = { type: it.type, id: it.id, name: it.name, iconId: it.iconId };
        renderTradeWantedList(document.getElementById('trade-wanted-search').value.trim());
        updateConfirmTradeState();
      });
      list.appendChild(row);
    });
  }

  function updateConfirmTradeState() {
    document.getElementById('confirm-trade').disabled = !(tradeOffered && tradeWanted);
  }

  function confirmTrade() {
    if (!tradeOffered || !tradeWanted) return;
    var body = {
      offeredType: tradeOffered.type,
      offeredId:   tradeOffered.id,
      offeredQty:  parseInt(document.getElementById('trade-offered-qty').value, 10) || 1,
      wantedType:  tradeWanted.type,
      wantedId:    tradeWanted.id,
      wantedQty:   parseInt(document.getElementById('trade-wanted-qty').value, 10) || 1,
      notes:       document.getElementById('trade-notes').value,
    };
    fetch(tradeCreateUrl, {
      method: 'POST', credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(body),
    }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
      .then(function (res) {
        if (!res.ok) { showToast(res.body.error || 'Erreur.', true); return; }
        showToast('Annonce créée.');
        closeTradeModal();
        location.reload();
      })
      .catch(function () { showToast('Erreur réseau.', true); });
  }

  document.getElementById('open-trade-modal').addEventListener('click', openTradeModal);
  document.getElementById('close-trade-modal').addEventListener('click', closeTradeModal);
  document.getElementById('trade-modal').addEventListener('click', function (e) {
    if (e.target === this) closeTradeModal();
  });
  document.getElementById('trade-offered-search').addEventListener('input', function () {
    renderTradeOfferedList(this.value.trim());
  });
  document.getElementById('trade-wanted-search').addEventListener('input', function () {
    renderTradeWantedList(this.value.trim());
  });
  document.getElementById('confirm-trade').addEventListener('click', confirmTrade);

  // ── Init ──────────────────────────────────────────────────────────────────

  loadBrowse();
})();
</script>
{% endblock %}