document.addEventListener('DOMContentLoaded', () => {
    // Initialize desktop apps
    const desktop = document.querySelector('desktop-shell');
    
    // Create default windows
    desktop.createWindow({
        id: 'about',
        title: 'About Me.txt',
        content: `
            <div class="p-4">
                <h2 class="text-xl font-bold mb-4 text-primary-500">Creative Technologist</h2>
                <p class="mb-4">Hello! I'm a creative technologist blending art, design, and technology to create immersive experiences.</p>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <h3 class="font-bold mb-2">Skills</h3>
                        <ul class="list-disc pl-5">
                            <li>Interactive Installations</li>
                            <li>Creative Coding</li>
                            <li>WebGL & Three.js</li>
                            <li>Physical Computing</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold mb-2">Tools</h3>
                        <ul class="list-disc pl-5">
                            <li>TouchDesigner</li>
                            <li>Processing</li>
                            <li>Arduino</li>
                            <li>p5.js</li>
                        </ul>
                    </div>
                </div>
            </div>
        `,
        icon: 'user',
        initialPosition: { x: 100, y: 100 }
    });

    desktop.createWindow({
        id: 'projects',
        title: 'Projects Explorer',
        content: `
            <div class="p-4">
                <h2 class="text-xl font-bold mb-4 text-primary-500">Featured Projects</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
                        <h3 class="font-bold">Interactive Light Sculpture</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Kinetic installation responding to sound</p>
                    </div>
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
                        <h3 class="font-bold">Generative Art Platform</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Web-based tool for creating algorithmic art</p>
                    </div>
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
                        <h3 class="font-bold">AR Museum Experience</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Augmented reality for cultural heritage</p>
                    </div>
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
                        <h3 class="font-bold">Data Visualization Suite</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Interactive tools for complex datasets</p>
                    </div>
                </div>
            </div>
        `,
        icon: 'folder',
        initialPosition: { x: 300, y: 150 }
    });

    // Theme toggle
    const themeToggle = document.getElementById('theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });
    }
});

class WindowManager {
    constructor() {
        this.windows = [];
        this.zIndexCounter = 10;
    }
    createWindow(options) {
        const existingWindow = document.querySelector(`custom-window[id="${options.id}"]`);
        if (existingWindow) {
            this.bringToFront(existingWindow);
            return;
        }

        const windowElement = document.createElement('custom-window');
        windowElement.setAttribute('id', options.id);
        windowElement.setAttribute('title', options.title);
        windowElement.setAttribute('icon', options.icon);
        windowElement.setAttribute('initial-x', options.initialPosition.x);
        windowElement.setAttribute('initial-y', options.initialPosition.y);
        
        if (options.width) {
            windowElement.style.width = `${options.width}px`;
        }
        if (options.height) {
            windowElement.style.minHeight = `${options.height}px`;
        }
        
        windowElement.innerHTML = options.content;
document.querySelector('desktop-shell').appendChild(windowElement);
        this.windows.push({
            id: options.id,
            element: windowElement,
            minimized: false
        });
        
        this.bringToFront(windowElement);
    }

    bringToFront(windowElement) {
        this.zIndexCounter += 1;
        windowElement.style.zIndex = this.zIndexCounter;
    }

    minimizeWindow(windowId) {
        const window = this.windows.find(w => w.id === windowId);
        if (window) {
            window.minimized = true;
            window.element.classList.add('window-minimize');
            setTimeout(() => {
                window.element.style.display = 'none';
            }, 300);
        }
    }

    restoreWindow(windowId) {
        const window = this.windows.find(w => w.id === windowId);
        if (window) {
            window.minimized = false;
            window.element.style.display = 'block';
            window.element.classList.add('window-restore');
            setTimeout(() => {
                window.element.classList.remove('window-restore');
            }, 300);
            this.bringToFront(window.element);
        }
    }

    closeWindow(windowId) {
        const windowIndex = this.windows.findIndex(w => w.id === windowId);
        if (windowIndex !== -1) {
            this.windows[windowIndex].element.remove();
            this.windows.splice(windowIndex, 1);
        }
    }
}

window.windowManager = new WindowManager();