const STORAGE_KEY = 'mon-cinema-films';
let films = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
let currentPubTab = 'critique';
let activeRatingFilter = 0; // 0 = tous

function switchPubTab(tabName) {
  currentPubTab = tabName;
  activeRatingFilter = 0;
  document.querySelectorAll('.rating-filter-btn').forEach(btn => {
    btn.classList.remove('active');
    btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
  });

  const tabCritiques = document.getElementById('tab-pub-critiques');
  const tabVideotheque = document.getElementById('tab-pub-videotheque');

  if (tabCritiques && tabVideotheque) {
    if (tabName === 'critique') {
      tabCritiques.classList.add('active');
      tabVideotheque.classList.remove('active');
    } else {
      tabVideotheque.classList.add('active');
      tabCritiques.classList.remove('active');
    }
  }

  renderPublicGrid();
}

function filterByRating(stars) {
  activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;

  // Update button states
  document.querySelectorAll('.rating-filter-btn').forEach(btn => {
    const n = parseInt(btn.dataset.stars);
    btn.classList.toggle('active', n === activeRatingFilter);
    // Highlight filled stars up to active filter
    btn.querySelectorAll('.rf-star').forEach((s, i) => {
      s.classList.toggle('filled', activeRatingFilter > 0 && 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;

  // Show rating filter only on critique tab
  const filterBar = document.getElementById('rating-filter-bar');
  if (filterBar) filterBar.style.display = currentPubTab === 'critique' ? 'flex' : 'none';

  const filtered = films.filter(f => {
    const fType = f.type || 'critique';
    if (fType !== currentPubTab) return false;
    if (currentPubTab === 'critique' && activeRatingFilter > 0) {
      return (f.rating || f.note || 1) === activeRatingFilter;
    }
    return true;
  });

  if (countLabel) {
    if (currentPubTab === 'critique') {
      const suffix = activeRatingFilter > 0 ? ` · filtrées ${activeRatingFilter}★` : '';
      countLabel.textContent = filtered.length + (filtered.length > 1 ? ' critiques' : ' critique') + suffix;
    } else {
      countLabel.textContent = filtered.length + (filtered.length > 1 ? ' films physiques' : ' film physique');
    }
  }

  if (filtered.length === 0) {
    grid.innerHTML = '';
    if (emptyState) {
      emptyState.style.display = 'block';
      emptyState.querySelector('p').textContent = currentPubTab === 'critique'
        ? "Aucune critique pour l'instant."
        : "Aucun film dans la vidéothèque pour l'instant.";
    }
    return;
  }

  if (emptyState) emptyState.style.display = 'none';

  grid.innerHTML = filtered.map(f => {
    const posterUrl = f.poster || f.image || f.affiche || '';
    const movieTitle = f.title || f.titre || 'Sans titre';
    const movieYear = f.year || f.annee || f.publish_date || '—';
    const movieDirector = f.director || f.creators || f.realisateur || '—';

    const posterHtml = posterUrl
      ? `<img src="${posterUrl}" alt="Affiche ${movieTitle}" class="card-poster">`
      : `<div class="card-poster-placeholder">
           <i class="ti ti-movie"></i>
           <span>${movieTitle}</span>
         </div>`;

    let footerInfoHtml = '';
    if (currentPubTab === 'critique') {
      const rating = f.rating || f.note || 1;
      footerInfoHtml = `<div class="card-stars">${"★".repeat(rating)}<span class="stars-muted">${"☆".repeat(5 - rating)}</span></div>`;
    } else {
      const format = (f.format || f.support || 'DVD').toUpperCase().replace('_4K', ' 4K');
      const length = f.length || f.duree || '';
      footerInfoHtml = `
        <div class="card-video-footer">
          <span class="badge-format">${format}</span>
          ${length ? `<span class="video-length"><i class="ti ti-clock"></i> ${length} min</span>` : ''}
        </div>`;
    }

    return `
      <div class="card" onclick="openDetail(${f.id})">
        <div class="card-poster-wrap">
          ${posterHtml}
        </div>
        <div class="card-body">
          <h3 class="card-title">${movieTitle}</h3>
          <div class="card-meta">${movieYear.toString().substring(0,4)} &middot; ${movieDirector}</div>
          ${footerInfoHtml}
        </div>
      </div>
    `;
  }).join('');
}

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

  const detailOverlay = document.getElementById('detail-overlay');
  const modalLayout = document.getElementById('detail-modal-layout');
  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 dStars = document.getElementById('d-stars');
  const dReview = document.getElementById('d-review');

  const movieTitle = f.title || f.titre || 'Sans titre';
  const movieYear = f.year || f.annee || f.publish_date || '—';
  const movieDirector = f.director || f.creators || f.realisateur || '—';
  const posterUrl = f.poster || f.image || f.affiche || '';

  if (dTitle) dTitle.textContent = movieTitle;
  if (dMeta) dMeta.textContent = [movieYear.toString().substring(0,4), movieDirector].filter(Boolean).join('  ·   ');

  const fType = f.type || 'critique';

  // Gestion de l'affichage de la colonne image
  if (posterUrl) {
    if (dPoster) { dPoster.src = posterUrl; dPoster.style.display = 'block'; }
    if (dPosterWrap) {
      dPosterWrap.style.display = 'block';
      dPosterWrap.classList.remove('poster-critique', 'poster-video');
      dPosterWrap.classList.add(fType === 'critique' ? 'poster-critique' : 'poster-video');
    }
    if (modalLayout) modalLayout.classList.remove('no-poster');
  } else {
    if (dPoster) dPoster.style.display = 'none';
    if (dPosterWrap) dPosterWrap.style.display = 'none';
    if (modalLayout) modalLayout.classList.add('no-poster');
  }

  // Préparation du badge de visionnage/streaming (commun aux deux types de fiches)
  const streamingInfo = f.streaming || "Disponible au cinéma ou support physique";
  const isPlatform = streamingInfo !== "Disponible au cinéma ou support physique";
  const streamIcon = isPlatform ? "ti-device-tv" : "ti-movie";
  
  const streamingBadgeHtml = `
    <div style="margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; background: ${isPlatform ? 'rgba(201, 168, 76, 0.1)' : 'rgba(255,255,255,0.03)'}; border: 1px solid ${isPlatform ? 'var(--gold)' : 'var(--border)'}; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; color: ${isPlatform ? 'var(--gold)' : '#c0c0cc'}; font-weight: 500;">
      <i class="ti ${streamIcon}" style="font-size: 1.1rem;"></i>
      <span>${streamingInfo}</span>
    </div>
  `;

  if (fType === 'critique') {
    // ----------------------------------------
    // POP-UP MODE : CRITIQUE JOURNAL
    // ----------------------------------------
    if (dStars) {
      dStars.style.display = 'block';
      const rating = f.rating || f.note || 1;
      dStars.innerHTML = "★".repeat(rating) + `<span class="stars-muted">${"☆".repeat(5 - rating)}</span>`;
    }
    
    if (dReview) {
      const reviewText = f.review || f.critique || "Aucune critique rédigée pour ce film.";

      dReview.innerHTML = `
        ${streamingBadgeHtml}

        <div class="pub-review-card">
          <div class="pub-review-quote-icon"><i class="ti ti-quote"></i></div>
          <p class="pub-review-text">${reviewText}</p>
        </div>
      `;
    }
  } else {
    // ----------------------------------------
    // POP-UP MODE : VIDEOTHEQUE PREMIUM
    // ----------------------------------------
    if (dStars) dStars.style.display = 'none';

    const format = (f.format || f.support || 'DVD').toUpperCase().replace('_4K', ' 4K');
    const publisher = f.publisher || f.editeur || '';
    const length = f.length || f.duree || '';
    const discs = f.number_of_discs || f.disques || f.nb_disques || '';
    const ratio = f.aspect_ratio || f.format_image || '';
    const ean = f.ean_isbn13 || f.ean || '';
    const description = f.description || f.synopsis || "Aucun synopsis disponible dans le catalogue.";

    if (dReview) {
      dReview.innerHTML = `
        ${streamingBadgeHtml}

        <div class="pub-tech-badges">
          <span class="tech-pill format-gold"><i class="ti ti-disc"></i> ${format}</span>
          ${length ? `<span class="tech-pill"><i class="ti ti-clock"></i> ${length} Min</span>` : ''}
          ${discs ? `<span class="tech-pill"><i class="ti ti-layers-intersect"></i> ${discs} ${discs > 1 ? 'Disques' : 'Disque'}</span>` : ''}
        </div>

        <div class="pub-tech-grid">
          ${publisher ? `
            <div class="tech-meta-item">
              <span class="tech-meta-label">Éditeur / Studio</span>
              <span class="tech-meta-value">${publisher}</span>
            </div>` : ''}
          
          ${ratio ? `
            <div class="tech-meta-item">
              <span class="tech-meta-label">Format d'image</span>
              <span class="tech-meta-value" style="font-family: monospace;">${ratio}</span>
            </div>` : ''}
            
          ${ean ? `
            <div class="tech-meta-item" style="grid-column: span 2;">
              <span class="tech-meta-label">Code-barres (EAN)</span>
              <span class="tech-meta-value" style="font-family: monospace; color: var(--muted);">${ean}</span>
            </div>` : ''}
        </div>

        <div class="pub-synopsis-box">
          <h4>Synopsis</h4>
          <p>${description}</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', () => {
  renderPublicGrid();
});