document.addEventListener('DOMContentLoaded', () => {
    fetch('manifest.json')
        .then(response => response.json())
        .then(data => renderAppList(data));

    document.getElementById('browse-button').addEventListener('click', () => {
        const detailView = document.getElementById('app-detail');
        if (detailView) {
            detailView.remove();
        }
        fetch('manifest.json')
            .then(response => response.json())
            .then(data => renderAppList(data));
    });
});

function renderAppList(manifest) {
    const listContainer = document.getElementById('app-list-container');
    listContainer.innerHTML = '';
    manifest.forEach((app, index) => {
        const item = document.createElement('div');
        item.className = 'grid-item';
        item.style.setProperty('--gradient', app.gradient);
        item.innerHTML = `
            <img src="${app.icon}" alt="${app.name}">
            <h2>${app.name}</h2>
        `;
        item.addEventListener('click', () => showAppDetail(app));
        listContainer.appendChild(item);
    });
}

function showAppDetail(app) {
    const detailView = document.createElement('div');
    detailView.className = 'detail-view';
    detailView.id = 'app-detail';
    detailView.innerHTML = `
        <header>
            <h1>${app.name}</h1>
        </header>
        <main>
            <img src="${app.icon}" alt="${app.name}">
            <p>${app.description}</p>
            <div class="screenshots">
                <img src="${app.screenshots[0]}" alt="Screenshot 1">
                <img src="${app.screenshots[1]}" alt="Screenshot 2">
            </div>
            <button id="install-button">Install</button>
        </main>
    `;
    document.getElementById('app').appendChild(detailView);

    document.getElementById('install-button').addEventListener('click', () => {
        window.location.href = app.installUrl;
    });
}