class HelpModal extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s ease;
                }
                
                .modal.active {
                    opacity: 1;
                    visibility: visible;
                }
                
                .modal-content {
                    background: #1F2937;
                    border-radius: 10px;
                    width: 90%;
                    max-width: 600px;
                    max-height: 90vh;
                    overflow-y: auto;
                    transform: translateY(-20px);
                    transition: transform 0.3s ease;
                }
                
                .modal.active .modal-content {
                    transform: translateY(0);
                }
                
                .modal-header {
                    padding: 1rem 1.5rem;
                    border-bottom: 1px solid #374151;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .modal-body {
                    padding: 1.5rem;
                }
                
                .modal-footer {
                    padding: 1rem 1.5rem;
                    border-top: 1px solid #374151;
                    display: flex;
                    justify-content: flex-end;
                }
                
                .close-btn {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 1.5rem;
                    cursor: pointer;
                }
                
                h2 {
                    margin-top: 0;
                    color: white;
                }
                
                h3 {
                    color: #9CA3AF;
                    margin-top: 1.5rem;
                }
                
                ul {
                    padding-left: 1.5rem;
                }
                
                li {
                    margin-bottom: 0.5rem;
                    color: #D1D5DB;
                }
                
                kbd {
                    background: #374151;
                    padding: 0.2rem 0.4rem;
                    border-radius: 0.25rem;
                    font-family: monospace;
                }
            </style>
            
            <div class="modal" id="help-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Teleprompter Help</h2>
                        <button class="close-btn">&times;</button>
                    </div>
                    <div class="modal-body">
                        <h3>Getting Started</h3>
                        <p>Enter your script in the text area on the left. Adjust settings like scroll speed, text size, and theme using the controls.</p>
                        
                        <h3>Controls</h3>
                        <ul>
                            <li><strong>Start Scrolling:</strong> Begin the teleprompter scroll</li>
                            <li><strong>Pause:</strong> Temporarily stop the scroll</li>
                            <li><strong>Speed Slider:</strong> Adjust scrolling speed (0.1x - 5x)</li>
                        </ul>
                        
                        <h3>Keyboard Shortcuts</h3>
                        <ul>
                            <li><kbd>Space</kbd> - Toggle scrolling</li>
                            <li><kbd>Ctrl</kbd>+<kbd>S</kbd> - Save script</li>
                            <li><kbd>Ctrl</kbd>+<kbd>O</kbd> - Load script</li>
                            <li><kbd>Ctrl</kbd>+<kbd>E</kbd> - Export script</li>
                            <li><kbd>↑</kbd> - Increase speed</li>
                            <li><kbd>↓</kbd> - Decrease speed</li>
                        </ul>
                        
                        <h3>Advanced Features</h3>
                        <ul>
                            <li><strong>Themes:</strong> Choose from 6 color themes</li>
                            <li><strong>Text Formatting:</strong> Bold, italic, underline options</li>
                            <li><strong>Mirror View:</strong> Flip text for teleprompter reflection</li>
                            <li><strong>Preview Mode:</strong> Toggle between dark/light backgrounds</li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button id="close-help" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded">Close</button>
                    </div>
                </div>
            </div>
        `;
        
        // Add event listeners
        this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
        this.shadowRoot.querySelector('#close-help').addEventListener('click', () => this.close());
        
        // Close modal when clicking outside
        this.shadowRoot.querySelector('.modal').addEventListener('click', (e) => {
            if (e.target.classList.contains('modal')) {
                this.close();
            }
        });
    }
    
    open() {
        this.shadowRoot.querySelector('.modal').classList.add('active');
    }
    
    close() {
        this.shadowRoot.querySelector('.modal').classList.remove('active');
    }
}

customElements.define('help-modal', HelpModal);