async function fetchManifest() {
    const response = await fetch('manifest.json');
    return await response.json();
}

function renderAppList(apps) {
    const listContainer = document.getElementById('app-list-container');
    listContainer.innerHTML = '';
    apps.forEach((app, index) => {
        const item = document.createElement('div');
        item.className = 'grid-item';
        item.style.background = `linear-gradient(135deg, ${app.gradient[0]}, ${app.gradient[1]})`;
        item.innerHTML = `
            <img src="${app.iconUrl}" alt="${app.name}">
            <h2>${app.name}</h2>
        `;
        item.addEventListener('click', () => showAppDetail(app));
        listContainer.appendChild(item);
    });
}

function renderAppDetail(app) {
    const detailContainer = document.getElementById('app-detail-container');
    detailContainer.innerHTML = `
        <div class="detail-view">
            <h2>${app.name}</h2>
            <p>${app.description}</p>
            ${app.screenshots.map(src => `<img src="${src}" alt="${app.name} Screenshot">`).join('')}
            <button onclick="backToList()">Back to List</button>
        </div>
    `;
}

function showAppDetail(app) {
    const listContainer = document.getElementById('app-list-container');
    const detailContainer = document.getElementById('app-detail-container');
    listContainer.classList.add('hidden');
    detailContainer.classList.remove('hidden');
    renderAppDetail(app);
}

function backToList() {
    const listContainer = document.getElementById('app-list-container');
    const detailContainer = document.getElementById('app-detail-container');
    listContainer.classList.remove('hidden');
    detailContainer.classList.add('hidden');
}

document.addEventListener('DOMContentLoaded', async () => {
    const apps = await fetchManifest();
    renderAppList(apps);

    document.getElementById('browse-button').addEventListener('click', backToList);
});