<%
// APPS LAYOUT - Liste des applications interactives
var allApps = [];

// 1. Scanner les fichiers source/apps/*.md
site.pages.forEach(function(p) {
    var src = p.source || '';
    if (p.layout === 'app' || (src.indexOf('apps/') === 0 && src !== 'apps/index.md')) {
        if (!allApps.find(function(a) { return a.name === p.title; })) {
            allApps.push({
                name: p.title,
                url: p.embed_url || url_for(p.path),
                path: p.path,
                icon: p.icon || '🚀',
                description: p.description || '',
                category: p.category || 'tools',
                featured: p.featured || false,
                order: p.order || 999,
                article: p.related_article || '',
                tags: p.tags_list || [],
                isMarkdown: true
            });
        }
    }
});

// 2. Ajouter aussi depuis theme.apps si configuré
if (theme.apps && theme.apps.length) {
    theme.apps.forEach(function(app) {
        if (!allApps.find(function(a) { return a.name === app.name; })) {
            allApps.push({
                name: app.name,
                url: app.url,
                path: app.url,
                icon: app.icon || '🚀',
                description: app.description || '',
                category: app.category || 'tools',
                featured: app.featured || false,
                order: app.order || 999,
                article: app.article || '',
                tags: app.tags || [],
                isExternal: true
            });
        }
    });
}

// Trier : featured en premier, puis par order
allApps.sort(function(a, b) {
    if (a.featured && !b.featured) return -1;
    if (!a.featured && b.featured) return 1;
    return (a.order || 999) - (b.order || 999);
});
%>
<section class="apps-section">
    <div class="section-header">
        <div class="section-tag">Outils Interactifs</div>
        <h2 class="section-title"><%= page.icon || '🚀' %> Applications & Démos</h2>
        <p class="section-subtitle">Découvrez nos applications interactives, outils et démonstrations</p>
    </div>

    <% if (allApps.length > 0) { %>
    
    <div class="apps-stats">
        <div class="stat-item">
            <div class="stat-value"><%= allApps.length %></div>
            <div class="stat-label">Applications</div>
        </div>
        <div class="stat-item">
            <div class="stat-value"><%= allApps.filter(function(a) { return a.featured; }).length %></div>
            <div class="stat-label">En vedette</div>
        </div>
        <div class="stat-item">
            <div class="stat-value"><%= allApps.filter(function(a) { return a.isMarkdown; }).length %></div>
            <div class="stat-label">Documentées</div>
        </div>
    </div>
    
    <div class="apps-filters" id="appsFilters">
        <button class="filter-btn active" data-filter="all">🎲 Tous</button>
        <button class="filter-btn" data-filter="philosophy">🧘 Philosophie</button>
        <button class="filter-btn" data-filter="security">🔐 Sécurité</button>
        <button class="filter-btn" data-filter="creative">🎨 Créatif</button>
        <button class="filter-btn" data-filter="tools">🔧 Outils</button>
        <button class="filter-btn" data-filter="dev">💻 Dev</button>
        <button class="filter-btn" data-filter="network">🌐 Réseau</button>
    </div>
    
    <div class="apps-gallery" id="appsGallery">
        <% allApps.forEach(function(app) { 
            var catColor = app.category === 'philosophy' ? '#a855f7' :
                          app.category === 'security' ? '#ef4444' :
                          app.category === 'creative' ? '#9945ff' :
                          app.category === 'dev' ? '#10b981' :
                          app.category === 'network' ? '#3b82f6' :
                          '#f97316';
        %>
        <div class="app-card" data-category="<%= app.category || 'tools' %>">
            <% if (app.featured) { %>
            <div class="app-featured">⭐ Vedette</div>
            <% } %>
            
            <div class="app-header">
                <span class="app-icon"><%= app.icon || '🚀' %></span>
                <h3 class="app-name"><%= app.name %></h3>
                <span class="app-category" style="background: <%= catColor %>20; color: <%= catColor %>;"><%= app.category %></span>
            </div>
            
            <div class="app-preview">
                <iframe src="<%= app.url %>?embedded=true" title="<%= app.name %>" loading="lazy"></iframe>
                <div class="app-preview-overlay">
                    <% if (app.isMarkdown) { %>
                    <a href="<%= url_for(app.path) %>" class="btn btn-primary">📖 Page</a>
                    <% } %>
                    <a href="<%= app.url %>" target="_blank" class="btn btn-secondary">▶ Lancer</a>
                </div>
            </div>
            
            <div class="app-body">
                <p class="app-desc"><%= app.description || 'Application interactive' %></p>
                
                <% if (app.tags && app.tags.length > 0) { %>
                <div class="app-tags">
                    <% app.tags.forEach(function(tag) { %>
                    <span class="app-tag">#<%= tag %></span>
                    <% }); %>
                </div>
                <% } %>
                
                <div class="app-actions">
                    <% if (app.isMarkdown) { %>
                    <a href="<%= url_for(app.path) %>" class="app-btn primary">📖 Détails →</a>
                    <a href="<%= app.url %>" target="_blank" class="app-btn">▶ Lancer ↗</a>
                    <% } else { %>
                    <a href="<%= app.url %>" target="_blank" class="app-btn primary">▶ Ouvrir ↗</a>
                    <% if (app.article) { %>
                    <a href="<%= app.article %>" class="app-btn">📖 Article</a>
                    <% } %>
                    <% } %>
                </div>
            </div>
        </div>
        <% }); %>
    </div>
    
    <% } else { %>
    <div class="apps-empty">
        <div class="empty-icon">🚀</div>
        <h3>Aucune application trouvée</h3>
        <p>Debug: <%= site.pages.length %> pages scannées</p>
        <div class="empty-help">
            <p>Créez des fichiers dans <code>source/apps/</code> avec <code>layout: app</code></p>
        </div>
    </div>
    <% } %>

    <div class="apps-nav">
        <a href="<%= url_for('/') %>" class="btn btn-secondary">← Accueil</a>
        <a href="<%= url_for('categories/') %>" class="btn btn-secondary">Catégories</a>
    </div>
</section>

<style>
.apps-section {
    padding: 4rem 2rem;
    min-height: 60vh;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    max-width: 600px;
    margin: 1rem auto;
}

.apps-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.stat-item { text-align: center; }
.stat-value { font-size: 2.5rem; color: var(--accent-primary); font-weight: 700; }
.stat-label { font-size: 0.85rem; color: var(--text-muted); }

.apps-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.filter-btn:hover { border-color: var(--accent-primary); }
.filter-btn.active {
    background: var(--accent-primary);
    color: #000;
    border-color: var(--accent-primary);
}

.apps-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.app-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.app-featured {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

.app-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.app-icon { font-size: 1.5rem; }
.app-name { flex: 1; font-size: 1rem; margin: 0; }
.app-category {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.app-preview {
    position: relative;
    height: 200px;
    background: var(--bg-tertiary);
}

.app-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.app-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-card:hover .app-preview-overlay { opacity: 1; }

.app-body { padding: 1rem; }

.app-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.app-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.app-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
}

.app-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.app-btn:hover { color: var(--accent-primary); }

.app-btn.primary {
    background: var(--accent-primary);
    color: #000;
}

.app-btn.primary:hover { transform: scale(1.05); }

.apps-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-icon { font-size: 4rem; margin-bottom: 1rem; }

.empty-help {
    margin-top: 1.5rem;
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.apps-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.app-card.hidden { display: none; }

@media (max-width: 768px) {
    .apps-gallery { grid-template-columns: 1fr; }
    .app-preview { height: 160px; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var filterBtns = document.querySelectorAll('.filter-btn');
    var appCards = document.querySelectorAll('.app-card');
    
    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var filter = this.dataset.filter;
            
            filterBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');
            
            appCards.forEach(function(card) {
                var category = card.dataset.category;
                if (filter === 'all' || category === filter) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        });
    });
});
</script>
