const manifest = [
    {
        name: "App One",
        description: "This is the first app.",
        installUrl: "#",
        iconUrl: "https://via.placeholder.com/50"
    },
    {
        name: "App Two",
        description: "This is the second app.",
        installUrl: "#",
        iconUrl: "https://via.placeholder.com/50"
    },
    {
        name: "App Three",
        description: "This is the third app.",
        installUrl: "#",
        iconUrl: "https://via.placeholder.com/50"
    },
    {
        name: "App Four",
        description: "This is the fourth app.",
        installUrl: "#",
        iconUrl: "https://via.placeholder.com/50"
    }
];

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

function renderAppDetail(app) {
    const detail = document.createElement('div');
    detail.className = 'detail-view active';
    detail.id = 'app-detail';
    
    const name = document.createElement('h2');
    name.textContent = app.name;
    
    const description = document.createElement('p');
    description.textContent = app.description;
    
    const installButton = document.createElement('button');
    installButton.textContent = 'Install';
    installButton.addEventListener('click', () => {
        window.location.href = app.installUrl;
    });
    
    detail.appendChild(name);
    detail.appendChild(description);
    detail.appendChild(installButton);
    
    return detail;
}

function showAppDetail(index) {
    const detailView = document.getElementById('app-detail');
    if (detailView) {
        detailView.remove();
    }
    const appDetail = renderAppDetail(manifest[index]);
    document.getElementById('app').appendChild(appDetail);
}

document.addEventListener('DOMContentLoaded', () => {
    renderAppList();

    document.getElementById('browse-button').addEventListener('click', () => {
        const detailView = document.getElementById('app-detail');
        if (detailView) {
            detailView.remove();
        }
    });
});