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

{% block title %}Séance — RepTrack{% endblock %}

{# ── Header : offline dot + semaine ────────────────────────────── #}
{% block header_actions %}
<div style="display:flex;align-items:center;gap:10px;">
  <div class="offline-dot" id="offlineDot" title="Hors ligne"></div>
  <div class="week-badge" id="weekBadge">Semaine —</div>
</div>
{% endblock %}

{# ── Styles spécifiques dashboard ───────────────────────────────── #}
{% block stylesheets %}
<style>
  body { overscroll-behavior: none; }

  .offline-dot { width:7px;height:7px;border-radius:50%;background:#ff4444;display:none;box-shadow:0 0 6px #ff4444; }
  .offline-dot.show { display:block; }
  .week-badge { font-size:11px;font-weight:500;color:var(--text-muted);background:var(--surface2);border:1px solid var(--border);padding:4px 10px;border-radius:20px;letter-spacing:.5px; }

  .day-tabs { display:flex;gap:6px;padding:12px 16px 0;overflow-x:auto;scrollbar-width:none; }
  .day-tabs::-webkit-scrollbar { display:none; }
  .day-tab { flex-shrink:0;font-family:var(--font-display);font-size:16px;letter-spacing:1px;padding:8px 18px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .15s;position:relative; }
  .day-tab.active { background:var(--accent);color:#0f0f0f;border-color:var(--accent); }
  .day-tab .tab-progress { position:absolute;bottom:-1px;left:0;height:2px;background:var(--accent);border-radius:0 0 8px 8px;transition:width .3s; }
  .day-tab:not(.active) .tab-progress { background:var(--text-dim); }

  .session-progress { margin:12px 16px 0;background:var(--surface2);border-radius:4px;height:3px;overflow:hidden; }
  .session-progress-fill { height:100%;background:var(--accent);border-radius:4px;transition:width .4s ease; }
  .progress-label { margin:6px 16px 0;font-size:11px;color:var(--text-muted);display:flex;justify-content:space-between; }

  .content { padding:12px 16px calc(var(--bottom-nav-h) + 24px); }

  .ex-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;transition:opacity .3s,transform .3s; }
  .ex-card.all-done { opacity:.35;transform:scale(.98); }
  .ex-header { display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;cursor:pointer; }
  .ex-illus { width:52px;height:52px;flex-shrink:0;background:var(--surface2);border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border); }
  .ex-illus svg { width:44px;height:44px; }
  .ex-card.all-done .ex-illus { opacity:.4; }
  .ex-info { flex:1;min-width:0; }
  .ex-name { font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .ex-detail { font-size:11px;color:var(--text-muted);margin-top:3px; }
  .ex-chevron { width:18px;height:18px;color:var(--text-dim);transition:transform .2s;flex-shrink:0; }
  .ex-card.open .ex-chevron { transform:rotate(180deg); }

  .series-list { display:none;padding:0 14px 12px;gap:6px;flex-direction:column; }
  .ex-card.open .series-list { display:flex; }
  .serie-item { display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:8px;padding:10px 12px;cursor:pointer;border:1px solid transparent;transition:all .2s;user-select:none; }
  .serie-item:active { transform:scale(.97); }
  .serie-item.done { background:var(--bg);border-color:var(--border); }
  .serie-check { width:22px;height:22px;border-radius:6px;flex-shrink:0;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .2s; }
  .serie-item.done .serie-check { background:var(--accent);border-color:var(--accent); }
  .serie-label { flex:1;font-size:13px;font-weight:500; }
  .serie-item.done .serie-label { color:var(--text-dim);text-decoration:line-through; }
  .serie-reps { font-size:12px;color:var(--text-muted);background:var(--border);padding:2px 8px;border-radius:4px; }
  .serie-item.done .serie-reps { opacity:.4; }

  .reset-btn { display:block;width:100%;margin-top:24px;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:13px;padding:12px;border-radius:var(--radius);cursor:pointer;transition:all .2s; }
  .reset-btn:hover { border-color:#ff4444;color:#ff4444; }

  .session-complete { display:none;position:fixed;inset:0;z-index:200;background:rgba(15,15,15,.95);flex-direction:column;align-items:center;justify-content:center;gap:16px; }
  .session-complete.show { display:flex; }
  .complete-title { font-family:var(--font-display);font-size:64px;color:var(--accent);letter-spacing:4px;text-align:center; }
  .complete-sub { font-size:16px;color:var(--text-muted);text-align:center; }
  .complete-btn { margin-top:8px;background:var(--accent);color:#0f0f0f;border:none;font-family:var(--font-display);font-size:20px;letter-spacing:2px;padding:14px 40px;border-radius:var(--radius);cursor:pointer; }

  .toast { position:fixed;bottom:calc(var(--bottom-nav-h) + 12px);left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:13px;padding:10px 20px;border-radius:20px;z-index:300;transition:transform .3s;white-space:nowrap; }
  .toast.show { transform:translateX(-50%) translateY(0); }

  .empty-state { text-align:center;padding:60px 24px; }
  .empty-state .page-title { margin-bottom:8px; }
  .empty-state .page-sub { margin-bottom:28px; }
</style>
{% endblock %}

{# ── Contenu principal ──────────────────────────────────────────── #}
{% block body %}

{# ── Flashes #}
{% for label, messages in app.flashes %}
  {% for message in messages %}
    <div class="flash flash-{{ label }}">{{ message }}</div>
  {% endfor %}
{% endfor %}

{# ════════════════════════════════════════════════════════
   CAS 1 : Aucun programme actif
════════════════════════════════════════════════════════ #}
{% if not active_program %}

  <div class="empty-state">
    <div class="page-title">Aucun programme actif</div>
    <p class="page-sub">Crée ton premier programme pour commencer à t'entraîner.</p>
    {% if programs is not empty %}
      <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">
        Tu as {{ programs|length }} programme(s) mais aucun n'est actif.
        <a href="{{ path('app_program_index') }}">Activer un programme →</a>
      </p>
    {% endif %}
    <a href="{{ path('app_program_new') }}" class="btn btn-primary">+ Créer un programme</a>
  </div>

{# ════════════════════════════════════════════════════════
   CAS 2 : Programme actif trouvé
════════════════════════════════════════════════════════ #}
{% else %}

{# ── Onglets jours ──────────────────────────────────────── #}
{% if active_program.days is not empty %}

<div class="day-tabs">
  {% for day in active_program.days %}
    <div class="day-tab"
         id="tab-{{ day.id }}"
         onclick="switchDay({{ day.id }})">
      {{ day.label }}
      <div class="tab-progress" id="tab-progress-{{ day.id }}" style="width:0%"></div>
    </div>
  {% endfor %}
</div>

<div class="session-progress">
  <div class="session-progress-fill" id="progressFill"></div>
</div>
<div class="progress-label">
  <span id="progressText">0 séries</span>
  <span id="progressPct">0%</span>
</div>

{# ── Panneaux par jour ───────────────────────────────────── #}
<div class="content">
  {% for day in active_program.days %}
  <div class="day-panel" id="panel-{{ day.id }}" style="display:none">

    {% if day.exercises is empty %}
      <p style="color:var(--text-muted);font-size:13px;padding:24px 0;text-align:center;">
        Aucun exercice pour ce jour.
        <a href="{{ path('app_day_edit', {id: day.id}) }}">Ajouter →</a>
      </p>
    {% else %}

      {# Groupement par section #}
      {% set current_section = null %}
      {% for exercise in day.exercises %}
        {% if exercise.sectionName != current_section %}
          {% set current_section = exercise.sectionName %}
          {% if current_section %}
            <div class="section-label">{{ current_section }}</div>
          {% endif %}
        {% endif %}

        {% set first_serie = exercise.series|first %}

        <div class="ex-card"
             id="card-{{ exercise.id }}"
             data-exercise="{{ exercise.id }}"
             data-total="{{ exercise.series|length }}">

          <div class="ex-header" onclick="toggleCard({{ exercise.id }})">
            <div class="ex-illus" data-icon="{{ exercise.icon }}"></div>
            <div class="ex-info">
              <div class="ex-name">{{ exercise.name }}</div>
              <div class="ex-detail">
                {% if exercise.detail %}{{ exercise.detail }} · {% endif %}
                {{ exercise.series|length }} série{{ exercise.series|length > 1 ? 's' }}
                {% if first_serie %} · {{ first_serie.reps }} · Repos {{ first_serie.restLabel }}{% endif %}
              </div>
            </div>
            <svg class="ex-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
              <polyline points="5,8 10,13 15,8"/>
            </svg>
          </div>

          <div class="series-list">
            {% for serie in exercise.series %}
              <div class="serie-item"
                   id="serie-{{ serie.id }}"
                   data-serie="{{ serie.id }}"
                   onclick="toggleSerie({{ exercise.id }}, {{ serie.id }})">
                <div class="serie-check"></div>
                <div class="serie-label">Série {{ serie.number }}</div>
                <div class="serie-reps">{{ serie.reps }}</div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}

    {% endif %}

    <button class="reset-btn" onclick="resetDay({{ day.id }})">↺ Réinitialiser cette séance</button>
  </div>
  {% endfor %}
</div>

{% else %}
  {# Programme sans jours #}
  <div class="empty-state">
    <div class="page-title">{{ active_program.label }}</div>
    <p class="page-sub">Ce programme n'a pas encore de jours d'entraînement.</p>
    <a href="{{ path('app_program_show', {id: active_program.id}) }}" class="btn btn-primary">Configurer le programme</a>
  </div>
{% endif %}

{% endif %}
{# fin if active_program #}

<div class="session-complete" id="sessionComplete">
  <div class="complete-title">SÉANCE<br>TERMINÉE !</div>
  <div class="complete-sub">Excellent travail 💪<br>Rendez-vous la semaine prochaine.</div>
  <button class="complete-btn" onclick="closeComplete()">FERMER</button>
</div>
<div class="toast" id="toast"></div>

{% endblock %}

{# ── JavaScript ─────────────────────────────────────────────────── #}
{% block javascripts %}
<script>
/* ── Icônes SVG ────────────────────────────────────────────────── */
const S='rgba(0,0,0,0.35)',H='rgba(255,255,255,0.32)',Y='#e8ff47',D='#b0c020',P='#8a9e14';
function limb(x1,y1,x2,y2,w=3.5){return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${S}" stroke-width="${w+2}" stroke-linecap="round"/><line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${Y}" stroke-width="${w}" stroke-linecap="round"/>`;}
function head(cx,cy){return `<circle cx="${cx+.8}" cy="${cy+.8}" r="3.5" fill="${S}"/><circle cx="${cx}" cy="${cy}" r="3.5" fill="${Y}"/><circle cx="${cx-1}" cy="${cy-1}" r="1.2" fill="${H}"/>`;}
function barbell(x1,x2,y,ph=4.5){const sw=x2-x1-6;return `<rect x="${x1+3}" y="${y-1.2}" width="${sw}" height="2.4" rx="1.2" fill="${P}"/><ellipse cx="${x1+2.5}" cy="${y}" rx="2.8" ry="${ph}" fill="${D}"/><ellipse cx="${x1+1.5}" cy="${y}" rx="2.2" ry="${ph-.5}" fill="${Y}"/><ellipse cx="${x2-2.5}" cy="${y}" rx="2.8" ry="${ph}" fill="${D}"/><ellipse cx="${x2-1.5}" cy="${y}" rx="2.2" ry="${ph-.5}" fill="${Y}"/>`;}
function dumbbell(cx,cy,angle=0){const t=angle?`transform="rotate(${angle} ${cx} ${cy})"`:'';;return `<g ${t}><rect x="${cx-4.5}" y="${cy-1}" width="9" height="2" rx="1" fill="${P}"/><ellipse cx="${cx-4.5}" cy="${cy}" rx="1.8" ry="2.8" fill="${D}"/><ellipse cx="${cx-4}" cy="${cy}" rx="1.4" ry="2.3" fill="${Y}"/><ellipse cx="${cx+4.5}" cy="${cy}" rx="1.8" ry="2.8" fill="${D}"/><ellipse cx="${cx+4}" cy="${cy}" rx="1.4" ry="2.3" fill="${Y}"/></g>`;}
function bench(x,y,w,h=4.5){return `<rect x="${x}" y="${y+1}" width="${w}" height="${h}" rx="2" fill="#323220"/><rect x="${x}" y="${y}" width="${w}" height="${h}" rx="2" fill="#4e4e32"/><rect x="${x+5}" y="${y+h}" width="3" height="8" rx="1.2" fill="#383824"/><rect x="${x+w-8}" y="${y+h}" width="3" height="8" rx="1.2" fill="#383824"/>`;}
const ICONS={
  'dev_couche':`<svg viewBox="0 0 42 42" fill="none">${bench(3,25,22)}${head(30,22)}${limb(10,27,28.5,25)}${limb(15,26.5,15,15)}${limb(21,26,21,15)}${barbell(7,35,14,4.5)}</svg>`,
  'ecarte':`<svg viewBox="0 0 42 42" fill="none"><rect x="4" y="21" width="26" height="4" rx="2" fill="#4e4e32" transform="rotate(-12 4 21)"/>${head(32,15)}${limb(29,17,10,23.5)}${limb(19,20,8,13.5)}${limb(19,20,30,12)}${dumbbell(8,13.5,10)}${dumbbell(31,11,-10)}</svg>`,
  'pompes':`<svg viewBox="0 0 42 42" fill="none"><line x1="3" y1="36" x2="39" y2="36" stroke="rgba(232,255,71,0.2)" stroke-width="1.5"/>${head(35,20)}${limb(8,30,33,22,3.5)}${limb(13,29.5,14,36,3)}${limb(21,27.5,22,35,3)}</svg>`,
  'dev_militaire':`<svg viewBox="0 0 42 42" fill="none">${head(21,8)}${limb(21,11.5,21,26,3)}${limb(21,26,14,37,2.5)}${limb(21,26,28,37,2.5)}${limb(21,17,11,20,3)}${limb(11,20,10,12,3)}${limb(21,17,31,20,3)}${limb(31,20,32,12,3)}${dumbbell(10,11,0)}${dumbbell(32,11,0)}</svg>`,
  'elevation_lat':`<svg viewBox="0 0 42 42" fill="none">${head(21,9)}${limb(21,12.5,21,27,3)}${limb(21,27,14,37,2.5)}${limb(21,27,28,37,2.5)}${limb(21,19,7,19,3.5)}${limb(21,19,35,19,3.5)}${dumbbell(6,19,0)}${dumbbell(36,19,0)}</svg>`,
  'dips':`<svg viewBox="0 0 42 42" fill="none"><line x1="7" y1="8" x2="7" y2="36" stroke="rgba(232,255,71,0.18)" stroke-width="3"/><line x1="35" y1="8" x2="35" y2="36" stroke="rgba(232,255,71,0.18)" stroke-width="3"/><rect x="4" y="15" width="6" height="3.5" rx="1.7" fill="${Y}"/><rect x="32" y="15" width="6" height="3.5" rx="1.7" fill="${Y}"/>${head(21,13)}${limb(21,16.5,21,30,3)}${limb(21,30,16,40,2.5)}${limb(21,30,26,40,2.5)}${limb(21,20,7,17,3)}${limb(21,20,35,17,3)}</svg>`,
  'extension_poulie':`<svg viewBox="0 0 42 42" fill="none"><circle cx="21" cy="5" r="2.5" fill="${D}"/><line x1="21" y1="7.5" x2="19" y2="18" stroke="${Y}" stroke-width="1.2" stroke-dasharray="2.5,1.8" opacity=".8"/><line x1="21" y1="7.5" x2="23" y2="18" stroke="${Y}" stroke-width="1.2" stroke-dasharray="2.5,1.8" opacity=".8"/><rect x="16" y="17" width="10" height="2" rx="1" fill="${D}"/>${head(21,11)}${limb(21,14.5,21,29,3)}${limb(21,29,15,39,2.5)}${limb(21,29,27,39,2.5)}${limb(21,21,18,30,3)}${limb(21,21,24,30,3)}</svg>`,
  'tractions':`<svg viewBox="0 0 42 42" fill="none"><rect x="2" y="5" width="38" height="4" rx="2" fill="${D}"/><ellipse cx="2" cy="7" rx="2" ry="2.5" fill="${Y}"/><ellipse cx="40" cy="7" rx="2" ry="2.5" fill="${Y}"/>${head(21,14)}${limb(21,17.5,21,33,3.5)}${limb(21,33,16,41,2.5)}${limb(21,33,26,41,2.5)}${limb(21,21,11,9,3.5)}${limb(21,21,31,9,3.5)}</svg>`,
  'rowing_barre':`<svg viewBox="0 0 42 42" fill="none">${head(31,11)}${limb(29,14,15,22,3.5)}${limb(19,22,17,35,3)}${limb(19,22,25,35,3)}${limb(22,19,18,30,3)}${limb(22,19,26,30,3)}${barbell(8,36,30,3.5)}</svg>`,
  'tirage_horiz':`<svg viewBox="0 0 42 42" fill="none"><rect x="1" y="6" width="5" height="30" rx="2" fill="#4e4e32"/><line x1="6" y1="22" x2="20" y2="22" stroke="${Y}" stroke-width="1.4" stroke-dasharray="3,2" opacity=".8"/>${head(28,13)}${limb(28,16.5,28,28,3)}${limb(28,28,22,37,2.5)}${limb(28,28,34,37,2.5)}${limb(28,21,20,22,3)}${limb(28,21,36,18,3)}</svg>`,
  'curl_barre':`<svg viewBox="0 0 42 42" fill="none">${head(21,8)}${limb(21,11.5,21,26,3)}${limb(21,26,15,36,2.5)}${limb(21,26,27,36,2.5)}${limb(21,18,11,21,3)}${limb(11,21,13,30,3)}${limb(21,18,31,21,3)}${limb(31,21,29,30,3)}${barbell(10,32,30,3)}</svg>`,
  'curl_incline':`<svg viewBox="0 0 42 42" fill="none"><rect x="6" y="21" width="28" height="4.5" rx="2" fill="#4e4e32" transform="rotate(-28 6 21)"/>${head(32,11)}${limb(29,13,11,22,3.5)}${limb(24,17,18,27,3)}${limb(18,27,20,34,3)}${limb(27,15,33,25,3)}${limb(33,25,31,32,3)}${dumbbell(20,35,-10)}${dumbbell(31,33,-5)}</svg>`,
  'squat':`<svg viewBox="0 0 42 42" fill="none">${barbell(4,38,13,4)}${head(21,9)}${limb(21,12.5,21,22,3.5)}${limb(21,22,11,32,3.5)}${limb(21,22,31,32,3.5)}${limb(11,32,13,41,3)}${limb(31,32,29,41,3)}</svg>`,
  'fentes':`<svg viewBox="0 0 42 42" fill="none"><line x1="3" y1="39" x2="39" y2="39" stroke="rgba(232,255,71,0.2)" stroke-width="1.5"/>${head(22,8)}${limb(22,11.5,22,24,3.5)}${limb(22,24,31,30,3.5)}${limb(31,30,33,39,3)}${limb(22,24,13,30,3)}${limb(13,30,10,39,3)}${dumbbell(13,22,0)}${dumbbell(31,22,0)}</svg>`,
  'sdt':`<svg viewBox="0 0 42 42" fill="none">${barbell(5,37,36,4.5)}${head(27,9)}${limb(27,12.5,20,22,3.5)}${limb(20,22,18,37,3)}${limb(20,22,24,37,3)}</svg>`,
  'leg_ext':`<svg viewBox="0 0 42 42" fill="none"><rect x="7" y="17" width="20" height="9" rx="3" fill="#4e4e32"/>${head(24,11)}${limb(24,14.5,24,26,3)}${limb(24,26,10,26,3)}${limb(24,26,33,26,3.5)}${limb(33,26,39,18,3.5)}<circle cx="39" cy="16.5" r="2.8" fill="${Y}"/>${limb(24,26,22,37,2.5)}</svg>`,
  'leg_curl':`<svg viewBox="0 0 42 42" fill="none"><rect x="6" y="17" width="28" height="6" rx="2" fill="#4e4e32"/>${head(35,13)}${limb(32,15.5,9,21,3.5)}${limb(14,22,12,31,3)}${limb(12,31,18,37,3.5)}<circle cx="18" cy="37" r="2.8" fill="${Y}"/>${limb(9,21,7,33,2.5)}</svg>`,
  'abducteurs':`<svg viewBox="0 0 42 42" fill="none"><rect x="11" y="15" width="20" height="11" rx="3" fill="#4e4e32"/>${head(21,9)}${limb(21,12.5,21,26,3)}${limb(21,26,9,33,3.5)}${limb(21,26,33,33,3.5)}${limb(9,33,7,41,2.5)}${limb(33,33,35,41,2.5)}</svg>`,
  'dev_assis':`<svg viewBox="0 0 42 42" fill="none">${bench(10,27,22)}${head(21,11)}${limb(21,14.5,21,27,3)}${limb(21,21,10,16.5,3)}${limb(10,16.5,9,8.5,3)}${limb(21,21,32,16.5,3)}${limb(32,16.5,33,8.5,3)}${dumbbell(9,7.5,0)}${dumbbell(33,7.5,0)}</svg>`,
  'tirage_nuque':`<svg viewBox="0 0 42 42" fill="none"><rect x="1" y="4" width="40" height="2.5" rx="1.2" fill="#4e4e32"/><rect x="9" y="14" width="24" height="2.8" rx="1.4" fill="${P}"/>${head(21,20)}${limb(21,23.5,21,34,3)}${limb(21,34,15,42,2.5)}${limb(21,34,27,42,2.5)}${limb(21,24,10,15,3)}${limb(21,24,32,15,3)}</svg>`,
  'arnold':`<svg viewBox="0 0 42 42" fill="none">${bench(10,28,22)}${head(21,10)}${limb(21,13.5,21,28,3)}${limb(21,19,11,17,3)}${limb(11,17,9,23,3)}${limb(21,19,31,17,3)}${limb(31,17,33,23,3)}${dumbbell(9,24,0)}${dumbbell(33,24,0)}</svg>`,
  'butterfly':`<svg viewBox="0 0 42 42" fill="none"><rect x="2" y="13" width="7" height="12" rx="3.5" fill="${D}" opacity=".7"/><rect x="33" y="13" width="7" height="12" rx="3.5" fill="${D}" opacity=".7"/>${head(21,10)}${limb(21,13.5,21,28,3)}${limb(21,28,15,38,2.5)}${limb(21,28,27,38,2.5)}${limb(21,20,9,20,3)}${limb(21,20,33,20,3)}</svg>`,
  'gainage':`<svg viewBox="0 0 42 42" fill="none"><line x1="3" y1="37" x2="39" y2="37" stroke="rgba(232,255,71,0.2)" stroke-width="1.5"/>${head(35,20)}${limb(8,29,33,22,3.5)}${limb(8,29,6,37,2.5)}${limb(13,28,11,36,3)}${limb(21,26,19,34,3)}</svg>`,
};

const CHECK = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><polyline points="2,6 5,9 10,3" stroke="#0f0f0f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

/* ── État localStorage ─────────────────────────────────────────── */
function getWeekKey(){const n=new Date(),s=new Date(n.getFullYear(),0,1),w=Math.ceil(((n-s)/86400000+s.getDay()+1)/7);return `reptrack_w${n.getFullYear()}_${w}`;}
let state={};
try{state=JSON.parse(localStorage.getItem(getWeekKey())||'{}');}catch{}
function saveState(){localStorage.setItem(getWeekKey(),JSON.stringify(state));}

let activeDayId=null;

/* ── Injection icônes ──────────────────────────────────────────── */
document.querySelectorAll('[data-icon]').forEach(el=>{
  if(ICONS[el.dataset.icon]) el.innerHTML=ICONS[el.dataset.icon];
});

/* ── Progression ───────────────────────────────────────────────── */
function getDayProgress(dayId){
  const panel=document.getElementById('panel-'+dayId);
  if(!panel)return{done:0,total:0};
  const series=panel.querySelectorAll('.serie-item');
  let done=0;
  series.forEach(s=>{if(state['s'+s.dataset.serie])done++;});
  return{done,total:series.length};
}
function updateProgress(){
  const{done,total}=getDayProgress(activeDayId);
  const pct=total?Math.round(done/total*100):0;
  document.getElementById('progressFill').style.width=pct+'%';
  document.getElementById('progressText').textContent=`${done} / ${total} séries`;
  document.getElementById('progressPct').textContent=pct+'%';
}
function updateTabProgress(){
  document.querySelectorAll('.day-tab').forEach(tab=>{
    const id=tab.id.replace('tab-','');
    const{done,total}=getDayProgress(id);
    const pct=total?Math.round(done/total*100):0;
    const bar=document.getElementById('tab-progress-'+id);
    if(bar)bar.style.width=pct+'%';
  });
}

/* ── Appliquer l'état au DOM ───────────────────────────────────── */
function applyState(){
  document.querySelectorAll('.serie-item').forEach(el=>{
    if(state['s'+el.dataset.serie]){
      el.classList.add('done');
      el.querySelector('.serie-check').innerHTML=CHECK;
    }
  });
  document.querySelectorAll('.ex-card').forEach(refreshCardDone);
}
function refreshCardDone(card){
  const items=card.querySelectorAll('.serie-item');
  card.classList.toggle('all-done',items.length>0&&[...items].every(i=>i.classList.contains('done')));
}

/* ── Interactions ──────────────────────────────────────────────── */
function switchDay(dayId){
  document.querySelectorAll('.day-panel').forEach(p=>p.style.display='none');
  document.querySelectorAll('.day-tab').forEach(t=>t.classList.remove('active'));
  const panel=document.getElementById('panel-'+dayId);
  const tab=document.getElementById('tab-'+dayId);
  if(panel)panel.style.display='block';
  if(tab)tab.classList.add('active');
  activeDayId=dayId;
  updateProgress();
}
function toggleCard(id){document.getElementById('card-'+id).classList.toggle('open');}
function toggleSerie(exId,serieId){
  const key='s'+serieId;
  state[key]=!state[key];
  saveState();
  const item=document.getElementById('serie-'+serieId);
  item.classList.toggle('done',state[key]);
  item.querySelector('.serie-check').innerHTML=state[key]?CHECK:'';
  refreshCardDone(document.getElementById('card-'+exId));
  updateProgress();
  updateTabProgress();
  const{done,total}=getDayProgress(activeDayId);
  if(total>0&&done===total)setTimeout(()=>document.getElementById('sessionComplete').classList.add('show'),400);
}
function resetDay(dayId){
  if(!confirm('Réinitialiser toutes les séries de cette séance ?'))return;
  const panel=document.getElementById('panel-'+dayId);
  panel.querySelectorAll('.serie-item').forEach(el=>{
    delete state['s'+el.dataset.serie];
    el.classList.remove('done');
    el.querySelector('.serie-check').innerHTML='';
  });
  panel.querySelectorAll('.ex-card').forEach(c=>c.classList.remove('all-done','open'));
  saveState();updateProgress();updateTabProgress();
  showToast('Séance réinitialisée');
}
function closeComplete(){document.getElementById('sessionComplete').classList.remove('show');}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2500);}

/* ── Hors-ligne ────────────────────────────────────────────────── */
function updateOnlineStatus(){
  document.getElementById('offlineDot').classList.toggle('show',!navigator.onLine);
  if(!navigator.onLine)showToast('📶 Hors ligne — données locales');
}
window.addEventListener('online',updateOnlineStatus);
window.addEventListener('offline',updateOnlineStatus);
updateOnlineStatus();

/* ── Semaine ───────────────────────────────────────────────────── */
(function(){const n=new Date(),s=new Date(n.getFullYear(),0,1),w=Math.ceil(((n-s)/86400000+s.getDay()+1)/7);document.getElementById('weekBadge').textContent='Semaine '+w;})();

/* ── Init : active le premier onglet ───────────────────────────── */
applyState();
updateTabProgress();
const firstTab=document.querySelector('.day-tab');
if(firstTab)switchDay(parseInt(firstTab.id.replace('tab-','')));
</script>
{% endblock %}