class QuestionBox extends HTMLElement {
    connectedCallback() {
        const question = this.getAttribute('question') || 'Sample question';
        const options = JSON.parse(this.getAttribute('options') || '[]');
        const hint = this.getAttribute('hint') || '';
        const example = this.getAttribute('example') || '';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .question-container {
                    background: white;
                    border-radius: 12px;
                    padding: 2rem;
                    margin-bottom: 2rem;
                    box-shadow: var(--shadow-md);
                    position: relative;
                }
                
                .question-text {
                    font-size: 1.2rem;
                    font-weight: 600;
                    margin-bottom: 1.5rem;
                    color: var(--text);
                }
                
                .options-container {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                }
                
                .option {
                    padding: 0.75rem 1rem;
                    border: 1px solid #e5e7eb;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: var(--transition);
                }
                
                .option:hover {
                    background: #f9fafb;
                    border-color: var(--primary);
                }
                
                .photo-upload-container {
                    margin-top: 1.5rem;
                }
                
                .hint-btn {
                    margin-top: 1rem;
                    background: var(--primary);
                    color: white;
                    border: none;
                    padding: 0.5rem 1rem;
                    border-radius: 8px;
                    cursor: pointer;
                }
            </style>
            
            <div class="question-container">
                <div class="question-text">${question}</div>
                
                <div class="options-container">
                    ${options.map((opt, i) => `
                        <div class="option" data-index="${i}">${opt}</div>
                    `).join('')}
                </div>
                
                <div class="photo-upload-container">
                    <label class="photo-upload">
                        <input type="file" accept="image/*" style="display: none;">
                        <i data-feather="upload" class="mr-2"></i> Upload your work
                        <img class="photo-preview">
                    </label>
                </div>
                
                <button class="hint-btn" id="hint-btn">
                    <i data-feather="help-circle" class="mr-1"></i> Need help?
                </button>
            </div>
        `;
        
        this.shadowRoot.getElementById('hint-btn').addEventListener('click', () => {
            this.provideHint();
        });
        
        this.shadowRoot.querySelectorAll('.option').forEach(opt => {
            opt.addEventListener('click', () => {
                this.checkAnswer(opt.dataset.index);
            });
        });
    }
    
    provideHint() {
        const question = this.getAttribute('question');
        const hint = this.getAttribute('hint') || "Try breaking the problem down into smaller steps.";
        const example = this.getAttribute('example') || this.generateExample();
        
        // Dispatch event to parent
        this.dispatchEvent(new CustomEvent('show-hint', {
            bubbles: true,
            composed: true,
            detail: { hint, example }
        }));
    }
    
    generateExample() {
        const question = this.getAttribute('question');
        return "Here's a similar problem: " + 
            question.replace(/\d+/g, function(match) {
                return Math.floor(Math.random() * 10) + 1;
            });
    }
    
    checkAnswer(selectedIndex) {
        const correctIndex = this.getAttribute('correct') || '0';
        const isCorrect = selectedIndex === correctIndex;
        
        this.dispatchEvent(new CustomEvent('answer-checked', {
            bubbles: true,
            composed: true,
            detail: { isCorrect, selectedIndex, correctIndex }
        }));
    }
}

customElements.define('question-box', QuestionBox);