document.addEventListener('DOMContentLoaded', () => {
    const selection = document.getElementById('train-selection');
    const trackContainer = document.getElementById('track-container');
    const scenery = document.getElementById('scenery');
    const runButton = document.getElementById('run-button');
    const stopButton = document.getElementById('stop-button');

    let draggedItem = null;

    // --- การลากและวาง (Drag and Drop) ---

    selection.addEventListener('dragstart', (e) => {
        if (e.target.classList.contains('train-part')) {
            draggedItem = e.target;
            setTimeout(() => {
                e.target.style.display = 'none'; // ซ่อนชั่วคราว
            }, 0);
        }
    });

    selection.addEventListener('dragend', (e) => {
        if (e.target.classList.contains('train-part')) {
            setTimeout(() => {
                draggedItem.style.display = 'inline-block'; // แสดงกลับมา
                draggedItem = null;
            }, 0);
        }
    });

    trackContainer.addEventListener('dragover', (e) => {
        e.preventDefault(); // อนุญาตให้วางได้
    });

    trackContainer.addEventListener('drop', (e) => {
        e.preventDefault();
        if (draggedItem) {
            // ตรวจสอบว่ามีหัวรถจักรหรือยัง
            const hasLocomotive = trackContainer.querySelector('.locomotive');
            const isLocomotive = draggedItem.id === 'locomotive-template';

            if (!hasLocomotive && !isLocomotive) {
                alert('ต้องวางหัวรถจักรก่อน!');
                return;
            }
            if (hasLocomotive && isLocomotive) {
                alert('มีหัวรถจักรได้แค่ 1 อัน!');
                return;
            }

            const newPart = draggedItem.cloneNode(true);
            newPart.classList.remove('train-part');
            newPart.classList.add('train-part-placed');
            if (isLocomotive) {
                newPart.classList.add('locomotive');
                trackContainer.prepend(newPart); // วางหัวรถจักรไว้ข้างหน้าสุด
            } else {
                trackContainer.appendChild(newPart);
            }
        }
    });

    // --- การควบคุมรถไฟ ---

    runButton.addEventListener('click', () => {
        if (trackContainer.children.length > 0) {
            scenery.classList.add('scenery-running');
            // ทำให้ไม่สามารถลากวางได้ตอนรถไฟวิ่ง
            selection.style.pointerEvents = 'none';
            trackContainer.style.pointerEvents = 'none';
        } else {
            alert('ยังไม่มีรถไฟบนราง!');
        }
    });

    stopButton.addEventListener('click', () => {
        scenery.classList.remove('scenery-running');
        // ทำให้กลับมาลากวางได้
        selection.style.pointerEvents = 'auto';
        trackContainer.style.pointerEvents = 'auto';
    });
});