let films = [];
const API_URL = '../api.php';
let currentPubTab = 'critique';
let activeRatingFilter = 0;
let activeStreamingFilter = ''; // Nouveau filtre
let searchQuery = ''; // Si vous avez ajouté la recherche
let currentPage = 1;
const itemsPerPage = 12;

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

// ── GÉNÉRATION DYNAMIQUE DES FILTRES STREAMING ──
function generateStreamingFilters() {
    const container = document.getElementById('streaming-filter-buttons');
    if (!container) return;
    
    // Extraire toutes les plateformes uniques
    const platforms = new Set();
    films.forEach(f => {
        if (f.type === 'critique' && f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') {
            // Séparer par virgule si plusieurs plateformes
            f.streaming.split(',').forEach(p => {
                const platform = p.trim();
                if (platform) platforms.add(platform);
            });
        }
    });
    
    // Trier alphabétiquement
    const sortedPlatforms = Array.from(platforms).sort();
    
    // Bouton "Toutes"
    const allBtn = document.createElement('button');
    allBtn.className = 'streaming-filter-btn active';
    allBtn.textContent = 'Toutes';
    allBtn.onclick = () => filterByStreaming('');
    container.appendChild(allBtn);
    
    // Boutons pour chaque plateforme
    sortedPlatforms.forEach(platform => {
        const btn = document.createElement('button');
        btn.className = 'streaming-filter-btn';
        btn.textContent = platform;
        btn.onclick = () => filterByStreaming(platform);
        container.appendChild(btn);
    });
}

function switchPubTab(tabName) {
    currentPubTab = tabName;
    activeRatingFilter = 0;
    activeStreamingFilter = ''; // Reset
    currentPage = 1;
    
    const filterBar = document.getElementById('rating-filter-bar');
    if(filterBar) filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
    
    const streamingBar = document.getElementById('streaming-filter-bar');
    if(streamingBar) streamingBar.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'));
    });
    
    // Reset filtres streaming
    document.querySelectorAll('.streaming-filter-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    const allBtn = document.querySelector('.streaming-filter-btn');
    if(allBtn) allBtn.classList.add('active');
    
    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();
}

// ── NOUVEAU : FILTRE PAR STREAMING ─
function filterByStreaming(platform) {
    if (currentPubTab !== 'critique') return;
    activeStreamingFilter = platform;
    
    document.querySelectorAll('.streaming-filter-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent === (platform || 'Toutes'));
    });
    
    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 = '';

    // 1. Filtrage
    let filtered = films.filter(f => f.type === currentPubTab);
    
    if (currentPubTab === 'critique' && activeRatingFilter > 0) {
        filtered = filtered.filter(f => Math.round(parseFloat(f.rating)) === activeRatingFilter);
    }
    
    // NOUVEAU : Filtre par plateforme
    if (currentPubTab === 'critique' && activeStreamingFilter) {
        filtered = filtered.filter(f => {
            if (!f.streaming || f.streaming === 'Disponible en support physique ou Cinéma') return false;
            return f.streaming.split(',').map(p => p.trim()).includes(activeStreamingFilter);
        });
    }
    
    if (searchQuery) {
        const q = searchQuery.toLowerCase();
        filtered = filtered.filter(f => 
            f.title.toLowerCase().includes(q) || 
            (f.director && f.director.toLowerCase().includes(q))
        );
    }

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

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

    // 2. Pagination
    const totalPages = Math.ceil(filtered.length / itemsPerPage) || 1;
    if (currentPage > totalPages) currentPage = totalPages;
    const startIdx = (currentPage - 1) * itemsPerPage;
    const pageItems = filtered.slice(startIdx, startIdx + itemsPerPage);

    // 3. Rendu des cartes
    pageItems.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>`;

        let streamingBadge = '';
        if (f.type === 'critique') {
            if (f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') {
                streamingBadge = `<div class="card-streaming-badge" title="${f.streaming}"> ${f.streaming.split(',')[0]}</div>`;
            } else {
                streamingBadge = `<div class="card-physical-badge">🎟️ Physique / Cinéma</div>`;
            }
        }

        if (f.type === 'critique') {
            const rating = parseFloat(f.rating) || 0;
            const fullStars = Math.floor(rating);
            const emptyStars = 5 - Math.ceil(rating);
            const starsHTML = '★'.repeat(fullStars) + `<span class="stars-muted">${'☆'.repeat(emptyStars)}</span>`;
            const ratingNum = `<span class="card-rating-badge">${rating.toFixed(1)}</span>`;
            
            card.innerHTML = `
                ${posterHTML}
                ${streamingBadge}
                <div class="card-body">
                    <h3 class="card-title" title="${f.title}">${f.title}</h3>
                    <p class="card-director">${f.director || 'Réalisateur inconnu'}</p>
                    <p class="card-meta">${f.year || '-'}</p>
                    <div class="card-stars">${starsHTML}${ratingNum}</div>
                </div>`;
        } else {
            card.innerHTML = `
                ${posterHTML}
                <div class="card-body">
                    <h3 class="card-title" title="${f.title}">${f.title}</h3>
                    <p class="card-director">${f.director || 'Réalisateur inconnu'}</p>
                    <p class="card-meta">${f.year || '-'}</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);
    });

    renderPagination(totalPages);
}

// ── PAGINATION PUBLIQUE ──
function renderPagination(totalPages) {
    const container = document.getElementById('pub-pagination');
    if (!container) return;
    container.innerHTML = '';

    if (totalPages <= 1) return;

    const info = document.createElement('span');
    info.className = 'pub-pagination-info';
    info.textContent = `Page ${currentPage} / ${totalPages}`;
    container.appendChild(info);

    const prevBtn = document.createElement('button');
    prevBtn.innerHTML = '<i class="ti ti-chevron-left"></i>';
    prevBtn.disabled = currentPage === 1;
    prevBtn.onclick = () => { currentPage--; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
    container.appendChild(prevBtn);

    const maxButtons = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
    let endPage = Math.min(totalPages, startPage + maxButtons - 1);
    if (endPage - startPage + 1 < maxButtons) {
        startPage = Math.max(1, endPage - maxButtons + 1);
    }

    if (startPage > 1) {
        container.appendChild(createPubPageBtn(1));
        if (startPage > 2) container.appendChild(createPubEllipsis());
    }
    for (let i = startPage; i <= endPage; i++) {
        container.appendChild(createPubPageBtn(i));
    }
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) container.appendChild(createPubEllipsis());
        container.appendChild(createPubPageBtn(totalPages));
    }

    const nextBtn = document.createElement('button');
    nextBtn.innerHTML = '<i class="ti ti-chevron-right"></i>';
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.onclick = () => { currentPage++; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
    container.appendChild(nextBtn);
}

function createPubPageBtn(num) {
    const btn = document.createElement('button');
    btn.textContent = num;
    if (num === currentPage) btn.classList.add('active');
    btn.onclick = () => { currentPage = num; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
    return btn;
}

function createPubEllipsis() {
    const span = document.createElement('span');
    span.textContent = '...';
    span.style.color = 'var(--muted)';
    span.style.padding = '0 0.5rem';
    return span;
}

// ── DÉTAIL ──
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) {
        if (f.type === 'critique') {
            const rating = parseFloat(f.rating) || 0;
            const fullStars = Math.floor(rating);
            const emptyStars = 5 - Math.ceil(rating);
            const stars = '★'.repeat(fullStars) + `<span class="stars-muted">${'☆'.repeat(emptyStars)}</span>`;
            dBody.innerHTML = `
                <div class="detail-stars">${stars} <span style="font-size:1rem; color:var(--muted); margin-left:0.5rem;">${rating.toFixed(1)}/5</span></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);