function initializeDragAndDrop(canvas, gameState) {
    let draggedTowerType = null;
    let hoverCell = null;

    const dragHandlers = {
        onDragStart: (e) => {
            draggedTowerType = e.target.dataset.towerType;
            e.dataTransfer.setData('text/plain', '');
        },
        
        onDragEnd: () => {
            draggedTowerType = null;
            hoverCell = null;
        },
        
        onDragOver: (e) => {
            e.preventDefault();
            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((e.clientX - rect.left) / (canvas.width / 20));
            const y = Math.floor((e.clientY - rect.top) / (canvas.height / 20));
            
            hoverCell = (x >= 0 && x < 20 && y >= 0 && y < 20) ? { x, y } : null;
        },
        
        onDrop: (e) => {
            e.preventDefault();
            if (!draggedTowerType || !hoverCell) return;
            
            placeTower(gameState, draggedTowerType, hoverCell);
            draggedTowerType = null;
            hoverCell = null;
        }
    };

    return { dragHandlers, getHoverInfo: () => ({ draggedTowerType, hoverCell }) };
}

function placeTower(gameState, towerType, position) {
    const tower = TowerTypes[towerType];
    if (
        gameState.grid[position.y][position.x] === 'empty' &&
        gameState.currency >= tower.cost
    ) {
        gameState.grid[position.y][position.x] = 'tower';
        gameState.towers.push(createTower(towerType, { ...position }));
        gameState.currency -= tower.cost;
    }
}