class LoginScreen extends HTMLElement {
    constructor() {
        super();
        this.app = null;
    }
    
    connectedCallback() {
        this.innerHTML = `
            <div style="background: var(--bg-medium); padding: 40px; border: 2px solid var(--border-color); text-align: center;">
                <h1 style="margin-bottom: 30px; font-size: 32px;">City Builder</h1>
                <p style="margin-bottom: 20px;">Enter your nickname to start</p>
                <input 
                    type="text" 
                    id="nicknameInput" 
                    placeholder="Nickname" 
                    style="width: 300px; margin-bottom: 20px;"
                    maxlength="20"
                />
                <br>
                <button class="button" id="startButton">Start Game</button>
            </div>
        `;
        
        const input = this.querySelector('#nicknameInput');
        const button = this.querySelector('#startButton');
        
        // Enter key to submit
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.startGame();
            }
        });
        
        button.addEventListener('click', () => this.startGame());
        
        // Focus input
        setTimeout(() => input.focus(), 100);
    }
    
    startGame() {
        const input = this.querySelector('#nicknameInput');
        const nickname = input.value.trim();
        
        if (!nickname) {
            alert('Please enter a nickname');
            return;
        }
        
        if (nickname.length < 2) {
            alert('Nickname must be at least 2 characters');
            return;
        }
        
        if (this.app) {
            this.app.startGame(nickname);
        }
    }
}

customElements.define('login-screen', LoginScreen);