{% extends 'base.html.twig' %}
{% block title %}Sauvegardes cloud — CSI World{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .cs-page {
    max-width: 880px; margin: 32px auto; padding: 0 20px 48px;
    flex: 1; display: flex; flex-direction: column; gap: 20px;
    color: var(--text);
  }
  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: var(--muted);
    text-decoration: none; transition: color .15s; margin-bottom: 4px;
  }
  .back-link:hover { color: var(--accent2); }

  .cs-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 22px 26px;
  }
  .cs-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
  .cs-subtitle { color: var(--muted); font-size: .84rem; }

  .cs-quota {
    display: flex; align-items: center; gap: 16px; margin-top: 14px;
    background: rgba(0,0,0,.12); border-radius: 8px; padding: 12px 16px;
  }
  .cs-quota-bar {
    flex: 1; height: 8px; background: rgba(255,255,255,.08);
    border-radius: 4px; overflow: hidden;
  }
  .cs-quota-fill { height: 100%; background: linear-gradient(90deg, #58a6ff, #2ac769); transition: width .3s; }
  .cs-quota-fill.full { background: linear-gradient(90deg, #f0883e, #f85149); }
  .cs-quota-text { font-size: .85rem; font-weight: 700; min-width: 92px; text-align: right; }

  .cs-upload-form {
    display: grid; gap: 10px; margin-top: 16px;
    grid-template-columns: 1fr 1fr auto;
  }
  .cs-upload-form input[type="text"], .cs-upload-form input[type="file"], .cs-upload-form select {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-size: .86rem; padding: 8px 10px;
  }
  .cs-upload-form .full-row { grid-column: 1 / -1; }

  .btn-upload {
    background: var(--accent); color: #0d1117; border: none; border-radius: 7px;
    padding: 8px 18px; font-weight: 700; font-size: .86rem; cursor: pointer;
    transition: filter .15s;
  }
  .btn-upload:hover { filter: brightness(1.12); }

  .cs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .cs-item {
    display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
    align-items: center; padding: 12px 16px;
    background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 8px;
  }
  .cs-item-main { min-width: 0; }
  .cs-item-name { font-weight: 700; font-size: .9rem; color: var(--text); }
  .cs-item-meta { font-size: .76rem; color: var(--muted); margin-top: 3px; }
  .cs-item-meta .pill {
    display: inline-block; background: rgba(88,166,255,.16); color: #58a6ff;
    padding: 1px 7px; border-radius: 9px; font-weight: 700; margin-right: 5px;
  }
  .cs-item-actions { display: flex; gap: 6px; }
  .cs-item-actions a, .cs-item-actions button {
    padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: .78rem;
    text-decoration: none; border: 1px solid var(--border); cursor: pointer;
    background: transparent; color: var(--text);
    transition: background .12s, border-color .12s;
  }
  .cs-item-actions a:hover { background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.4); color: #58a6ff; }
  .cs-item-actions button.cs-delete:hover { background: rgba(200,80,80,.12); border-color: rgba(200,80,80,.5); color: #e06060; }

  .cs-empty {
    text-align: center; color: var(--muted); padding: 32px 12px;
    background: rgba(0,0,0,.12); border-radius: 8px; border: 1px dashed var(--border);
  }

  .cs-warning {
    padding: 12px 16px; border-radius: 8px;
    background: rgba(240,136,62,.08); border: 1px solid rgba(240,136,62,.3);
    color: #f0883e; font-size: .84rem; margin-top: 12px;
  }

  .flash {
    padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 4px;
  }
  .flash.success { background: rgba(42,199,105,.12); border: 1px solid rgba(42,199,105,.35); color: #2ac769; }
  .flash.error { background: rgba(200,80,80,.12); border: 1px solid rgba(200,80,80,.35); color: #e06060; }
</style>
{% endblock %}

{% block body %}
<div class="cs-page">

  {% for type, messages in app.flashes(['success', 'error']) %}
    {% for message in messages %}
      <div class="flash {{ type }}">{{ message }}</div>
    {% endfor %}
  {% endfor %}

  <div class="cs-card">
    <h1 class="cs-title">Sauvegardes cloud</h1>
    <div class="cs-subtitle">Stocke tes sauvegardes en ligne pour les récupérer depuis n'importe quel PC.</div>

    {% if quota <= 0 %}
      <div class="cs-warning">
        Le stockage cloud est réservé aux joueurs abonnés. <a href="{{ path('subscribe_index') }}" style="color:var(--accent);font-weight:700;text-decoration:none">Découvrir les abonnements →</a>
      </div>
    {% else %}
      <div class="cs-quota">
        <div class="cs-quota-bar">
          <div class="cs-quota-fill {{ used >= quota ? 'full' }}" style="width: {{ quota > 0 ? (used / quota * 100)|round : 0 }}%"></div>
        </div>
        <div class="cs-quota-text">{{ used }} / {{ quota }}</div>
      </div>

      <form class="cs-upload-form" method="POST" action="{{ path('cloud_saves_upload') }}" enctype="multipart/form-data">
        <select name="gameSlug" required>
          <option value="">— Choisir un jeu —</option>
          {% for slug, label in knownGames %}
            <option value="{{ slug }}">{{ label }}</option>
          {% endfor %}
        </select>
        <input type="text" name="label" placeholder="Description (optionnel)">
        <button type="submit" class="btn-upload" {{ used >= quota ? 'disabled' : '' }}>Uploader</button>
        <input class="full-row" type="file" name="file" accept=".zip,application/zip" required>
      </form>
    {% endif %}
  </div>

  {% if saves|length > 0 %}
    <div class="cs-card">
      <h2 class="cs-title" style="font-size:.95rem">Mes sauvegardes ({{ saves|length }})</h2>
      <div class="cs-list">
        {% for save in saves %}
          <div class="cs-item">
            <div class="cs-item-main">
              <div class="cs-item-name">{{ save.fileName }}</div>
              <div class="cs-item-meta">
                <span class="pill">{{ knownGames[save.gameSlug] ?? save.gameSlug }}</span>
                {{ (save.sizeBytes / 1024 / 1024)|number_format(2, ',', ' ') }} MB
                · {{ save.uploadedAt|date('d/m/Y H:i') }}
                {% if save.label %} · <em>{{ save.label }}</em>{% endif %}
              </div>
            </div>
            <div class="cs-item-actions">
              <a href="{{ path('cloud_saves_download', {id: save.id}) }}">Télécharger</a>
              <form method="POST" action="{{ path('cloud_saves_delete', {id: save.id}) }}" style="display:inline" onsubmit="return confirm('Supprimer cette sauvegarde ?')">
                <button type="submit" class="cs-delete">Supprimer</button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% elseif quota > 0 %}
    <div class="cs-empty">Aucune sauvegarde uploadée pour le moment.</div>
  {% endif %}
</div>
{% endblock %}