mon-petit-cinema/js/public.js

let films = [];
const API_URL = '../api.php';
let currentPubTab = 'critique';
let activeRatingFilter = 0;

async function loadPublicData() {
  try {
    const response = await fetch(`${API_URL}?action=get_films`);
    films = await response.json();
    renderPublicGrid();
  } catch (error) {
    console.error("Erreur de récupération :", error);
  }
}

function switchPubTab(tabName) {
  currentPubTab = tabName;
  activeRatingFilter = 0;
  
  const filterBar = document.getElementById('rating-filter-bar');
  if(filterBar) {
    filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
  }

  document.querySelectorAll('.rating-filter-btn').forEach(btn => {
    btn.classList.remove('active');
    btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
  });

  document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
  const activeBtn = document.getElementById(`tab-pub-${tabName}s`);
  if(activeBtn) activeBtn.classList.add('active');

  renderPublicGrid();
}

function filterByRating(stars) {
  if (currentPubTab !== 'critique') return;
  activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;

  document.querySelectorAll('.rating-filter-btn').forEach(btn => {
    const n = parseInt(btn.dataset.stars);
    btn.classList.toggle('active', n === activeRatingFilter);
    btn.querySelectorAll('.rf-star').forEach((s, i) => {
      s.classList.toggle('filled', i < activeRatingFilter);
    });
  });
  renderPublicGrid();
}

function renderPublicGrid() {
  const grid = document.getElementById('grid');
  const emptyState = document.getElementById('empty-state');
  const countLabel = document.getElementById('count-label');
  if (!grid) return;

  grid.innerHTML = '';

  let filtered = films.filter(f => f.type === currentPubTab);

  if (currentPubTab === 'critique' && activeRatingFilter > 0) {
    filtered = filtered.filter(f => parseInt(f.rating) === activeRatingFilter);
  }

  if (countLabel) {
    countLabel.textContent = `${filtered.length} ${currentPubTab === 'critique' ? 'critique' : 'œuvre'}${filtered.length > 1 ? 's' : ''}`;
  }

  if (filtered.length === 0) {
    if (emptyState) emptyState.style.display = 'block';
    return;
  }
  if (emptyState) emptyState.style.display = 'none';

  filtered.forEach(f => {
    const card = document.createElement('div');
    card.className = 'card';
    card.onclick = () => openDetail(f.id);

    // Rendu de l'affiche ou du placeholder si absente
    let posterHTML = '';
    if (f.poster) {
      posterHTML = `<div class="card-poster-wrap"><img class="card-poster" src="${f.poster}" alt="${f.title}" loading="lazy"></div>`;
    } else {
      posterHTML = `
        <div class="card-poster-wrap">
          <div class="card-poster-placeholder">
            <i class="ti ti-movie"></i>
            <span>Pas d'affiche</span>
          </div>
        </div>`;
    }

    if (f.type === 'critique') {
      const starsHTML = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
      card.innerHTML = `
        ${posterHTML}
        <div class="card-body">
          <h3 class="card-title" title="${f.title}">${f.title}</h3>
          <p class="card-meta">${f.year ? f.year + ' &middot; ' : ''}${f.director || 'Réalisateur inconnu'}</p>
          <div class="card-stars">${starsHTML}</div>
        </div>
      `;
    } else {
      card.innerHTML = `
        ${posterHTML}
        <div class="card-body">
          <h3 class="card-title" title="${f.title}">${f.title}</h3>
          <p class="card-meta">${f.year ? f.year + ' &middot; ' : ''}${f.director || 'Réalisateur inconnu'}</p>
          <div class="card-video-footer">
            <span class="badge-format">${f.format || 'Physique'}</span>
            ${f.length ? `<span class="video-length"><i class="ti ti-clock"></i> ${f.length} min</span>` : ''}
          </div>
        </div>
      `;
    }
    grid.appendChild(card);
  });
}

function openDetail(id) {
  const f = films.find(item => item.id == id);
  if (!f) return;

  const dPoster = document.getElementById('d-poster');
  const dPosterWrap = document.getElementById('d-poster-wrap');
  const dTitle = document.getElementById('d-title');
  const dMeta = document.getElementById('d-meta');
  const dBody = document.getElementById('d-body');
  const detailModalLayout = document.getElementById('detail-modal-layout');
  const detailOverlay = document.getElementById('detail-overlay');

  // Gestion de la visibilité globale de l'affiche dans la modale
  if (f.poster) {
    if (dPoster) dPoster.src = f.poster;
    if (dPosterWrap) {
      dPosterWrap.style.display = 'block';
      dPosterWrap.className = `detail-poster poster-${f.type}`;
    }
    if (detailModalLayout) detailModalLayout.classList.remove('no-poster');
  } else {
    if (dPosterWrap) dPosterWrap.style.display = 'none';
    if (detailModalLayout) detailModalLayout.classList.add('no-poster');
  }

  if (dTitle) dTitle.textContent = f.title;
  if (dMeta) dMeta.textContent = `${f.year ? f.year + '  |  ' : ''}${f.director || 'Réalisateur inconnu'}`;

  if (dBody) {
    if (f.type === 'critique') {
      const stars = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
      dBody.innerHTML = `
        <div class="detail-stars">${stars}</div>
        <div class="pub-review-card">
          <div class="pub-review-quote-icon"><i class="ti ti-quote"></i></div>
          <p class="pub-review-text">${f.review ? f.review : 'Aucun texte rédigé pour le moment.'}</p>
        </div>
        ${f.streaming ? `<div class="tech-pill" style="margin-top:1.5rem; width:fit-content;"><i class="ti ti-device-tv"></i> Visionnage : ${f.streaming}</div>` : ''}
      `;
    } else {
      dBody.innerHTML = `
        <div class="pub-tech-badges">
          ${f.format ? `<span class="tech-pill format-gold"><i class="ti ti-disc"></i> ${f.format}</span>` : ''}
          ${f.length ? `<span class="tech-pill"><i class="ti ti-clock"></i> ${f.length} Min</span>` : ''}
          ${f.number_of_discs ? `<span class="tech-pill"><i class="ti ti-layers-intersect"></i> ${f.number_of_discs} Disque(s)</span>` : ''}
        </div>
        <div class="pub-tech-grid">
          <div class="tech-meta-item"><span class="tech-meta-label">Éditeur</span><span class="tech-meta-value">${f.publisher || '&mdash;'}</span></div>
          <div class="tech-meta-item"><span class="tech-meta-label">Format Image</span><span class="tech-meta-value">${f.aspect_ratio || '&mdash;'}</span></div>
          <div class="tech-meta-item" style="grid-column: span 2;"><span class="tech-meta-label">Code Barre (EAN)</span><span class="tech-meta-value">${f.ean_isbn13 || '&mdash;'}</span></div>
        </div>
        <div class="pub-synopsis-box">
          <h4>Synopsis / Notes</h4>
          <p>${f.description ? f.description : 'Aucune description fournie.'}</p>
        </div>
      `;
    }
  }

  if (detailOverlay) detailOverlay.classList.add('open');
}

function closeDetail() {
  const detailOverlay = document.getElementById('detail-overlay');
  if (detailOverlay) detailOverlay.classList.remove('open');
}

document.addEventListener('DOMContentLoaded', loadPublicData);