{% extends "base.html" %}
{% block title %}Galerie photos — Photomaton LSDW{% endblock %}

{% block nav_links %}
<a href="/gallery" class="active">📷 Galerie photos</a>
{% endblock %}

{% block content %}
<div class="container">
  <div class="flex items-center justify-between mb-2">
    <h1 class="page-title" style="margin:0">📷 Vos photos</h1>
    <div class="flex gap-1 items-center">
      <span class="text-sm text-muted" id="photo-count">Chargement…</span>
      <button class="btn btn-ghost btn-sm" onclick="loadPhotos(1)">↻</button>
    </div>
  </div>
  <p class="text-sm text-muted mb-2">
    Retrouvez vos photos ci-dessous. Scannez le QR code depuis la galerie du photomaton pour télécharger votre photo directement sur votre téléphone.
  </p>

  <!-- Navigation pages -->
  <div class="flex items-center gap-2 mb-2">
    <button class="btn btn-ghost btn-sm" id="prev-btn" onclick="changePage(-1)" disabled>← Préc.</button>
    <span class="text-sm text-muted">Page <span id="page-cur">1</span> / <span id="page-total">1</span></span>
    <button class="btn btn-ghost btn-sm" id="next-btn" onclick="changePage(1)">Suiv. →</button>
  </div>

  <div class="photo-grid" id="photo-grid">
    <div class="empty-state"><div class="icon">⏳</div>Chargement…</div>
  </div>
</div>

<!-- Lightbox -->
<div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
  <button class="lightbox-close">&times;</button>
  <img id="lightbox-img" src="" alt="Photo">
  <div class="lightbox-actions">
    <a class="btn btn-primary" id="lb-download" download>⬇ Télécharger la photo</a>
  </div>
  <div class="text-xs text-muted">Connectez-vous au WiFi Photomaton pour télécharger</div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentPage = 1;
let totalPages  = 1;

async function loadPhotos(page = 1) {
  try {
    const data = await api('GET', `/api/gallery/photos?page=${page}&limit=24`);
    const { photos, total, pages } = data;

    currentPage = page;
    totalPages  = pages;

    document.getElementById('photo-count').textContent = `${total} photo(s)`;
    document.getElementById('page-cur').textContent  = page;
    document.getElementById('page-total').textContent = pages;
    document.getElementById('prev-btn').disabled = page <= 1;
    document.getElementById('next-btn').disabled = page >= pages;

    const grid = document.getElementById('photo-grid');

    if (!photos || !photos.length) {
      grid.innerHTML = `
        <div class="empty-state" style="grid-column:1/-1">
          <div class="icon">📷</div>
          Aucune photo pour l'instant — prenez la pose !
        </div>`;
      return;
    }

    grid.innerHTML = photos.map(p => `
      <div class="photo-card" onclick="openLightbox('${p.full_url}', '${p.download_url}')">
        <img src="${p.thumb_url}" loading="lazy" alt="Photo" onerror="this.src='${p.full_url}'">
        <div class="photo-card-actions">
          <a class="btn btn-primary btn-sm" href="${p.download_url}" download onclick="event.stopPropagation()">⬇ Télécharger</a>
        </div>
      </div>
    `).join('');
  } catch(e) {
    document.getElementById('photo-grid').innerHTML = `
      <div class="empty-state" style="grid-column:1/-1">
        <div class="icon">⚠️</div>
        Impossible de charger les photos. Êtes-vous connecté au WiFi Photomaton ?
      </div>`;
  }
}

function changePage(delta) { loadPhotos(currentPage + delta); }

function openLightbox(fullUrl, downloadUrl) {
  document.getElementById('lightbox-img').src = fullUrl;
  document.getElementById('lb-download').href = downloadUrl;
  document.getElementById('lightbox').classList.add('open');
}

function closeLightbox(e) {
  if (!e || e.target.id === 'lightbox' || e.target.classList.contains('lightbox-close')) {
    document.getElementById('lightbox').classList.remove('open');
  }
}

document.querySelector('.lightbox-close').addEventListener('click', closeLightbox);
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox({}); });

function onWsMessage(msg) {
  // Rafraîchit la galerie quand une nouvelle photo est ajoutée
  if (msg.type === 'photobooth_event' && msg.event === 'finished') {
    setTimeout(() => loadPhotos(1), 2000);
  }
}

loadPhotos(1);
// Auto-refresh toutes les 30 secondes
setInterval(() => loadPhotos(1), 30000);
</script>
{% endblock %}