{% extends 'admin/layout.html.twig' %}
{% block page_title %}Jalons Power hebdomadaire{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_csiwo_index') }}">CSIWO</a>
  <span class="sep">/</span><a href="{{ path('admin_daily_quest_index') }}">Quêtes journalières</a>
  <span class="sep">/</span><span class="breadcrumb-text">Jalons Power</span>
{% endblock %}
{% block header_action %}{% endblock %}

{% block content %}
<style>
  .section-box { background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin-bottom:24px;max-width:680px; }
  .section-title { font-weight:700;font-size:.95rem;margin-bottom:14px; }
  .field { margin-bottom:12px; }
  .field-label { display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em; }
  .field input[type=number], .field select { padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.88rem; }
  .inline-row { display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end; }
</style>

{# Config globale #}
<div class="section-box">
  <div class="section-title">Configuration globale</div>
  <form method="POST">
    <input type="hidden" name="_action" value="config">
    <div class="inline-row">
      <div class="field">
        <label class="field-label">Budget Power quotidien</label>
        <input type="number" name="dailyPowerBudget" value="{{ config.dailyPowerBudget }}" min="1" style="width:120px">
      </div>
      <div class="field">
        <label class="field-label">Objectif Power hebdomadaire</label>
        <input type="number" name="weeklyPowerTarget" value="{{ config.weeklyPowerTarget }}" min="1" style="width:120px">
      </div>
      <div class="field">
        <label class="field-label">Taille du pool bonus (abonnés)</label>
        <input type="number" name="bonusPoolSize" value="{{ config.bonusPoolSize }}" min="0" style="width:120px">
        <div style="font-size:.74rem;color:var(--muted);margin-top:4px">Quêtes supplémentaires générées chaque jour pour le pool abonnés. Chaque tier d'abonnement en débloque un certain nombre.</div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary btn-sm" style="margin-top:8px">Enregistrer la config</button>
  </form>
</div>

{# Liste des jalons #}
<div class="section-box">
  <div class="section-title">Jalons configurés</div>
  {% if milestones is empty %}
    <p style="color:var(--muted);font-size:.85rem">Aucun jalon défini.</p>
  {% else %}
  <table class="admin-table" style="margin-bottom:0">
    <thead>
      <tr>
        <th>Seuil Power</th>
        <th>Dollawrs</th>
        <th>Crédits MM</th>
        <th>Éloges</th>
        <th>Objet (ID)</th>
        <th>Qté</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for m in milestones %}
      <tr>
        <td><strong>{{ m.threshold|number_format(0, ',', ' ') }}</strong></td>
        <td>{{ m.money > 0 ? m.money|number_format(0, ',', ' ') : '—' }}</td>
        <td>{{ m.premium > 0 ? m.premium|number_format(0, ',', ' ') : '—' }}</td>
        <td>{{ m.eloges > 0 ? m.eloges|number_format(0, ',', ' ') : '—' }}</td>
        <td>{{ m.itemId ?? '—' }}</td>
        <td>{{ m.itemQty > 0 ? m.itemQty : '—' }}</td>
        <td>
          <form method="POST" action="{{ path('admin_daily_quest_milestone_delete', {id: m.id}) }}"
                onsubmit="return confirm('Supprimer ce jalon ?')">
            <button type="submit" class="btn btn-danger btn-sm">Supprimer</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
</div>

{# Ajouter un jalon #}
<div class="section-box">
  <div class="section-title">Ajouter un jalon</div>
  <form method="POST">
    <input type="hidden" name="_action" value="add_milestone">
    <div class="inline-row">
      <div class="field">
        <label class="field-label">Seuil Power</label>
        <input type="number" name="threshold" min="1" value="" placeholder="ex: 1000" style="width:120px" required>
      </div>
      <div class="field">
        <label class="field-label">Dollawrs</label>
        <input type="number" name="money" min="0" value="0" style="width:100px">
      </div>
      <div class="field">
        <label class="field-label">Crédits MM</label>
        <input type="number" name="premium" min="0" value="0" style="width:100px">
      </div>
      <div class="field">
        <label class="field-label">Éloges</label>
        <input type="number" name="eloges" min="0" value="0" style="width:100px">
      </div>
      <div class="field">
        <label class="field-label">Objet</label>
        <select name="itemId" style="min-width:160px">
          <option value="">— aucun —</option>
          {% for item in items %}
          <option value="{{ item.id }}">{{ item.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label class="field-label">Quantité</label>
        <input type="number" name="itemQty" min="0" value="0" style="width:80px">
      </div>
    </div>
    <button type="submit" class="btn btn-primary btn-sm" style="margin-top:8px">Ajouter le jalon</button>
  </form>
</div>
{% endblock %}