// Recommendations and Latest Releases module

// Load personalized recommendations
async function loadRecommendations() {
    const container = document.getElementById('recommendationsList');
    const section = document.getElementById('recommendationsSection');

    if (!container) return;

    try {
        container.innerHTML = '<div class="loading-spinner">Analyse de vos téléchargements...</div>';

        const response = await fetch(`${API_BASE}/recommendations?limit=12`);
        const data = await response.json();

        console.log('Recommendations response:', data);

        if (data.recommendations && data.recommendations.length > 0) {
            container.innerHTML = `<div class="recommendations-carousel">${data.recommendations.map(anime =>
                renderRecommendationCard(anime)
            ).join('')}</div>`;
        } else {
            container.innerHTML = `
                <div class="no-results">
                    <p><i class="fa-solid fa-triangle-exclamation"></i> Aucune recommandation disponible pour le moment.</p>
                    <p style="font-size: 12px; margin-top: 10px; color: #888;">
                        Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
                    </p>
                    <button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
                        <i class="fa-solid fa-rotate"></i> Réessayer
                    </button>
                </div>
            `;
        }

        section.style.display = 'block';
    } catch (error) {
        console.error('Error loading recommendations:', error);
        container.innerHTML = `
            <div class="no-results">
                <p><i class="fa-solid fa-xmark"></i> Erreur lors du chargement des recommandations.</p>
                <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
                <button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
                    <i class="fa-solid fa-rotate"></i> Réessayer
                </button>
            </div>
        `;
        section.style.display = 'block';
    }
}

// Load latest releases
async function loadLatestReleases() {
    const container = document.getElementById('releasesList');
    const section = document.getElementById('releasesSection');

    if (!container) return;

    try {
        container.innerHTML = '<div class="loading-spinner">Chargement des dernières sorties...</div>';

        const response = await fetch(`${API_BASE}/releases/latest?limit=12`);
        const data = await response.json();

        console.log('Releases response:', data);

        if (data.releases && data.releases.length > 0) {
            container.innerHTML = `<div class="releases-carousel">${data.releases.map(anime =>
                renderReleaseCard(anime)
            ).join('')}</div>`;
        } else {
            container.innerHTML = `
                <div class="no-results">
                    <p><i class="fa-solid fa-triangle-exclamation"></i> Aucune sortie disponible pour le moment.</p>
                    <p style="font-size: 12px; margin-top: 10px; color: #888;">
                        L'API MyAnimeList pourrait être temporairement inaccessible.
                    </p>
                    <button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
                        <i class="fa-solid fa-rotate"></i> Réessayer
                    </button>
                </div>
            `;
        }

        section.style.display = 'block';
    } catch (error) {
        console.error('Error loading releases:', error);
        container.innerHTML = `
            <div class="no-results">
                <p><i class="fa-solid fa-xmark"></i> Erreur lors du chargement des sorties.</p>
                <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
                <button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
                    <i class="fa-solid fa-rotate"></i> Réessayer
                </button>
            </div>
        `;
        section.style.display = 'block';
    }
}

// Load all home content
async function loadHomeContent() {
    console.log('loadHomeContent() called');

    const loading = document.getElementById('homeLoading');
    const recommendationsSection = document.getElementById('recommendationsSection');
    const releasesSection = document.getElementById('releasesSection');

    console.log('Elements found:', {
        loading: !!loading,
        recommendationsSection: !!recommendationsSection,
        releasesSection: !!releasesSection
    });

    if (loading) loading.style.display = 'block';
    if (recommendationsSection) recommendationsSection.style.display = 'none';
    if (releasesSection) releasesSection.style.display = 'none';

    try {
        // Load both sections in parallel
        console.log('Loading recommendations and releases...');
        await Promise.all([
            loadRecommendations(),
            loadLatestReleases()
        ]);
        console.log('Home content loaded successfully');

        // Show sections if they have content
        if (recommendationsSection) recommendationsSection.style.display = 'block';
        if (releasesSection) releasesSection.style.display = 'block';
    } catch (error) {
        console.error('Error loading home content:', error);
        if (loading) {
            loading.innerHTML = 'Erreur lors du chargement. Consultez la console pour plus de détails.';
        }
    } finally {
        if (loading) loading.style.display = 'none';
    }
}

// Render recommendation card (horizontal compact)
function renderRecommendationCard(anime) {
    const images = anime.images || {};
    const imageUrl = images.jpg?.image_url || images.webp?.image_url || '';

    const genres = anime.genres || [];
    const score = anime.score || 0;
    const reason = anime.recommendation_reason || 'Recommandé';

    return `
        <div class="anime-card-horizontal recommendation-card">
            ${reason ? `<div class="recommendation-badge"><i class="fa-solid fa-lightbulb"></i> ${escapeHtml(reason)}</div>` : ''}

            <div class="anime-card-header">
                <div class="anime-card-title">${escapeHtml(anime.title)}</div>
                ${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
            </div>

            <div class="anime-card-content">
                ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}

                <div class="anime-card-info">
                    <div class="anime-genres">
                        ${genres.slice(0, 3).map(g => `<span class="anime-genre-tag">${escapeHtml(g)}</span>`).join('')}
                    </div>

                    <div class="anime-card-meta">
                        ${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
                        ${anime.episodes && anime.status ? ' • ' : ''}
                        ${anime.status ? translateStatus(anime.status) : ''}
                    </div>
                </div>
            </div>

            ${anime.synopsis ? `
                <details class="anime-synopsis">
                    <summary><i class="fa-solid fa-book"></i> Synopsis</summary>
                    <p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
                </details>
            ` : ''}

            <div class="anime-card-actions">
                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
                    <i class="fa-solid fa-link"></i> MAL
                </button>
                <button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
                    <i class="fa-solid fa-download"></i> Télécharger
                </button>
            </div>
        </div>
    `;
}

// Render release card (horizontal compact)
function renderReleaseCard(anime) {
    const images = anime.images || {};
    const imageUrl = images.jpg?.image_url || images.webp?.image_url || '';

    const genres = anime.genres || [];
    const score = anime.score || 0;
    const releaseType = anime.release_type || 'Nouveau';

    return `
        <div class="anime-card-horizontal release-card">
            <div class="release-badge"><i class="fa-solid fa-fire"></i> ${escapeHtml(releaseType)}</div>

            <div class="anime-card-header">
                <div class="anime-card-title">${escapeHtml(anime.title)}</div>
                ${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
            </div>

            <div class="anime-card-content">
                ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}

                <div class="anime-card-info">
                    <div class="anime-genres">
                        ${genres.slice(0, 3).map(g => `<span class="anime-genre-tag" style="color: #ff6b6b; background: rgba(255,107,107,0.15);">${escapeHtml(g)}</span>`).join('')}
                    </div>

                    <div class="anime-card-meta">
                        ${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
                        ${anime.episodes && anime.status ? ' • ' : ''}
                        ${anime.status ? translateStatus(anime.status) : ''}
                    </div>
                </div>
            </div>

            ${anime.synopsis ? `
                <details class="anime-synopsis">
                    <summary><i class="fa-solid fa-book"></i> Synopsis</summary>
                    <p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
                </details>
            ` : ''}

            <div class="anime-card-actions">
                <button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
                    <i class="fa-solid fa-link"></i> MAL
                </button>
                <button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
                    <i class="fa-solid fa-download"></i> Télécharger
                </button>
            </div>
        </div>
    `;
}

// Get rating color based on score
function getRatingColor(score) {
    if (score >= 9) return '#ffd700';
    if (score >= 8) return '#2d936c';
    if (score >= 7) return '#FF9F1C';
    if (score >= 6) return '#f4a261';
    return '#888888';
}

// Search anime on providers (redirects to anime tab)
function searchAnimeOnProviders(title) {
    // Switch to anime tab
    switchTab('anime');

    // Fill search input
    const searchInput = document.getElementById('animeSearchInput');
    if (searchInput) {
        searchInput.value = title;

        // Trigger search
        setTimeout(() => {
            if (typeof handleAnimeSearch === 'function') {
                handleAnimeSearch();
            }
        }, 300);
    }
}