document.addEventListener('DOMContentLoaded', function () {
    const templates = {
        'Kotlin': {
            name: 'Kotlin App',
            tools: [
                { name: 'Project', icon: 'bi-folder' },
                { name: 'Dependencies', icon: 'bi-puzzle' },
                { name: 'Build Variants', icon: 'bi-toggles' },
                { name: 'Signing', icon: 'bi-pen' }
            ]
        },
        'Java': {
            name: 'Java App',
            tools: [
                { name: 'Project', icon: 'bi-folder' },
                { name: 'Dependencies', icon: 'bi-puzzle' },
                { name: 'Manifest', icon: 'bi-file-earmark-code' },
                { name: 'Build Config', icon: 'bi-gear' }
            ]
        },
        'Empty': {
            name: 'Empty Activity',
            tools: [
                { name: 'Layout', icon: 'bi-layout-split' },
                { name: 'Code', icon: 'bi-file-code' },
                { name: 'Resources', icon: 'bi-archive' }
            ]
        }
    };

    const templateLinks = document.querySelectorAll('.template-select');
    const toolsList = document.getElementById('tools-list');
    const projectTitle = document.getElementById('project-title');
    const contentPlaceholder = document.querySelector('.content-placeholder');
    const syncBtn = document.getElementById('sync-btn');

    templateLinks.forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            const templateKey = this.getAttribute('data-template');
            const selectedTemplate = templates[templateKey];

            if (selectedTemplate) {
                // Update project title
                projectTitle.textContent = selectedTemplate.name;

                // Update tools sidebar
                toolsList.innerHTML = ''; // Clear existing tools
                selectedTemplate.tools.forEach(tool => {
                    const toolItem = document.createElement('a');
                    toolItem.href = '#';
                    toolItem.className = 'list-group-item list-group-item-action';
                    toolItem.innerHTML = `<i class="bi ${tool.icon}"></i> ${tool.name}`;
                    toolsList.appendChild(toolItem);
                });

                // Update main content placeholder
                contentPlaceholder.innerHTML = `
                    <i class="bi bi-check-circle-fill display-1 text-success"></i>
                    <p class="mt-3 fs-5">Template <span class="fw-bold">${selectedTemplate.name}</span> loaded.</p>
                    <p class="text-muted">You can now sync your project.</p>
                `;

                // Enable Sync button
                syncBtn.disabled = false;
            }
        });
    });
});