{% extends 'base.html.twig' %}

{% block title %}CSI World — Simulateur d'infusion{% endblock %}

{% block stylesheets %}
<style>
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --pv: #e05252; --eg: #5299e0; --atq: #e08a52; --def: #52e062;
    --arc: #9952e0; --sag: #52d4e0; --vit: #e0d452; --fin: #e052a8;
    --gain: #3fb950; --loss: #f85149;
  }

  main { flex: 1; padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; }

  .sim-header { margin-bottom: 24px; }
  .sim-header h1 { color: var(--text); font-size: 1.5rem; margin-bottom: 8px; }
  .sim-header p { color: var(--muted); font-size: .9rem; }

  /* Type toggle (Arme / Armure) */
  .type-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px; gap: 4px; margin-bottom: 20px; }
  .type-toggle button { background: transparent; border: none; color: var(--muted); padding: 8px 18px; cursor: pointer; border-radius: 6px; font-size: .95rem; transition: all .15s; }
  .type-toggle button.active { background: var(--accent2); color: #fff; }
  .type-toggle button:not(.active):hover { background: var(--bg); color: var(--text); }

  /* Main 2-column grid */
  .sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
  .panel h2 { color: var(--text); font-size: 1.05rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

  /* Search input */
  .search-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--text); font-size: .9rem; outline: none; margin-bottom: 10px; }
  .search-input:focus { border-color: var(--accent2); }

  /* Item list */
  .item-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
  .item-list-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; transition: background .12s; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .item-list-row:last-child { border-bottom: none; }
  .item-list-row:hover { background: rgba(255,255,255,0.04); }
  .item-list-row.selected { background: rgba(197,84,235,0.18); border-left: 3px solid var(--accent2); padding-left: 7px; }
  .item-list-row img { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }
  .item-list-row .il-name { color: var(--text); font-size: .88rem; flex: 1; }
  .item-list-row .il-type { color: var(--muted); font-size: .75rem; }

  /* Stats display */
  .stats-block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin-top: 12px; }
  .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: var(--bg); border-radius: 4px; font-size: .85rem; }
  .stat-row .stat-name { color: var(--muted); font-weight: 500; }
  .stat-row .stat-val  { color: var(--text); font-variant-numeric: tabular-nums; }
  .stat-row.pv  .stat-name { color: var(--pv); }
  .stat-row.eg  .stat-name { color: var(--eg); }
  .stat-row.atq .stat-name { color: var(--atq); }
  .stat-row.def .stat-name { color: var(--def); }
  .stat-row.arc .stat-name { color: var(--arc); }
  .stat-row.sag .stat-name { color: var(--sag); }
  .stat-row.vit .stat-name { color: var(--vit); }
  .stat-row.fin .stat-name { color: var(--fin); }

  /* Delta (green/red) */
  .stat-delta { font-size: .78rem; margin-left: 6px; font-weight: 600; }
  .stat-delta.gain { color: var(--gain); }
  .stat-delta.loss { color: var(--loss); }

  /* Affix select panel */
  .affix-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .affix-select-row label { color: var(--muted); font-size: .85rem; min-width: 80px; }
  .affix-select-row select { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: .88rem; outline: none; }
  .affix-select-row select:focus { border-color: var(--accent2); }

  .affix-info { background: var(--bg); border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: .82rem; color: var(--muted); border-left: 3px solid var(--accent2); }
  .affix-info .ai-rarity { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: .7rem; margin-left: 6px; }
  .affix-info .features-list { margin-top: 6px; }
  .affix-info .features-list li { list-style: none; padding-left: 0; color: var(--text); font-size: .8rem; line-height: 1.4; }

  .empty-state { color: var(--muted); font-style: italic; text-align: center; padding: 20px; }

  /* Result name */
  .result-name { font-size: 1.15rem; color: var(--text); padding: 10px 14px; background: var(--bg); border-radius: 6px; margin-bottom: 12px; font-weight: 600; text-align: center; }
  .result-name.colored { border: 1px solid currentColor; }

  /* Features applied list */
  .applied-features { margin-top: 14px; padding: 12px; background: var(--bg); border-radius: 6px; }
  .applied-features h3 { color: var(--text); font-size: .9rem; margin-bottom: 8px; }
  .applied-features ul { list-style: none; padding: 0; }
  .applied-features li { color: var(--text); font-size: .82rem; padding: 3px 0; padding-left: 14px; position: relative; }
  .applied-features li::before { content: '◆'; position: absolute; left: 0; color: var(--accent2); font-size: .7rem; top: 5px; }
</style>
{% endblock %}

{% block body %}
<main>
  <div class="sim-header">
    <h1>Simulateur d'infusion — CSI Forever</h1>
    <p>Sélectionne une arme ou une armure, puis choisis un préfixe et/ou un suffixe pour visualiser le résultat de l'infusion.</p>
  </div>

  <div class="type-toggle" role="tablist">
    <button type="button" class="active" data-type="weapon">Arme</button>
    <button type="button" data-type="armor">Armure</button>
  </div>

  <div class="sim-grid">
    {# ── Colonne gauche : base picker ── #}
    <div class="panel">
      <h2>1. Objet de base</h2>
      <input type="text" id="base-search" class="search-input" placeholder="Rechercher…">
      <div id="base-list" class="item-list"></div>
    </div>

    {# ── Colonne droite : affixes + résultat ── #}
    <div>
      <div class="panel">
        <h2>2. Affixes à infuser</h2>
        <div class="affix-select-row">
          <label for="prefix-select">Préfixe :</label>
          <select id="prefix-select"><option value="">— Aucun —</option></select>
        </div>
        <div id="prefix-info"></div>
        <div class="affix-select-row" style="margin-top: 14px">
          <label for="suffix-select">Suffixe :</label>
          <select id="suffix-select"><option value="">— Aucun —</option></select>
        </div>
        <div id="suffix-info"></div>
      </div>

      <div class="panel" style="margin-top: 18px">
        <h2>3. Résultat</h2>
        <div id="result-content">
          <div class="empty-state">Choisis un objet de base pour voir le résultat.</div>
        </div>
      </div>
    </div>
  </div>
</main>

<script>
window.WEAPONS      = {{ weaponsJson|raw }};
window.ARMORS       = {{ armorsJson|raw }};
window.STATUS_NAMES = {{ statusNamesJson|raw }};
</script>
<script src="{{ asset('js/infusion-calc.js') }}"></script>
{% endblock %}