document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    function setupTabs() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons and contents
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    content.classList.add('hidden');
                });
                
                // Add active class to clicked button
                button.classList.add('active');
                
                // Show the selected tab content
                const tabId = button.getAttribute('data-tab') + '-tab';
                const tabContent = document.getElementById(tabId);
                if (tabContent) {
                    tabContent.classList.remove('hidden');
                    tabContent.classList.add('active');
                }
            });
        });
    }
// Process diagram functionality
    const runProcessBtn = document.getElementById('run-process');
    const steps = document.querySelectorAll('.step');
    const stepArrows = document.querySelectorAll('.step-arrow');
    
    if (runProcessBtn && steps.length > 0) {
        runProcessBtn.addEventListener('click', () => {
            // Reset all steps
            steps.forEach(step => {
                step.classList.remove('active');
                const circle = step.querySelector('.step-circle');
                if (circle) {
                    circle.style.backgroundColor = '#e2e8f0';
                }
            });
            
            stepArrows.forEach(arrow => {
                const icon = arrow.querySelector('i');
                if (icon) {
                    icon.style.color = '#9ca3af';
                }
            });
            
            // Animate steps one by one
            let delay = 0;
            steps.forEach((step, index) => {
                setTimeout(() => {
                    step.classList.add('active');
                    
                    // Color the arrow after this step (if not last step)
                    if (index < steps.length - 1 && stepArrows[index]) {
                        const icon = stepArrows[index].querySelector('i');
                        if (icon) {
                            icon.style.color = '#3b82f6';
                        }
                    }
                }, delay);
                
                delay += 800; // 0.8s delay between steps
            });
            
            // Reset button after animation
            setTimeout(() => {
                runProcessBtn.classList.add('pulse');
                setTimeout(() => {
                    runProcessBtn.classList.remove('pulse');
                }, 1000);
            }, delay);
        });
    }
    // Code editor functionality
    const exampleButtons = document.querySelectorAll('.example-btn');
    const htmlEditor = document.getElementById('html-editor');
    const cssEditor = document.getElementById('css-editor');
    const jsEditor = document.getElementById('js-editor');
    const runCodeBtn = document.getElementById('run-code');
    const resetCodeBtn = document.getElementById('reset-code');
    const resultFrame = document.getElementById('result-frame');

    // Initialize editors if they exist
    if (htmlEditor && cssEditor && jsEditor) {
        htmlEditor.value = '';
        cssEditor.value = '';
        jsEditor.value = '';
    }
// Example code snippets
    const examples = {
        button: {
            html: `<button id="my-button">Нажми меня</button>`,
            css: `#my-button {
    padding: 10px 20px;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#my-button:hover {
    background-color: #2563eb;
}`,
            js: `document.getElementById('my-button').addEventListener('click', function() {
    alert('Кнопка нажата!');
});`
        },
        color: {
            html: `<div id="color-box"></div>
<button id="change-color">Изменить цвет</button>`,
            css: `#color-box {
    width: 200px;
    height: 200px;
    background-color: #3b82f6;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    background-color: #10b981;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}`,
            js: `const colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'];
let currentColor = 0;

document.getElementById('change-color').addEventListener('click', function() {
    currentColor = (currentColor + 1) % colors.length;
    document.getElementById('color-box').style.backgroundColor = colors[currentColor];
});`
        },
        counter: {
            html: `<div class="counter-container">
    <h2>Счётчик кликов</h2>
    <p>Текущее значение: <span id="counter">0</span></p>
    <button id="increment">+1</button>
    <button id="decrement">-1</button>
    <button id="reset">Сбросить</button>
</div>`,
            css: `.counter-container {
    font-family: Arial, sans-serif;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.counter-container h2 {
    color: #3b82f6;
    margin-top: 0;
}

.counter-container p {
    font-size: 18px;
    margin: 20px 0;
}

button {
    padding: 8px 16px;
    margin: 5px;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #2563eb;
}`,
            js: `let count = 0;
const counterElement = document.getElementById('counter');

function updateCounter() {
    counterElement.textContent = count;
}

document.getElementById('increment').addEventListener('click', function() {
    count++;
    updateCounter();
});

document.getElementById('decrement').addEventListener('click', function() {
    count--;
    updateCounter();
});

document.getElementById('reset').addEventListener('click', function() {
    count = 0;
    updateCounter();
});`
        }
    };
    
    // Load example code
    exampleButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons
            exampleButtons.forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            button.classList.add('active');
            
            // Load example code
            const exampleName = button.getAttribute('data-example');
            const example = examples[exampleName];
            
            htmlEditor.value = example.html;
            cssEditor.value = example.css;
            jsEditor.value = example.js;
            
            // Update preview
            updatePreview();
        });
    });
    
    // Run code button
    if (runCodeBtn) {
        runCodeBtn.addEventListener('click', updatePreview);
    }
    
    // Reset code button
    if (resetCodeBtn) {
        resetCodeBtn.addEventListener('click', () => {
            htmlEditor.value = '';
            cssEditor.value = '';
            jsEditor.value = '';
            resultFrame.srcdoc = '';
        });
    }
    
    // Update preview function
    function updatePreview() {
        const html = htmlEditor.value;
        const css = cssEditor.value;
        const js = jsEditor.value;
        
        const resultDoc = `
            <!DOCTYPE html>
            <html>
            <head>
                <style>${css}</style>
            </head>
            <body>
                ${html}
                <script>${js}</script>
            </body>
            </html>
        `;
        
        resultFrame.srcdoc = resultDoc;
    }
    // Load first example by default if JS is enabled
    if (exampleButtons.length > 0 && !document.body.hasAttribute('data-js-disabled')) {
        exampleButtons[0].click();
    }

    // Handle demo counter button
    const demoCounterBtn = document.getElementById('demo-counter-btn');
    const demoCounter = document.getElementById('demo-counter');
    if (demoCounterBtn && demoCounter) {
        demoCounterBtn.addEventListener('click', () => {
            demoCounter.textContent++;
        });
    }
// Make sure tabs work after example changes if JS is enabled
    if (!document.body.hasAttribute('data-js-disabled')) {
        setupTabs();
    }
// Technology toggle functionality
    const techToggles = document.querySelectorAll('.tech-toggle');
    techToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
const tech = this.getAttribute('data-tech');
            this.classList.toggle('opacity-50');
            
            if (tech === 'html') {
                document.documentElement.style.display = this.classList.contains('opacity-50') ? 'none' : '';
            } else if (tech === 'css') {
                const styleTags = document.querySelectorAll('style, link[rel="stylesheet"]');
                styleTags.forEach(tag => {
                    tag.disabled = this.classList.contains('opacity-50');
                });
            } else if (tech === 'js') {
                const scripts = Array.from(document.scripts).filter(script => 
                    !script.classList.contains('tech-toggle') && 
                    script.id !== 'toggle-js'
                );
                
                if (this.classList.contains('opacity-50')) {
                    // Disable JS
                    scripts.forEach(script => {
                        script.type = 'text/disabled';
                    });
                    document.body.setAttribute('data-js-disabled', 'true');
                } else {
                    // Enable JS
                    scripts.forEach(script => {
                        script.type = 'text/javascript';
                    });
                    document.body.removeAttribute('data-js-disabled');
                }
}
        });
    });
});