export default class StartMenu {
    constructor(os) {
        this.os = os;
        this.element = document.getElementById('start-menu');
        this.gridElement = document.getElementById('app-grid');
        this.searchInput = document.getElementById('app-search');
        
        this.appData = [
            { name: "Angry Birds", icon: "mood_bad", color: "red", desc: "Mobile Game", letter: "A" },
            { name: "Adobe Photoshop", icon: "edit", color: "green", desc: "Image Editor", letter: "A" },
            { name: "Brave Browser", icon: "language", color: "blue", desc: "Web Browser", letter: "B" },
            { name: "Books", icon: "book", color: "purple", desc: "Reading App", letter: "B" },
            { name: "Chrome", icon: "code", color: "orange", desc: "Web Browser", letter: "C" },
            { name: "Discord", icon: "chat", color: "blue", desc: "Communication", letter: "D" },
            { name: "GarageBand", icon: "music_note", color: "yellow", desc: "macOS Music App", letter: "G" },
            { name: "Movies & TV", icon: "movie", color: "purple", desc: "Media Player", letter: "M" },
            { name: "Music", icon: "music_note", color: "green", desc: "Audio Player", letter: "M" },
            { name: "Word", icon: "description", color: "default", desc: "Document Editor", letter: "W" },
            { name: "YouTube", icon: "theaters", color: "orange", desc: "Video Platform", letter: "Y" }
        ];

        this.initialize();
        this.render(this.appData);
    }

    initialize() {
        this.searchInput.addEventListener('input', (e) => {
            const query = e.target.value.toLowerCase();
            const filteredApps = this.appData.filter(app => 
                app.name.toLowerCase().includes(query)
            );
            this.render(filteredApps, query !== '');
        });
    }

    render(apps, isSearching = false) {
        this.gridElement.innerHTML = '';
        
        if (apps.length === 0) {
            this.gridElement.innerHTML = '<div style="grid-column: 1/-1; text-align:center; padding: 20px; opacity:0.6;">No apps found</div>';
            return;
        }

        let currentLetter = '';
        const fragment = document.createDocumentFragment();

        apps.forEach(app => {
            if (!isSearching && app.letter !== currentLetter) {
                currentLetter = app.letter;
                const divider = document.createElement('div');
                divider.className = 'letter-divider';
                divider.textContent = currentLetter;
                fragment.appendChild(divider);
            }

            const appEl = document.createElement('div');
            appEl.className = 'app-item';
            appEl.innerHTML = `
                <div class="app-icon color-${app.color}">
                    <span class="material-icons">${app.icon}</span>
                </div>
                <div class="app-info">
                    <span class="app-name">${app.name}</span>
                    <span class="app-desc">${app.desc}</span>
                </div>
            `;

            appEl.addEventListener('click', (e) => {
                // Remove selected from all
                this.gridElement.querySelectorAll('.app-item').forEach(el => el.classList.remove('selected'));
                appEl.classList.add('selected');
                e.stopPropagation();
            });

            fragment.appendChild(appEl);
        });

        this.gridElement.appendChild(fragment);
    }

    open() {
        this.element.classList.add('active');
        this.os.components.taskbar.updateActiveButton('startMenu');
    }

    close() {
        this.element.classList.remove('active');
        this.searchInput.value = '';
        this.render(this.appData); // Reset search
        this.os.components.taskbar.updateActiveButton(null);
    }
}
