document.addEventListener('DOMContentLoaded', function() {
    // Example code snippets
    const examples = {
        list: {
            code: `# Khởi tạo danh sách\nds = [1, 2, "ba", 4, 0.5]\nprint("Danh sách ban đầu:", ds)\n\n# Truy cập phần tử\nprint("Phần tử đầu:", ds[0])\nprint("Phần tử cuối:", ds[-1])\n\n# Cắt danh sách\nprint("Cắt [1:3]:", ds[1:3])\n\n# Thay đổi giá trị\nds[0] = "một"\nprint("Danh sách sau khi thay đổi:", ds)`,
            output: ''
},
        tuple: {
            code: `# Khởi tạo tuple\nhom_nay = (1, 2, "ba", 4, 0.5)\nprint("Tuple ban đầu:", hom_nay)\n\n# Truy cập phần tử\nprint("Phần tử đầu:", hom_nay[0])\nprint("Phần tử cuối:", hom_nay[-1])\n\n# Cắt tuple\nprint("Cắt [1:3]:", hom_nay[1:3])\n\n# Thử thay đổi (sẽ báo lỗi)\ntry:\n    hom_nay[0] = "một"\nexcept TypeError as e:\n    print("Lỗi:", e)`,
            output: ''
},
        set: {
            code: `# Khởi tạo tập hợp\ntap_hop = {2, 3, 5, 11}\nprint("Tập hợp ban đầu:", tap_hop)\n\n# Thêm phần tử\ntap_hop.add(7)\nprint("Sau khi thêm 7:", tap_hop)\n\n# Xóa phần tử\ntap_hop.remove(3)\nprint("Sau khi xóa 3:", tap_hop)\n\n# Phép toán tập hợp\ntap_hop_khac = {2, 5, 8}\nprint("Hợp:", tap_hop.union(tap_hop_khac))\nprint("Giao:", tap_hop.intersection(tap_hop_khac))`,
            output: ''
},
        dict: {
            code: `# Khởi tạo từ điển\nnha = {\n    "Phòng ngủ": 5,\n    "Phòng vệ sinh": 5,\n    "Thành phố": "Hà Nội",\n    "Giá": "15 tỷ"\n}\nprint("Từ điển ban đầu:", nha)\n\n# Truy cập giá trị\nprint("Thành phố:", nha["Thành phố"])\n\n# Thay đổi giá trị\nnha["Giá"] = "16 tỷ"\nprint("Sau khi thay đổi giá:", nha)\n\n# Thêm cặp key-value mới\nnha["Sàn nhà"] = "Gạch"\nprint("Sau khi thêm sàn nhà:", nha)`,
            output: ''
},
        if: {
            code: `ten = "Python"\n\nif ten.lower() == "python":\n    print("Tôi cũng tên là Python!")\nelif ten.lower() == "santa":\n    print("Tên hay đấy!")\nelse:\n    print(f"Xin chào {ten}! Tên đẹp đấy!")\n\nprint("Rất vui được gặp bạn!")`,
            output: ''
},
        for: {
            code: `# Vòng lặp for đơn giản\nfor n in [1, 3, -1, 5]:\n    print(f"Số: {n}, Bình phương: {n**2}")\n\n# Vòng lặp với range\nprint("\\nVí dụ range:")\nfor i in range(3):\n    print(i)\n\n# Vòng lặp với enumerate\nprint("\\nVí dụ enumerate:")\nds = ["a", "b", "c"]\nfor chi_so, gia_tri in enumerate(ds):\n    print(f"Chỉ số {chi_so}, giá trị {gia_tri}")`,
            output: ''
},
        while: {
            code: `# Đếm ngược\nn = 5\nwhile n > 0:\n    print(n)\n    n -= 1\nprint("Bắt đầu!")\n\n# Ví dụ break\nprint("\\nVí dụ break:")\nn = 0\nwhile True:\n    print(n)\n    n += 1\n    if n >= 3:\n        break`,
            output: ''
}
    };

    const codeDisplay = document.getElementById('code-display');
    const outputDisplay = document.getElementById('output-display');
    const exampleSelect = document.getElementById('example-select');
    const runBtn = document.getElementById('run-btn');

    // Initialize with first example
    updateCodeDisplay();

    // Update code display when selection changes
    exampleSelect.addEventListener('change', updateCodeDisplay);

    // Run button click handler
    runBtn.addEventListener('click', executeCode);

    function updateCodeDisplay() {
        const selectedExample = exampleSelect.value;
        codeDisplay.textContent = examples[selectedExample].code;
        outputDisplay.textContent = examples[selectedExample].output || 'Click "Run" to see output...';
    }

    function executeCode() {
        const selectedExample = exampleSelect.value;
        const code = examples[selectedExample].code;
        
        // Simulate execution with output
        outputDisplay.textContent = "Executing...";
        outputDisplay.classList.add('executing');
        
        // Simulate different outputs based on example
        setTimeout(() => {
            outputDisplay.classList.remove('executing');
            
            switch(selectedExample) {
                case 'list':
                    outputDisplay.textContent = `Original list: [1, 2, 'ba', 4, 0.5]\nFirst element: 1\nLast element: 0.5\nSlice [1:3]: [2, 'ba']\nModified list: ['one', 2, 'ba', 4, 0.5]`;
                    break;
                case 'tuple':
                    outputDisplay.textContent = `Original tuple: (1, 2, 'ba', 4, 0.5)\nFirst element: 1\nLast element: 0.5\nSlice [1:3]: (2, 'ba')\nError: 'tuple' object does not support item assignment`;
                    break;
                case 'set':
                    outputDisplay.textContent = `Original set: {2, 3, 5, 11}\nAfter adding 7: {2, 3, 5, 7, 11}\nAfter removing 3: {2, 5, 7, 11}\nUnion: {2, 5, 7, 8, 11}\nIntersection: {2, 5}`;
                    break;
                case 'dict':
                    outputDisplay.textContent = `Original dictionary: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '15 tỷ'}\nCity: Hà Nội\nAfter price change: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '16 tỷ'}\nAfter adding floor: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '16 tỷ', 'Sàn nhà': 'Gạch'}`;
                    break;
                case 'if':
                    outputDisplay.textContent = `That's my name too!\nNice to meet you!`;
                    break;
                case 'for':
                    outputDisplay.textContent = `Number: 1, Square: 1\nNumber: 3, Square: 9\nNumber: -1, Square: 1\nNumber: 5, Square: 25\n\nRange example:\n0\n1\n2\n\nEnumerate example:\nindex 0, value a\nindex 1, value b\nindex 2, value c`;
                    break;
                case 'while':
                    outputDisplay.textContent = `5\n4\n3\n2\n1\nBlast off!\n\nBreak example:\n0\n1\n2`;
                    break;
            }
            
            examples[selectedExample].output = outputDisplay.textContent;
        }, 800);
    }
});