const manifest = [
    {
        name: "App One",
        description: "This is the first app.",
        installUrl: "#"
    },
    {
        name: "App Two",
        description: "This is the second app.",
        installUrl: "#"
    }
];

function renderAppList() {
    const list = document.createElement('div');
    list.id = 'app-list';
    manifest.forEach((app, index) => {
        const item = document.createElement('div');
        item.className = 'list-item';
        item.textContent = app.name;
        item.addEventListener('click', () => showAppDetail(index));
        list.appendChild(item);
    });
    return list;
}

function renderAppDetail(app) {
    const detail = document.createElement('div');
    detail.className = 'detail-view';
    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]);
    appDetail.classList.add('active');
    document.getElementById('app').appendChild(appDetail);
}

function addApp(name, description, installUrl) {
    manifest.push({ name, description, installUrl });
    const appList = document.getElementById('app-list');
    if (appList) {
        appList.remove();
    }
    document.getElementById('app').appendChild(renderAppList());
}

document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    
    const header = document.createElement('header');
    header.textContent = 'App List';
    app.appendChild(header);
    
    app.appendChild(renderAppList());
});

// Example of adding a new app dynamically
setTimeout(() => {
    addApp("App Three", "This is the third app.", "#");
}, 5000);