/**
 * NovelasVM Portal
 * Carga el catalogo de juegos y gestiona temas.
 */

(function () {
    'use strict';

    const THEME_KEY = 'novelasvm-theme';
    const THEMES = ['dark', 'light', 'immersive'];

    const engineConfig = {
        renpy: {
            label: 'Ren\'Py',
            icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>'
        },
        'umineko-ru': {
            label: 'ONScripter-RU',
            icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><path d="M8 9h8"></path><path d="M8 13h5"></path><path d="M8 17h3"></path></svg>'
        },
        unity: {
            label: 'Unity',
            icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>'
        },
        web: {
            label: 'Web',
            icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>'
        }
    };

    // --- Theme handling ------------------------------------------------------

    function getSavedTheme() {
        const saved = localStorage.getItem(THEME_KEY);
        if (saved && THEMES.includes(saved)) return saved;
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
            return 'light';
        }
        return 'dark';
    }

    function setTheme(theme) {
        if (!THEMES.includes(theme)) return;
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem(THEME_KEY, theme);
        updateThemeButtons(theme);
    }

    function updateThemeButtons(activeTheme) {
        document.querySelectorAll('.theme-btn').forEach(btn => {
            const btnTheme = btn.getAttribute('data-theme-value');
            btn.classList.toggle('active', btnTheme === activeTheme);
            btn.setAttribute('aria-pressed', btnTheme === activeTheme ? 'true' : 'false');
        });
    }

    function initThemeSwitcher() {
        setTheme(getSavedTheme());
        document.querySelectorAll('.theme-btn').forEach(btn => {
            btn.addEventListener('click', () => setTheme(btn.getAttribute('data-theme-value')));
        });
    }

    // --- Catalog rendering ---------------------------------------------------

    function formatDate(isoString) {
        if (!isoString) return '';
        try {
            const date = new Date(isoString);
            return date.toLocaleDateString('es-ES', {
                year: 'numeric', month: 'short', day: 'numeric'
            });
        } catch (e) {
            return '';
        }
    }

    function getEngineBadge(engine) {
        const cfg = engineConfig[engine] || engineConfig.web;
        return `<span class="engine-badge ${engine}">${cfg.icon}<span>${cfg.label}</span></span>`;
    }

    function getCoverImage(game) {
        if (game.cover) {
            return `<img src="${escapeHtml(game.cover)}" alt="Portada de ${escapeHtml(game.title)}">`;
        }
        return `
            <div class="game-cover-placeholder">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
            </div>
        `;
    }

    function escapeHtml(text) {
        if (text === null || text === undefined) return '';
        return String(text)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function renderCard(game, index) {
        const engine = game.engine || 'web';
        const metaParts = [];
        if (game.version) metaParts.push(`v${escapeHtml(game.version)}`);
        if (game.author) metaParts.push(escapeHtml(game.author));
        const date = formatDate(game.createdAt);
        if (date) metaParts.push(date);

        return `
            <article class="game-card" style="animation-delay: ${index * 80}ms">
                <div class="game-cover">
                    ${getCoverImage(game)}
                    ${getEngineBadge(engine)}
                </div>
                <div class="game-info">
                    <h2 class="game-title">${escapeHtml(game.title || game.slug)}</h2>
                    ${game.subtitle ? `<p class="game-subtitle">${escapeHtml(game.subtitle)}</p>` : ''}
                    ${game.description ? `<p class="game-description">${escapeHtml(game.description)}</p>` : ''}
                    <div class="game-meta">${metaParts.join(' · ')}</div>
                    <div class="game-actions">
                        <a class="btn btn-primary" href="${escapeHtml(game.entryPoint || `/games/${game.slug}/`)}" target="_self">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
                            </svg>
                            Jugar
                        </a>
                    </div>
                </div>
            </article>
        `;
    }

    function renderLegend() {
        const legend = document.getElementById('engineLegend');
        if (!legend) return;
        legend.innerHTML = Object.entries(engineConfig).map(([key, cfg]) => `
            <span class="legend-item">
                <span class="legend-dot" style="background: var(--engine-${key})"></span>
                ${cfg.label}
            </span>
        `).join('');
    }

    function showSkeletons(grid) {
        grid.innerHTML = Array.from({ length: 6 }).map(() => `
            <div class="game-card">
                <div class="game-cover skeleton" style="aspect-ratio: 16/9"></div>
                <div class="game-info">
                    <div class="skeleton" style="height: 1.1rem; width: 70%; margin-bottom: 0.5rem"></div>
                    <div class="skeleton" style="height: 0.875rem; width: 100%"></div>
                    <div class="skeleton" style="height: 0.875rem; width: 80%; margin-top: 0.4rem"></div>
                    <div class="skeleton" style="height: 2.25rem; width: 100%; margin-top: 1rem; border-radius: var(--radius-md)"></div>
                </div>
            </div>
        `).join('');
    }

    async function loadCatalog() {
        const grid = document.getElementById('gamesGrid');
        const stats = document.getElementById('stats');
        const empty = document.getElementById('emptyState');

        if (!grid || !stats || !empty) return;

        showSkeletons(grid);
        grid.setAttribute('aria-busy', 'true');

        try {
            const response = await fetch('/games.json', { cache: 'no-store' });
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const data = await response.json();
            const games = Array.isArray(data.games) ? data.games : [];

            // Ordenar: primero por motor (renpy, unity, web) luego por titulo
            games.sort((a, b) => {
                const engineOrder = { renpy: 0, 'umineko-ru': 1, unity: 2, web: 3 };
                const ea = engineOrder[a.engine] ?? 99;
                const eb = engineOrder[b.engine] ?? 99;
                if (ea !== eb) return ea - eb;
                return (a.title || a.slug).localeCompare(b.title || b.slug);
            });

            if (games.length === 0) {
                grid.innerHTML = '';
                grid.classList.add('hidden');
                empty.classList.remove('hidden');
                stats.textContent = 'No hay novelas publicadas';
            } else {
                empty.classList.add('hidden');
                grid.classList.remove('hidden');
                grid.innerHTML = games.map((game, i) => renderCard(game, i)).join('');
                const countText = games.length === 1 ? '1 novela disponible' : `${games.length} novelas disponibles`;
                stats.textContent = countText;
            }
        } catch (err) {
            console.error('Error cargando catalogo:', err);
            grid.innerHTML = '';
            grid.classList.add('hidden');
            empty.classList.remove('hidden');
            empty.querySelector('h2').textContent = 'No se pudo cargar el catalogo';
            empty.querySelector('p').textContent = 'Revisa que /games.json exista o intenta recargar la pagina.';
            stats.textContent = 'Error de carga';
        } finally {
            grid.setAttribute('aria-busy', 'false');
        }
    }

    // --- Init ----------------------------------------------------------------

    document.addEventListener('DOMContentLoaded', () => {
        initThemeSwitcher();
        renderLegend();
        loadCatalog();
    });
})();