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);
        
        let posterHTML = f.poster 
            ? `<div class="card-poster-wrap"><img class="card-poster" src="${f.poster}" alt="${f.title}" loading="lazy"></div>`
            : `<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');

    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) {
        // BUG CORRIGÉ : Réécriture complète des template literals qui étaient syntaxiquement cassés
        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);